{% 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">
              <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="form-group p-3 pt-0 mt-3">
                <div class="row">
                  <label for="motdepasse" class="col-sm-3 text-end  col-form-label">Mot de passe</label>
                  <div class="col-sm-9">
                    <div class="input-group mb-3">
                      <input type="password" class="form-control" id="motdepasse" data-field="motdepasse" name="motdepasse" data-user-new-target="password" required>
                      <button class="btn bg-primary-subtle text-primary" type="button" data-action="click->user-new#togglePassword"> <iconify-icon icon="solar:eye-outline" class="fs-7"></iconify-icon></button>
                      <button class="btn bg-primary-subtle text-primary" type="button" data-action="click->user-new#generatePassword">Générer!</button>
                    </div>
                  </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>
            </div>
          </div>

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

{% endblock %}