<div class="box latest">
	<div class="box-heading">
		<h4>{{ heading_title }}</h4>
	</div>
	<div class="row">
		{%set option_index = 3000 %}
		{% for product in products %}
			<div class="product-layout col-lg-4 col-md-4 col-sm-4 col-xs-12">
				<div class="product-thumb transition {% if product.options and product.options|length <= 3 %} {{ 'options' }} {% endif %}">
					{% if product.options and product.options|length <= 3 %}
						<div class="product-option-wrap">
							<div class="product-options form-horizontal">
								<div class="options">
									<a class="ajax-overlay_close" href='#'></a>
									<input type="text" name="product_id" value="{{ product.product_id }}" class="form-control hidden"/>
									<h3>{{ text_option }}</h3>
									{% for option in product.options %}
										{% if option.type == 'select' %}
											<div class="form-group{% if option.required %} required {% endif %}">
												<label class="control-label" for="input-option{{ option.product_option_id ~ module ~ option_index }}">
													{{ option.name }}
												</label>
												<select name="option[{{ option.product_option_id }}]" id="input-option{{ option.product_option_id ~ module ~ option_index }}" class="form-control">
													<option value="">{{ text_select }}</option>
													{% for option_value in option.product_option_value %}
														<option value="{{ option_value.product_option_value_id }}">{{ option_value.name }}
															{% if option_value.price %}
																({{ option_value.price_prefix }}{{ option_value.price }})
															{% endif %}
														</option>
													{% endfor %}
												</select>
											</div>
										{% endif %}
										{% if option.type == 'radio' %}
											<div class="form-group{% if option.required %} required {% endif %}">
												<label class="control-label">{{ option.name }}</label>
												<div id="input-option{{ option.product_option_id ~ module ~ option_index }}">
													{% for option_value in option.product_option_value %}
														<div class="radio">
															<label>
																<input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" />
																{% if option_value.image %}
																	<img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" />
																{% endif %}
																{{ option_value.name }}
																{% if option_value.price %}
																	({{ option_value.price_prefix }}{{ option_value.price }})
																{% endif %}
															</label>
														</div>
													{% endfor %}
												</div>
											</div>
										{% endif %}
										{% if option.type == 'checkbox' %}
											<div class="form-group{% if option.required %} required {% endif %}">
												<label class="control-label">{{ option.name }}</label>
												<div id="input-option{{ option.product_option_id ~ module ~ option_index }}">
													{% for option_value in option.product_option_value %}
														<div class="checkbox">
															<label>
																<input type="checkbox" name="option[{{ option.product_option_id }}][]" value="{{ option_value.product_option_value_id }}" />
																{% if option_value.image %}
																	<img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" />
																{% endif %}
																{{ option_value.name }}
																{% if option_value.price %}
																	({{ option_value.price_prefix }}{{ option_value.price }})
																{% endif %}
															</label>
														</div>
													{% endfor %}
												</div>
											</div>
										{% endif %}
										{% if option.type == 'text' %}
											<div class="form-group{% if option.required %} required {% endif %}">
												<label class="control-label" for="input-option{{ option.product_option_id ~ module ~ option_index }}">
													{{ option.name }}
												</label>
												<input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" placeholder="{{ option.name }}" id="input-option{{ option.product_option_id ~ module ~ option_index }}" class="form-control" />
											</div>
										{% endif %}
										{% if option.type == 'textarea' %}
											<div class="form-group{% if option.required %} required {% endif %}">
												<label class="control-label" for="input-option{{ option.product_option_id ~ module ~ option_index }}">{{ option.name }}</label>
												<textarea name="option[{{ option.product_option_id }}]" rows="5" placeholder="{{ option.name }}" id="input-option{{ option.product_option_id ~ module ~ option_index }}" class="form-control">{{ option.value }}</textarea>
											</div>
										{% endif %}
										{% if option.type == 'file' %}
											<div class="form-group{% if option.required %} required {% endif %}">
												<label class="control-label">{{ option.name }}</label>
												<button type="button" id="button-upload{{ option.product_option_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default btn-block"><i class="fa fa-upload"></i> {{ button_upload }}</button>
												<input type="hidden" name="option[{{ option.product_option_id }}]" value="" id="input-option{{ option.product_option_id ~ module ~ option_index }}" />
											</div>
										{% endif %}
										{% if option.type == 'date' %}
											<div class="form-group{% if option.required %} required {% endif %}">
												<label class="control-label" for="input-option{{ option.product_option_id ~ module ~ option_index }}">{{ option.name }}</label>
												<div class="input-group date">
													<input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD" id="input-option{{ option.product_option_id ~ module ~ option_index }}" class="form-control" />
													<span class="input-group-btn">
														<button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
													</span>
												</div>
											</div>
										{% endif %}
										{% if option.type == 'datetime' %}
											<div class="form-group{% if option.required %} required {% endif %}">
												<label class="control-label" for="input-option{{ option.product_option_id ~ module ~ option_index }}">{{ option.name }}</label>
												<div class="input-group datetime">
													<input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD HH:mm" id="input-option{{ option.product_option_id ~ module ~ option_index }}" class="form-control" />
													<span class="input-group-btn">
														<button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
													</span>
												</div>
											</div>
										{% endif %}
										{% if option.type == 'time' %}
											<div class="form-group{% if option.required %} required {% endif %}">
												<label class="control-label" for="input-option{{ option.product_option_id ~ module ~ option_index }}">{{ option.name }}</label>
												<div class="input-group time">
													<input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="HH:mm" id="input-option{{ option.product_option_id ~ module ~ option_index }}" class="form-control" />
													<span class="input-group-btn">
														<button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
													</span>
												</div>
											</div>
										{% endif %}
									{% endfor %}
									<button type="button" class="btn-primary" onclick="cart.addPopup($(this), {{ product.product_id }});"><i class="fa fa-shopping-cart"></i> <span>{{ button_cart }}</span></button>
								</div>
							</div>
						</div>
					{% endif %}
					
					<div class="image">
						<a class="lazy" href="{{ product.href }}" style="padding-bottom: {{ product['img-height'] / product['img-width'] * 100 ~ '%' }}">
							{% if product.additional_thumb %}
								<img width="{{ product['img-width'] }}" height="{{ product['img-height'] }}" alt="{{ product['name'] }}" title="{{ product['name'] }}" class="img-primary" data-src="{{ product['thumb'] }}" src="#"/>
								<img width="{{ product['img-width'] }}" height="{{ product['img-height'] }}" alt="{{ product['name'] }}" title="{{ product['name'] }}" class="img-secondary" data-src="{{ product['additional_thumb'] }}" src="#"/>
							{% else %}
								<img width="{{ product['img-width'] }}" height="{{ product['img-height'] }}" alt="{{ product['name'] }}" title="{{ product['name'] }}" class="img" data-src="{{ product['thumb'] }}" src="#"/>
							{% endif %}
						</a>
						<div class="img-button-group">							
							<button type="button" class="btn-icon" data-toggle="tooltip" title="{{ button_wishlist }}" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i></button>
							<button type="button" class="btn-icon" data-toggle="tooltip" title="{{ button_compare }}" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i></button>
						</div>
						{% if product.rating %}
							<div class="rating">
								{% for i in 1..5 %}
									{% if product.rating < i %}
										<span class="fa fa-stack"><i class="material-design-bookmark45"></i></span>
									{% else %}
										<span class="fa fa-stack"><i class="material-design-mark1 star"></i></span>
									{% endif %}
								{% endfor %}
							</div>
						{% endif %}
						{% if product.price %}							
							{% if not product.special %}							
							{% else %}								
								{% if (label_sale) %}
									<div class="sale">
										<span>{{ text_sale }}</span>
									</div>
								{% endif %}
								{% if (label_discount) %}
									<div class="discount">
										<span>{{ product.label_discount }}</span>
									</div>
								{% endif %}
							{% endif %}
						{% endif %}
						{% if (product.label_new) %}
							<div class="new-pr"><span>{{ text_new }}</span></div>
						{% endif %}
					</div>
					{% if product.price %}
						<span 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 %}
						</span>
					{% endif %}
					<div class="name"><a href="{{ product.href }}">{{ product.name }}</a></div>
					<p class="description">{{ product.description }}</p>
					<div class="button-group">	
						<button type="button" class="btn-primary" {% if (product.options|length > 3) %} onclick="cart.add('{{ product.product_id }}');" {% else %} onclick="ajaxAdd($(this),{{ product.product_id }});" {% endif %}> <i class="fa fa-shopping-cart"></i> <span>{{ button_cart }}</span> </button>
						<button class="btn quickview" type="button" data-rel="details" data-product="{{ product['product_id'] }}">{{ text_quick }}</button>
					</div>
				</div>
			</div>
			{%set option_index = option_index + 1 %}
		{% endfor %}
	</div>
</div>