{% extends "shopit/base.html" %}
{% load i18n shopit_tags %}

{% block page_title %}{% trans "Products" %}{% endblock %}

{% block content %}
  <div class="row">
    <div class="col-md-3">
      {# Filter by attributes #}
      {% get_attributes as attributes %}
      {% if attributes %}
        <div class="btn-group-vertical mb-3 w-100">
          <h5>{% trans "Attributes" %}</h5>
          {% for attr in attributes %}
            <div class="btn-group">
              <button class="btn btn-secondary dropdown-toggle text-left" data-toggle="dropdown">{{ attr }}</button>
              <div class="dropdown-menu">
                {% for choice in attr.get_choices %}
                  <a href="?{% query_transform attr.code choice.value %}" class="dropdown-item">{{ choice }}</a>
                {% endfor %}
              </div>
            </div>
          {% endfor %}
        </div>
      {% endif %}

      {# Filter by price #}
      {% get_price_steps 3 as price_steps %}
      {% if price_steps %}
        <h5>{% trans "Price from / price to" %}</h5>
        <div class="btn-group w-100 mb-3">
          <div class="btn-group w-50">
            <button class="btn btn-secondary dropdown-toggle w-100" data-toggle="dropdown">
              {% if request.GET.pf %}{{ request.GET.pf|moneyformat }}{% else %}{{ price_steps|first }}{% endif %}
            </button>
            <div class="dropdown-menu">
              {% for step in price_steps %}
                <a href="?{% query_transform 'pf' step.as_decimal %}" class="dropdown-item">{{ step }}</a>
              {% endfor %}
            </div>
          </div>

          <div class="btn-group w-50">
            <button class="btn btn-secondary dropdown-toggle w-100" data-toggle="dropdown">
              {% if request.GET.pt %}{{ request.GET.pt|moneyformat }}{% else %}{{ price_steps|last }}{% endif %}
            </button>
            <div class="dropdown-menu">
              {% for step in price_steps %}
                <a href="?{% query_transform 'pt' step.as_decimal %}" class="dropdown-item">{{ step }}</a>
              {% endfor %}
            </div>
          </div>
        </div>
      {% endif %}
    </div>

    <section class="col-md-9">
      <div class="card-group">
        {% for product in product_list %}
          <div class="card col-md-4">
            <div class="card-block">
              <h4 class="card-title">{{ product }}</h4>
              <p class="card-text">{{ product.caption|linebreaksbr }}</p>
              <a href="{{ product.get_absolute_url }}" class="btn btn-primary">{% trans "Details" %}</a>
            </div>
          </div>
        {% empty %}
          <p>{% trans "No products." %}</p>
        {% endfor %}
      </div>
    </section>
  </div>
{% endblock %}
