{{ header }}
<div id="product-search" class="container">
	<ul class="breadcrumb">
		{% for breadcrumb in breadcrumbs %}
			<li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
		{% endfor %}
	</ul>
	<div class="row">
		{{ column_left }}
		{% if column_left and column_right %}
			{%set class = 'col-sm-6' %}
		{% elseif column_left or column_right %}
			{%set class = 'col-sm-9' %}
		{% else %}
			{%set class = 'col-sm-12' %}
		{% endif %}
		<div id="content" class="{{ class }}">{{ content_top }}
			<h1>{{ heading_title }}</h1>
			<label class="control-label" for="input-search">{{ entry_search }}</label>
			<div class="row">
				<div class="col-sm-4">
					<input type="text" name="search" value="{{ search }}" placeholder="{{ text_keyword }}" id="input-search" class="form-control" />
				</div>
				<div class="col-sm-3">
					<select name="category_id" class="form-control">
						<option value="0">
							{{ text_category }}
						</option>
						{% for category_1 in categories %}
							{% if category_1.category_id == category_id %}
								<option value="{{ category_1.category_id }}" selected="selected">{{ category_1.name }}</option>
							{% else %}
								<option value="{{ category_1.category_id }}">{{ category_1.name }}</option>
							{% endif %}
							{% for category_2 in category_1.children %}
								{% if category_2.category_id == category_id %}
									<option value="{{ category_2.category_id }}" selected="selected">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_2.name }}</option>
								{% else %}
									<option value="{{ category_2.category_id }}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_2.name }}</option>
								{% endif %}
								{% for category_3 in category_2.children %}
									{% if category_3.category_id == category_id %}
										<option value="{{ category_3.category_id }}" selected="selected">
											&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_3.name }}
										</option>
									{% else %}
										<option value="{{ category_3.category_id }}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ category_3.name }}</option>
									{% endif %}
								{% endfor %}
							{% endfor %}
						{% endfor %}
					</select>
				</div>
				<div class="col-sm-3">
					<label class="checkbox-inline">
						{% if sub_category %}
							<input type="checkbox" name="sub_category" value="1" checked="checked" />
						{% else %}
							<input type="checkbox" name="sub_category" value="1" />
						{% endif %}
						{{ text_sub_category }}
					</label>
				</div>
			</div>
			<p>
				<br>
				<label class="checkbox-inline">
					{% if description %}
						<input type="checkbox" name="description" value="1" id="description" checked="checked" />
					{% else %}
						<input type="checkbox" name="description" value="1" id="description" />
					{% endif %}
					{{ entry_description }}
				</label>
				<br><br>
			</p>
			<input type="button" value="{{ button_search }}" id="button-search" class="btn btn-primary" />
			<br>
			<br>
			{% if products %}
				<div class="product-filter clearfix">
					<div class="product-filter_elem">
						<div class="button-view">
							<button type="button" id="list-view" data-toggle="tooltip" title="{{ button_list }}">
								<i class="material-design-view12"></i>
							</button>
							<button type="button" id="grid-view" data-toggle="tooltip" title="{{ button_grid }}">
								<i class="material-design-two375"></i>
							</button>
						</div>
					</div>
					<div class="product-filter_elem sort">
						<label class="control-label" for="input-sort">
							{{ text_sort }}
						</label>
						<select id="input-sort" onchange="location = this.value;">
							{% for sorts in sorts %}
								{% if sorts.value == '%s-%s'|format(sort, order) %}
									<option value="{{ sorts['href'] }}" selected="selected">
										{{ sorts['text'] }}
									</option>
								{% else %}
									<option value="{{ sorts['href'] }}">
										{{ sorts['text'] }}
									</option>
								{% endif %}
							{% endfor %}
						</select>
					</div>
					<div class="product-filter_elem show pull-right">
						<label class="control-label" for="input-limit">
							{{ text_limit }}
						</label>
						<select id="input-limit" onchange="location = this.value;">
							{% for limits in limits %}
								{% if (limits['value'] == limit) %}
									<option value="{{ limits['href'] }}" selected="selected">
										{{ limits['text'] }}
									</option>
								{% else %}
									<option value="{{ limits['href'] }}">
										{{ limits['text'] }}
									</option>
								{% endif %}
							{% endfor %}
						</select>
					</div>
					<div class="product-filter_elem">
						<div class="button-view">
							<a href="{{ compare }}" id="compare-total" class="compare-total material-design-shuffle24" data-toggle="tooltip" title="{{ text_compare }}">
								<span>{{ text_compare }}</span>
							</a>
						</div>
					</div>
				</div>
				<div class="row">
					{%set option_index = 5000 %}
					{% for product in products %}
						<div class="product-layout product-list">
							<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 product.special %}
											{% 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 %}
									<p 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 %}
									</p>
								{% endif %}
								<div class="name"><a href="{{ product.href }}">{{ product.name }}</a></div>
								<p>{{ product.description }}</p>
								<div class="cart-button">
									<button type="button" class="product-btn" onclick="wishlist.add('{{ product.product_id }}');"><i class="fa fa-heart"></i> {{ button_wishlist }}</button>
									<button type="button" class="product-btn" onclick="compare.add('{{ product.product_id }}');"><i class="fa fa-exchange"></i> {{ button_compare }}</button>
								</div>
								<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>								
								{% 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 %}
							</div>
						</div>
						{%set option_index = option_index + 1 %}
					{% endfor %}
				</div>
				<div class="row">
					<div class="col-sm-6 text-left">{{ pagination }}</div>
					<div class="col-sm-6 text-right">{{ results }}</div>
				</div>
			{% else %}
				<p>{{ text_empty }}</p>
			{% endif %}
			{{ content_bottom }}
		</div>
		{{ column_right }}
	</div>
</div>
<script type="text/javascript"><!--
	$('#button-search').bind('click', function() {
		url = 'index.php?route=product/search';

		var search = $('#content input[name=\'search\']').prop('value');

		if (search) {
			url += '&search=' + encodeURIComponent(search);
		}

		var category_id = $('#content select[name=\'category_id\']').prop('value');

		if (category_id > 0) {
			url += '&category_id=' + encodeURIComponent(category_id);
		}

		var sub_category = $('#content input[name=\'sub_category\']:checked').prop('value');

		if (sub_category) {
			url += '&sub_category=true';
		}

		var filter_description = $('#content input[name=\'description\']:checked').prop('value');

		if (filter_description) {
			url += '&description=true';
		}

		location = url;
	});

	$('#content input[name=\'search\']').bind('keydown', function(e) {
		if (e.keyCode == 13) {
			$('#button-search').trigger('click');
		}
	});

	$('select[name=\'category_id\']').on('change', function() {
		if (this.value == '0') {
			$('input[name=\'sub_category\']').prop('disabled', true);
		} else {
			$('input[name=\'sub_category\']').prop('disabled', false);
		}
	});

	$('select[name=\'category_id\']').trigger('change');
--></script>
{{ footer }}