{#
****************************************************** 
 * @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.
 ******************************************************
#}

{#========== Product Detail - Releate Horizontal ============#}
<div class="clearfix module related-horizontal col-xs-12">
	<h3 class="modtitle"><span>{{ text_related }} </span></h3>
	
    <div class="related-products products-list  contentslider" data-rtl="{{direction}}" data-autoplay="no"  data-pagination="no" data-delay="4" data-speed="0.6" data-margin="10"  data-items_column0="2" data-items_column1="2" data-items_column2="2"
			data-items_column3="2" data-items_column4="2" data-arrows="yes" 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  src="{{ product.thumb }} "  title="{{ product.name }} " class="img-1 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>

						</div>
						 
						<div class="right-block">
							<div class="caption">
								{% 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>
                </div>
     {% endfor %} 
    </div>
	
</div>