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

{% block main %}
  <div class="container">
    <div id="login-card" class="my-5">
      <div class="card">
        <div class="card-header">Paramètres du compte</div>
        <div class="card-body">
          {% if FormErrors %}
            <div class="alert alert-danger">
              <ul class="mb-0">
                {% for error in FormErrors %}
                  <li>{{ error }}</li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}

          <form id="login" method="post">
            <div class="mb-3">
              <label for="email" class="form-label"> Adresse email </label>
              {% if EmailUpdate %}
                <input
                  id="email"
                  class="form-control"
                  type="email"
                  name="email"
                  required
                  value="{{ Email }}"
                  autofocus
                />
              {% else %}
                <input
                  id="email"
                  class="form-control"
                  type="text"
                  name="email"
                  disabled
                  value="{{ Email }}"
                />
              {% endif %}
            </div>
            <div class="mb-3">
              <label for="name" class="form-label"> Nom complet </label>
              <input
                id="name"
                class="form-control"
                type="text"
                name="name"
                required
                value="{{ Name }}"
                {% if !EmailUpdate %}
                  autofocus
                {% endif %}
              />
            </div>
            <div class="mb-3">
              <label for="password" class="form-label">
                Nouveau mot de passe
              </label>
              <input
                id="password"
                class="form-control"
                type="password"
                name="password"
                required
              />
            </div>
            <div class="mb-3">
              <label for="password-verify" class="form-label">
                Vérifier le mot de passe
              </label>
              <input
                id="password-verify"
                class="form-control"
                type="password"
                name="password-verify"
                required
              />
            </div>
            <div class="text-end">
              <button class="btn btn-outline-primary" type="submit">
                <i class="me-1 bi-floppy"></i>
                Enregistrer
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}