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

{% extends "base.html" %}

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

{% block main %}

  <div class="g-Paragraph g-Payments__Header">
    <div class="g-Payments__FrequenciesAndSearch">
      <div class="g-Payments__Frequencies">
        {% if query.frequency == "Monthly" %}
          <a
            class="g-Payments__Frequency g-Link"
            href="/{{ payments_params(frequency="Punctual") }}"
          >
            Ponctuels
          </a>
          /
          <span class="g-Payments__Frequency g-Payments__Frequency--Selected">
            Mensuels
          </span>
        {% else %}
          <span class="g-Payments__Frequency g-Payments__Frequency--Selected">
            Ponctuels
          </span>
          /
          <a
            class="g-Payments__Frequency g-Link"
            href="/{{ payments_params(frequency="Monthly") }}"
          >
            Mensuels
          </a>
        {% endif %}
      </div>

      {% if query.frequency != "Monthly" %}
        <form action="/" method="GET" class="g-Payments__Search">
          <input
            type="search"
            name="search"
            class="g-Form__Input g-Payments__SearchInput"
            value="{{ query.search }}"
          />

          <label class="g-Form__Label">
            Catégorie
            <select name="category" class="g-Form__Select">
              <option disabled selected value></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__Search" value="🔍">
        </form>
      {% endif %}
    </div>

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

  {% if not payments %}

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

  {% else %}

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

    <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 %}
{% endblock main %}