{% extends "sites_conformes_core/base.html" %}
{% load widget_tweaks i18n static dsfr_tags %}

{% block title %}
  <title>{% translate "Password required" %} — {{ settings.sites_conformes_content_manager.CmsDsfrConfig.site_title }}</title>
{% endblock title %}

{% block content %}
  <div class="fr-container fr-container--fluid fr-my-md-14v">
    <div class="fr-grid-row fr-grid-row-gutters fr-grid-row--center">
      <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
        <div class="fr-container fr-background-alt--grey fr-px-md-0 fr-py-10v fr-py-md-14v">
          <div class="fr-grid-row fr-grid-row-gutters fr-grid-row--center">
            <div class="fr-col-12 fr-col-md-9 fr-col-lg-8">
              <h1>{% translate "Password required" %}</h1>

              <form action="{{ action_url }}" method="post">
                <fieldset class="fr-fieldset"
                          id="login-form-fieldset"
                          aria-labelledby="login-form-fieldset-legend login-form-fieldset-messages">
                  <legend class="fr-fieldset__legend" id="login-form-fieldset-legend">
                    <h2>
                      {% block password_required_message %}
                        <p>{% translate "You need a password to access this page." %}</p>
                      {% endblock password_required_message %}
                    </h2>
                  </legend>

                  {% csrf_token %}

                  {{ form.non_field_errors }}

                  <div class="fr-fieldset__element">
                    <div class="fr-password{% if form.password.errors %} fr-input-group--error{% endif %}">
                      <label class="fr-label" for="id_password">{% translate "Password:" %}</label>
                      {% if form.password.errors %}
                        {{ form.password |add_class:"fr-password__input fr-input fr-input--error" }}
                      {% else %}
                        {{ form.password |add_class:"fr-password__input fr-input" }}
                      {% endif %}
                      <div class="fr-password__checkbox fr-checkbox-group fr-checkbox-group--sm">
                        {% translate "Show password" as show_password %}
                        <input aria-label="{{ show_password }}"
                               id="id_password-show"
                               type="checkbox"
                               aria-describedby="id_password-show-messages">
                        <label class="fr-password__checkbox fr-label" for="id_password-show">{% translate "Show" %}</label>
                        <div class="fr-messages-group"
                             id="id_password-show-messages"
                             aria-live="assertive"></div>
                      </div>
                      {% if form.password.errors %}
                        <div id="text-input-error-desc-error" class="fr-error-text">{{ form.password.errors }}</div>
                      {% endif %}
                    </div>
                  </div>
                  {% for field in form.hidden_fields %}{{ field }}{% endfor %}
                  <div class="fr-fieldset__element">
                    <div class="fr-btns-group">
                      {% translate "Continue" as continue_label %}
                      <input class="fr-btn" type="submit" value="{{ continue_label }}" />
                    </div>
                  </div>
                </fieldset>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}