<div class="tt_product_module" id="product_module{{ config_module.module_id }}">
    <div class="module-title">
	  <h2>
		{% if config_module.title_lang[code].title %}
		  {{ config_module.title_lang[code].title }}
		{% else %}
		  {{ heading_title }}
		{% endif %}
	  </h2>
	  {% if module_description %}
		<div class="module-description">
		  {{ module_description }}
		</div>
	  {% endif %}
	</div>
	{% if config_module.slider %}
		{% set class_slider = ' owl-carousel owl-theme '%}
	{% else %}
		{% set class_slider = ''%}
	{% endif %}
	{% if config_module.nrow == 0 %}
		{% set class = 'two_items col-lg-6 col-md-6 col-sm-6 col-xs-12' %}
	{% elseif config_module.nrow == 1 %}
		{% set class = 'three_items col-lg-4 col-md-4 col-sm-4 col-xs-12' %}
	{% elseif config_module.nrow == 2 %}
		{% set class = 'four_items col-lg-3 col-md-3 col-sm-3 col-xs-12' %}
	{% else %}		
		{% set class = 'six_items col-lg-2 col-md-2 col-sm-2 col-xs-12' %}
	{% endif %}
	{% if products|length > 0 %}
		{% if config_module.row %}
			{% set rows = config_module.row %}
		{% else %}
			{% set rows = 1 %}
		{% endif %}
		{% set count = 0 %}
    <div class="tt-product {{ class_slider }}">	
        {% for product in products %}            
            <!-- Grid -->
			{% if count % rows == 0 %}
			<div class="row_items {% if not config_module.slider %}{{ class }}{% endif %}">
			{% endif %}
			{% set count = count + 1 %}
            {% if config_module.type == 0 %}
				<div class="product-layout product-grid">
					<div class="product-thumb transition">
						<div class="item-inner">
							<div class="image">
								<a href="{{ product.href }}">
									{% if config_module.rotator and product.rotator_image %}<img class="img-r" src="{{ product.rotator_image }}" alt="{{ product.name }}" />{% endif %}
									<img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" />
								</a>				  
								{% if config_module.salelabel %}
									{% if product.special %}
									<div class="label-product label_sale"><span>{{ text_label_sale }}</span></div>
									{% endif %}
								{% endif %}
								{% if config_module.newlabel %}
									{% if product.is_new %}
									<div class="label-product label_new">{{ text_label_new }}</div>
									{% endif %}
								{% endif %}

								<div class="action-links">
									{% if use_catalog %}
									<button class="btn-cart" type="button" data-toggle="tooltip" title="{{ button_cart }}" onclick="cart.add('{{ product.product_id }}');"><i class="zmdi zmdi-shopping-cart-plus"></i><span>{{ button_cart }}</span></button>
									{% endif %}
									<button class="btn-wishlist" type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i><span>{{ button_wishlist }}</span></button>
									<button class="btn-compare" type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="zmdi zmdi-refresh-alt"></i><span>{{ button_compare }}</span></button>
									{% if use_quickview %}
									<button class="btn-quickview" type="button" data-toggle="tooltip" title="{{ button_quickview }}" onclick="ocquickview.ajaxView('{{ product.href }}')"><i class="zmdi zmdi-search zmdi-hc-fw"></i><span>{{ button_quickview }}</span></button>
									{% endif %}
								</div>
								{% if product.rating %}
								<div class="ratings">
									<div class="rating-box">
									{% for i in 0..5 %}
										{% if product.rating == i %}
										{% set class_r = "rating"~i %}
										<div class="{{ class_r }}">rating</div>
										{% endif %}
									{% endfor %}
									</div>
								</div>					
								{% endif %}
							</div><!-- image -->
							<div class="caption">
								{% if product.manufacturer %}
								<p class="manufacture-product">
									<a href="{{ product.manufacturers }}">{{ product.manufacturer }}</a>
								</p>
								{% endif %}
								<h4 class="product-name"><a href="{{ product.href }}">{{ product.name }}</a></h4>                  
								{% if config_module.description %}
								<p class="product-des">{{ product.description }}</p>
								{% endif %}
								{% if use_catalog %}
								{% if product.price %}
									<p class="price">
									{% if not product.special %}
										{{ product.price }}
									{% else %}
										<span class="price-old">{{ product.price }}</span><span class="price-new">{{ product.special }}</span>						  
									{% endif %}
									{% if product.tax %}
										<span class="price-tax">{{ text_tax }} {{ product.tax }}</span>
									{% endif %}
									</p>
								{% endif %}
								{% endif %}
							</div><!-- caption -->
							{% if config_module.countdown %}<div id="Countdown{{ product.product_id }}-{{ i }}" class="box-timer"></div> {% endif %}
						</div>
					</div><!-- product-thumb -->
						{% if product.date_end and config_module.countdown %}
						<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: ['{{ text_years }}', '{{ text_months }} ', '{{ text_weeks }}', '{{ text_days }}', '{{ text_hrs }}', '{{ text_mins }}', '{{ text_secs }}'],
						labels1: ['{{ text_year }}', '{{ text_month }} ', '{{ text_week }}', '{{ text_day }}', '{{ text_hr }}', '{{ text_min }}', '{{ text_sec }}'],
						});
						// $('#Countdown{{ product.product_id }}-{{ i }}').countdown('pause');
						});
						</script>
						{% endif %}
				</div><!-- product-layout -->

            {% elseif config_module.type == 1 %}
            <!-- List -->
            <div class="product-layout list-style">
					<div class="product-thumb transition">
						<div class="item-inner">
							<div class="image">
								{% if config_module.salelabel %}
									{% if product.special %}
									<div class="label-product label_sale">{{ text_label_sale }}</div>
									{% endif %}
								{% endif %}
								{% if config_module.newlabel %}
									{% if product.is_new %}
									<div class="label-product label_new">{{ text_label_new }}</div>
									{% endif %}
								{% endif %}
								<a href="{{ product.href }}">
									{% if config_module.rotator and product.rotator_image %}<img class="img-r" src="{{ product.rotator_image }}" alt="{{ product.name }}" />{% endif %}
									<img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" />
								</a>
								<div class="action-links">
									{% if use_catalog %}
									<button class="btn-cart" type="button" data-toggle="tooltip" title="{{ button_cart }}" onclick="cart.add('{{ product.product_id }}');"><i class="zmdi zmdi-shopping-cart-plus"></i><span>{{ button_cart }}</span></button>
									{% endif %}
									<button class="btn-wishlist" type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i><span>{{ button_wishlist }}</span></button>
									<button class="btn-compare" type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="zmdi zmdi-refresh-alt"></i><span>{{ button_compare }}</span></button>
									{% if use_quickview %}
									<button class="btn-quickview" type="button" data-toggle="tooltip" title="{{ button_quickview }}" onclick="ocquickview.ajaxView('{{ product.href }}')"><i class="zmdi zmdi-search zmdi-hc-fw"></i><span>{{ button_quickview }}</span></button>
									{% endif %}
								</div>
								{% if product.rating %}
									<div class="ratings">
										<div class="rating-box">
										{% for i in 1..5 %}
											{% if product.rating == i %}
											{% set class_r = "rating"~i %}
											<div class="{{ class_r }}">rating</div>
											{% endif %}
										{% endfor %}
										</div>
									</div>					
								{% endif %}								
							</div><!-- image -->
							<div class="caption">
								{% if product.manufacturer %}
								<p class="manufacture-product">
									<a href="{{ product.manufacturers }}">{{ product.manufacturer }}</a>
								</p>
								{% endif %}
								<h4 class="product-name"><a href="{{ product.href }}">{{ product.name }}</a></h4>                  
								{% if config_module.description %}
								<p class="product-des">{{ product.description }}</p>
								{% endif %}
								{% if use_catalog %}
								{% if product.price %}
									<p class="price">
									{% if not product.special %}
										{{ product.price }}
									{% else %}
										<span class="price-old">{{ product.price }}</span><span class="price-new">{{ product.special }}</span>						  
									{% endif %}
									{% if product.tax %}
										<span class="price-tax">{{ text_tax }} {{ product.tax }}</span>
									{% endif %}
									</p>
								{% endif %}
								{% endif %}
							</div><!-- caption -->
							{% if config_module.countdown %}<div id="Countdown{{ product.product_id }}-{{ i }}" class="box-timer"></div> {% endif %}
						</div>
					</div><!-- product-thumb -->
						{% if product.date_end and config_module.countdown %}
						<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: ['{{ text_years }}', '{{ text_months }} ', '{{ text_weeks }}', '{{ text_days }}', '{{ text_hrs }}', '{{ text_mins }}', '{{ text_secs }}'],
						labels1: ['{{ text_year }}', '{{ text_month }} ', '{{ text_week }}', '{{ text_day }}', '{{ text_hr }}', '{{ text_min }}', '{{ text_sec }}'],
						});
						// $('#Countdown{{ product.product_id }}-{{ i }}').countdown('pause');
						});
						</script>
						{% endif %}
				</div><!-- product-layout -->
            {% else %}
            <!-- other type -->
            <div class="product-layout product-customize">
					<div class="product-thumb transition">
						<div class="item-inner">
							<div class="image">
								{% if config_module.salelabel %}
									{% if product.special %}
									<div class="label-product label_sale">{{ text_label_sale }}</div>
									{% endif %}
								{% endif %}
								{% if config_module.newlabel %}
									{% if product.is_new %}
									<div class="label-product label_new">{{ text_label_new }}</div>
									{% endif %}
								{% endif %}
								<a href="{{ product.href }}">
									{% if config_module.rotator and product.rotator_image %}<img class="img-r" src="{{ product.rotator_image }}" alt="{{ product.name }}" />{% endif %}
									<img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" />
								</a>
								<div class="action-links">
									{% if use_catalog %}
									<button class="btn-cart" type="button" data-toggle="tooltip" title="{{ button_cart }}" onclick="cart.add('{{ product.product_id }}');"><i class="zmdi zmdi-shopping-cart-plus"></i><span>{{ button_cart }}</span></button>
									{% endif %}
									<button class="btn-wishlist" type="button" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="zmdi zmdi-favorite-outline zmdi-hc-fw"></i><span>{{ button_wishlist }}</span></button>
									<button class="btn-compare" type="button" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="zmdi zmdi-refresh-alt"></i><span>{{ button_compare }}</span></button>
									{% if use_quickview %}
									<button class="btn-quickview" type="button" data-toggle="tooltip" title="{{ button_quickview }}" onclick="ocquickview.ajaxView('{{ product.href }}')"><i class="zmdi zmdi-search zmdi-hc-fw"></i><span>{{ button_quickview }}</span></button>
									{% endif %}
								</div>
								{% if product.rating %}
								<div class="ratings">
									<div class="rating-box">
									{% for i in 1..5 %}
										{% if product.rating == i %}
										{% set class_r = "rating"~i %}
										<div class="{{ class_r }}">rating</div>
										{% endif %}
									{% endfor %}
									</div>
								</div>					
								{% endif %}
							</div><!-- image -->
							<div class="caption">
								{% if product.manufacturer %}
								<p class="manufacture-product">
									<a href="{{ product.manufacturers }}">{{ product.manufacturer }}</a>
								</p>
								{% endif %}
								<h4 class="product-name"><a href="{{ product.href }}">{{ product.name }}</a></h4>                  
								{% if config_module.description %}
								<p class="product-des">{{ product.description }}</p>
								{% endif %}
								{% if use_catalog %}
								{% if product.price %}
									<p class="price">
									{% if not product.special %}
										{{ product.price }}
									{% else %}
										<span class="price-old">{{ product.price }}</span><span class="price-new">{{ product.special }}</span>						  
									{% endif %}
									{% if product.tax %}
										<span class="price-tax">{{ text_tax }} {{ product.tax }}</span>
									{% endif %}
									</p>
								{% endif %}
								{% endif %}
							</div><!-- caption -->
							{% if config_module.countdown %}<div id="Countdown{{ product.product_id }}-{{ i }}" class="box-timer"></div> {% endif %}
						</div>
					</div><!-- product-thumb -->
						{% if product.date_end and config_module.countdown %}
						<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: ['{{ text_years }}', '{{ text_months }} ', '{{ text_weeks }}', '{{ text_days }}', '{{ text_hrs }}', '{{ text_mins }}', '{{ text_secs }}'],
						labels1: ['{{ text_year }}', '{{ text_month }} ', '{{ text_week }}', '{{ text_day }}', '{{ text_hr }}', '{{ text_min }}', '{{ text_sec }}'],
						});
						// $('#Countdown{{ product.product_id }}-{{ i }}').countdown('pause');
						});
						</script>
						{% endif %}
				</div><!-- product-layout -->
            {% endif %}
				{% if (count % rows == 0) or (count == products|length ) %}
				</div>
				{% endif %}
        {% endfor %}	
    </div>
	{% else %}
		<p class="text_empty">{{ text_empty }}</p>
	{% endif %}
</div>
{% if config_module.slider %}
    <script type="text/javascript">
        $(document).ready(function() {
            $("#product_module{{ config_module.module_id }} .tt-product").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 %},
				lazyLoad: true,
				navText : ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
                responsive:{
					0:{
						items: {{ config_module.smobile }}
					},
					481:{
						items: {{ config_module.mobile }}
					},
					769:{
						items: {{ config_module.tablet }}
					},
					1024:{
						items: {{ config_module.desktop }}
					},
					1200:{
						items: {{ config_module.items }}
					},
                }
            });

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