{% if products %}
<div class="module product-f">
<div class="h3">{{ heading_title }}</div>
<div class="row-flex product-feat{{ module }}">
 {% for product in products %}
  <div class="product-layout">
      <div class="product-thumb">
        {% if product.rating %}
        <ul class="rating list-unstyled">
	    {% for j in 1..5 %}
          {% if product.rating < j %}
          <li class="nocheck"></li>
          {% else %}
          <li></li>
          {% endif %}
        {% endfor %}
	    </ul>
        {% endif %}
        <div class="sale">{{ product.sale }}</div>
        <div class="image"><a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive featp{{ product.product_id }}" /></a></div>
        <div class="l-icon">
			{% if iwishlist %}<i class="fa fa-heart-o" onclick="wishlist.add('{{ product.product_id }}','featp{{ product.product_id }}');"><span>{{ button_wishlist }}</span></i>{% endif %}
			{% if icompare %}<i class="fa fa-exchange" onclick="compare.add('{{ product.product_id }}','featp{{ product.product_id }}');"><span>{{ button_compare }}</span></i>{% endif %}
			{% if iview %}<i class="fa fa-eye" data-href="{{ product.href }}"><span>{{ button_view }}</span></i>{% endif %}
			{% if icart == 1 and not product.options %}<i class="m-cart" onclick="cart.add('{{ product.product_id }}','featp{{ product.product_id }}');"><div class="picon"><div class="all-icon cart-icon"></div></div><span>{{ button_cart }}</span></i>{% endif %}
		</div>
        <div class="caption">
          <h4><a href="{{ product.href }}">{{ product.name }}</a></h4>
          {% if product.price %}
            <p class="price">
            {% if not product.featpial %}
              {{ product.price }}
            {% else %}
              <span class="price-new">{{ product.featpial }}</span> <span class="price-old">{{ product.price }}</span>
            {% endif %}
            {% if product.tax %}
              <span class="price-tax">{{ text_tax }} {{ product.tax }}</span>
            {% endif %}
            </p>
          {% endif %}
        </div>
        <div class="more-point">+</div>
        {% if icart == 2 and not product.options %}
	    <div class="picon c-icon" onclick="cart.add('{{ product.product_id }}','featp{{ product.product_id }}');"><div class="all-icon cart-icon"></div></div>
	    {% endif %}
        <div class="info-block">
		  {% if product.attribute_groups %}
		  <ul class="attribute">
		    {% for attribute_group in product.attribute_groups %}
            <tbody>
              {% for attribute in attribute_group.attribute %}
              {% if attribute.attribute_id not in attribute_out %}
              {% if attribute_name %}{{ attribute.name }} -{% endif %}{{ attribute.text }} <span>|</span>
              {% endif %}
              {% endfor %}
            </tbody>
            {% endfor %}
          </ul>
          {% endif %}
          {% if product.options %}
		    <div class="size-block">		
		    {% for option in product.options %}
			  {% if option.option_id == option_name %}
		        {% for option_value in option.product_option_value %}
		        <label class="{{ option_value.quantity < 1 ? ' out' : '' }}"><input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" data-id="{{ product.product_id }}" data-uid="featp{{ product.product_id }}">{{ option_value.name }}</label>
		        {% endfor %}
		      {% endif %}
			{% endfor %}
		    </div>
		  {% endif %}
		  {% if product.min_d %}
		  <div class="des-block">{{ product.min_d }}</div>
		  {% endif %}
		</div>
      </div>
    </div>
  {% endfor %}
</div>
</div>
{% endif %}
<script type="text/javascript"><!--
    $(document).ready(function($) {
    $('.m-section .product-feat{{ module }}').slick({
 	    infinite: true,
 	    slidesToShow: 5,
        nextArrow: '<i class="slick-arrow arrow-right fa fa-caret-right"></i>',
        prevArrow: '<i class="slick-arrow arrow-left fa fa-caret-left"></i>',
        responsive: [
    {
      breakpoint: 1200,
      settings: {
        slidesToShow: 4,
      }
    },
    {
      breakpoint: 991,
      settings: {
        slidesToShow: 3,
      }
    },
    {
      breakpoint: 767,
      settings: {
        slidesToShow: 2,
      }
    }
    ]
    });
    });
--></script>
