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

{% block scripts %}
    {{ block.super }}
    <script src="{% url 'admin:jsi18n' %}"></script>
{% endblock %}

{% block bodyclass %}
    {{ block.super }} {{ opts.app_label }}-{{ opts.model_name }} change-form
{% endblock %}

{% if not is_popup %}
    {% block breadcrumbs %}
        <div class="text-sm breadcrumbs">
            <ul>
                <li><a href="{% url 'admin:index' %}" class="link link-hover">{% trans 'Dashboard' %}</a></li>
                <li>
                    <a href="{% url 'admin:app_list' app_label=opts.app_label %}" class="link link-hover">{{ opts.app_config.verbose_name }}</a>
                </li>
                <li>
                    <a href="{% url opts|admin_urlname:'changelist' %}" class="link link-hover">{{ opts.verbose_name_plural|capfirst }}</a>
                </li>
                <li>
                    <a href="{% url opts|admin_urlname:'change' original.pk|admin_urlquote %}" class="link link-hover">{{ original|truncatewords:"18" }}</a>
                </li>
                <li>{% translate 'Change password' %}</li>
            </ul>
        </div>
    {% endblock %}
{% endif %}

{% block content %}
    <section class="hero-glow p-6 md:p-8 mb-5">
        <div class="relative z-10 flex flex-col gap-2">
            <p class="text-xs font-medium uppercase tracking-[0.2em] text-base-content/40">
                <i class="fa-solid fa-circle text-[5px] text-primary align-middle me-1.5"></i>
                {% trans "Security" %}
            </p>
            <h1 class="text-3xl font-bold tracking-tight md:text-4xl">{{ title }}</h1>
            <p class="text-sm text-base-content/50">
                {% blocktranslate with username=original %}Set a new password for <strong>{{ username }}</strong>.{% endblocktranslate %}
            </p>
        </div>
    </section>

    <div id="content-main">
        <div class="glass-panel-strong rounded-2xl overflow-hidden max-w-2xl">
            <form{% if form_url %} action="{{ form_url }}"{% endif %} method="post" id="{{ opts.model_name }}_form" class="p-6 md:p-8">
                {% csrf_token %}
                {% block form_top %}{% endblock %}
                <input type="text" name="username" value="{{ original.get_username }}" style="display: none">

                {% if is_popup %}<input type="hidden" name="_popup" value="1">{% endif %}
                {% if form.errors %}
                    <div class="alert alert-error mb-6 rounded-xl" role="alert">
                        <i class="fa-solid fa-circle-exclamation"></i>
                        <div>
                            {% if form.errors.items|length == 1 %}
                                {% translate "Please correct the error below." %}
                            {% else %}
                                {% translate "Please correct the errors below." %}
                            {% endif %}
                        </div>
                    </div>
                {% endif %}

                <fieldset class="space-y-5">
                    <div class="form-control">
                        <label class="label" for="id_password1">
                            <span class="label-text text-sm font-medium">{{ form.password1.label_tag }}</span>
                        </label>
                        {{ form.password1 }}
                        {% if form.password1.errors %}
                            <label class="label">
                                <span class="label-text-alt text-error">{{ form.password1.errors }}</span>
                            </label>
                        {% endif %}
                        {% if form.password1.help_text %}
                            <label class="label">
                                <span class="label-text-alt text-xs text-base-content/50">{{ form.password1.help_text|safe }}</span>
                            </label>
                        {% endif %}
                    </div>

                    <div class="form-control">
                        <label class="label" for="id_password2">
                            <span class="label-text text-sm font-medium">{{ form.password2.label_tag }}</span>
                        </label>
                        {{ form.password2 }}
                        {% if form.password2.errors %}
                            <label class="label">
                                <span class="label-text-alt text-error">{{ form.password2.errors }}</span>
                            </label>
                        {% endif %}
                        {% if form.password2.help_text %}
                            <label class="label">
                                <span class="label-text-alt text-xs text-base-content/50">{{ form.password2.help_text|safe }}</span>
                            </label>
                        {% endif %}
                    </div>
                </fieldset>

                <div class="flex justify-end gap-3 mt-8 pt-5 border-t border-base-content/5">
                    <a href="{% url opts|admin_urlname:'change' original.pk|admin_urlquote %}" class="btn btn-ghost gap-2">
                        <i class="fa-solid fa-arrow-left"></i>
                        {% trans "Cancel" %}
                    </a>
                    <button type="submit" class="btn btn-primary gap-2">
                        <i class="fa-solid fa-key"></i>
                        {% translate 'Change password' %}
                    </button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}