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