{% extends 'base.html' %}
{% load thumbnail %}

{% block shop-menu %}
	{% include 'shared/shop-menu.html' %}
{% endblock %}

{% block body-id %}products-list{% endblock %}

{% block content %} 
  {% include 'shared/search-bar.html' %}
<div id="main">
  <!-- Product listing -->
	<form id="sorting" class="clearfix" action="." method="post"> <!-- Sorting form -->
		{% csrf_token %}
		<fieldset>
		  <label for="collect">Display:</label>
			<select id="collect" name="collect" role="listbox" aria-multiselectable="false" onchange="sorting.submit()">
				<option value="null">ALL CATEGORIES</option>
				{% for collection in collections %}
					<option value="{{ collection.slug }}">{{ collection.name }}</option>
				{% endfor %}
			</select>
		</fieldset>
		<fieldset>
		  <label for="sort">Sort:</label>
			<select id="sort" name="sort" role="listbox" aria-multiselectable="false" onchange="sorting.submit()">
				<option value="asc">$-$$$</option>
				<option value="desc">$$$-$</option>
			</select>
		</fieldset>			
	</form>
	<div style="color:red;">Default : {{ default_sort }} - {{ default_collection }}</div>
	<ul>
	{%  for product in products %}
		
		<li class="{% cycle 'thumbnail clearfix' 'thumbnail clearfix' 'thumbnail clearfix' 'thumbnail clearfix' 'thumbnail last' %}">
				<a href="/shop/products/{{ product.handle }}/">
		      <div class="thumbnail-wrapper">
					{% thumbnail product.image.image "108x108" as im %}
					    <img src="{{ im.url }}"  alt="{{ product.image.product_name }}" width="{{ im.width }}" height="{{ im.height }}">
					{% empty %}
						<img src="{{ MEDIA_URL }}/upload/image_not_available_1.gif"  alt="Not available" width="108" height="108">
					{% endthumbnail %}
			    </div>
			</a>
			<p class="caption"><a href="/shop/products/{{ product.handle }}/"><span>{{ product.title }}</span></a></br>
			$ {{ product.price }}</p>
		</li>

	{%  endfor %}
	</ul>

	<!-- Pagination -->
		{% if paginator.num_pages > 1 %}
	
			{% if previous %}
				<a href="/shop/{{select_category}}/?page={{ previous }}">Previous</a>
			{% endif %}
			{% for page in paginator.page_range %}
				{% if page < max_page and page > min_page %}
					{% if current == page %}
						<a style="font-size:16px;" href="/shop/{{select_category}}/?page={{page}}">{{ page }}</a>
					{% else %}
						<a href="/shop/{{select_category}}/?page={{page}}">{{ page }}</a>
					{% endif %}
				{% endif %}
			{% endfor %}
			{% if next %}
					<a href="/shop/{{select_category}}/?page={{ next }}">Next</a>
			{% endif %}
		{% endif %}
	
	<!-- THIS DISGRACE NEEDS TO GTFO -- flemieux~ -->
	<br style="clear: both;" />
</div>
{%  endblock %}