{% if layout_type == "grid" %}
    {# Grid content #}
	<div class="grid-style">
		<div class="product-item">	
			<div class="image {% if rotate_image %}rotate-image-container{% endif %}">
				
				<a href="{{ href }}">
					{% if rotate_image %}
						<img {% if lazy_load %} data-src="{{ rotate_image }}" width="{{ img_width }}" height="{{ img_height }}" {% else %} src="{{ rotate_image }}" {% endif %}  alt="{{ name[:20] ~ '...' }}" title="{{ name }}" class="img-responsive img-rotate-image {% if lazy_load %} swiper-lazy {% endif %}" />
					{% endif %}
					<img {% if lazy_load %} data-src="{{ thumb }}" width="{{ img_width }}" height="{{ img_height }}" {% else %} src="{{ thumb }}" {% endif %} alt="{{ name[:20] ~ '...' }}" title="{{ name }}" class="{% if lazy_load %} swiper-lazy {% endif %} 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 lazy_load %}
				<div class="swiper-lazy-preloader"></div>
				{% endif %}
				{% 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 %}
				
				
				{% 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 %}
			</div>
			<div class="caption">
				<div class="inner">
					{% 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 %}
					<div>
					{% 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 %}
					{% 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 %}
					</div>
					{% if show_description and description %}
						<p class="product-description">{{ description }}</p>
					{% endif %}
					
					
					{% 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_compare or show_wishlist %}
						<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>
{% endif %}

{% if layout_type == "list" %}
    {# List content #}
	<div class="list-style">
		<div class="product-item">	
			<div class="image {% if rotate_image %}rotate-image-container{% endif %}">
				
				<a href="{{ href }}">
					{% if rotate_image %}
						<img {% if lazy_load %} data-src="{{ rotate_image }}" width="{{ img_width }}" height="{{ img_height }}" {% else %} src="{{ rotate_image }}" {% endif %}  alt="{{ name[:20] ~ '...' }}" title="{{ name }}" class="img-responsive img-rotate-image {% if lazy_load %} swiper-lazy {% endif %}" />
					{% endif %}
					<img {% if lazy_load %} data-src="{{ thumb }}" width="{{ img_width }}" height="{{ img_height }}" {% else %} src="{{ thumb }}" {% endif %} alt="{{ name[:20] ~ '...' }}" title="{{ name }}" class="{% if lazy_load %} swiper-lazy {% endif %} 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 lazy_load %}
				<div class="swiper-lazy-preloader"></div>
				{% endif %}
				{% 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 %}
					<div>
					{% 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 %}
					{% 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 %}
					</div>
					{% if show_description and description %}
						<p class="product-description">{{ description }}</p>
					{% endif %}
					{% 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>
{% endif %}

{% if layout_type == "other" %}
    {# Other content #}
	<div class="other-style">
		<div class="product-item">	
			
			<div class="image {% if rotate_image %}rotate-image-container{% endif %}">
				
				<a href="{{ href }}">
					{% if rotate_image %}
						<img {% if lazy_load %} data-src="{{ rotate_image }}" width="{{ img_width }}" height="{{ img_height }}" {% else %} src="{{ rotate_image }}" {% endif %}  alt="{{ name[:20] ~ '...' }}" title="{{ name }}" class="img-responsive img-rotate-image {% if lazy_load %} swiper-lazy {% endif %}" />
					{% endif %}
					<img {% if lazy_load %} data-src="{{ thumb }}" width="{{ img_width }}" height="{{ img_height }}" {% else %} src="{{ thumb }}" {% endif %} alt="{{ name[:20] ~ '...' }}" title="{{ name }}" class="{% if lazy_load %} swiper-lazy {% endif %} 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 lazy_load %}
				<div class="swiper-lazy-preloader"></div>
				{% endif %}
				{% 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 %}
				
			</div>
			<div class="caption">
				<div class="inner">
					{% if manufacturer %}
						<p class="manufacture-product">
							<a href="{{ manufacturer_href }}">{{ manufacturer }}</a>
						</p>
					{% endif %}

					{% 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 %}
					<h4><a href="{{ href }}">{{ name }}</a></h4>
					
					{% 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 %}
					{% 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 %}
					{% if show_description and description %}
						<p>{{ description }}</p>
					{% endif %}
					
					{% 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>
						<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>
					{% endif %}
					{% if  show_cart or show_compare or show_wishlist or show_quickview %}
						<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_wishlist %}
									<button type="button"  title="{{ button_wishlist }}" class="button-wishlist" onclick="wishlist.add('{{ product_id }}');"><span>{{ button_wishlist }}</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_quickview %}
									<button type="button" title="{{ button_quickview }}" class="button-quickview" onclick="ptquickview.ajaxView('{{ href }}')"><span>{{ button_quickview }}</span></button>
								{% endif %}
							</div>
						</div>
					{% endif %}
				</div>
				
			</div>
		</div>
	</div>
{% endif %}
