{% extends 'base.html' %}
{% load bootstrap3 %}
{% load shop_tags %}

{% block content %}

<div class="row">
  <div class="col-md-12">
    Categories:
    {% for category in categories %}
    <a href="{% url 'shop:index' %}?category={{category.slug}}"
       class="label label-{% if category.slug == current_category %}primary{% else %}default{% endif %}">
        {{category}}
    </a>&nbsp;
    {% endfor %}
  </div>
</div>

<hr />

<div class="row">

  {% for product in products %}

  <a href="{% url 'shop:product_detail' slug=product.slug %}">
    <div class="col-sm-4 col-lg-4 col-md-4">
      <div class="thumbnail">
        <img src="http://placehold.it/320x200" alt="">
        <div class="caption">
          <h5>{{ product.category.name }}</h5>

          <h4>
            {{ product.name }}
          </h4>

          <h4>
            Price: {{ product.price|currency }}
          </h4>

          <p>
            {{ product.description }}
          </p>

          <small>
            <strong>Availability:</strong><br/>
            {{ product.available_in.lower|date:"Y-m-d H:i" }}
            {% if product.available_in.upper %}
            - {{ product.available_in.upper|date:"Y-m-d H:i" }}
            {% endif %}
          </small>
        </div>
      </div>
    </div>
  </a>

  {% endfor %}

</div>


</table>
{% endblock %}