{#
****************************************************** 
 * @package	SO Framework for Opencart 3.x
 * @author	http://www.opencartworks.com
 * @license	GNU General Public License
 * @copyright(C) 2008-2017 opencartworks.com. All rights reserved.
 ******************************************************
#}
{#====  Variables Device_res ==== #}

{#==== filters panel Top==== #}
<div class="sidebar-overlay "></div>
<div class="product-filter filters-panel clearfix">
	<div class="col-xs-4 view-mode">
		<div class="list-view">
			<button type="button" id="grid-view" class="btn btn-default grid " title="{{ button_grid }}"><i class="fa fa-th-large"></i></button>
			<button type="button" id="list-view" class="btn btn-default list " title="{{ button_list }}"><i class="fa  fa-th-list"></i></button>
		</div>
	</div>

	<div class="col-xs-4 ">
	{% if column_left  %}
		<a href="javascript:void(0)" class="btn btn-primary open-sidebar "><i class="fa fa-bars"></i>{{ text_sidebar }}</a>
	{% endif %}
	</div>

	<div class="short-by-show form-inline text-right col-xs-4">
		<div class="form-group short-by">
			<i class="fa fa-sort-amount-asc" aria-hidden="true"></i>
			<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>
		</div>
		
	</div>
	
 
</div>
{#==== Product List|Grid ==== #}
<div class="products-list row ">
	{% for  product in products %}
		<div class="product-layout ">
			<div class="product-item-container">
				<div class="left-block">
					<div class="product-image-container ">
						<a href="{{ product.href }} " title="{{ product.name }} ">
							<img  src="{{ product.thumb }} "  title="{{ product.name }} " class="img-1 img-responsive" />
						</a>
					</div>
					
					<div class="box-label">
						{#===== New Label=======#}
						{% if soconfig.get_settings('new_status') and product.date_available %} 
							<span class="label-product label-new">{{ objlang.get('text_new')}} </span>
						{% endif %} 
						
						{#=======Discount Label======= #}
						{% if soconfig.get_settings('discount_status')  %} 
						{% if product.price  and  product.special  %} 
							<span class="label-product label-sale">
								 {{ product.discount }}
							</span>
						{% endif %} 
						{% endif %} 
					</div> 

					
				</div>
				
				<div class="right-block">
					
					{% if soconfig.get_settings('addcart_status') or soconfig.get_settings('wishlist_status') or soconfig.get_settings('compare_status') %} 
					<div class="button-group">
						{% if soconfig.get_settings('addcart_status') %} 
							<button class="addToCart btn-button" type="button" title="{{ button_cart}}" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');"><span><!-- {{ button_cart }} --><i class="fa fa-shopping-cart"></i></span></button>
						{% endif %}

						{% if soconfig.get_settings('wishlist_status') %} 
							<button class="wishlist btn-button" type="button" title="{{ button_wishlist}}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart-o"></i></button>
						{% endif %}

						{% if soconfig.get_settings('compare_status') %} 
							<button class="compare btn-button" type="button" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-retweet"></i></button>
						{% endif %}

					</div>
					{% endif %}

					{% if soconfig.get_settings('rating_status') %} 
					<div class="ratings">
						<div class="rating-box">
						{% for i in 1..5 %}
						{% if product.rating < i %} 
							<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-1x"></i></span>
						{% else %}   
							<span class="fa fa-stack"><i class="fa fa-star fa-stack-1x"></i><i class="fa fa-star-o fa-stack-1x"></i></span>
						{% endif %} 
						{% endfor %}

						</div>
					</div>
					{% endif %} 

					<h4><a href="{{ product.href }} ">{{ product.name }} </a></h4>

					{% if product.price %} 
					<div class="price">
						{% if not product.special %} 
							<span class="price-new">{{ product.price }} </span>
						{% else %}   
							<span class="price-new">{{ product.special }} </span> <span class="price-old">{{ product.price }} </span>
						{% endif %} 
					</div>
					{% endif %} 
					
					
				</div>
				
			</div>
		</div>
		{# ====End Clearfix fluid grid layout =======#}
	
	{% endfor %}
</div>

{#==== filters panel Bottom==== #}
<div class="product-filter filters-panel clearfix">
	<div class="col-xs-12 text-center">{{ results }}</div>
	<div class="col-xs-12 text-center">{{ pagination }}</div>
</div>
<script type="text/javascript"><!--
reinitView();

function reinitView() {

	$('.view-mode .list-view button').bind("click", function() {
		$(this).parent().find('button').removeClass('active');
		$(this).addClass('active');
	});	
	// Product List
	$('#list-view').click(function() {
		$('#content .product-layout').attr('class', 'product-layout product-list col-xs-12');
		localStorage.setItem('listview', 'list');
	});

	// Product Grid
	$('#grid-view').click(function() {
		$('#content .product-layout').attr('class', 'product-layout product-grid col-xs-6');
		localStorage.setItem('listview', 'grid');
	});

	
	// Product Table
	
	if(localStorage.getItem('listview')== null) localStorage.setItem('listview', 'grid');
	if (localStorage.getItem('listview') == 'list'){
		$('#list-view').trigger('click');
	} else {
		$('#grid-view').trigger('click');
	}
}

//--></script>