{% extends "base.html" %}

{% block title %}
  Nouveau paiement
{% 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>

    <form class="g-Form" action="/payment/create" method="POST">
      <h1 class="g-H1">
        Nouveau paiement
        {% if query.frequency != "Monthly" %}
          ponctuel
        {% else %}
          mensuel
        {% endif %}
      </h1>

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

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

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

      {% set user_id = form.user_id | default(value="" ~ connected_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="") %}

      <label class="g-Form__Label">
        Catégorie
        <select name="category_id" class="g-Form__Select" required>
          <option hidden disabled selected value></option>
          {% 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=now() | date(format="%Y-%m-%d")) %}

      {% if query.frequency != "Monthly" %}
        <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 %}

      <input
        type="hidden"
        name="frequency"
        value="{{ query.frequency | default(value="Punctual") }}"
      />

      <div>
        <input class="g-Button__Validate" type="submit" value="Créer" />
      </div>
    </form>
  </section>

{% endblock main %}