<!-- default Grid  -->
<div class="module {{direction_class}} {{ class_suffix }}">
	<div class="container">
		<div class="contain">
			{% if disp_title_module %}
			<h3 class="modtitle">
				{% if custom_url != '' %}
					<a href="{{ custom_url }}"><span>{{ head_name }}</span></a>
				{% else %}
					<span>{{ head_name }}</span>
				{% endif %}
			</h3>
			{% endif %}
			{% if pre_text|trim is not empty  %} 
				<div class="pre-text">
					{{ pre_text }}
				</div>
			{% endif %}
		</div>
	</div>
	<div class="modcontent">
		
		{% if products is empty %}
			<div class="alert alert-info"><i class="fa fa-info-circle"></i> 
				{{ text_noproduct }}
				<button type="button" class="close" data-dismiss="alert">×</button>
			</div>

		{% else %}
			{% set count_item 	= products|length %}	
			{% set cls_btn_page =  (button_page  ==  'top') ? 'buttom-type1':'button-type2' %}	
			{% set btn_type 	=  (button_page  ==  'top') ? 'button-type1':'button-type2'%}
			
			{% set tag_id = 'so_extra_slider_'~suffix %}
			{% set class_respl = 'preset00-'~nb_column0~' preset01-'~nb_column1~' preset02-'~nb_column2~' preset03-'~nb_column3~' preset04-'~nb_column4 %}
			{% set btn_prev = (button_page == 'top') ? '&#171':'&#139' %}
			{% set btn_next = (button_page == 'top') ? '&#187':'&#155' %}
			{% set i = 0 %}

			<div id="{{tag_id}}" class="so-extraslider {{cls_btn_page}} {{class_respl}} {{btn_type}}">
				<!-- Begin extraslider-inner -->
				<div class="extraslider-inner products-list " data-effect="{{effect}}">
					{% for i, product in products %}
						{% set i = i + 1 %}
						{% if i % nb_rows  ==  1  or  nb_rows  ==  1 %} 
						<div class="item ">
						{% endif %} 

							<div class="product-layout product-grid {{ products_style }} ">
								<div class="product-item-container">
									<div class="left-block">									
										<div class="product-image-container {% if product_image_num  == 2 %} {{ 'second_img' }} {% endif %}	">
											<a href="{{ product.href }}" target="{{ item_link_target }}" title="{{ product.nameFull }} "  >
												{% if product_image_num ==2 %}
													<img data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ product.thumb }}" class="img-1 lazyload" alt="{{ product.nameFull }}">
													<img data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ product.thumb2 }}" class="img-2 lazyload" alt="{{ product.nameFull }}">
												{% else %}
													<img data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ product.thumb }}" alt="{{ product.nameFull }}" class="lazyload">
												{% endif %}
											</a>						
										</div>
										<div class="box-label">
											{% if product.special  and  display_sale  %} 
												<span class="label-product label-sale">{# {{ objlang.get('text_sale') }} #} {{ product.discount }}  </span>
											{% endif %} 

											{% if product.productNew  and  display_new  %} 
												<span class="label-product label-new">{{ objlang.get('text_new') }} </span>
											{% endif %} 											
										</div>
										{% if display_addtocart  or  display_wishlist  or  display_compare %} 
											<div class="button-group so-quickview cartinfo--center">
												{% if display_addtocart  %} 
												<button type="button" class="addToCart btn-button" title="{{ objlang.get('button_cart') }}" onclick="cart.add('{{ product.product_id }}');"><i class="fa fa-shopping-basket"></i>
													{% if nb_column0  !=  6 %} 
													<span>{{ objlang.get('button_cart') }} </span>
													{% endif %} 
												</button>
												{% endif %} 
												{% if display_wishlist  %} 
												<button type="button" class="wishlist btn-button" title="{{ objlang.get('button_wishlist') }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i><span>{{ objlang.get('button_wishlist') }}</span></button>
												{% endif %} 
												{% if display_compare %} 
												<button type="button" class="compare btn-button" title="{{ objlang.get('button_compare') }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-refresh"></i><span>{{ objlang.get('button_compare') }}</span></button>
												{% endif %} 

												<a class="hidden" data-product='{{ product.product_id }}' href="{{ product.href }}" target="{{ item_link_target }}" ></a>
												
											</div>
										{% endif %} 
																	
									</div>

									<div class="right-block">
										
										{% if display_title %} 
											<h4>
												<a href="{{ product.href }}" target="{{ item_link_target }}" title="{{ product.nameFull }} "  >
													{{ product.name }} 
												</a>
											</h4>
										{% endif %}
								
										<div class="caption">
											{% if display_rating %}
												{% if product.rating %}
													<div class="rating">
														{% for k in 1..5 %}
															
															{% if product.rating < k %} 
																<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></span>
															{% endif %} 
															{% set k = k + 1 %}
														{% endfor %} 
													</div>
												{% else %}  
												<div class="rating">
													{% for j in 1..5 %}
														{% set j = j + 1 %}
														<span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span>
													{% endfor %} 													
												</div>
												{% endif %}	
											{% endif %}			

											{% if display_price %} 
												<div  class="price">
													{% if not product.special %} 
														<span class="price-new">
															{{ product.price }} 
														</span>
													{% else %}   
														<span class="price-new">{{ product.special }} </span>&nbsp;&nbsp;
														<span class="price-old">{{ product.price }} </span>&nbsp;
													{% endif %} 
													
												</div>
											{% endif %} 
											
											{% if display_description %} 
												<div class="item-des">
													{{ product.description }} 
												</div>
											{% endif %} 
																						
										</div>
										
									</div>

									
					
								</div>
								<!-- End item-wrap-inner -->
							</div>
							<!-- End item-wrap -->

						{% if i % nb_rows  ==  0  or  i  ==  count_item %} 
						</div>
						{% endif %} 

					{% endfor %}	 
				</div>
				<!--End extraslider-inner -->

				<script type="text/javascript">
				//<![CDATA[
				jQuery(document).ready(function ($) {
					(function (element) {
						var $element = $(element),
								$extraslider = $(".extraslider-inner", $element),
								_delay = {{ delay }} ,
								_duration = {{ duration }} ,
								_effect = '{{ effect }} ';

						$extraslider.on("initialized.owl.carousel2", function () {
							var $item_active = $(".owl2-item.active", $element);
							if ($item_active.length > 1 && _effect != "none") {
								_getAnimate($item_active);
							}
							else {
								var $item = $(".owl2-item", $element);
								$item.css({"opacity": 1, "filter": "alpha(opacity = 100)"});
							}
							{% if dots  ==  "true" %} 
							if ($(".owl2-dot", $element).length < 2) {
								$(".owl2-prev", $element).css("display", "none");
								$(".owl2-next", $element).css("display", "none");
								$(".owl2-dot", $element).css("display", "none");
							}
							{% endif %}

							{% if button_page  ==  "top" %} 
								$(".owl2-controls", $element).insertBefore($extraslider);
								$(".owl2-dots", $element).insertAfter($(".owl2-prev", $element));
							{% else %}  
								$(".owl2-nav", $element).insertBefore($extraslider);
								$(".owl2-controls", $element).insertAfter($extraslider);
							{% endif %}

						});

						$extraslider.owlCarousel2({
							rtl: {{ direction}},
							margin: {{ margin }},
							slideBy: {{ slideBy }},
							autoplay: {{ autoplay }},
							autoplayHoverPause: {{ autoplayHoverPause  }},
							autoplayTimeout: {{ autoplayTimeout }} ,
							autoplaySpeed: {{ autoplaySpeed }} ,
							startPosition: {{ startPosition }} ,
							mouseDrag: {{ mouseDrag }},
							touchDrag: {{ touchDrag }} ,
							autoWidth: false,
							responsive: {
								0: 	{ items: {{ nb_column4 }} } ,
								480: { items: {{ nb_column3 }} },
								768: { items: {{ nb_column2 }} },
								992: { items: {{ nb_column1 }} },
								1200: {items: {{ nb_column0 }}}
							},
							dotClass: "owl2-dot",
							dotsClass: "owl2-dots",
							dots: {{ dots }} ,
							dotsSpeed:{{ dotsSpeed }} ,
							nav: {{ nav }} ,
							loop: {{ loop }} ,
							navSpeed: {{ navSpeed }} ,
							navText: ["{{ btn_prev }} ", "{{ btn_next }} "],
							navClass: ["owl2-prev", "owl2-next"]

						});

						$extraslider.on("translate.owl.carousel2", function (e) {
				        	{% if dots  ==  "true" %} 
				        	if ($(".owl2-dot", $element).length < 2) {
				        		$(".owl2-prev", $element).css("display", "none");
				        		$(".owl2-next", $element).css("display", "none");
				        		$(".owl2-dot", $element).css("display", "none");
				        	}
				        	{% endif %} 
				        	var $item_active = $(".owl2-item.active", $element);
				        	_UngetAnimate($item_active);
				        	_getAnimate($item_active);
				        });
				        $extraslider.on("translated.owl.carousel2", function (e) {
				        	{% if dots  ==  "true" %} 
				        	if ($(".owl2-dot", $element).length < 2) {
				        		$(".owl2-prev", $element).css("display", "none");
				        		$(".owl2-next", $element).css("display", "none");
				        		$(".owl2-dot", $element).css("display", "none");
				        	}
				        	{% endif %} 
				        	var $item_active = $(".owl2-item.active", $element);
				        	var $item = $(".owl2-item", $element);
				        	_UngetAnimate($item);
				        	if ($item_active.length > 1 && _effect != "none") {
				        		_getAnimate($item_active);
				        	} else {
				        		$item.css({"opacity": 1, "filter": "alpha(opacity = 100)"});
				        	}
				        });
				        function _getAnimate($el) {
				        	if (_effect == "none") return;
				        	//if ($.browser.msie && parseInt($.browser.version, 10) <= 9) return;
				        	$extraslider.removeClass("extra-animate");
				        	$el.each(function (i) {
				        		var $_el = $(this);
				        		var i= i + 1;
				        		$(this).css({
				        			"-webkit-animation": _effect + " " + _duration + "ms ease both",
				        			"-moz-animation": _effect + " " + _duration + "ms ease both",
				        			"-o-animation": _effect + " " + _duration + "ms ease both",
				        			"animation": _effect + " " + _duration + "ms ease both",
				        			"-webkit-animation-delay": +i * _delay + "ms",
				        			"-moz-animation-delay": +i * _delay + "ms",
				        			"-o-animation-delay": +i * _delay + "ms",
				        			"animation-delay": +i * _delay + "ms",
				        			
				        		}).animate({
				        			
				        		});
				        		if (i == $el.size() - 1) {
				        			$extraslider.addClass("extra-animate");
				        		}
				        	});
				        }
				        function _UngetAnimate($el) {
				        	$el.each(function (i) {
				        		$(this).css({
				        			"animation": "",
				        			"-webkit-animation": "",
				        			"-moz-animation": "",
				        			"-o-animation": "",
				        		});
				        	});
				        } 
					})("#{{ tag_id  }} ");
				});
				//]]>
			</script>

			</div>
		{% endif %}
	
	</div> 
	{% if post_text|trim is not empty  %} 
		<div class="form-group">
			{{ post_text  }}
		</div>
	{% endif %}

</div>