{% extends "sb_admin/sb_admin_base.html" %}
{% load i18n static %}
{% load admin_urls %}

{% block content %}
    <div class="py-16 md:pb-32 flex items-center max-xs:px-20 w-full max-w-1180 mx-auto">
        <h1 class="text-24 md:text-30 text-dark-900 font-bold font-heading line-clamp-1 first-letter:uppercase">
            {% trans 'Change password' %}
        </h1>
    </div>
    <form{% if form_url %} action="{{ form_url }}"{% endif %} method="post" id="{{ opts.model_name }}_form" class="flex-grow flex flex-col w-full max-w-1180 mx-auto">
        {% csrf_token %}
        <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 %}
                {% include "sb_admin/includes/form_error_alert.html" with errors_count=form.errors.items|length non_field_errors=form.non_field_errors %}
            {% endif %}

            <div class="card">
                <header class="mb-24">
                    <span class="text-dark-900">{% blocktranslate with username=original %}Enter a new password for the user <strong>{{ username }}</strong>.{% endblocktranslate %}</span>
                </header>
                <fieldset class="module aligned">
                    <div>
                        <div class="mb-24 flex-1">
                            {{ form.password1 }}
                        </div>
                        {% if form.password1.errors %}
                            <div class="-mt-16 mb-24">
                                {{ form.password1.errors }}
                            </div>
                        {% endif %}
                    </div>
                    <div>
                        <div class="mb-24 flex-1">
                            {{ form.password2 }}
                        </div>
                        {% if form.password2.errors %}
                            <div class="-mt-16 mb-24">
                                {{ form.password2.errors }}
                            </div>
                        {% endif %}
                    </div>
                </fieldset>
            </div>
        </div>

        <div class="detail-view-action-bar">
            <div>
                <div class="flex ml-auto gap-8">
                    <a href="{% url opts|admin_urlname:'change' original.pk|admin_urlquote %}" class="btn btn-empty">{% trans 'Back' %}</a>
                    <input type="submit" value="{% translate 'Change password' %}" class="btn btn-secondary">
                </div>
            </div>
        </div>
    </form>
{% endblock %}