{% extends 'base.html' %}

{% 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/products/{{ sub_elt.slug }}">{{ sub_elt.name }}</a>
						{% endif %}
					{% endfor %}
				</div>
			</div>
		{% endif %}
	{% endfor %}

{%  endblock %}

{% block content %}  <!-- Product details -->

	<ul>
	{%  for product in products %}
		
		<li style="width:200px;height:200px;float:left;">
			<div>
				<img src="{{ MEDIA_URL }}{{ product.image.image }}" alt="{{ product.image.product_name }}" />
			</div>
			<div>{{ product.title }}</div>
			<div>$ {{ product.price }}</div>
		</li>

	{%  endfor %}
	</ul>

	<!-- Pagination -->
		{% if paginator.num_pages > 1 %}
	
			{% if previous %}
				<a href="/shop/search/{{ 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/{{page}}">{{ page }}</a>
					{% else %}
						<a href="/shop/search/{{page}}">{{ page }}</a>
					{% endif %}
				{% endif %}
			{% endfor %}
			{% if next %}
					<a href="/shop/search/{{ next }}">Next</a>
			{% endif %}
		{% endif %}

{%  endblock %}