{% load i18n %}

<div class="container-fluid">

  {% block titlebar %}
    {% include "authplus/include/auth_titlebar.html" %}
  {% endblock titlebar %}

  <form class="password-change-form" method="POST" action="{% block url-password-change %}{% url 'authplus:password_change' %}{% endblock url-password-change %}">
    {% csrf_token %}
    {% if form.errors %}
      <p class="alert alert-danger"><i class="bi bi-exclamation-circle"></i>
        {% if form.errors.items|length == 1 %}
          {% trans "Please correct the error below." %}
        {% else %}
          {% trans "Please correct the errors below." %}
        {% endif %}
      </p>
    {% endif %}
    <p>{% trans "Please enter your old password, for security's sake, and then enter your new password twice so we can verify you typed it in correctly." %}</p>
    <div class="password-change">
      <div class="form-group">
        {% if form.old_password.errors %}
          {{ form.old_password.errors }}
        {% endif %}
        <label for="id_old_password" class="required">{% trans "Old password" %}</label>
        <input type="password" name="old_password" id="id_old_password" class="form-control col-md-5" autofocus required />
      </div>
      <div class="form-group">
        {% if form.new_password1.errors %}
          {{ form.new_password1.errors }}
        {% endif %}
        <label for="id_new_password1" class="required">{% trans "New password" %}</label>
        <input type="password" name="new_password1" id="id_new_password1" class="form-control col-md-5" aria-describedby="new_password1_help" autofocus required />
        {% if form.new_password1.help_text %}
          <small id="new_password1_help" class="form-text text-muted">
            {{ form.new_password1.help_text|safe }}
          </small>
        {% endif %}
      </div>
      <div class="form-group">
        {% if form.new_password2.errors %}
          {{ form.new_password2.errors }}
        {% endif %}
        <label for="id_new_password2" class="required">{% trans "New password confirmation" %}</label>
        <input type="password" name="new_password2" id="id_new_password2" class="form-control col-md-5" aria-describedby="new_password2_help" autofocus required />
        <small id="new_password2_help" class="form-text text-muted">
          {% trans "" %}
        </small>
      </div>
      <button class="btn btn-primary password-change-button" type="submit">
        {% trans 'Change my password' %}
      </button>
    </div>
  </form>

</div>