{#
****************************************************** 
 * @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 url parameter ==== #}
{% if url_thumbgallery %} {% set thumbgallery = url_thumbgallery %}
{% else %} {% set thumbgallery = soconfig.get_settings('card_gallery') %}{% endif %}

{% if url_cartinfo %} {% set cartinfo = url_cartinfo %}
{% else %} {% set cartinfo = soconfig.get_settings('desktop_addcart_position') %}{% endif %}

{#========== Product Detail - Releate Horizontal ============#}
{% set related_col_lg = soconfig.get_settings('product_related_column_lg')  %}
{% set related_col_md = soconfig.get_settings('product_related_column_md')  %}
{% set related_col_sm = soconfig.get_settings('product_related_column_sm')  %}
{% set related_col_xs = soconfig.get_settings('product_related_column_xs')  %}

<div class="clearfix related-horizontal ">
	<h3 class="modtitle"><span>{{ text_related }} </span></h3>
	<div class="form-group">{{ text_sub_related }}</div>
	
    <div class="related-products products-list  contentslider" data-rtl="{{direction}}" data-autoplay="no" data-pagination="no" data-arrows="yes" data-delay="4" data-speed="0.6" data-margin="30"  data-items_column0="{{related_col_lg}}" data-items_column1="{{related_col_md}}" data-items_column2="{{related_col_sm}}"
			data-items_column3="{{related_col_xs}}" data-items_column4="1" data-lazyload="yes" data-loop="no" data-hoverpause="yes">
		<!-- Products list -->
		{% for product in products %} 
            <div class="product-layout product-grid">
			  	<div class="product-item-container">
					<div class="left-block">
						<div class="product-image-container">
							<a href="{{ product.href }} " title="{{ product.name }} ">
								<img data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ product.thumb }} "  title="{{ product.name }} " 
								class="lazyload img-responsive" />
							</a>
						</div>
														
						<div class="box-label">
							{#=======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>

						{#=======Show Group_cart_info ======= #}
						{% if cartinfo == 'right' %}
						{% set class_cart_info = 'cartinfo--right' %}
						{% elseif cartinfo == 'bottom' %}
							{% set class_cart_info = 'cartinfo--static' %}
						{% elseif cartinfo == 'center' %}
							{% set class_cart_info = 'cartinfo--center' %}
						{% else %}
							{% set class_cart_info = 'cartinfo--left' %}
						{% endif %}
						
						<div class="button-group">
							{% if soconfig.get_settings('listing_cart_status') %}					
								<button class="addToCart btn-button" type="button" title="{{ button_cart }}" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');"><i class="icom-shopping-cart1"></i></button>												
							{% endif %}		
							{% if soconfig.get_settings('listing_quickview_status') %}		
							<div class="so-quickview btn-button">				
								<a class="quickview iframe-link visible-lg" title="{{ objlang.get('text_quickview')}}" data-fancybox-type="iframe"  href="{{ product.href_quickview }}"> <i class="icom-eye2"></i><span>{{ text_quickview }}</span></a>	
							</div>															
							{% endif %}
							{% if soconfig.get_settings('listing_wishlist_status') %}
							<button class="wishlist btn-button" type="button" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="icom-wishlist"></i></button>
							{% endif %} 								
									
							{% if soconfig.get_settings('listing_compare_status') %}
							<button class="compare btn-button" type="button" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="icom-compare"></i></button>
							{% endif %}
								
						</div>
						
					</div>
					 
					<div class="right-block">						
						<h4><a href="{{ product.href }} ">{{ product.name }} </a></h4>
						{# {%  if soconfig.get_settings('rating_status') %} #}
						<div class="rating">					
							{% 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>
						{# {% endif %} #}							
						{% if product.price %} 
						<div class="price">
							{% if not product.special %} 
								<span class="price">{{ product.price }} </span>
							{% else %}   
								<span class="price-new">{{ product.special }} </span> <span class="price-old">{{ product.price }} </span>
							{% endif %} 
						</div>
						{% endif %}						
						
					</div>
				</div>
            </div>
     {% endfor %} 
    </div>
	
</div>