{% extends "admin/base_site.html" %}
{% load i18n static jazzy_tabler %}
{% get_jazzy_ui_tweaks as jazzy_ui %}

{% block breadcrumbs %}
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'admin:index' %}">{% trans 'Home' %}</a></li>
    <li class="breadcrumb-item active">{% trans 'Password change' %}</li>
</ol>
{% endblock %}

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

{% block content %}

    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    {% 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." %}
                </h3>
            </div>

            <div class="card-body">
                <div id="content-main">
                    <form method="post">{% csrf_token %}
                        {% if form.errors %}
                        <div class="alert alert-danger">
                            {% if errors|length == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
                        </div>
                        {% endif %}

                        <div class="mb-3 row">
                            <label class="col-12 col-md-2 col-form-label">
                                {{ form.old_password.field.label }}
                            </label>
                            <div class="col-12 col-md-6">
                                {{ form.old_password }}
                                {% if form.old_password.help_text %}
                                <small class="form-hint">{{ form.old_password.help_text|safe }}</small>
                                {% endif %}
                            </div>
                            <div class="col-12 col-md-4">
                                {% if form.old_password.errors %}
                                <div class="text-danger small">{{ form.old_password.errors }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-12 col-md-2 col-form-label">
                                {{ form.new_password1.field.label }}
                            </label>
                            <div class="col-12 col-md-6">
                                {{ form.new_password1 }}
                                {% if form.new_password1.help_text %}
                                <small class="form-hint">{{ form.new_password1.help_text|safe }}</small>
                                {% endif %}
                            </div>
                            <div class="col-12 col-md-4">
                                {% if form.new_password1.errors %}
                                <div class="text-danger small">{{ form.new_password1.errors }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="mb-3 row">
                            <label class="col-12 col-md-2 col-form-label">
                                {{ form.new_password2.field.label }}
                            </label>
                            <div class="col-12 col-md-6">
                                {{ form.new_password2 }}
                                {% if form.new_password2.help_text %}
                                <small class="form-hint">{{ form.new_password2.help_text|safe }}</small>
                                {% endif %}
                            </div>
                            <div class="col-12 col-md-4">
                                {% if form.new_password2.errors %}
                                <div class="text-danger small">{{ form.new_password2.errors }}</div>
                                {% endif %}
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 offset-md-2">
                                <input type="submit" value="{% trans 'Change password' %}" class="btn {{ jazzy_ui.button_classes.primary }}">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

{% endblock %}