{#====  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 %}


<div class="clearfix module">
    <h3 class="modtitle">{{ heading_title }}</h3>
    <div class="slider-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="5" data-items_column1="4" data-items_column2="3" data-items_column3="2" data-items_column4="1" 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">
						{% if thumbgallery   and product.image_galleries %}

						{% if thumbgallery == 1 %}
							{% set  class_thumbgallery = 'product-card__left' %}
						{% elseif thumbgallery == 2 %}
							{% set  class_thumbgallery = 'product-card__right' %}
						{% else %}
							{% set  class_thumbgallery = 'product-card__bottom' %}
						{% endif %}
						<div class="product-card__gallery {{class_thumbgallery}}">
								<div class="item-img thumb-active" data-src="{{product.first_gallery['thumb']}}"><img src="{{product.first_gallery['cart']}}" alt="{{ product.name }}"></div>
								{% set total_gallery = 2 %}
								{% for number_gallery,image_gallery in product.image_galleries %}
									{% if number_gallery < total_gallery %}
									<div class="item-img" data-src="{{image_gallery.thumb}}"><img src="{{image_gallery.cart}}" alt="{{ product.name }}"></div>
									{% endif %}
								{% endfor %}
						</div>
						{% endif %}
						
                        <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>
                        
						{#===== Show CountDown Product =======#}
						{% if soconfig.get_settings('countdown_status') and product.special_end_date %}
							{% include theme_directory~'/template/soconfig/countdown.twig' with {product: product,special_end_date:product.special_end_date} %}
						{% endif %}
						
						{% if product.quantity== 0 %}
							<div class="label-stock label label-success ">{{ product.stock_status}}</div> 
						{% endif %}
					
                        {% if product.price  and  product.special  %} 
						<div class="box-label">
							{#=======Discount Label======= #}
							{% if soconfig.get_settings('discount_status')  %} 
								<span class="label-product label-sale">
									 {{ product.discount }}
								</span>
							{% endif %} 
							
						</div> 
						{% endif %} 

                        {#=======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 {{class_cart_info}}">
                            <button class="addToCart btn-button" type="button" title="{{ button_cart}}" onclick="cart.add('{{ product.product_id }}', '{{ product.minimum }}');"><i class="fa fa-shopping-basket"></i><span>{{ button_cart }}</span></button>
                            <button class="wishlist btn-button" type="button" title="{{ button_wishlist}}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart-o"></i><span>{{ button_wishlist }}</span></button>
                            <button class="compare btn-button" type="button" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-refresh"></i><span>{{ button_compare }}</span></button>
                            {% if soconfig.get_settings('quick_status') %}
                                <a class="quickview iframe-link visible-lg btn-button" title="{{ objlang.get('text_quickview')}}" data-fancybox-type="iframe"  href="{{ our_url.link('extension/soconfig/quickview','product_id='~product.product_id) }}"> <i class="fa fa-eye"></i><span>{{ objlang.get('text_quickview')}}</span> </a>
                            {% endif %} 
                        </div>

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