{{ header }}
<div id="product-manufacturer" class="container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
    <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
    {% endfor %}
  </ul>
  <div class="row"><div class="col-order">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-md-9 col-sm-12' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">{{ content_top }}
      <h2>{{ heading_title }}</h2>
      <div class="custom-category">
			{% if products %}
				
				<div><a href="{{ compare }}" id="compare-total" >{{ text_compare }}</a></div>
				
				<div class="toolbar toolbar-products">
					<div class="modes">
						{% if use_custom_view %}
							<button type="button" onclick="category_view.changeView('grid', 2, 'btn-grid-2')" class="btn btn-default btn-custom-view btn-grid btn-grid-2" data-toggle="tooltip" title="2">2</button>
							<button type="button" onclick="category_view.changeView('grid', 3, 'btn-grid-3')" class="btn btn-default btn-custom-view btn-grid btn-grid-3" data-toggle="tooltip" title="3">3</button>
							<button type="button" onclick="category_view.changeView('grid', 4, 'btn-grid-4')" class="btn btn-default btn-custom-view btn-grid btn-grid-4" data-toggle="tooltip" title="4">4</button>
							<button type="button" onclick="category_view.changeView('grid', 5, 'btn-grid-5')" class="btn btn-default btn-custom-view btn-grid btn-grid-5" data-toggle="tooltip" title="5">5</button>
							<button type="button" onclick="category_view.changeView('list', 0, 'btn-list')" class="btn btn-default btn-custom-view btn-list" data-toggle="tooltip" title="{{ button_list }}">{{ button_list }}</button>
							<input type="hidden" id="category-view-type" value="{{ category_view }}" />
							<input type="hidden" id="category-grid-cols" value="{{ grid_columns }}" />
						{% else %}
							<button type="button" id="grid-view" class="btn btn-default btn-grid"  title="{{ button_grid }}">{{ button_grid }}</button>
							<button type="button" id="list-view" class="btn btn-default btn-list"  title="{{ button_list }}">{{ button_list }}</button>
						{% endif %}
					 </div>
					<div class="toolbar-amount">
						<span>{{ results }}</span>
					</div>
					<div class="sorter">
						{% if use_layered %}
							<label  for="input-sort">{{ text_sort }}</label>
							<select id="input-sort" class="form-control" onchange="ocfilter.filter(this.value);">
								{% for sorts in ajax_sorts %}
									{% if sorts.value == '%s-%s'|format(sort, order) %}
										<option value="{{ sorts.href }}" selected="selected">{{ sorts.text }}</option>
									{% else %}
										<option value="{{ sorts.href }}">{{ sorts.text }}</option>
									{% endif %}
								{% endfor %}
							</select>
						{% else %}
							<label for="input-sort">{{ text_sort }}</label>
							<select id="input-sort" class="form-control" onchange="location = this.value;">
								{% for sorts in sorts %}
									{% if sorts.value == '%s-%s'|format(sort, order) %}
										<option value="{{ sorts.href }}" selected="selected">{{ sorts.text }}</option>
									{% else %}
										<option value="{{ sorts.href }}">{{ sorts.text }}</option>
									{% endif %}
								{% endfor %}
							</select>
						{% endif %}
					</div>
					<div class="limiter">
						{% if use_layered %}
							<label for="input-limit">{{ text_limit }}</label>
							<select id="input-limit" class="form-control" onchange="ocfilter.filter(this.value);">
								{% for limits in ajax_limits %}
									{% if limits.value == limit %}
										<option value="{{ limits.href }}" selected="selected">{{ limits.text }}</option>
									{% else %}
										<option value="{{ limits.href }}">{{ limits.text }}</option>
									{% endif %}
								{% endfor %}
							</select>
						{% else %}
							<label  for="input-limit">{{ text_limit }}</label>
							<select id="input-limit" class="form-control" onchange="location = this.value;">
								{% for limits in limits %}
									{% if limits.value == limit %}
										<option value="{{ limits.href }}" selected="selected">{{ limits.text }}</option>
									{% else %}
										<option value="{{ limits.href }}">{{ limits.text }}</option>
									{% endif %}
								{% endfor %}
							</select>
						{% endif %}
					</div>
				</div>
				<div class="row">
					{% 	set count = 1 %}
					{% for product in products %}
						<div class="product-layout product-list col-xs-12 product-item">
							<div class="product-thumb">
								<div class="item {{ 'item' ~ count  }}">
									<div class="item-inner">
										
										<div class="caption">
											<div class="inner">
											{% if product.manufacturer %}
											<p class="manufacture-product {% if image_effect == 'swatches' %}{% if product.options %}{{ 'hide-hover' }}{% endif %}{% endif %}">
												<a href="{{ product.manufacturers }}">{{ product.manufacturer }}</a>
											</p>
											{% endif %}
											 
											
											{% if image_effect == 'swatches' %}	
												<div class="category-options">
													{% if product.options %}
														{% for option in product.options %}
															<ul class="ul-swatches-colors">
																{% for option_value in option.product_option_value %}
																	<li class="swatches-options">
																		<a href="javascript:void(0);" onclick="swatches.changeSwatchInCategory($(this));" title="{{ option_value.name }}"
																		   style="{% if option_value.image %} width: {{ icon_swatches_width }}px; height: {{ icon_swatches_height }}px;
																	background-image: url('{{ option_value.image }}') {% endif %}"
																		   data-product-id="{{ product.product_id }}"
																		   data-product-option-value-id="{{ option_value.product_option_value_id }}">{% if not option_value.image %} {{ option_value.name }} {% endif %}</a>
																	</li>
																{% endfor %}
															</ul>
														{% endfor %}
													{% endif %}
												</div>
											{% endif %}
											
											<div class="ratings">
												<div class="rating-box">
												{% for i in 0..5 %}
													{% if product.rating == i %}
													{% set class_r = "rating"~i %}
													<div class="{{ class_r }}">rating</div>
													{% endif %}
												{% endfor %}
												</div>
											</div>							
												
											<h4 class="product-name"><a href="{{ product.href }}">{{ product.name }}</a></h4>
											
											<p class="product-des">{{ product.description }}</p>
											{% if product.price %}
												<div class="price-box">
												{% if not product.special %}
													<p class="regular-price"><span class="price">{{ product.price }}</span></p>
												{% else %}
													<p class="special-price"><span class="price">{{ product.special }}</span></p>
													<p class="old-price"><span class="price">{{ product.price }}</span></p>						  
												{% endif %}
												{% if product.tax %}
													<p class="price-tax"><span class="price">{{ text_tax }} {{ product.tax }}</span></p>
												{% endif %}
												</div>
											{% endif %}
											<div class="button-group action-links">
												<button type="button" class="button btn-cart" title="{{ button_cart }}" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');"><span>{{ button_cart }}</span></button>
												<button type="button"  class="button btn-wishlist" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><span>{{ button_wishlist }}</span></button>
												
												<button type="button"  class="button btn-compare" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><span>{{ button_compare }}</span></button>
											</div>
											
											</div>
										</div>
										<div class="image images-container">
											<div class="inner">
											<div class="box-label">	
												{% if product.is_new %}
													<div class="label-product label_new"><span>{{ text_label_new }}</span></div>
												{% endif %}
												{% if product.special %}
													<div class="label-product label_sale"><span>{{  '-' ~ product.rate_special ~ '% ' ~ text_label_sale }}</span></div>
												{% endif %}
												
											</div>
											{% if image_effect == 'swatches' %}
												<div class="image swatches-image-container">
													<a href="{{ product.href }}">
														<img src="{{ product.thumb }}"  alt="{{ product.name }}" title="{{ product.name }}"
															 class="img-responsive img-cate-{{ product.product_id }}" />
														<input type="hidden" value="{{ product.thumb }}" class="img-default-{{ product.product_id }}" />
														{% if product.swatches_images %}
															{% for s_image in product.swatches_images %}
																<input type="hidden" value="{{ s_image.image }}" class="img-swatch-{{ product.product_id }}-{{ s_image.product_option_value_id }}" />
															{% endfor %}
														{% endif %}
													</a>
												</div>
												
											{% else %}
												<div class="image rotate-image-container">
													<a href="{{ product.href }}">
														<img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive img-default-image" />
														{% if product.rotate_image %}
															<img src="{{ product.rotate_image }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive img-r" />
														{% endif %}
													</a>
													
												</div>
											{% endif %}
											
											<button type="button" class="button btn-quickview" title="{{ button_quickview }}" onclick="ocquickview.ajaxView('{{ product.href }}')"><span>{{ button_quickview }}</span></button>
											
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					{% set count = count + 1 %}	
					{% endfor %} 
				</div>
				<div class="toolbar toolbar-products toolbar-bottom">
					{% if use_layered %}
						<div class="pages ajax_pagination">{{ ajax_pagination }}</div>
					{% else %}
						<div class="pages">{{ pagination }}</div>
					{% endif %}
					<div class="toolbar-amount"><span>{{ results }}</span></div>
				</div>
			{% endif %}
			{% if not categories and not products %}
				<p>{{ text_empty }}</p>
				<div class="buttons">
					<div class="pull-right"><a href="{{ continue }}" class="btn btn-primary">{{ button_continue }}</a></div>
				</div>
			{% endif %}
		</div>
      {{ content_bottom }}</div>
    {{ column_right }}</div></div>
</div>
{{ footer }}