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

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

{%block body-id%}product-details{% endblock %}
{% block content %}

<!--MAIN-->
    <div id="main" role="main">
        <aside>
			{% thumbnail image.image "247x400" as im %}
			    <img src="{{ im.url }}"  alt="{{ image.product_name }}" width="{{ im.width }}" height="{{ im.height }}">
			{% empty %}
				<img src="{{ MEDIA_URL }}/upload/image_not_available_1.gif"  alt="Not available" width="247" height="250">
			{% endthumbnail %}
        </aside>
      <!--Main Content Region-->
		<div role="region"><!--For clarity, region could have an id-->
			<article role="article">
			<h2 class="sub-title">
			{% for collection in collections %}
				{{ collection.name }} 
			{% endfor %}
			</h2>
			
           <h1>{{ product.title}}</h1>
           <p class="sku">Syle # : {{ product.style_number }}</p>
           <h2>Suggested price</h2>
           <p>${{ product.price }}</p>
           
			{% if product.shell_fabric %}
				<h2>Shell fabric</h2>
				<p>{{ product.shell_fabric }}</p>
			{% endif %}

			{% if product.insulation %}
				<h2>Insulation</h2>
				<p>{{ product.insulation }}</p>
			{% endif %}

			{% if product.features %}
				<h2>Features</h2>
				<p>{{ product.features }}</p>
			{% endif %}

			{% if product.content %}
				<h2>Contents</h2>
				<p>{{ product.content }}</p>
			{% endif %}

			{% if technologies %}
           		<h2>Technology</h2>
				{%  for technology in technologies %}
					<div class="techno-img-wrapper">
						<img src="{{ MEDIA_URL }}{{ technology.image }}" alt="{{ technology.technologie_name }}" width="32" />
						<span>{{ technology.technologie_name }}</span>
					</div>	
				{% endfor %}
			{% endif %}

			<h2>Size</h2>
			<p><span id="size">
				{% for size in sizes %}
					{{ size.name }}
				{% endfor %}
			</span> <a href="http://"><span>View size chart</span></a></p>

			<h2>Colors</h2>
			<img src="{{ MEDIA_URL }}{{ product.color_image }}" alt="Product colors" />
			
			{% for related in related_list %}
				{% for item in related.category.all %}
					<a href="/shop/products/{{ related.handle }}/">{{ item.parent }}</a>
				{% endfor %}
			{% endfor %}
           
         </article>
        </div>
      <!--End Main Content Region-->
    </div>
<!--END MAIN-->

{% endblock %}


{% block menu %}  <!-- Menu -->

	{%  for elt in categories %}
		{% if not elt.parent %}
			<div style="float:left;border:1px solid black;">
				<div style="display:block;float:left;width:120px;">
					<img src="{{ MEDIA_URL }}{{ elt.image }}" alt="{{ elt.name }}" width="80%" height="15%" />
				</div>
				<div style="display:block;float:left;">
					<h3>{{ elt.name }}</h3>
					{%  for sub_elt in categories %}
						{% if sub_elt.parent.name == elt.name %}
							<a style="display:block;color:red" href="/shop/{{ sub_elt.slug }}">{{ sub_elt.name }}</a>
						{% endif %}
					{% endfor %}
				</div>
			</div>
		{% endif %}
	{% endfor %}

{%  endblock %}