<div class="isl-promotions isl-promotions-shortcode">
{% for taxonomy in taxonomies %}
  <div class="isl-promotions-products isl-promotions-taxonomy">
    <div class="taxonomy-header">
      <h3 class="taxonomy-heading">{{ taxonomy['name'] }}</h3>
      <div class="taxonomy-view">
        <a href="{{ taxonomy['url'] }}">{{ text_view_all }}</a>
      </div>
    </div>
    <div class="swiper-viewport">
      <div id="carousel{{ taxonomy['shortcode'] }}" class="swiper-container">
        <div class="swiper-wrapper">
        {% for product in taxonomy['products'] %}
          <div class="swiper-slide">
            <div class="product-thumb">
              <div class="image"><a href="{{ product['href'] }}"><img src="{{ product['thumb'] }}" alt="{{ product['name'] }}" title="{{ product['name'] }}" class="img-responsive" /></a></div>
              <div class="caption">
                <h4><a href="{{ product['href'] }}">{{ product['name'] }}</a></h4>

                {% if product.rating %}
                  <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-2x"></i></span>
                      {% else %}
                        <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i><i class="fa fa-star-o fa-stack-2x"></i></span>
                      {% endif %}
                    {% endfor %}
                  </div>
                {% endif %}

                {% if product['price'] %}
                  <p class="price">
                    {% if not product['special'] %}
                      {{ product['price'] }}
                    {% else %}
                      <span class="price-new">{{ product['special'] }}</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>

              {% if theme == 'journal2' %}
                <div class="text-center">
                  <button type="button" class="btn btn-default {{ theme == 'journal2' ? 'button' : '' }}" data-islpr-add-cart="{{ product['product_id'] }}">{{ button_cart }}</button>
                </div>
              {% else %}
                <div class="button-group">
                  <button type="button" data-islpr-add-cart="{{ product['product_id'] }}"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
                  <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" data-islpr-add-wishlist="{{ product['product_id'] }}"><i class="fa fa-heart"></i></button>
                  <button type="button" data-toggle="tooltip" title="{{ button_compare }}" data-islpr-add-compare="{{ product['product_id'] }}"><i class="fa fa-exchange"></i></button>
                </div>
              {% endif %}
            </div>
          </div>
        {% endfor %}
        </div>
      </div>

      {% if taxonomy['slide_arrow'] %}
        <div class="swiper-pager">
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
      {% endif %}
    </div>

    <script>
    $('#carousel{{ taxonomy['shortcode'] }}').swiper({
      mode: 'horizontal',
      autoplay: 2500,
      slidesPerView: 5,
      slidesPerColumn: {{ taxonomy['slide_column'] }},
      slidesPerGroup: 2,
      spaceBetween: 20,
      breakpoints: {
        992: { // window width is <= 992px
          slidesPerView: 2,
          slidesPerColumn: 2,
          spaceBetween: 10
        },
        768: { // window width is <= 768px
          slidesPerView: 1,
          slidesPerColumn: 3,
          spaceBetween: 10
        },
      },
      nextButton: '.swiper-button-next',
      prevButton: '.swiper-button-prev',
    });
    </script>

  </div>
{% endfor %}
</div>
