{% 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 %}
{% block bodyclass %}{{ block.super }} {{ opts.app_label }}-{{ opts.model_name }} change-form{% 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 %}

                    {% url 'admin:app_list' app_label=opts.app_label as link %}
                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=opts.app_config.verbose_name %}

                    {% url opts|admin_urlname:'changelist' as link %}
                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=opts.verbose_name_plural|capfirst %}

                    {% url opts|admin_urlname:'change' original.pk|admin_urlquote as link %}
                    {% include 'unfold/helpers/breadcrumb_item.html' with link=link name=original|truncatewords:"18" %}

                    {% 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">
                    {% blocktranslate with username=original %}Enter a new password for the user <strong>{{ username }}</strong>.{% endblocktranslate %}
                </p>

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

                    {{ form.password1 }}

                    {{ form.password1.errors }}

                    {% if form.password1.errors %}
                        <div class="mt-1 text-red-600 text-sm">
                            <ul>
                                {% for error in form.password1.errors %}
                                    <li>
                                        {{ error }}
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}

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

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

                    {{ form.password2 }}

                    {% if form.password2.errors %}
                        <div class="mt-1 text-red-600 text-sm">
                            <ul>
                                {% for error in form.password2.errors %}
                                    <li>
                                        {{ error }}
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}

                    {% if form.password2.help_text %}
                        <div class="leading-relaxed mt-2 text-gray-500 text-xs">
                            {{ form.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 %}
