<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">
			{% for product in products %}
				<div class="product-layout product-list col-xs-12 product-item">
					<div class="product-thumb">
						<div class="item">
							<div class="item-inner">
								<div class="image images-container">
									{% 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-rotate-image" />
												{% endif %}
											</a>
											
										</div>
									{% endif %}
								</div>
								<div class="caption">
									<div class="box-rating">
										{% if product.manufacturer %}
										<p class="manufacture-product {% if image_effect == 'swatches' %}{% if product.options %}{{ 'hide-hover' }}{% endif %}{% endif %}">
											<span>{{ text_manufacturer ~ ' ' }}</span><a href="{{ product.manufacturers }}">{{ product.manufacturer }}</a>
										</p>
										{% endif %}
										{% if product.rating %}
											<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>					
										{% endif %}  
									</div>
									{% 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 %}
									<h4 class="product-name"><a href="{{ product.href }}">{{ product.name }}</a></h4>
									<p class="model">{{ product.model }}</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 %}
									
									<p class="product-des">{{ product.description }}</p>	
									<div class="box-hover">
										<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>
											<div class="add-to-links">
												<button type="button"  class="button btn-compare" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><span>{{ button_compare }}</span></button>
												<button type="button"  class="button btn-wishlist" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><span>{{ button_wishlist }}</span></button>
												{% if use_quickview %}
													<button type="button" class="button btn-quickview" title="{{ button_quickview }}" onclick="ocquickview.ajaxView('{{ product.href }}')"><span>{{ button_quickview }}</span></button>
												{% endif %}
											</div>
										</div>
									</div>
								</div>
								
							</div>
						</div>
					</div>
				</div>
			{% 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>
<script type="text/javascript">
    // Product List
    $('#list-view').click(function() {
        $('#content .product-grid > .clearfix').remove();

        $('#content .row > .product-grid').attr('class', 'product-layout product-list col-xs-12');
        $('#grid-view').removeClass('active');
        $('#list-view').addClass('active');

        localStorage.setItem('display', 'list');
    });

    // Product Grid
    $('#grid-view').click(function() {
        var cols = $('#column-right, #column-left').length;

        if (cols == 2) {
            $('#content .product-list').attr('class', 'product-layout product-grid module-style1 col-lg-6 col-md-6 col-sm-6 col-xs-6');
        } else if (cols == 1) {
            $('#content .product-list').attr('class', 'product-layout product-grid module-style1 col-lg-4 col-md-4 col-sm-6 col-xs-6');
        } else {
            $('#content .product-list').attr('class', 'product-layout product-grid module-style1 col-lg-3 col-md-3 col-sm-6 col-xs-6');
        }

        $('#list-view').removeClass('active');
        $('#grid-view').addClass('active');

        localStorage.setItem('display', 'grid');
    });
</script>