<div class="tt_product_module" id="product_module<?php echo $config_module['module_id'];?>">
  <h3 class="title-block">
    {% if config_module.title_lang[code].title %}
      {{ config_module.title_lang[code].title }}
    {% else %}
      {{ heading_title }}
    {% endif %}
  </h3>
  {% if module_description %}
    <div class="module-description">
      {{ module_description }}
    </div>
  {% endif %}
  <div class="tt-product">
    <ul class="tab-heading nav nav-pills">
      {% set i= 0 %}
      {% for octab in octabs %}
        <li><a data-toggle="pill" href="#tab-{{ i }}">{{ octab.title }}</a></li>
        {% set i= i +1  %}
      {% endfor %}
    </ul>
    <div class="tab-content">
      {% set i= 0 %}

      {% for octab in octabs %}
        <div class="tab-container owl-carousel owl-theme tab-pane fade" id="tab-{{ i }}">
          {% if config_module.nrow == 0 %}
            {% set class = 'col-lg-2 col-md-2 col-sm-2 col-xs-12' %}
          {% elseif config_module.nrow == 1 %}
            {% set class = 'col-lg-4 col-md-4 col-sm-4 col-xs-12' %}
          {% elseif config_module.nrow == 2 %}
            {% set class = 'col-lg-3 col-md-3 col-sm-3 col-xs-12' %}
          {% else %}
            {% set class = 'col-lg-6 col-md-6 col-sm-6 col-xs-12' %}
          {% endif %}

          {% for product in octab.products %}
            <!-- Grid -->
            {% if config_module.type == 0 %}
            <div class="product-layout grid-style {% if not config_module.slider %}{{ class }}{% endif %}">
              <div class="product-thumb transition">
                <div class="image">
                  <a href="{{ product.href }}">
                    {% if config_module.rotator %}<img class="img2" src="<?php echo $product['rotator_image']; ?>" alt="<?php echo $product['name']; ?>" />{% endif %}
                    <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.special and config_module.salelabel %}
                    <div class="label_sale">{{ text_label_sale }}</div>
                  {% endif %}
                  {% if product.is_new and config_module.newlabel %}
                    <div class="label_new">{{ text_label_new }}</div>
                  {% endif %}
                  {% if config_module.description %}
                    <p>{{ product.description }}</p>
                  {% 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 %}
                  {% if use_catalog %}
                    {% 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 %}
                  {% endif %}

                </div>
                <div class="button-group">
                  {% if use_catalog %}
                    <button type="button" onclick="cart.add('{{ product.product_id }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
                  {% endif %}
                  <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
                  <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
                  {% if use_quickview %}
                    <button type="button" data-toggle="tooltip" title="Quick View" onclick="ocquickview.ajaxView('{{ product.href }}')"><i class="fa fa-search-plus"></i></button>
                  {% endif %}
                </div>
                {% if config_module.countdown %}<div id="Countdown{{ product.product_id }}-{{ i }}" class="box-timer"></div> {% endif %}
              </div>
            </div>

            {% elseif config_module.type == 1 %}
            <!-- List -->
            <div class="product-layout list-style {% if not config_module.slider %}{{ class }}{% endif %}">
              <div class="product-thumb transition">
                <div class="image">
                  <a href="{{ product.href }}">
                    {% if config_module.rotator %}<img class="img2" src="<?php echo $product['rotator_image']; ?>" alt="<?php echo $product['name']; ?>" />{% endif %}
                    <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.special and config_module.salelabel %}
                    <div class="label_sale">{{ text_label_sale }}</div>
                  {% endif %}
                  {% if product.is_new and config_module.newlabel %}
                    <div class="label_new">{{ text_label_new }}</div>
                  {% endif %}
                  {% if config_module.description %}
                    <p>{{ product.description }}</p>
                  {% 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 %}

                  {% if use_catalog %}
                    {% 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 %}
                  {% endif %}
                </div>
                <div class="button-group">
                  {% if use_catalog %}
                    <button type="button" onclick="cart.add('{{ product.product_id }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
                  {% endif %}
                  <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
                  <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
                  {% if use_quickview %}
                    <button type="button" data-toggle="tooltip" title="Quick View" onclick="ocquickview.ajaxView('{{ product.href }}')"><i class="fa fa-search-plus"></i></button>
                  {% endif %}
                </div>
                {% if config_module.countdown %}<div id="Countdown{{ product.product_id }}-{{ i }}" class="box-timer"></div> {% endif %}
              </div>
            </div>
            {% else %}
            <!-- other type -->
            <div class="product-layout {% if not config_module.slider %}{{ class }}{% endif %}">
              <div class="product-thumb transition">
                <div class="image">
                  <a href="{{ product.href }}">
                    {% if config_module.rotator %}<img class="img2" src="<?php echo $product['rotator_image']; ?>" alt="<?php echo $product['name']; ?>" />{% endif %}
                    <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.special and config_module.salelabel %}
                    <div class="label_sale">{{ text_label_sale }}</div>
                  {% endif %}
                  {% if product.is_new and config_module.newlabel %}
                    <div class="label_new">{{ text_label_new }}</div>
                  {% endif %}
                  {% if config_module.description %}
                    <p>{{ product.description }}</p>
                  {% 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 %}

                  {% if use_catalog %}
                    {% 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 %}
                  {% endif %}
                </div>
                <div class="button-group">
                  {% if use_catalog %}
                    <button type="button" onclick="cart.add('{{ product.product_id }}');"><i class="fa fa-shopping-cart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ button_cart }}</span></button>
                  {% endif %}
                  <button type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
                  <button type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
                  {% if use_quickview %}
                    <button type="button" data-toggle="tooltip" title="Quick View" onclick="ocquickview.ajaxView('{{ product.href }}')"><i class="fa fa-search-plus"></i></button>
                  {% endif %}
                </div>
                {% if config_module.countdown %}<div id="Countdown{{ product.product_id }}-{{ i }}" class="box-timer"></div> {% endif %}
              </div>
            </div>
            {% endif %}
            {% if product.date_end %}
            <script type="text/javascript">
              $(document).ready(function () {
                $('#Countdown{{ product.product_id }}-{{ i }}').countdown({
                  until: new Date({{ product.date_end|date("Y") }}, {{ product.date_end|date("m") }}-1, {{ product.date_end|date("d") }}, {{ product.date_end|date("H") }}, {{ product.date_end|date("i") }}, {{ product.date_end|date("s") }}),
                  labels: ['Years', 'Months', 'Weeks', 'Days', 'Hrs', 'Mins', 'Secs'],
                  labels1: ['Year', 'Month', 'Week', 'Day', 'Hr', 'Min', 'Sec'],
                });
                //$('#Countdown<?php echo $product['product_id'];?>').countdown('pause');
              });
            </script>
            {% endif %}

          {% endfor %}
        </div>
        {% set i= i+1 %}
      {% endfor %}
    </div>
  </div>
</div>
{% if config_module.slider %}
  <script type="text/javascript">
    $(document).ready(function() {
      $('a[href="#tab-0').trigger( "click" );

      $(".tab-container").owlCarousel({
        loop: {% if config_module.loop %} true {% else %} false {% endif %},
        margin: {% if config_module.margin %} {{ config_module.margin }} {% else %} 20 {% endif %},
        nav: {% if config_module.navigation %} true {% else %} false {% endif %},
        dots: {% if config_module.pagination %} true {% else %} false {% endif %},
        autoplay:  {% if config_module.auto %} true {% else %} false {% endif %},
        autoplayTimeout: {% if config_module.time %} {{ config_module.time }} {% else %} 2000 {% endif %},
        autoplayHoverPause: true,
        autoplaySpeed: {% if config_module.speed %} {{ config_module.speed }} {% else %} 3000 {% endif %},
        navSpeed: {% if config_module.speed %} {{ config_module.speed }} {% else %} 3000 {% endif %},
        dotsSpeed: {% if config_module.speed %} {{ config_module.speed }} {% else %} 3000 {% endif %},
        responsive:{
          0:{
            items: {{ config_module.smobile }}
          },
          480:{
            items: {{ config_module.mobile }}
          },
          768:{
            items: {{ config_module.tablet }}
          },
          980:{
            items: {{ config_module.desktop }}
          },
          1200:{
            items: {{ config_module.items }}
          },
        }
      });

    });
  </script>
{% endif %}
