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

{% block shop_content %}

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

<hr />

<div class="row">
  <div class="col-md-12">

    <table class="table table-hover table-condensed table-striped">
      <thead>
        <tr>
          <th>Product</th>
          <th>Category</th>
          <th>Availability</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>

      {% for product in products %}
        <tr {% if not product.is_available %}class="mute"{% endif %}>
          <td>
            <a href="{% url 'shop:product_detail' slug=product.slug %}">
            {{ product.name }}
            </a>
          </td>
          <td>
            {{ product.category }}
          </td>
          <td>
              {{ 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 %}
          </td>
          <td>
            <div class="pull-right">
              {{ product.price|currency }}
            </div>
          </td>
        </tr>
      {% endfor %}

      </tbody>
    </table>

  </div>
</div>

{% endblock %}