{% extends "base.html.twig" %}

{% block content %}
<div class="container-fluid p-0">
  <div class="container pt-5">
    <div class="row">
      <div class="col-lg-3 col-responsive">
        {% include 'shared/menu.html.twig' %}
      </div>
      <div class="col-lg-9">
        <div class="">
          <h5 class="card-header-title mt-4 mb-4">Ajouter une nouvelle catégorie</h5>
        </div>
        {{ form_start(categoryForm,
        {'action': path('add_categorie'), 'method': 'POST','attr': { 'novalidate': 'novalidate' }}) }}
        <div class="row mt-4 mb-4">
          <label for="emailLabel" class="col-sm-3 col-form-label form-label">Nom *</label>
          <div class="col-sm-9">
            {{ form_widget(categoryForm.name, { 'attr': {'placeholder': 'Nom de catégorie*'} }) }}
            {{ form_errors(categoryForm.name) }}
          </div>
        </div>
        <div class="row mb-4">
          <label class="col-sm-3 col-form-label form-label">Alias *</label>
          <div class="col-sm-9">
            <div class="input-group">
              {{ form_widget(categoryForm.alias, { 'attr': {'placeholder': 'Alias de catégorie*'} }) }}
              {{ form_errors(categoryForm.alias) }}
            </div>
          </div>
        </div>
        <div class="row mb-4">
          <label class="col-sm-3 col-form-label form-label">Icon svg *</label>
          <div class="col-sm-9">
            <div class="input-group">
              {{ form_widget(categoryForm.icon, { 'attr': {'placeholder': 'Icon de catégorie*'} }) }}
              {{ form_errors(categoryForm.icon) }}
            </div>
          </div>
        </div>
        <div class="home-card-footer mt-3 pb-5">
          <div class="d-flex justify-content-between gap-3">
            <div class="text-muted fst-italic champ-obligatoire">
              * champ obligatoire
            </div>
            <div class="d-flex justify-content-end gap-3">
              <button type="button" class="btn btn-ioacademy" onclick = "history.go(-1)">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-90deg-left" viewBox="0 0 16 16">
                  <path fill-rule="evenodd" d="M1.146 4.854a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H12.5A2.5 2.5 0 0 1 15 6.5v8a.5.5 0 0 1-1 0v-8A1.5 1.5 0 0 0 12.5 5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4z"/>
                </svg>
              Retour</button>
              <button type="submit" class="btn btn-ioacademy">
                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
                  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
                </svg>
              Ajouter</button>
            </div>
          </div>
        {{ form_end(categoryForm) }}
      </div>
    </div>
  </div>
</div>
{% endblock %}