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

{% block title %}
Shop | {{ block.super }}
{% endblock %}

{% 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 class="pull-right">Price</th>
        </tr>
      </thead>
      <tbody>

      {% for product in products %}

        {% ifchanged product.category %}
        <tr style="background-color: #cccccc">
          <td colspan="2">
            <strong>
              {{ product.category }}
            </strong>
          </td>
          </td>
        </tr>
        {% endifchanged %}

        <tr>
          <td>
            <a href="{% url 'shop:product_detail' slug=product.slug %}">
            {{ product.name }}
            </a>
          </td>
          <td>
            <div class="pull-right">
              {{ product.price|currency }}
            </div>
          </td>
        </tr>
      {% empty %}
      <tr>
        <td colspan="2">
            Sorry no products found.
        </td>
      </tr>
      {% endfor %}
      </tbody>
    </table>
    <p class="lead text-center">All prices mentioned include 25% Danish VAT!</p>
  </div>
</div>

{% endblock %}