{% import "macros/paging.html" as paging %}

{% extends "base.html" %}

{% block title %}
  Paiements
{% endblock title %}

{% block main %}

  <aside class="g-Aside">
    {% include "payment/table/search.html" %}
  </aside>

  <section class="g-Section">

    {% if not payments %}
      <div class="g-Table__NoResults">
        Aucun paiement ne correspond à votre recherche.
      </div>
    {% else %}
      <div class="g-Paragraph">
        {{ count | numeric }} paiement{{ count | pluralize }} comptabilisant {{ total_cost | euros() }}.
      </div>
    {% endif %}

    <a
      class="g-Paragraph g-Button__Validate"
      href="/payment{{ payments_params(
        page=query.page,
        frequency=query.frequency,
        name=query.name,
        cost=query.cost,
        user=query.user,
        category=query.category,
        start_date=query.start_date,
        end_date=query.end_date
      ) }}"
    >
      Ajouter un paiement
      {% if query.frequency != "Monthly" %} ponctuel {% else %} mensuel {% endif %}
    </a>

    <div class="g-ShowSearch">
      <button class="g-Button__Secondary">
        Rechercher
      </button>
    </div>

    {% if payments %}
      <div class="g-Table">
        <div class="g-Table__Row g-Table__Row--Header">
          <span class="g-Table__Cell">Nom</span>
          <span class="g-Table__Cell">Coût</span>
          <span class="g-Table__Cell">Personne</span>
          <span class="g-Media__Large g-Table__Cell">Catégorie</span>
          {% if query.frequency != "Monthly" %}
            <span class="g-Table__Cell">Date</span>
          {% endif %}
        </div>
        {% for payment in payments %}
          <a
            class="g-Table__Row {% if query.highlight == payment.id %} g-Table__Row--Highlight {% endif %}"
            href="/payment/{{ payment.id }}{{ payments_params(
              page=query.page,
              frequency=query.frequency,
              name=query.name,
              cost=query.cost,
              user=query.user,
              category=query.category,
              start_date=query.start_date,
              end_date=query.end_date
            ) }}"
          >
            <span class="g-Table__Cell">{{ payment.name }}</span>
            <span class="
              g-Table__Cell
              g-Table__NumericCell
              {% if payment.cost < 0 %} g-Payments__Refund {% endif %}
            ">
              {{ payment.cost | euros() }}
            </span>
            <span class="g-Table__Cell">{{ payment.user }}</span>
            <span 
              class="g-Table__Cell g-Media__Large"
              is="colored-category" 
              data-color="{{ payment.category_color }}"
            >
              {{ payment.category_name }}
            </span>
            {% if query.frequency != "Monthly" %}
              <span class="g-Table__Cell">
                {{ payment.date }}
              </span>
            {% endif %}
          </a>
        {% endfor %}
      </div>

      {{ paging::paging(
        url="/" ~ payments_params(
          frequency=query.frequency,
          name=query.name,
          cost=query.cost,
          user=query.user,
          category=query.category,
          start_date=query.start_date,
          end_date=query.end_date
        ),
        page=page,
        max_page=max_page
      ) }}
    {% endif %}
  </section>

{% endblock main %}