{% 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 }}" 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 }}" 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_cart or show_wishlist or show_compare 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_quickview %}
								<button type="button" title="{{ button_quickview }}" class="button-quickview" onclick="ptquickview.ajaxView('{{ href }}')"><span>{{ button_quickview }}</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 %}
						</div>
					</div>
				{% endif %}
			</div>
			<div class="caption">
				
				{% if show_label and (special or is_new) %}
					<div class="box-label">
						{% if special %}
							<div><span class="pro-label sale">{{ text_sale }}</span></div>
						{% endif %}
						{% if is_new %}
							<div><span class="pro-label new">{{ text_new }}</span></div>
						{% endif %}
					</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: 12px; height: 12px;
																			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 %}
				
				<h4><a href="{{ href }}">{{ name }}</a></h4>
				{% 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 %} -->
				{% 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_description and description %}
					<p class="product-description">{{ description }}</p>
				{% endif %}
				<a class="button-view-more" href="{{ href }}" target="_blank">{{ text_viewmore }}</a>
				{% if show_countdown and date_end %}
					<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 %}
			</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 %}">
				{% if show_label and (special or is_new) %}
					<div class="box-label">
						{% if special %}
							<div><span class="pro-label sale">{{ text_sale }}</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 {% if lazy_load %} data-src="{{ rotate_image }}" width="{{ img_width }}" height="{{ img_height }}" {% else %} src="{{ rotate_image }}" {% endif %}  alt="{{ name }}" 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 }}" 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 %}
			</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: 12px; height: 12px;
																			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 %}
				
				<h4><a href="{{ href }}">{{ name }}</a></h4>
				{% 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 %}
				{% 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_description and description %}
					<p class="product-description">{{ description }}</p>
				{% endif %}
				{% if show_countdown and date_end %}
					<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_wishlist or show_compare 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 %}

{% if layout_type == "other" %}
    {# Other content #}
	<div class="other-style">
		<div class="product-item">	
			
			<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">{{ text_sale }}</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 {% if lazy_load %} data-src="{{ rotate_image }}" width="{{ img_width }}" height="{{ img_height }}" {% else %} src="{{ rotate_image }}" {% endif %}  alt="{{ name }}" 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 }}" 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 %}
			</div>
			<div class="caption">
				{% 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: 12px; height: 12px;
																			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 %}
				<h4><a href="{{ href }}">{{ name }}</a></h4>
				{% 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 %} -->
				{% 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_description and description %}
					<p>{{ description }}</p>
				{% endif %}
				{% if show_countdown and date_end %}
					<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_wishlist or show_compare 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_quickview %}
								<button type="button" title="{{ button_quickview }}" class="button-quickview" onclick="ptquickview.ajaxView('{{ href }}')"><span>{{ button_quickview }}</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 %}
						</div>
					</div>
				{% endif %}
			</div>
		</div>
	</div>
{% endif %}
