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

{% block title %}{% if form.errors %}{% translate "Error:" %} {% endif %}{{ block.super }}{% endblock %}

{% block userlinks %}
    <a href="{% url 'admin:password_change' %}" class="dropdown-item disabled">{% translate 'Change password' %}</a>
    {% url 'django-admindocs-docroot' as docsroot %}
    {% if docsroot %}
        <div class="dropdown-divider"></div>
        <a href="{{ docsroot }}">{% translate 'Documentation' %}</a> /
    {% endif %}
    <div class="dropdown-divider"></div>
    <form id="logout-form" method="post" action="{% url 'admin:logout' %}">
        {% csrf_token %}
        <button type="submit" class="dropdown-item">{% translate "Log out" %}</button>
    </form>
{% endblock %}

{% block breadcrumbs %}
    <li class="breadcrumb-item">{% translate 'Password change' %}</li>
{% endblock %}

{% block page_header %}
    <div class="col">
        <!-- Page pre-title -->
        <div class="page-pretitle"><span>{{ title }}</span></div>
        <h2 class="page-title">{% translate 'Change my password' %}</h2>
    </div>
{% endblock %}

{% block content %}
    <div id="content-main" class="card">
        <form method="post">{% csrf_token %}
            <div class="card-header">
                {% if form.errors %}
                    <div class="alert alert-danger" role="alert">
                        <div class="alert-icon">{% icon 'tabler-alert-circle' 'icon alert-icon' %}</div>
                        {% blocktranslate trimmed count counter=form.errors.items|length %}
                            Please correct the error below.{% plural %}Please correct the errors below.
                        {% endblocktranslate %}
                    </div>
                {% endif %}
                <div class="alert alert-info mb-0">
                    <div class="alert-icon">{% icon 'tabler-alert-circle' 'icon alert-icon' %}</div>
                    {% 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.' %}
                </div>
            </div>
            <div class="card-body">
                <div class="form-row mb-3">
                    {{ form.old_password.label_tag|add_class:'form-label' }}
                    {% if form.old_password.errors %}
                        {{ form.old_password|add_class:'is-invalid' }}
                        <div class="invalid-feedback">{{ form.old_password.errors }}</div>
                    {% else %}
                        {{ form.old_password }}
                    {% endif %}
                </div>

                <div class="form-row mb-3">
                    {{ form.new_password1.label_tag|add_class:'form-label' }}
                    {% if form.new_password1.errors %}
                        {{ form.new_password1|add_class:'is-invalid' }}
                        <div class="invalid-feedback">{{ form.new_password1.errors }}</div>
                    {% else %}
                        {{ form.new_password1 }}
                    {% endif %}
                    {% if form.new_password1.help_text %}
                        <small class="form-hint"{% if form.new_password1.id_for_label %}
                               id="{{ form.new_password1.id_for_label }}_helptext"{% endif %}>
                            {{ form.new_password1.help_text|safe }}
                        </small>
                    {% endif %}
                </div>

                <div class="form-row">
                    {{ form.new_password2.label_tag|add_class:'form-label' }}
                    {% if form.new_password2.errors %}
                        {{ form.new_password2|add_class:'is-invalid' }}
                        <div class="invalid-feedback">{{ form.new_password2.errors }}</div>
                    {% else %}
                        {{ form.new_password2 }}
                    {% endif %}
                    {% if form.new_password2.help_text %}
                        <small class="form-hint"{% if form.new_password2.id_for_label %}
                               id="{{ form.new_password2.id_for_label }}_helptext"{% endif %}>
                            {{ form.new_password2.help_text|safe }}
                        </small>
                    {% endif %}
                </div>
            </div>

            <div class="card-footer">
                <button type="submit" class="btn btn-primary">{% trans "Change my password" %}</button>
            </div>
        </form>
    </div>
{% endblock %}