<div class="product-tab-block mt-50 box">
	<div class="container">
	<div class="main-tab">
		<div class="product-tabs box-content clearfix">
			<div class="page-title toggled">
				<h3>{{ heading_title }}</h3>	
			</div>	
			<div id="tabs" class="mahardhi-tabs section">
				<ul class="nav nav-tabs">
					{% if latest_products %}
						{% if featured_products %}
						<li>
							<a href="#tab-featured" data-toggle="tab" class="selected"><span>{{ tab_featured }}</span></a>
						</li>
					{% endif %}
						<li>
							<a href="#tab-latest" data-toggle="tab"><span>{{ tab_latest }}</span></a>
						</li>
					{% endif %}
					{% if special_products %}
						<li>
							<a href="#tab-special" data-toggle="tab"><span>{{ tab_special }}</span></a>
						</li>
					{% endif %}
					{% if bestseller_products %}
						<li>
							<a href="#tab-bestseller" data-toggle="tab"><span>{{ tab_bestseller }}</span></a>
						</li>
					{% endif %}
				</ul>				
			</div>		
			
			<div class="all-content">				
				{% set productForSlider = 1 %}
				<div class="tab-content block_box">
					<div class="row">
					{% if featured_products %}
						{% set count = 1 %}
						{% set productCount_f = featured_products|length %}
						<div id="tab-featured" class="tab-pane">
							<div id="featuredTabCarousel" class="box-product {% if productCount_f > productForSlider %} product-tab-carousel {% endif %} clearfix" data-items="4">
								{% if productCount_f > productForSlider %}
									{% set class = 'col-xs-12' %}
								{% else %}
									{% set class = ' col-lg-3 col-md-4 col-sm-4 col-xs-4' %}
								{% endif %}
								{% for product in featured_products %}
								{% if productCount_f >= 8 %}
								{% if count is divisible by(2) %}
								{% else %}
									<div class='single-column'>
								{% endif %}
								{% endif %}
								<div class="product-layout {{class}}">
									<div class="product-thumb transition">
										<div class="image">
											{% if product.thumb_swap %}
												<a href="{{ product.href }}">
													<img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" />
													<img class="img-responsive hover-img" src="{{ product.thumb_swap }}" title="{{ product.name }}" alt="{{ product.name }}"/>
												</a>
											{% else %}
												<a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a>
											{% endif %}								
											{% if  product.special %}
												<div class="sale-text"><span class="section-sale">{{ product.percent }}% {{ text_off }}</span></div>
											{% endif %}	
											<div class="button-group">
												<button type="button" class="quickview-button" title="{{ button_quickview }}" onclick="quickView.ajaxView('?route=product/quickview&product_id={{ product.product_id }}');"><i class="icon-eye"></i><span>{{ button_quickview }}</span></button>
												<button type="button" class="wishlist" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="icon-heart"></i><span>{{ button_wishlist }}</span></button>
												<button type="button" class="compare" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="icon-change"></i><span>{{ button_compare }}</span></button>
											</div>
										</div>								
										<div class="thumb-description clearfix">
											<div class="caption">
												<div class="price-rating">
													{% 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>
													{% else %}
														<div class="rating">
															{% for i in 1..5 %}
																<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
															{% endfor %}
														</div>
													{% endif %}
												</div>	
												<h4 class="product-title"><a href="{{ product.href }}">{{ product.name }}</a></h4>

												{% 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 %}	
													</p>
												{% endif %}

												<button type="button" class="addcart" title="{{ button_cart }}" onclick="cart.add('{{ product.product_id }}')">{{ button_cart }}</button>
											</div>									
										</div>
									</div>
								</div>
								{% if productCount_f >= 8 %}
								{% if count is divisible by(2) %}
									</div>
								{% endif %}
								{% endif %}
								{% set count = count + 1 %}
								{% endfor %} {# foreach END #}
								{% set count = 1 %}
								{% if productCount_f >= 8 %}
								{% if productCount_f is divisible by(2) %}
								{% else %}
							</div>
							{% endif %} 
							{% endif %}
						</div>
					</div>
					{% endif %}

					{% if latest_products%}
						{% set count = 1 %}
						{% set productCount_l = latest_products|length %}
						<div id="tab-latest" class="tab-pane">
							<div id="latestTabCarousel" class="box-product {% if productCount_l > productForSlider %} product-tab-carousel {% endif %} clearfix" data-items="4">
								{% if productCount_l > productForSlider %}
									{% set class = 'col-xs-12' %}
								{% else %}
									{% set class = ' col-lg-3 col-md-4 col-sm-4 col-xs-4' %}
								{% endif %}
								{% for product in latest_products %}
								{% if productCount_l >= 8 %}
								{% if count is divisible by(2) %}
								{% else %}
									<div class='single-column'>
								{% endif %}
								{% endif %}
								<div class="product-layout {{class}}">
									<div class="product-thumb transition">
										<div class="image">
											{% if product.thumb_swap %}
												<a href="{{ product.href }}">
													<img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" />
													<img class="img-responsive hover-img" src="{{ product.thumb_swap }}" title="{{ product.name }}" alt="{{ product.name }}"/>
												</a>
											{% else %}
												<a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a>
											{% endif %}								
											{% if  product.special %}
												<div class="sale-text"><span class="section-sale">{{ product.percent }}% {{ text_off }}</span></div>
											{% endif %}	
											<div class="button-group">
												<button type="button" class="quickview-button" title="{{ button_quickview }}" onclick="quickView.ajaxView('?route=product/quickview&product_id={{ product.product_id }}');"><i class="icon-eye"></i><span>{{ button_quickview }}</span></button>
												<button type="button" class="wishlist" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="icon-heart"></i><span>{{ button_wishlist }}</span></button>
												<button type="button" class="compare" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="icon-change"></i><span>{{ button_compare }}</span></button>
											</div>
										</div>								
										<div class="thumb-description clearfix">
											<div class="caption">
												<div class="price-rating">
													{% 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>
													{% else %}
														<div class="rating">
															{% for i in 1..5 %}
																<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
															{% endfor %}
														</div>
													{% endif %}
												</div>	
												<h4 class="product-title"><a href="{{ product.href }}">{{ product.name }}</a></h4>

												{% 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 %}										
													</p>
												{% endif %}

												<button type="button" class="addcart" title="{{ button_cart }}" onclick="cart.add('{{ product.product_id }}')">{{ button_cart }}</button>
											</div>									
										</div>
									</div>
								</div>
								{% if productCount_l >= 8 %}
								{% if count is divisible by(2) %}
								</div>
								{% endif %}
								{% endif %}
								{% set count = count + 1 %}
								{% endfor %} {# foreach END #}
								{% set count = 1 %}
								{% if productCount_l >= 8 %}
								{% if productCount_l is divisible by(2) %}
								{% else %}
							</div>
							{% endif %} 
							{% endif %}
							</div>
						</div>
					{% endif %}

					{% if bestseller_products%}
						{% set count = 1 %}
						{% set productCount_b = bestseller_products|length %}
						<div id="tab-bestseller" class="tab-pane">
							<div id="bestsellerTabCarousel" class="box-product {% if productCount_b > productForSlider %} product-tab-carousel {% endif %} clearfix" data-items="4">
								{% if productCount_b > productForSlider %}
									{% set class = 'col-xs-12' %}
								{% else %}
									{% set class = ' col-lg-3 col-md-4 col-sm-4 col-xs-4' %}
								{% endif %}
								{% for product in bestseller_products %}
								{% if productCount_b >= 8 %}
								{% if count is divisible by(2) %}
								{% else %}
									<div class='single-column'>
								{% endif %}
								{% endif %}
								<div class="product-layout {{class}}">
									<div class="product-thumb transition">
										<div class="image">
											{% if product.thumb_swap %}
												<a href="{{ product.href }}">
													<img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" />
													<img class="img-responsive hover-img" src="{{ product.thumb_swap }}" title="{{ product.name }}" alt="{{ product.name }}"/>
												</a>
											{% else %}
												<a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a>
											{% endif %}								
											{% if  product.special %}
												<div class="sale-text"><span class="section-sale">{{ product.percent }}% {{ text_off }}</span></div>
											{% endif %}	
											<div class="button-group">
												<button type="button" class="quickview-button" title="{{ button_quickview }}" onclick="quickView.ajaxView('?route=product/quickview&product_id={{ product.product_id }}');"><i class="icon-eye"></i><span>{{ button_quickview }}</span></button>
												<button type="button" class="wishlist" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="icon-heart"></i><span>{{ button_wishlist }}</span></button>
												<button type="button" class="compare" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="icon-change"></i><span>{{ button_compare }}</span></button>
											</div>
										</div>								
										<div class="thumb-description clearfix">
											<div class="caption">
												<div class="price-rating">
													{% 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>
													{% else %}
														<div class="rating">
															{% for i in 1..5 %}
																<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
															{% endfor %}
														</div>
													{% endif %}
												</div>
												<h4 class="product-title"><a href="{{ product.href }}">{{ product.name }}</a></h4>

												{% 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 %}
													</p>
												{% endif %}
												<button type="button" class="addcart" title="{{ button_cart }}" onclick="cart.add('{{ product.product_id }}')">{{ button_cart }}</button>
											</div>									
										</div>
									</div>
								</div>
								{% if productCount_b >= 8 %}
								{% if count is divisible by(2) %}
								</div>
								{% endif %}
								{% endif %}
								{% set count = count + 1 %}
								{% endfor %} {# foreach END #}
								{% set count = 1 %}
								{% if productCount_b >= 8 %}
								{% if productCount_b is divisible by(2) %}
								{% else %}
							</div>
							{% endif %} 
							{% endif %}
							</div>
						</div>
					{% endif %}

					{% if special_products%}
						{% set count = 1 %}
						{% set productCount_s = special_products|length %}
						<div id="tab-special" class="tab-pane">
							<div id="specialTabCarousel" class="box-product {% if productCount_s > productForSlider %} product-tab-carousel {% endif %} clearfix" data-items="4">
								{% if productCount_s > productForSlider %}
									{% set class = 'col-xs-12' %}
								{% else %}
									{% set class = ' col-lg-3 col-md-4 col-sm-4 col-xs-4' %}
								{% endif %}
								{% for product in special_products %}
								{% if productCount_s >= 8 %}
								{% if count is divisible by(2) %}
								{% else %}
									<div class='single-column'>
								{% endif %}
								{% endif %}
								<div class="product-layout {{class}}">
									<div class="product-thumb transition">
										<div class="image">
											{% if product.thumb_swap %}
												<a href="{{ product.href }}">
													<img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" />
													<img class="img-responsive hover-img" src="{{ product.thumb_swap }}" title="{{ product.name }}" alt="{{ product.name }}"/>
												</a>
											{% else %}
												<a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-responsive" /></a>
											{% endif %}								
											{% if  product.special %}
												<div class="sale-text"><span class="section-sale">{{ product.percent }}% {{ text_off }}</span></div>
											{% endif %}	
											<div class="button-group">
												<button type="button" class="quickview-button" title="{{ button_quickview }}" onclick="quickView.ajaxView('?route=product/quickview&product_id={{ product.product_id }}');"><i class="icon-eye"></i><span>{{ button_quickview }}</span></button>
												<button type="button" class="wishlist" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="icon-heart"></i><span>{{ button_wishlist }}</span></button>
												<button type="button" class="compare" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="icon-change"></i><span>{{ button_compare }}</span></button>
											</div>
										</div>								
										<div class="thumb-description clearfix">
											<div class="caption">
												<div class="price-rating">
													{% 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>
													{% else %}
														<div class="rating">
															{% for i in 1..5 %}
																<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
															{% endfor %}
														</div>
													{% endif %}
												</div>	
												<h4 class="product-title"><a href="{{ product.href }}">{{ product.name }}</a></h4>

												{% 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 %}										
													</p>
												{% endif %}
												<button type="button" class="addcart" title="{{ button_cart }}" onclick="cart.add('{{ product.product_id }}')">{{ button_cart }}</button>
											</div>									
										</div>
									</div>
								</div>
								{% if productCount_s >= 8 %}
								{% if count is divisible by(2) %}
								</div>
								{% endif %}
								{% endif %}
								{% set count = count + 1 %}
								{% endfor %} {# foreach END #}
								{% set count = 1 %}
								{% if productCount_s >= 8 %}
								{% if productCount_s is divisible by(2) %}
								{% else %}
							</div>
							{% endif %} 
							{% endif %}
							</div>
						</div>
					{% endif %}
				</div>
			</div>
		</div>
	</div>
</div>
</div>
</div>
</div>

<script type="text/javascript">
$('#tabs a').tabs();

	// set slider
		const direction = $('html').attr('dir');
		$('.product-tab-carousel').each(function () {
			if ($(this).closest('#column-left').length == 0 && $(this).closest('#column-right').length == 0) {
				$(this).addClass('owl-carousel owl-theme');
				const items = $(this).data('items') || 4;
				const sliderOptions = {
					loop: false,
					nav: true,
					navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
					dots: false,
					items: items,
					responsiveRefreshRate: 200,
					responsive: {
						0: { items: 1 },
						376: { items: ((items - 2) > 1) ? (items - 2) : 1 },
						681: { items: ((items - 1) > 1) ? (items - 1) : 1 },
						1200: { items: items }
					}
				};
				if (direction == 'rtl') sliderOptions['rtl'] = true;
				$(this).owlCarousel(sliderOptions);
			}
		});
</script>