{% extends "base.html" %}

{% block title %}
  Paiement {{ id }}
{% endblock title %}

{% block main %}

  <section class="g-Section">
    <p class="g-Paragraph">
      <a
        class="g-Link g-Media__Large"
        href="/{{ 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
        ) }}"
      >
        Retour aux paiements
      </a>
    </p>

    {% if error %}
      <div class="g-Form__Error">{{ error }}</div>
    {% endif %}

    {% if not payment %}

      Le paiement n’a pas été trouvé.

    {% else %}

      <form
        class="g-Form"
        action="/payment/{{ payment.id }}/update{{ 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,
          highlight=query.highlight
        ) }}"
        method="POST"
      >
        <h1 class="g-H1">Modification</h1>

        <label class="g-Form__Label">
          Nom
          <input
            name="name"
            class="g-Form__Input"
            value="{{ form.name | default(value=payment.name) }}"
            required
          />
        </label>

        <label class="g-Form__Label">
          Coût
          <input
            name="cost"
            type="number"
            class="g-Form__Input"
            value="{{ form.cost | default(value=payment.cost) }}"
            required
          />
        </label>

        {% set user_id = form.user_id | default(value="" ~ payment.user_id) %}

        <label class="g-Form__Label">
          Personne
          <select name="user_id" class="g-Form__Select" required>
            {% for user in users %}
              <option
                value="{{ user.id }}"
                {% if "" ~ user.id == user_id %} selected {% endif %}
              >
                {{ user.name }}
              </option>
            {% endfor %}
          </select>
        </label>

        {% set category_id = form.category_id | default(value="" ~ payment.category_id) %}

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

        {% set date = form.date | default(value=payment.date) %}

        {% if payment.frequency == "Punctual" %}
          <label class="g-Form__Label">
            Date
            <input
              name="date"
              type="date"
              class="g-Form__Input"
              value="{{ date }}"
              required
            />
          </label>
        {% else %}
          <input
            name="date"
            type="hidden"
            value="{{ date }}"
          />
        {% endif %}

        <div>
          <input class="g-Button__Validate" type="submit" value="Modifier" />
        </div>
      </form>

      <form
        class="g-Form"
        action="/payment/{{ payment.id }}/delete{{ 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,
          highlight=query.highlight
        ) }}"
        method="POST"
      >
        <h1 class="g-H1">Suppression</h1>

        <label class="g-Form__Label">
          Veuillez recopier le nom du paiement : « {{ payment.name }} ».
          <input name="remove-input" class="g-Form__Input" data-name="{{ payment.name }}" />
        </label>


        <div>
          <input id="remove-button"class="g-Button__Danger" type="submit" value="Supprimer" disabled />
        </div>
      </form>

    {% endif %}
  </section>

{% endblock main %}