{% extends "base.html" %}

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

{% block main %}

  <section class="g-Section">
    <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">
        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">
        Couleur
        <input
          name="color"
          type="color"
          class="g-Form__Input g-Form__InputColor"
          value="{{ form.color | default(value="") }}"
          required
        />
      </label>

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

{% endblock main %}