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

{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}">{% endblock %}

{% if not is_popup %}
    {% block breadcrumbs %}
        <div class="px-12">
            <div class="container mb-12 mx-auto -my-3">
                <ul class="flex">
                    {% url 'admin:index' as link %}
                    {% trans 'Home' as name %}
                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=name %}

                    {% translate 'Change password' as breadcrumb_name %}
                    {% include 'unfold/helpers/breadcrumb_item.html' with link='' name=breadcrumb_name %}
                </ul>
            </div>
        </div>
    {% endblock %}
{% endif %}

{% block content %}
    <div id="content-main">
        <form{% if form_url %} action="{{ form_url }}"{% endif %} method="post" id="{{ opts.model_name }}_form">{% csrf_token %}{% block form_top %}{% endblock %}
            <input type="text" name="username" value="{{ original.get_username }}" class="hidden">

            <div>
                {% if is_popup %}
                    <input type="hidden" name="{{ is_popup_var }}" value="1">
                {% endif %}

                {% if form.errors %}
                    <p class="errornote bg-red-100 mb-8 text-red-600 px-3 py-3 rounded-md text-sm">
                        {% if form.errors.items|length == 1 %}
                            {% translate "Please correct the error below." %}
                        {% else %}
                            {% translate "Please correct the errors below." %}
                        {% endif %}
                    </p>
                {% endif %}

                <p class="bg-primary-100 mb-8 text-primary-600 px-3 py-3 rounded-md text-sm">
                  {% 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>

                <div class="flex mb-6 flex-col">
                    <label for="{{ form.old_password.id_for_label }}" class="block font-medium mb-2 text-gray-900 text-sm">
                        {{ form.old_password.label }}
                    </label>

                    {{ form.old_password }}

                    {% include "unfold/helpers/form_errors.html" with errors=form.old_password.errors %}

                    {% if form.old_password.help_text %}
                        <div class="leading-relaxed mt-2 text-gray-500 text-xs">
                            {{ form.old_password.help_text|safe }}
                        </div>
                    {% endif %}
                </div>

                <div class="flex mb-6 flex-col">
                    <label for="{{ form.new_password1.id_for_label }}" class="block font-medium mb-2 text-gray-900 text-sm">
                        {{ form.new_password1.label }}
                    </label>

                    {{ form.new_password1 }}

                    {% include "unfold/helpers/form_errors.html" with errors=form.new_password1.errors %}

                    {% if form.new_password1.help_text %}
                        <div class="leading-relaxed mt-2 text-gray-500 text-xs">
                            {{ form.new_password1.help_text|safe }}
                        </div>
                    {% endif %}
                </div>

                <div class="flex mb-6 flex-col">
                    <label for="{{ form.new_password2.id_for_label }}" class="block font-medium mb-2 text-gray-900 text-sm">
                        {{ form.new_password2.label }}
                    </label>

                    {{ form.new_password2 }}

                    {% include "unfold/helpers/form_errors.html" with errors=form.new_password2.errors %}

                    {% if form.new_password2.help_text %}
                        <div class="leading-relaxed mt-2 text-gray-500 text-xs">
                            {{ form.new_password2.help_text|safe }}
                        </div>
                    {% endif %}
                </div>

                <button type="submit" class="bg-primary-600 border border-transparent font-medium px-3 py-2 rounded-md text-sm text-white">
                    {% translate 'Change password' %}
                </button>
            </div>
        </form>
    </div>
{% endblock %}
