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

{% block main %}
  <div class="container mt-4">
    <div class="mb-4">
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="/">Accueil</a></li>
          <li class="breadcrumb-item active">Gérer mon compte utilisateur</li>
        </ol>
      </nav>
      <hr />
    </div>

    {% if Errors %}
      <div class="alert alert-danger">
        <ul class="m-0">
          {% for Error in Errors %}
            <li>{{ Error }}</li>
          {% endfor %}
        </ul>
      </div>
    {% endif %}

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

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

      <div class="row mb-3">
        <label for="password" class="col-md-2 form-label"> Mot de passe </label>
        <div class="col-md-10">
          <input
            id="password"
            class="form-control"
            type="password"
            name="password"
            autocomplete="off"
          />
          <div class="form-text">Laisser vide pour ne pas changer</div>
        </div>
      </div>

      <div class="row mb-3">
        <label for="password" class="col-md-2 form-label">
          Confirmer le mot de passe
        </label>
        <div class="col-md-10">
          <input
            id="password-verify"
            class="form-control"
            type="password"
            name="password-verify"
            autocomplete="off"
          />
        </div>
      </div>

      <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 %}