{% extends "admin/base_site.html" %}
{% load i18n static admin_urls admin_kubi_tags %}

{% block bodyclass %}{{ block.super }} change-form{% endblock %}

{% block breadcrumbs %}
  {% spaceless %}
    <nav class="breadcrumb">
      {% breadcrumbs_icon 'fa-user' %}
      <a class="breadcrumb-item" href="{% if user.is_active and user.is_staff %}{% if user.has_usable_password %}{% url user|user_admin_urlname:'change' user.pk|admin_urlquote %}{% else %}#{% endif %}{% endif %}">{% trans 'Account' %}</a>
      <span class="breadcrumb-item active">{% trans 'Change password' %}</span>
    </nav>
  {% endspaceless %}
{% endblock %}

{% block title %}{% trans 'Password change' %}{% endblock %}

{% block content_title %}<h1>{% trans 'Password change' %}</h1>{% endblock %}

{% block messages-extra %}
 {% if form.errors %}
    {% if form.errors|length == 1 %}{% translate "Please correct the error below." as error_msg %}{% else %}{% translate "Please correct the errors below." as error_msg  %}{% endif %}
    {% include 'admin/message.html' with message=error_msg title="error" only %}
 {% endif %}
{% endblock messages-extra %}

{% block content %}
<div id="content-main" class="d-flex container-fluid">
    <form action="" method="post" class="w-100 w-sm m-auto mt-4" novalidate>
        {% csrf_token %}

        <p class="alert alert-info fade show">
            {% 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="form-group alert alert-warning mb-3 {% if form.old_password.errors %}has-error{% endif %}">
            {{ form.old_password|label_tag|safe }}
            {{ form.old_password|add_class:"form-control" }}
            {% for error in form.old_password.errors %}
            <span class="form-error">{{ error }}</span>
            {% endfor %}
        </div>

        <div class="form-group  mb-3 {% if form.new_password1.errors %}has-error{% endif %}">
            {{ form.new_password1|label_tag|safe }}
            {{ form.new_password1|add_class:"form-control form-control-lg" }}
            {% for error in form.new_password1.errors %}
            <span class="form-error">{{ error }}</span>
            {% endfor %}
            {% if form.new_password1.help_text %}
            <div class="help form-text text-muted"{% if form.new_password1.id_for_label %} id="{{ form.new_password1.id_for_label }}_helptext"{% endif %}>{{ form.new_password1.help_text|safe }}</div>
            {% endif %}
        </div>

        <div class="form-group  mb-3 {% if form.new_password2.errors %}has-error{% endif %}">
            {{ form.new_password2|label_tag|safe }}
            {{ form.new_password2|add_class:"form-control form-control-lg" }}
            {% for error in form.new_password2.errors %}
            <span class="form-error">{{ error }}</span>
            {% endfor %}
            {% if form.new_password2.help_text %}
            <div class="help form-text text-muted"{% if form.new_password2.id_for_label %} id="{{ form.new_password2.id_for_label }}_helptext"{% endif %}>{{ form.new_password2.help_text|safe }}</div>
            {% endif %}
        </div>

        <div class="form-actions py-4 text-end">
            <input type="submit" value="{% trans 'Change my password' %}"  class="btn btn-primary" />
        </div>

        <script type="text/javascript">document.getElementById("id_old_password").focus();</script>
    </form>
</div>
{% endblock %}
