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

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

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

{% block content %}
<div id="main">
{% if count > 0 %}	
	<div>{{ count }} results found</div>
    <ul>
    	{% for result in results %}
      <li class="{% cycle 'thumbnail' 'thumbnail' 'thumbnail' 'thumbnail' 'thumbnail last' %}">
           <a href="/shop/products/{{ product.handle }}/">
                <div class="thumbnail-wrapper">
          {% thumbnail result.image.image "108x108" as im %}
    		<img src="{{ im.url }}"  alt="{{ result.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>{{ result.title }}</span></a></br>
      			$ {{ result.price }}</p>
    		</li>
    
    	{% endfor %}
	  </ul>
	  {% else %}
	  {% include 'shared/search-bar.html' %}
	<div class="region "role="region">
	  <p>Your search: <em>{{keywords}}</em> </p>
	  <h3>Sorry! {{ count }} result found</h3>
	  <p>Try again by typing a keyword or a style #</p>
	  <!--SEARCH BAR-->
	  	<form id="searchbar" class="alone" action="/shop/search/" method="get">
	  		<div>
	  			<a class="cta-button" href="#" onclick="searchbar.submit()"><span></span></a>
	  		
	  		
	  			<input type="text" name="keywords" value="{{ query|escape }}" placeholder="Search" />
	  		</div>
	  	</form>
	  <!--END SEARCH BAR-->
	</div>
{% endif %}
	<!-- Pagination -->
		{% if paginator.num_pages > 1 %}
	
			{% if previous %}
				<a href="/shop/search/?keywords={{keywords}}&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/search/?keywords={{keywords}}&page={{ page }}">{{ page }}</a>
					{% else %}
						<a href="/shop/search/?keywords={{keywords}}&page={{ page }}">{{ page }}</a>
					{% endif %}
				{% endif %}
			{% endfor %}
			{% if next %}
					<a href="/shop/search/?keywords={{keywords}}&page={{ next }}">Next</a>
			{% endif %}
		{% endif %}
</div>
{%  endblock %}