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

{% extends "base.html" %}

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

{% block main %}

  <aside class="g-Aside">
    <form action="/" method="GET" class="g-Payments__Filters">
      <label class="g-Form__Label">
        Fréquence
        <select name="frequency" class="g-Form__Select">
          <option value="Punctual" {% if query.frequency == "Punctual" %} selected {% endif %}>
            Ponctuelle
          </option>
          <option value="Monthly" {% if query.frequency == "Monthly" %} selected {% endif %}>
            Mensuelle
          </option>
        </select>
      </label>

      <label class="g-Form__Label">
        Recherche
        <input
          type="search"
          name="search"
          class="g-Form__Input"
          value="{{ query.search }}"
        />
      </label>

      <label class="g-Form__Label">
        Catégorie
        <select name="category" class="g-Form__Select">
          <option selected disabled hidden></option>
          {% for category in categories %}
            <option
              value="{{ category.id }}"
              style="color: {{ category.color }}"
              {% if category.id == query.category %} selected {% endif %}
            >
              {{ category.name }}
            </option>
          {% endfor %}
        </select>
      </label>

      <input type="submit" class="g-Button__Validate" value="Rechercher">
    </form>
  </aside>

  <section class="g-Section">
    {% if not payments %}

      <div class="g-Payments__NoResults">
        Aucun paiement ne correspond à votre recherche.
      </div>

      <a
        class="g-Button__Validate g-Payments__New"
        href="/payment{{ payments_params(
          page=query.page,
          search=query.search,
          frequency=query.frequency
        ) }}"
      >
        Nouveau
      </a>

    {% else %}

      <div class="g-Paragraph">
        {{ count | numeric }} paiement{{ count | pluralize }} comptabilisant {{ total_cost | euros() }}.
      </div>

      <a
        class="g-Paragraph g-Button__Validate g-Payments__New"
        href="/payment{{ payments_params(
          page=query.page,
          search=query.search,
          frequency=query.frequency
        ) }}"
      >
        Ajouter un paiement
      </a>

      <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,
              search=query.search,
              frequency=query.frequency
            ) }}"
          >
            <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">
              <span style="color: {{ payment.category_color }}">
                {{ payment.category_name }}
              </span>
            </span>
            {% if query.frequency != "Monthly" %}
              <span class="g-Table__Cell">
                {{ payment.date }}
              </span>
            {% endif %}
          </a>
        {% endfor %}
      </div>

      {{ paging::paging(
        url="/" ~ payments_params(
          search=query.search,
          frequency=query.frequency,
          category=query.category
        ),
        page=page,
        max_page=max_page
      ) }}

    {% endif %}
  </section>

{% endblock main %}