{% extends "html/page.html" %}

{% block title %}Product Search{% endblock %}

{% block content %}
<script>
$(document).ready(function() {
	var txt = get_url_arg("q");
	$(".search-results").html("Search results for: " + txt);

	window.start = 0;
	var get_list = function() {
		$.ajax({
			method: "GET",
			url: "server.py",
			dataType: "json",
			data: {
				cmd: "website.helpers.product.get_product_list",
				start: window.start,
				search: txt
			},
			dataType: "json",
			success: function(data) {
				render(data.message);
			}
		})
	}
	
	var render = function(data) {
		if(data.length) {
			var table = $("#search-list .table");
			if(!table.length)
				var table = $("<table class='table'>").appendTo("#search-list");
				
			$.each(data, function(i, d) {
				if(!d.web_short_description)
					d.web_short_description = "No description given."
				var $tr = $(repl('<tr>\
					<td style="width: 30%;">\
						<img class="product-image" style="width: 80%;" src="files/%(website_image)s">\
					</td>\
					<td>\
						<h4><a href="%(page_name)s">%(item_name)s</a></h4>\
						<p class="help">Item Code: %(name)s</p>\
						<p>%(web_short_description)s</p>\
					</td>\
				</tr>', d)).appendTo(table);
				
				if(!d.website_image) {
					$tr.find(".product-image").replaceWith("<div\
						style='background-color: #eee; padding: 40px; \
							width: 32px; font-size: 32px; color: #888;'>\
						<i class='icon-camera'></i></div>");
				}
			});
			
		}
		if(data.length < 10) {
			if(!table) {
				$(".more-btn")
					.replaceWith("<div class='alert'>No results found for your search.</div>");
			} else {
				$(".more-btn")
					.replaceWith("<div class='alert'>Nothing more to show.</div>");
			}
		} else {
			$(".more-btn").toggle(true)
		}
		window.start += (data.length || 0);
	}
	
	get_list();
	$(".more-btn .btn").click(function() {
		get_list()
	});
});
</script>

<div class="layout-wrapper layout-wrapper-background">
	<div class="web-content" id="content-product_search">
		<div class="layout-main" style="padding: 30px;">
			{% include 'html/product_search_box.html' %}
			<h3 class="search-results">Search Results</h3>
			<div id="search-list">
				
			</div>
			<div style="text-align: center;">
				<div class="more-btn" 
					style="display: none; text-align: center;">
					<button class="btn">More...</button>
				</div>
			</div>
		</div>
	</div>
</div>

{% endblock %}