{% extends 'site.tmpl' %}

{% load thumbnail %}
{% load i18n %}
{% load category_extra %}

{% block _title %}{{ subcategory }} | {% trans 'Products ' %}| {{ block.super }}{% endblock %}

{% block breadcrumbs %}{% include 'includes/breadcrumbs.html' %}{% endblock %}

{% block content %}
	
<h1>{% trans 'Categories' %} {% if category %} {% trans 'in' %} '{{ category_name }}' {% endif %}</h1>
	
	<div class="category-list">
		<div class="row">
		{% for category in object_list %}
			{% if category.has_products %}
			<div class="tile" onclick="document.location.href = this.getElementsByTagName('a')[0].href;">
				<div class="desc">{{ category.name }}</div>
				<a href="{% url 'changer.c5.simplesjop:list-products' category.slug %}">
					{% thumbnail category.image "100x100" as im %}
							<img src="{{ im.url }}" style="margin: {{ im|margin:'100x100' }}" width="{{ im.width }}" height="{{ im.height }}" alt="{{ category.name }}" />
					{% endthumbnail %}
				</a>
			</div>
			{% endif %}
		{% if forloop.counter|divisibleby:4 %}
		</div>
		<div class="row">
		{% endif %}
		{% endfor %}
		</div>
	</div>
	<div class="clear"></div>
	
{% endblock %}