{% extends "base.html" %}

{% block title %}
  Catégorie {{ id }}
{% endblock title %}

{% block main %}

  <section class="g-Section">
    <p class="g-Paragraph">
      <a class="g-Link g-Media__Large" href="/categories">
        Retour aux catégories
      </a>
    </p>

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

    {% if not category %}

      La catégorie n’a pas été trouvée.

    {% else %}

      <form
        class="g-Form"
        action="/category/{{ category.id }}/update"
        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=category.name) }}"
            required
          />
        </label>

        <label class="g-Form__Label">
          Couleur
          <input
            name="color"
            type="color"
            class="g-Form__Input g-Form__InputColor"
            value="{{ form.color | default(value=category.color) }}"
            required
          />
        </label>

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

      <form
        class="g-Form"
        action="/category/{{ category.id }}/delete"
        method="POST"
      >
        <h1 class="g-H1">Suppression</h1>

        {% if is_category_used %}
          <p>
            La catégorie ne peut pas être supprimée car elle est actuellement
            utilisée.
          </p>
        {% else %}
          <label class="g-Form__Label">
            Veuillez recopier le nom de la catégorie : « {{ category.name }} ».
            <input name="remove-input" class="g-Form__Input" data-name="{{ category.name }}" />
          </label>

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

    {% endif %}
  </section>

{% endblock main %}