<div id="carousel-{{ module }}" class="carousel-{{ module_id }} box journal-carousel carousel-product {{ disable_on_classes | join(' ') }} {{ show_title_class }} {% if bullets %} bullets-on {% endif %} {% if arrows == 'top' %} arrows-top {% endif %} {{ gutter_on_class }}" style="{{ css }}">
  <div>
    <div class="htabs box-heading {{ single_class }}" {% if not show_title %} style="display: none" {% endif %}>
      {% for section in sections %}
        {% if section.is_link %}
          <a href="{{ section.url }}" {{ section.target }}>{{ section.section_name }}</a>
        {% elseif section.items %}
          <a href="#carousel-{{ module }}-{{ loop.index - 1 }}" class="atab">{{ section.section_name }}</a>
        {% endif %}
      {% endfor %}
    </div>
    {% for section in sections %}
      {% if section.items %}
        <div id="carousel-{{ module }}-{{ loop.index - 1 }}" class="tab-content box-content">
          <div class="swiper">
            <div class="swiper-container" {% if journal2.settings.get('rtl') %} dir="rtl" {% endif %}>
              <div class="swiper-wrapper">
                {% for product in section.items %}
                  <div class="product-grid-item swiper-slide display-{{ journal2.settings.get('product_grid_wishlist_icon_display') }} {{ journal2.settings.get('product_grid_button_block_button') }} {{ product.classes }} {{ grid_classes }}">
                    <div class="product-wrapper {% if product.labels and product.labels.outofstock %} outofstock {% endif %}" style="{{ image_bgcolor }}">
                      {% if product.thumb %}
                        <div class="image {% if journal2.settings.get('show_countdown', 'never') != 'never' and product.date_end %} has-countdown {% endif %}">
                          <a href="{{ product.href }}" {% if product.thumb2 %} class="has-second-image" style="{{ image_border_css }}; background: url('{{ product.thumb2 }}') no-repeat" {% else %} style="{{ image_border_css }}" {% endif %}>
                            <img class="first-image" width="{{ image_width }}" height="{{ image_height }}" src="{{ product.thumb }}" title="{{ product.name }}" alt="{{ product.name }}"/>
                          </a>
                          {% for label, name in product.labels %}
                            <span class="label-{{ label }}"><b>{{ name }}</b></span>
                          {% endfor %}
                          {% if journal2.settings.get('product_grid_wishlist_icon_position') == 'image' and journal2.settings.get('product_grid_wishlist_icon_display') == 'icon' %}
                            <div class="wishlist"><a onclick="addToWishList('{{ product.product_id }}');" class="hint--top" data-hint="{{ button_wishlist }}"><i class="wishlist-icon"></i><span class="button-wishlist-text">{{ button_wishlist }}</span></a></div>
                            <div class="compare"><a onclick="addToCompare('{{ product.product_id }}');" class="hint--top" data-hint="{{ button_compare }}"><i class="compare-icon"></i><span class="button-compare-text">{{ button_compare }}</span></a></div>
                          {% endif %}
                        </div>
                      {% endif %}
                      <div class="product-details">
                        <div class="caption">
                          <div class="name"><a href="{{ product.href }}">{{ product.name }}</a></div>
                          <div class="description">{{ product.description }}</div>
                          {% if product.price %}
                            <div class="price">
                              {% if not product.special %}
                                {{ product.price }}
                              {% else %}
                                <span class="price-old">{{ product.price }}</span> <span class="price-new" {% if product.date_end %}data-end-date="{{ product.date_end }}"{% endif %}>{{ product.special }}</span>
                              {% endif %}
                              {% if product.tax %}
                                <span class="price-tax">{{ text_tax }} {{ product.tax }}</span>
                              {% endif %}
                            </div>
                          {% endif %}
                          {% 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 %}
                        </div>
                        <div class="button-group">
                          {% if staticCall('Journal2Utils', 'isEnquiryProduct', [null, product]) %}
                            <div class="cart enquiry-button">
                              <a href="javascript:Journal.openPopup('{{ journal2.settings.get('enquiry_popup_code') }}', '{{ product.product_id }}');" data-clk="addToCart('{{ product.product_id }}');" class="button hint--top" data-hint="{{ journal2.settings.get('enquiry_button_text') }}">{{ journal2.settings.get('enquiry_button_icon') }}<span class="button-cart-text">{{ journal2.settings.get('enquiry_button_text') }}</span></a>
                            </div>
                          {% else %}
                            <div class="cart {% if product.labels and product.labels.outofstock %} outofstock {% endif %}">
                              <a onclick="addToCart('{{ product.product_id }}', '{{ product.minimum }}');" class="button hint--top" data-hint="{{ button_cart }}"><i class="button-left-icon"></i><span class="button-cart-text">{{ button_cart }}</span><i class="button-right-icon"></i></a>
                            </div>
                          {% endif %}
                          <div class="wishlist"><a onclick="addToWishList('{{ product.product_id }}');" class="hint--top" data-hint="{{ button_wishlist }}"><i class="wishlist-icon"></i><span class="button-wishlist-text">{{ button_wishlist }}</span></a></div>
                          <div class="compare"><a onclick="addToCompare('{{ product.product_id }}');" class="hint--top" data-hint="{{ button_compare }}"><i class="compare-icon"></i><span class="button-compare-text">{{ button_compare }}</span></a></div>
                        </div>
                      </div>
                    </div>
                  </div>
                {% endfor %}
              </div>
            </div>
            {% if arrows != 'none' %}
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
            {% endif %}
          </div>
          {% if bullets %}
            <div class="swiper-pagination"></div>
          {% endif %}
        </div>
      {% endif %}
    {% endfor %}

    <script>
      (function () {
        $('#carousel-{{ module }} .htabs a.atab').tabs();

        var grid = $.parseJSON('{{ grid | json_encode() }}');

        var breakpoints = {
          470: {
            slidesPerView: grid[0][1],
            slidesPerGroup: grid[0][1]
          },
          760: {
            slidesPerView: grid[1][1],
            slidesPerGroup: grid[1][1]
          },
          980: {
            slidesPerView: grid[2][1],
            slidesPerGroup: grid[2][1]
          },
          1220: {
            slidesPerView: grid[3][1],
            slidesPerGroup: grid[3][1]
          }
        };

        var current = null;

        $('#carousel-{{ module }} .htabs a.atab').click(function () {
          if (this === current) {
            return;
          }

          current = this;

          var opts = {
            slidesPerView: grid[4][1],
            slidesPerGroup: grid[4][1],
            breakpoints: breakpoints,
            spaceBetween: parseInt('{{ spacing }}', 10),
            pagination: {% if bullets %} $($(this).attr('href')).find('.swiper-pagination') {% else %} false {% endif %},
            paginationClickable: true,
            nextButton: {% if arrows != 'none' %} $($(this).attr('href')).find('.swiper-button-next') {% else %} false {% endif %},
            prevButton: {% if arrows != 'none' %} $($(this).attr('href')).find('.swiper-button-prev') {% else %} false {% endif %},
            autoplay: {{ autoplay ? autoplay : 0 }},
            autoplayStopOnHover: {% if pause_on_hover %} true {% else %} false {% endif %},
            speed: {{ slide_speed }},
            touchEventsTarget: {% if touch_drag %} 'container' {% else %} false {% endif %},
            preventClicks: false,
            preventClicksPropagation: false
          };

          $($(this).attr('href') + ' .swiper-container').swiper(opts);

          {% if journal2.settings.get('show_countdown', 'never') != 'never' %}
          $($(this).attr('href') + ' .product-grid-item > div').each(function () {
            var $new = $(this).find('.price-new');
            if ($new.length && $new.attr('data-end-date')) {
              $(this).find('.image').append('<div class="countdown"></div>');
            }
            Journal.countdown($(this).find('.countdown'), $new.attr('data-end-date'));
          });
          {% endif %}

          if (!Journal.isFlexboxSupported) {
            Journal.equalHeight($('#carousel-{{ module }} .product-grid-item'), '.name');
            Journal.equalHeight($('#carousel-{{ module }} .product-grid-item'), '.description');
          }
        });

        $('#carousel-{{ module }} .htabs a.atab[href="#carousel-{{ module }}-{{ default_section }}"]').click();
      })();
    </script>
  </div>
</div>
