{% extends "base.html" %}

{% block title %}
  Nouvelle catégorie
{% endblock title %}

{% block main %}

  <div>
    <p class="g-Paragraph">
      <a class="g-Link g-Media__Large" href="/categories">
        Retour aux categories
      </a>
    </p>

    <form class="g-Form" action="/category/create" method="POST">
      <h1 class="g-H1">
        Nouvelle catégorie
      </h1>

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

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

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

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

{% endblock main %}