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

{% block title %}{% if form.errors %}{% translate "Error:" %} {% endif %}{% if form.user.has_usable_password %}{% translate "Change Password" %}{% else %}{% translate "Set Password" %}{% endif %} | {{ adminflow_title }}{% endblock %}

{% block breadcrumbs %}
<nav class="flex items-center gap-2 text-xs font-medium text-on-surface-variant mb-6" aria-label="Breadcrumb">
    <a href="{% url 'admin:index' %}" class="hover:text-primary transition-colors flex items-center gap-1">
        <span class="material-symbols-outlined text-sm">home</span>
        <span>{% translate "Home" %}</span>
    </a>
    <span class="text-outline-variant">/</span>
    <a href="{% url 'admin:app_list' app_label=opts.app_label %}" class="hover:text-primary transition-colors">
        {{ opts.app_config.verbose_name }}
    </a>
    <span class="text-outline-variant">/</span>
    <a href="{% url opts|admin_urlname:'changelist' %}" class="hover:text-primary transition-colors">
        {{ opts.verbose_name_plural|capfirst }}
    </a>
    <span class="text-outline-variant">/</span>
    <a href="{% url opts|admin_urlname:'change' original.pk|admin_urlquote %}" class="hover:text-primary transition-colors">
        {{ original|truncatewords:"18" }}
    </a>
    <span class="text-outline-variant">/</span>
    <span class="text-on-surface font-semibold">
        {% if form.user.has_usable_password %}{% translate "Change Password" %}{% else %}{% translate "Set Password" %}{% endif %}
    </span>
</nav>
{% endblock %}

{% block content %}
<div class="max-w-2xl mx-auto space-y-6">
    <!-- Header Banner -->
    <div class="flex items-center gap-4 bg-surface-lowest border border-outline-variant p-6 rounded-2xl shadow-sm">
        <div class="w-12 h-12 rounded-2xl bg-primary/10 text-primary flex items-center justify-center shrink-0 shadow-inner">
            <span class="material-symbols-outlined text-[26px]">lock_reset</span>
        </div>
        <div>
            <h1 class="text-lg font-black text-on-surface tracking-tight">
                {% if form.user.has_usable_password %}{% translate "Change Password" %}{% else %}{% translate "Set Password" %}{% endif %}
            </h1>
            <p class="text-xs text-on-surface-variant mt-0.5">
                {% blocktranslate with username=original %}Set a new password for user: <strong class="text-on-surface">{{ username }}</strong>{% endblocktranslate %}
            </p>
        </div>
    </div>

    <!-- Main Card Form -->
    <div class="bg-surface-lowest border border-outline-variant rounded-2xl p-6 sm:p-8 shadow-sm space-y-6">
        <form {% if form_url %}action="{{ form_url }}"{% endif %} method="post" id="{{ opts.model_name }}_form" class="space-y-6">
            {% csrf_token %}
            <input type="text" name="username" value="{{ original.get_username }}" class="hidden"/>
            {% if is_popup %}<input type="hidden" name="{{ is_popup_var }}" value="1"/>{% endif %}

            {% if form.errors %}
                <div class="p-4 bg-danger/10 border border-danger/20 rounded-xl text-xs text-danger space-y-1">
                    <div class="flex items-center gap-2 font-bold">
                        <span class="material-symbols-outlined text-sm">error</span>
                        <span>{% translate "Please correct the errors below:" %}</span>
                    </div>
                    {% for error in form.non_field_errors %}
                        <p>{{ error }}</p>
                    {% endfor %}
                </div>
            {% endif %}

            {% if not form.user.has_usable_password %}
                <div class="p-3.5 bg-amber-50 dark:bg-amber-950/40 border border-amber-200 dark:border-amber-800/60 rounded-xl text-xs text-amber-900 dark:text-amber-200 flex items-center gap-3">
                    <span class="material-symbols-outlined text-[20px] text-amber-600 shrink-0">info</span>
                    <p>{% blocktranslate %}This action will <strong>enable</strong> password-based authentication for this user account.{% endblocktranslate %}</p>
                </div>
            {% endif %}

            {% if form.usable_password %}
            <div class="space-y-2 p-4 bg-surface-low rounded-xl border border-outline-variant/60">
                {{ form.usable_password.errors }}
                <label class="text-xs font-bold text-on-surface block">{{ form.usable_password.label }}</label>
                <div class="text-xs text-on-surface-variant">{{ form.usable_password }}</div>
                {% if form.usable_password.help_text %}
                    <p class="text-[11px] text-on-surface-variant">{{ form.usable_password.help_text|safe }}</p>
                {% endif %}
            </div>
            {% endif %}

            <!-- Password 1 -->
            <div class="space-y-1.5">
                <label class="text-[11px] font-bold text-on-surface-variant uppercase tracking-wider block" for="id_password1">
                    {% translate "New Password" %} <span class="text-danger">*</span>
                </label>
                <div class="relative">
                    <input type="password" name="password1" required id="id_password1" autocomplete="new-password"
                           class="w-full h-11 px-3.5 pr-10 rounded-xl border border-outline-variant bg-surface-lowest text-on-surface text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" 
                           placeholder="••••••••••••"/>
                    <button type="button" onclick="togglePass('id_password1', 'icon1')" class="absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant hover:text-on-surface transition-colors focus:outline-none">
                        <span class="material-symbols-outlined text-[18px]" id="icon1">visibility</span>
                    </button>
                </div>
                {% if form.password1.errors %}
                    <p class="text-[11px] text-danger font-medium">{{ form.password1.errors|join:", " }}</p>
                {% endif %}
                {% if form.password1.help_text %}
                    <div class="text-[11px] text-on-surface-variant leading-relaxed opacity-85 mt-1 bg-surface-low/70 p-3 rounded-lg border border-outline-variant/40">
                        {{ form.password1.help_text|safe }}
                    </div>
                {% endif %}
            </div>

            <!-- Password 2 -->
            <div class="space-y-1.5">
                <label class="text-[11px] font-bold text-on-surface-variant uppercase tracking-wider block" for="id_password2">
                    {% translate "Confirm New Password" %} <span class="text-danger">*</span>
                </label>
                <div class="relative">
                    <input type="password" name="password2" required id="id_password2" autocomplete="new-password"
                           class="w-full h-11 px-3.5 pr-10 rounded-xl border border-outline-variant bg-surface-lowest text-on-surface text-xs focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all outline-none" 
                           placeholder="••••••••••••"/>
                    <button type="button" onclick="togglePass('id_password2', 'icon2')" class="absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant hover:text-on-surface transition-colors focus:outline-none">
                        <span class="material-symbols-outlined text-[18px]" id="icon2">visibility</span>
                    </button>
                </div>
                {% if form.password2.errors %}
                    <p class="text-[11px] text-danger font-medium">{{ form.password2.errors|join:", " }}</p>
                {% endif %}
                {% if form.password2.help_text %}
                    <p class="text-[11px] text-on-surface-variant opacity-85">{{ form.password2.help_text|safe }}</p>
                {% endif %}
            </div>

            <!-- Action Buttons -->
            <div class="pt-4 border-t border-outline-variant/60 flex flex-wrap items-center justify-between gap-3">
                <a href="{% url opts|admin_urlname:'change' original.pk|admin_urlquote %}" class="px-4 py-2.5 rounded-xl border border-outline-variant text-xs font-semibold text-on-surface-variant hover:bg-surface-low hover:text-on-surface transition-all">
                    {% translate "Cancel" %}
                </a>
                <div class="flex items-center gap-2">
                    {% if form.user.has_usable_password %}
                    <button type="submit" name="set-password" class="px-5 py-2.5 rounded-xl text-xs font-bold bg-primary text-white hover:bg-primary/95 shadow-md active:scale-[0.98] transition-all cursor-pointer flex items-center gap-1.5">
                        <span class="material-symbols-outlined text-[18px]">check</span>
                        <span>{% translate "Change Password" %}</span>
                    </button>
                    <button type="submit" name="unset-password" class="px-4 py-2.5 rounded-xl border border-danger/40 text-danger text-xs font-bold hover:bg-danger/10 active:scale-[0.98] transition-all cursor-pointer">
                        {% translate "Disable Password" %}
                    </button>
                    {% else %}
                    <button type="submit" name="set-password" class="px-5 py-2.5 rounded-xl text-xs font-bold bg-primary text-white hover:bg-primary/95 shadow-md active:scale-[0.98] transition-all cursor-pointer flex items-center gap-1.5">
                        <span class="material-symbols-outlined text-[18px]">check</span>
                        <span>{% translate "Enable Password Authentication" %}</span>
                    </button>
                    {% endif %}
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    function togglePass(inputId, iconId) {
        const inp = document.getElementById(inputId);
        const ico = document.getElementById(iconId);
        if (inp && ico) {
            if (inp.type === 'password') {
                inp.type = 'text';
                ico.textContent = 'visibility_off';
            } else {
                inp.type = 'password';
                ico.textContent = 'visibility';
            }
        }
    }
</script>
{% endblock %}