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

{% block javascript %}
	{% include "js/products.js" %}
{% endblock %}

{% block css %}
	{% include "css/products.css" %}
{% endblock %}

{% block title %}
	Products
{% endblock %}

{% block content %}
	<div class="layout-wrapper layout-wrapper-background">
		<div class="web-content" id="content-products">
			
			<div class="layout-main-section">
				<h1 class="products-category"></h1>
				<div class="products-search" style="margin-bottom: 15px;">
					<input name="products-search" />
					<button class="btn" style="margin-left: 7px">Search</button>
				</div>
				<div id="products-list">
					<!-- product list will be generated dynamically -->
				</div>
			</div>
			
			<div class="layout-side-section">
				<h3>Categories</h3>
				<div class="more-categories"></div>
			</div>
			<div style="clear: both"></div>
		</div>
	</div>
{% endblock %}