<div class="hometab box">

<div class="tab-head">
<div class="hometab-heading box-heading">{{ heading_title }}</div>
<div id="tabs" class="htabs">
  <ul class='etabs'>
	<li class='tab'>
		{% if latestproducts %}
			<a href="#tab-latest">{{ tab_latest }}</a>
		{% endif %}
	</li>
	<li class='tab'>
		{% if bestsellersproducts %}
		<a href="#tab-bestseller">{{ tab_bestseller }}</a>
		{% endif %}
	</li>	
	<li class='tab'>
		{% if specialproducts %}
			<a href="#tab-special">{{ tab_special }}</a>
		{% endif %}
	</li>
	</ul>
 </div>
</div>

{% if latestproducts %}
<div id="tab-latest" class="tab-content">
	<div class="box">
				<div class="box-content">

					{% set sliderFor = 100 %}
					{%	set productCount = latestproducts|length %}
					
						{% if productCount >= sliderFor %}
						<div class="customNavigation">
							<a class="fa prev fa-arrow-left">&nbsp;</a>
							<a class="fa next fa-arrow-right">&nbsp;</a>
						</div>	
					{% endif %}
					<div class="box-product {% if productCount >= sliderFor %}product-carousel{% else %} productbox-grid{% endif %}" id="{% if productCount >= sliderFor %}tablatest-carousel{% else %}tablatest-grid{% endif %}">
					{% for product in latestproducts %}
							<div class="{% if productCount >= sliderFor %}slider-item{% else %}product-items{% endif %}">
								<div class="product-block product-thumb transition">
									<div class="product-block-inner">	  	
										<div class="image">
											{% if product.thumb_swap %}
											<a href="{{ product.href }}">
												<img src="{{ product.thumb }}" title="{{ product.name }}" alt="{{ product.name }}" class="img-responsive reg-image"/>
												<img class="img-responsive hover-image" src="{{ product.thumb_swap }}" title="{{ product.name }}" alt="{{ product.name }}"/>
											</a>
											{% else %}
											<a href="{{ product.href }}">
												<img src="{{ product.thumb }}" title="{{ product.name }}" alt="{{ product.name }}" class="img-responsive"/></a>
											{% endif %}
											
											{% if not product.special %}        
											  {% else %}   
											<span class="saleicon sale">Sale</span>  
										   {% endif %}
										   
										   {% if product.special %}
												<div class="percentsaving">{{ product.percentsaving }}% off</div>
										   {% endif %}
										   
										   
										   
											<div class="button-group">
												<button class="wishlist" type="button" data-toggle="tooltip" title="{{ button_wishlist }} " onclick="wishlist.add('{{ product.product_id }} ');">
													<i class="fa fa-heart"></i></button>
												<div class="quickview-button" data-toggle="tooltip" title="{{ quick_view }}"> <a class="quickbox" href="{{ product.quick }}">
													<i class="fa fa-eye" aria-hidden="true"></i></a></div>
												<button class="compare" type="button" data-toggle="tooltip" title="{{ button_compare }} " onclick="compare.add('{{ product.product_id }} ');">
													<i class="fa fa-exchange"></i></button>
											</div>
										</div>
										<div class="product-details">
											<div class="caption">
												
												<h4><a href="{{ product.href }} ">{{ product.name }} </a></h4>
												
												<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>
												
												{% 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 %}

												{# <p class="desc"><?php echo $product['description']; ?></p> #}
												
												<div class="button-addtocart">
							                      <button type="button" class="addtocart" onclick="cart.add('{{ product.product_id }} ');"><span>{{ button_cart }}</span></button>
							                    </div>
												
											</div>
										</div>
									</div>
								</div>
							</div>
						{% endfor %}
					</div>
				</div>
				
				{% if productCount < sliderFor %}
					<div class="ct-status">
						<i class="fa fa-frown-o"></i>
						{{ text_no_products }}
					</div>
					<div class="viewmore">
						<button class="btn btn-default gridcount">{{ text_view_more }}</button>
					</div>
				{% endif %}
				
			 </div>
			 <span class="tablatest_default_width" style="display:none; visibility:hidden"></span>
 </div>
{% endif %}
 
{% if bestsellersproducts %}
 <div id="tab-bestseller" class="tab-content">
    	  <div class="box">
				<div class="box-content">
					{% set sliderFor = 100 %}
					{%	set productCount = bestsellersproducts|length %}
					
					{% if productCount >= sliderFor %}
						<div class="customNavigation">
							<a class="fa prev fa-arrow-left">&nbsp;</a>
							<a class="fa next fa-arrow-right">&nbsp;</a>
						</div>	
					{% endif %}
					
					<div class="box-product {% if productCount >= sliderFor %}product-carousel{% else %} productbox-grid{% endif %}" id="{% if productCount >= sliderFor %}tabbestseller-carousel{% else %}tabbestseller-grid{% endif %}">
						{% for product in bestsellersproducts %}
							<div class="{% if productCount >= sliderFor %}slider-item{% else %}product-items{% endif %}">
								<div class="product-block product-thumb transition">
									<div class="product-block-inner">	  	
										<div class="image">
											{% if product.thumb_swap %}
											<a href="{{ product.href }}">
												<img src="{{ product.thumb }}" title="{{ product.name }}" alt="{{ product.name }}" class="img-responsive reg-image"/>
												<img class="img-responsive hover-image" src="{{ product.thumb_swap }}" title="{{ product.name }}" alt="{{ product.name }}"/>
											</a>
											{% else %}
											<a href="{{ product.href }}">
												<img src="{{ product.thumb }}" title="{{ product.name }}" alt="{{ product.name }}" class="img-responsive"/></a>
											{% endif %}
											
											{% if not product.special %}        
											  {% else %}   
											<span class="saleicon sale">Sale</span>  
										   {% endif %}
										   
										   {% if product.special %}
												<div class="percentsaving">{{ product.percentsaving }}% off</div>
										   {% endif %}
										   
										   <div class="button-group">
												<button class="wishlist" type="button" data-toggle="tooltip" title="{{ button_wishlist }} " onclick="wishlist.add('{{ product.product_id }} ');">
													<i class="fa fa-heart"></i></button>
												<div class="quickview-button" data-toggle="tooltip" title="{{ quick_view }}"> <a class="quickbox" href="{{ product.quick }}">
													<i class="fa fa-eye" aria-hidden="true"></i></a></div>
												<button class="compare" type="button" data-toggle="tooltip" title="{{ button_compare }} " onclick="compare.add('{{ product.product_id }} ');">
													<i class="fa fa-exchange"></i></button>
											</div>
										</div>
										
										<div class="product-details">
											<div class="caption">
												 
												<h4><a href="{{ product.href }} ">{{ product.name }} </a></h4>
												
												<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>
												
												{% 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 %}
												
												{# <p class="desc"><?php echo $product['description']; ?></p> #}
												
												<div class="button-addtocart">
							                      <button type="button" class="addtocart" onclick="cart.add('{{ product.product_id }} ');"><span>{{ button_cart }}</span></button>
							                    </div>
												
											</div>
										</div>
									</div>
								</div>
							</div>
						{% endfor %}
					</div>
				</div>
				
				{% if productCount < sliderFor %}
					<div class="ct-status">
						<i class="fa fa-frown-o"></i>
						{{ text_no_products }}
					</div>
					<div class="viewmore">
						<button class="btn btn-default gridcount">{{ text_view_more }}</button>
					</div>
				{% endif %}
				
			 </div>
		 <span class="tabbestseller_default_width" style="display:none; visibility:hidden"></span> 
 </div>
{% endif %}

{% if specialproducts %}
 <div id="tab-special" class="tab-content">
    	 <div class="box">
				<div class="box-content">
					
					{% set sliderFor = 100 %}
					{%	set productCount = specialproducts|length %}
					
					{% if productCount >= sliderFor %}
						<div class="customNavigation">
							<a class="fa prev fa-arrow-left">&nbsp;</a>
							<a class="fa next fa-arrow-right">&nbsp;</a>
						</div>	
					{% endif %}
					
					<div class="box-product {% if productCount >= sliderFor %}product-carousel{% else %} productbox-grid{% endif %}" id="{% if productCount >= sliderFor %}tabspecial-carousel{% else %}tabspecial-grid{% endif %}">
					{% for product in specialproducts %}
							<div class="{% if productCount >= sliderFor %}slider-item{% else %}product-items{% endif %}">
								<div class="product-block product-thumb transition">
									<div class="product-block-inner">	  	
										<div class="image">
											{% if product.thumb_swap %}
											<a href="{{ product.href }}">
												<img src="{{ product.thumb }}" title="{{ product.name }}" alt="{{ product.name }}" class="img-responsive reg-image"/>
												<img class="img-responsive hover-image" src="{{ product.thumb_swap }}" title="{{ product.name }}" alt="{{ product.name }}"/>
											</a>
											{% else %}
											<a href="{{ product.href }}">
												<img src="{{ product.thumb }}" title="{{ product.name }}" alt="{{ product.name }}" class="img-responsive"/></a>
											{% endif %}
											
											{% if not product.special %}        
											  {% else %}   
											<span class="saleicon sale">Sale</span>  
										   {% endif %}
										   
										   {% if product.special %}
												<div class="percentsaving">{{ product.percentsaving }}% off</div>
										   {% endif %}
										   
											<div class="button-group">
												<button class="wishlist" type="button" data-toggle="tooltip" title="{{ button_wishlist }} " onclick="wishlist.add('{{ product.product_id }} ');">
													<i class="fa fa-heart"></i></button>
												<div class="quickview-button" data-toggle="tooltip" title="{{ quick_view }}"> <a class="quickbox" href="{{ product.quick }}">
													<i class="fa fa-eye" aria-hidden="true"></i></a></div>
												<button class="compare" type="button" data-toggle="tooltip" title="{{ button_compare }} " onclick="compare.add('{{ product.product_id }} ');">
													<i class="fa fa-exchange"></i></button>
											</div>
										</div>
										<div class="product-details">
											<div class="caption">
												
												<h4><a href="{{ product.href }} ">{{ product.name }} </a></h4>

												<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>
												
												{% 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 %}
												
												{# <p class="desc"><?php echo $product['description']; ?></p> #}
												
												<div class="button-addtocart">
							                      <button type="button" class="addtocart" onclick="cart.add('{{ product.product_id }} ');"><span>{{ button_cart }}</span></button>
							                    </div>
												
											</div>
										</div>
									</div>
								</div>
							</div>
						{% endfor %}
					</div>
				</div>
				
				{% if productCount < sliderFor %}
					<div class="ct-status">
						<i class="fa fa-frown-o"></i>
						{{ text_no_products }}
					</div>
					<div class="viewmore">
						<button class="btn btn-default gridcount">{{ text_view_more }}</button>
					</div>
				{% endif %}
				
			 </div>
		 <span class="tabspecial_default_width" style="display:none; visibility:hidden"></span> 
 </div>
{% endif %}


</div>

<script type="text/javascript">
$('#tabs a').tabs();
</script> 