
    {# List content #}
    <div class="list-style">
        <div class="product-item first-product">
            <div class="image {% if rotate_image %}rotate-image-container{% endif %}">
                {% if show_label and (special or is_new) %}
					<div class="box-label">
						{% if special %}
							<div><span class="pro-label sale">{{ '-' ~ rate_special ~ '%' }}</span></div>
						{% endif %}
						{% if is_new %}
							<div><span class="pro-label new">{{ text_new }}</span></div>
						{% endif %}
					</div>
				{% endif %}
				<a href="{{ href }}">
                    {% if rotate_image %}
                        <img  src="{{ rotate_image }}"   alt="{{ name[:20] ~ '...' }}" title="{{ name }}" class="img-responsive img-rotate-image " />
                    {% endif %}
                    <img src="{{ thumb }}"  alt="{{ name[:20] ~ '...' }}" title="{{ name }}" class="img-responsive img-mod-{{ section_id }}-{{ product_id }}" />
                    {% if swatches_images %}
                        <input type="hidden" value="{{ thumb }}" class="img-default-{{ section_id }}-{{ product_id }}" />
                        {% for s_image in swatches_images %}
                            <input type="hidden" value="{{ s_image.image }}" class="img-swatch-{{ section_id }}-{{ product_id }}-{{ s_image.product_option_value_id }}" />
                        {% endfor %}
                    {% endif %}
                </a>
				{% if show_quickview %}
					<div class="quickview">
						<button type="button" title="{{ button_quickview }}" class="button-quickview" onclick="ptquickview.ajaxView('{{ href }}')"><span>{{ button_quickview }}</span></button>
					</div>
				{% endif %}
                
            </div>
            <div class="caption">
				<div class="inner">
					{% if options %}
						<div class="category-options product-options">
						{% for option in options %}
							<ul class="ul-swatches-colors">
								{% for option_value in option.product_option_value %}
									<li class="swatches-options">
										<a href="javascript:void(0);" onclick="swatches.changeModuleSwatches($(this));" title="{{ option_value.name }}"
										   style="{% if option_value.image %} width: 10px; height: 10px;
																				background-image: url('{{ option_value.image }}') {% endif %}"
										   data-module-id="{{ section_id }}"
										   data-product-id="{{ product_id }}"
										   data-product-option-value-id="{{ option_value.product_option_value_id }}">{% if not option_value.image %} {{ option_value.name }} {% endif %}</a>
									</li>
								{% endfor %}
							</ul>
						{% endfor %}
						</div>
					{% endif %}
					{% if manufacturer %}
						<p class="manufacture-product">
							<a href="{{ manufacturer_href }}">{{ manufacturer }}</a>
						</p>
					{% endif %}
					
					
					<h4><a href="{{ href }}">{{ name }}</a></h4>
					{% if rating %}
						<div class="rating">
							{% for i in 1..5 %}
								{% if rating < i %}
									<span class="icon-ratings"><i class="icon-rating icon-rating-o"></i></span>
								{% else %}
									<span class="icon-ratings"><i class="icon-rating icon-rating-x"></i></span>
								{% endif %}
							{% endfor %}
						</div>
					{% endif %}
					
					{% if show_price and price %}
						<p class="price">
							{% if not special %}
								{{ price }}
							{% else %}
								<span class="price-new">{{ special }}</span> <span class="price-old">{{ price }}</span>
							{% endif %}
							{% if tax %}
								<span class="price-tax">{{ text_tax }} {{ tax }}</span>
							{% endif %}
						</p>
					{% endif %}
					
					
					
					<p class="product-description">{{ description }}</p>
					
					{% if show_countdown and date_end %}
						<div class="quantity-progress" >
							<p class="product-available">{{ text_availabe }}<span>{{ quantity }}</span></p>
							<p class="product-sold">{{ text_sold }}<span>{{ sold_number }}</span></p>
							<div class="bar-percent" >
								<div class="available-percent" style="width: {{ quantity / total_qty * 100 }}%;"></div>
							</div>
						</div>
						<div class="countdown-box-flex">
							<p class="text-countdown">{{ text_countdown }}</p>
							<div class="countdown-box countdown-product-{{ product_id }}" data-id="{{ product_id }}" data-date="{{ date_end }}">
								<div class="inner">
									<div class="box">
										<b class="day"></b><span>{{ text_days }}</span>
									</div>
									<div class="box">
										<b class="hour"></b><span>{{ text_hours }}</span>
									</div>
									<div class="box">
										<b class="min"></b><span>{{ text_mins }}</span>
									</div>
									<div class="box">
										<b class="sec"></b><span>{{ text_secs }}</span>
									</div>
								</div>
							</div>
						</div>
					{% endif %}
					{% if  show_cart or show_wishlist or show_compare  %}
						<div class="button-group">
							<div class="inner">
								{% if show_cart %}
									<button type="button" class="button-cart" onclick="cart.add('{{ product_id }}');" title="{{ button_cart }}"><span>{{ button_cart }}</span></button>
								{% endif %}
								
								
								{% if show_compare %}
									<button type="button"  title="{{ button_compare }}" class="button-compare" onclick="compare.add('{{ product_id }}');"><span>{{ button_compare }}</span></button>
								{% endif %}
								{% if show_wishlist %}
									<button type="button"  title="{{ button_wishlist }}" class="button-wishlist" onclick="wishlist.add('{{ product_id }}');"><span>{{ button_wishlist }}</span></button>
								{% endif %}
							</div>
						</div>
					{% endif %}
				</div>
				
			</div>
        </div>
    </div>

    <script>
        var gallery_images = $(".gallery-images-{{ section_id }}-{{ product_id }}");
		
		$('.child-thumb').click(function(){
			$('.child-thumb').removeClass('active');
			$(this).addClass('active');
		});
        gallery_images.swiper({
            spaceBetween: 0,
            // nextButton: '.swiper-button-next-{{ section_id }}-{{ product_id }}',
            // prevButton: '.swiper-button-prev-{{ section_id }}-{{ product_id }}',
            speed: 500,
            preloadImages: false,
            watchSlidesVisibility: true,
            slidesPerView: 4,
            slidesPerColumn: 1,
            breakpoints: {
                1499: {
                    slidesPerView: 4,
                    slidesPerColumn: 1
                },
                1199: {
                    slidesPerView: 4,
                    slidesPerColumn: 1
                },
                991: {
                    slidesPerView: 4,
                    slidesPerColumn: 1
                },
                767: {
                    slidesPerView: 4,
                    slidesPerColumn: 1
                },
                479: {
                    slidesPerView: 4,
                    slidesPerColumn: 1
                }
            },
            autoplay: false,
            loop: false
        });

        function changeImg(section_id, product_id, popup) {
            $('.first-product .img-mod-' + section_id + '-' + product_id).attr('src', popup);
        }
    </script>

