{% extends '@App/partials/base.html.twig' %}

{% block content %}

      <div class="body-wrapper">
        <div class="container-fluid">

          <div class="card card-body py-3">
              <div class="row align-items-center">
                  <div class="col-12">
                      <div class="d-sm-flex align-items-center justify-space-between">
                          <h4 class="mb-4 mb-sm-0 card-title">Nouveau membre</h4>
                      </div>
                  </div>
              </div>
          </div>

          <div class="card">
            <div class="card-body wizard-content">

            {% if not permissionAccess.can('CREER_STAFF') %}
              <div class="alert alert-danger alert-dismissible bg-danger text-white border-0 fade show" role="alert">
                Vous n'avez pas les droits pour ajouter un membre du staff !
              </div>
            {% else %}
                <form id="addUser" class="form-horizontal r-separator needs-validation"
                      data-controller="form user-new"
                      data-action="submit->user-new#submit"
                      data-user-new-url-value="{{ path('staff_add') }}"
                      data-user-new-check-email-url-value="{{ path('api_check_email') }}"
                      data-user-new-profile-route-value="staff_profil"
                      novalidate>
                <div class="card-body">
                  <h5>Informations générales</h5>
                </div>
              <div class="form-group p-3 mb-3">
                  <div class="row">
                    <label for="prenom" class="col-sm-3 text-end  col-form-label">Prénom</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" data-field="prenom" name="prenom" id="prenom" required>
                    </div>
                  </div>
                </div>
                <div class="form-group mb-3 p-3 pt-0">
                  <div class="row">
                    <label for="nom" class="col-sm-3 text-end  col-form-label">Nom</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" data-field="nom" name="nom" id="nom" required>
                    </div>
                  </div>
                </div>
                <div class="form-group mb-3 p-3 pt-0">
                  <div class="row">
                    <label for="email" class="col-sm-3 text-end  col-form-label">Email</label>
                    <div class="col-sm-9">
                      <input type="email" class="form-control" id="email" data-field="email" name="email" data-check="true" required
                            data-user-new-target="email"
                            data-action="blur->user-new#checkEmail input->user-new#debouncedCheckEmail">
                      <div id="emailFeedback" class="invalid-feedback" data-user-new-target="emailFeedback"></div>
                    </div>
                  </div>
                </div>
                <div class="form-group p-3 pt-0">
                  <div class="row">
                    <label for="telephone" class="col-sm-3 text-end  col-form-label">Téléphone</label>
                    <div class="col-sm-9">
                      <input type="number" class="form-control" id="telephone" data-field="telephone" name="telephone">
                    </div>
                  </div>
                </div>

                <div class="card-body text-bg-light">
                  <h4 class="card-title mt-2 pb-3">Adresse</h4>
                </div>
              <div class="form-group p-3 text-bg-light">
                  <div class="row">
                    <label for="adresse" class="col-sm-3 text-end  col-form-label">Adresse</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="adresse" data-field="adresse" name="adresse">
                    </div>
                  </div>
                </div>
                <div class="form-group p-3 text-bg-light">
                  <div class="row">
                    <label for="codepostal" class="col-sm-3 text-end  col-form-label">Code postal</label>
                    <div class="col-sm-9">
                      <input type="number" class="form-control" id="codepostal" data-field="codepostal" name="codepostal">
                    </div>
                  </div>
                </div>
                <div class="form-group p-3 text-bg-light">
                  <div class="row">
                    <label for="ville" class="col-sm-3 text-end  col-form-label">Ville</label>
                    <div class="col-sm-9">
                      <input type="text" class="form-control" id="ville" data-field="ville" name="ville">
                    </div>
                  </div>
                </div>
                <div class="form-group p-3 text-bg-light">
                  <div class="row">
                    <label for="pays" class="col-sm-3 text-end  col-form-label">Pays</label>
                    <div class="col-sm-9">
                      <select class="form-select" id="pays" data-field="pays" name="pays">
                        <option>Sélectionnez un pays</option>
                        <option>France</option>
                        <option>Suisse</option>
                        <option>Allemagne</option>
                      </select>
                    </div>
                  </div>
                </div>
                
                <div class="card-body">
                  <h5>Compte</h5>
                </div>
                <div class="form-group p-3">
                  <div class="row">
                    <label for="role" class="col-sm-3 text-end  col-form-label">Rôle</label>
                    <div class="col-sm-9">
                      <select class="form-select select2" id="role" data-field="role" name="role" required>
                        <option value="">Sélectionnez un rôle</option>
                        {% for role in roles %}
                          <option value="{{role.id}}">{{role.nom}}</option>
                        {% endfor %}
                      </select>
                    </div>
                  </div>
                </div>

                <div class="p-3">
                  <div class="form-group text-end">
                    <button type="submit" class="btn btn-primary" data-user-new-target="submit">
                      Enregistrer
                    </button>
                    <a href="{{ path('staff_index')}}"class="btn bg-danger-subtle text-danger ms-6" id="btnAnnuler">
                      Annuler
                    </a>
                  </div>
                </div>
              </form>

            {% endif %}
            
            </div>
          </div>

        </div>
      </div>
</div>

{% endblock %}