{% extends 'base.html' %}

{% load thumbnail %}

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

{% block content %}
  {% include 'shared/search-bar.html' %}
<!--MAIN-->
<div id="main">
  <aside>
    <h2>Products</h2>
    <p>Quickly redefine orthogonal platforms rather than enterprise-wide opportunities. Distinctively iterate optimal synergy for user friendly expertise. Monotonectally cultivate tactical total linkage through pandemic content. Compellingly predominate an expanded array of niches with backward-compatible bandwidth.</p>
   <ul>
    {% for technology in technologies %}
    <li class="techno-logo"><img class="grayscale" src="{{ MEDIA_URL }}{{ technology.image }}" alt="{{ technology.technologie_name }}"/></li>
    {% endfor %}
    </ul>
  </aside>
  <div class="region" role="region">
  {% if featured_products %}
    <h3 class="featured">Featured products</h3>
  {% endif %}
  <ul>
    {% for item in featured_products %}
		  <li class="{% cycle 'thumbnail' 'thumbnail' 'thumbnail last' %}">
		  <a href="/shop/products/{{ item.product.handle }}">
		  <div class="thumbnail-wrapper">
			{% thumbnail item.product.image.image "108x108" as im %}
			    <img src="{{ im.url }}"  alt="{{ item.product.title }}" width="{{ im.width }}" height="{{ im.height }}"/>
			{% empty %}
				<p>No image</p>
			{% endthumbnail %}
		</div>
		</a>
		<p class="caption">{{ item.product.title }}</br>
		$ {{ item.product.price }}</p>
		{% for elt in item.product.category.all %}
			<a href="/shop/{{ elt.slug }}/1/"><span>{{ elt.name }}</span></a>
		{% endfor %}
		</li>
	{% endfor %}
	</ul>
  </div>
	<div style="font-family:36px;color:red;">Test : {{ test }}</div>
</div>
{%  endblock %}
{% block page-scripts %}

{% endblock %}