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

{% block title %}{{ title }}{% endblock %}

{% block content_title %}<h1>{{ title }}</h1>{% endblock %}

{% block content %}
    <div id="content-main ">
        <form method="post" class="bg-base-100 p-3 shadow-1">{% csrf_token %}
            <div>
                {% if form.errors %}
                    <p class="errornote">
                        {% if form.errors.items|length == 1 %}
                            {% translate "Please correct the error below." %}{% else %}
                            {% translate "Please correct the errors below." %}{% endif %}
                    </p>
                {% endif %}

                <p>{% translate '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>

                <fieldset class="module aligned wide">

                    <div class="form-group row">
                        <span class="col-form-label col-lg-2">{{ form.old_password.label_tag }}</span>
                        <div class="col-lg-10">
                            {{ form.old_password }}
                            {% if form.old_password.errors %}
                                <label id="basic-error" class="validation-invalid-label" for="basic">
                                    {{ form.old_password.errors }}
                                </label>
                            {% endif %}
                        </div>
                    </div>

                    <div class="form-row mt-4">
                        {{ form.new_password1.errors }}
                        <span class="col-form-label col-lg-2">
                        {{ form.new_password1.label_tag }}
                        </span>
                        <div class="col-lg-10">
                            {{ form.new_password1 }}
                            {% if form.new_password1.errors %}
                                <label id="basic-error" class="validation-invalid-label" for="basic">
                                    {{ form.new_password1.errors }}
                                </label>
                            {% endif %}
                        </div>
                    </div>

                    <div class="form-row mt-4">
                        <span class="col-form-label col-lg-2">{{ form.new_password2.label_tag }}</span>
                        <div class="col-lg-10">
                            {{ form.new_password2 }}
                            {% if form.new_password2.errors %}
                                <label id="basic-error" class="validation-invalid-label" for="basic">
                                    {{ form.new_password2.errors }}
                                </label>
                            {% endif %}
                        </div>
                        {% if form.new_password2.help_text %}
                            <div class="help col-lg-10">{{ form.new_password2.help_text|safe }}</div>
                        {% endif %}
                    </div>

                    <div class="mt-4">
                        {% if form.new_password1.help_text %}
                            <div class="help">{{ form.new_password1.help_text|safe }}</div>
                        {% endif %}
                    </div>
                </fieldset>

                <div class="submit-row mt-3">
                    <input class="default btn btn-primary" type="submit" value="{% translate 'Change my password' %}">
                </div>

            </div>
        </form>
    </div>

{% endblock %}
