{% extends '@admin/index.twig' %}

{% block content %}
  <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-3 border-bottom">
    <h1 class="h2">
      <i aria-hidden="true" class="bi bi-lock"></i>
      {{ adminHeaderPasswordChange }}
    </h1>
  </div>

  {% if successMessage %}
    <p class="alert alert-success alert-dismissible fade show">
      {{ successMessage }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </p>
  {% endif %}
  {% if errorMessage %}
    <p class="alert alert-danger alert-dismissible fade show">
      {{ errorMessage }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </p>
  {% endif %}

  <div class="row mb-2">
    <div class="col-6 offset-3">
      <div class="card shadow mb-4">
        <div class="card-header">
          <h5 class="card-title">
            {{ adminHeaderPasswordChange }}
          </h5>
        </div>
        <div class="card-body">
          <form action="./password/update" method="post" accept-charset="utf-8">
            <input type="hidden" id="pmf-csrf-token" name="pmf-csrf-token" value="{{ csrfToken }}">

            <div class="row mb-4">
              <label class="form-label small" for="faqpassword_old">
                {{ adminMsgOldPassword }}
              </label>
              <div>
                <input type="password" autocomplete="off" name="faqpassword_old" id="faqpassword_old"
                       class="form-control"
                       required>
              </div>
            </div>

            <div class="row mb-4">
              <label class="form-label small" for="faqpassword">
                {{ adminMsgNewPassword }}
              </label>
              <div class="input-group">
                <input type="password" autocomplete="off" name="faqpassword" id="faqpassword" class="form-control"
                       data-pmf-toggle="faqpassword_toggle" required>
                <span class="input-group-text" id="faqpassword_toggle" role="button" tabindex="0">
                <i class="bi bi-eye-slash" id="faqpassword_toggle_icon"></i>
              </span>
              </div>
              <div class="">
                <div class="progress mt-2 w-100">
                  <div class="progress-bar progress-bar-striped" id="strength"></div>
                </div>
              </div>
            </div>

            <div class="row mb-4">
              <label class="form-label small" for="faqpassword_confirm">
                {{ adminMsgNewPasswordConfirm }}
              </label>
              <div>
                <input type="password" autocomplete="off" name="faqpassword_confirm" id="faqpassword_confirm"
                       class="form-control" required>
              </div>
            </div>

            <div class="row">
              <div class="text-end">
                <button class="btn btn-primary" type="submit">
                  {{ adminMsgButtonNewPassword }}
                </button>
              </div>
            </div>

          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}