{% load auth i18n %}
<div class="p-4 sm:p-5 rounded-2xl border border-outline-variant bg-surface-lowest shadow-sm space-y-3.5">
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div class="flex items-center gap-3.5">
            <div class="w-11 h-11 rounded-xl bg-primary/10 text-primary flex items-center justify-center shrink-0 shadow-inner">
                <span class="material-symbols-outlined text-[22px]">lock</span>
            </div>
            <div class="space-y-1">
                <p class="text-sm font-mono font-bold text-on-surface tracking-widest leading-none">••••••••••••••••</p>
                <div class="flex flex-wrap items-center gap-2">
                    <span class="inline-flex items-center gap-1 text-[10px] font-bold text-success bg-success/10 px-2 py-0.5 rounded-md">
                        <span class="material-symbols-outlined text-[12px]">verified</span>
                        {% translate "Encrypted & Secure" %}
                    </span>
                    <span class="text-[11px] text-on-surface-variant">{% translate "Raw password is never stored" %}</span>
                </div>
            </div>
        </div>
        <a href="{{ password_url|default:"../password/" }}" 
           class="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl text-xs font-bold bg-primary text-white hover:bg-primary/90 active:scale-[0.98] shadow-sm hover:shadow transition-all shrink-0">
            <span class="material-symbols-outlined text-[18px]">lock_reset</span>
            <span>{{ button_label|default:_("Reset Password") }}</span>
        </a>
    </div>

    <details class="group pt-3 border-t border-outline-variant/40 text-[11px] text-on-surface-variant">
        <summary class="cursor-pointer font-semibold text-on-surface-variant hover:text-on-surface flex items-center gap-1.5 select-none py-0.5 transition-colors">
            <span class="material-symbols-outlined text-[15px] transition-transform group-open:rotate-90 text-primary">chevron_right</span>
            <span>{% translate "Technical Hash & Encryption Details" %}</span>
        </summary>
        <div class="mt-2.5 p-3.5 bg-surface-low rounded-xl border border-outline-variant/60 font-mono text-[11px] text-on-surface-variant leading-relaxed break-all">
            {% render_password_as_hash widget.value %}
        </div>
    </details>
</div>