{% extends "layouts/main.html" %}

{% block main %}
  <div class="container-fluid my-4 px-4">
    <div class="mb-4">
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="/">Accueil</a></li>
          <li class="breadcrumb-item"><a href="/admin">Administration</a></li>
          <li class="breadcrumb-item">
            <a href="/admin/users">Utilisateurs</a>
          </li>

          {% if User.ID %}
            <li class="breadcrumb-item">
              <a href="/admin/users/{{ User.ID }}">{{ User.Name }}</a>
            </li>
            <li class="breadcrumb-item active">Modifier</li>
          {% else %}
            <li class="breadcrumb-item active">Ajouter</li>
          {% endif %}
        </ol>
      </nav>
      <hr />
    </div>

    <form id="user" method="post" class="mw-1200">
      {% if Errors %}
        <div class="alert alert-danger">
          <ul class="m-0">
            {% for Error in Errors %}
              <li>{{ Error }}</li>
            {% endfor %}
          </ul>
        </div>
      {% endif %}

      <div class="row align-items-center mb-3">
        <label for="name" class="form-label col-md-2 col-xl-3">
          Nom complet
        </label>
        <div class="col">
          <input
            id="name"
            class="form-control"
            type="text"
            name="name"
            required
            value="{{ User.Name }}"
            autocomplete="off"
            autofocus
          />
        </div>
      </div>

      <div class="row align-items-center mb-3">
        <label for="email" class="form-label col-md-2 col-xl-3"> Email </label>
        <div class="col">
          <input
            id="email"
            class="form-control"
            type="email"
            name="email"
            required
            value="{{ User.Email }}"
            autocomplete="off"
          />
        </div>
      </div>

      <div class="row align-items-center mb-3">
        <div class="col offset-md-2 offset-xl-3">
          <input
            type="checkbox"
            class="form-check-input me-2"
            id="is_admin"
            name="is_admin"
            autocomplete="off"
            {% if User.IsAdmin %}
              checked
            {% endif %}
          />
          <label for="is_admin" class="form-label"> Administrateur </label>
        </div>
      </div>

      <div class="row align-items-center mb-3">
        <label for="password" class="form-label col-md-2 col-xl-3">
          Mot de passe
        </label>
        <div class="col">
          <input
            id="password"
            class="form-control"
            type="password"
            name="password"
            autocomplete="off"
            {% if !User.ID %}required{% endif %}
          />
          {% if User.ID %}
            <div class="form-text">Laisser vide pour ne pas changer</div>
          {% endif %}
        </div>
      </div>

      {% if User.ID %}
        <div class="row align-items-center mb-3">
          <div class="col offset-md-2 offset-xl-3">
            <input
              type="checkbox"
              class="form-check-input me-2"
              id="reset_totp"
              name="reset_totp"
              autocomplete="off"
            />
            <label for="reset_totp" class="form-label">
              Réinitialiser le double facteur (TOTP)
            </label>
            <div class="form-text">
              Si la case est cochée, l'utilisateur devra effectuer un enrôlement
              TOTP à la prochaine connexion.
            </div>
          </div>
        </div>
      {% endif %}

      <div class="my-4">
        <button class="btn btn-outline-primary" type="submit">
          <i class="me-1 bi-floppy"></i>
          Enregistrer
        </button>
      </div>
    </form>
  </div>
{% endblock %}