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

{% block title %}{% if form.errors %}{% translate "Error:" %} {% endif %}{% translate "Password Change" %} | {{ block.super }}{% endblock %}

{% block extrastyle %}{{ block.super }}
<style>
/* ── match fieldset.html input styling ── */
.pw-input {
    width: 100%;
    height: 40px;
    padding: 0 40px 0 12px;
    border-radius: 8px;
    border: 1px solid var(--outline-variant, #e2e8f0);
    background: var(--surface-lowest, #f8fafc);
    font-size: 12px;
    color: var(--on-surface, #0f172a);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    box-sizing: border-box;
    font-family: monospace;
    letter-spacing: 1.5px;
}
.pw-input:focus {
    border-color: var(--primary, #6366f1);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.10);
    background: #fff;
}
.pw-input:hover:not(:focus) {
    border-color: var(--outline, #94a3b8);
}

/* Show/hide toggle inside input */
.pw-input-wrap { position: relative; }
.pw-eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--on-surface-variant, #94a3b8);
    padding: 0;
    display: flex;
    align-items: center;
    line-height: 1;
    transition: color 0.15s;
}
.pw-eye:hover { color: var(--primary, #6366f1); }
.pw-eye .material-symbols-outlined { font-size: 16px; }

/* strength bar */
.pw-strength-bar { display:flex; gap:3px; margin-top:6px; }
.pw-segment {
    height: 3px;
    flex: 1;
    border-radius: 99px;
    background: var(--outline-variant, #e2e8f0);
    transition: background 0.25s;
}
</style>
{% endblock %}

{% block breadcrumbs %}
<nav class="flex items-center gap-1.5 text-xs text-on-surface-variant/70 mb-4">
    <a href="{% url 'admin:index' %}" class="hover:text-primary transition-colors flex items-center">
        <span class="material-symbols-outlined text-[16px]">home</span>
    </a>
    <span class="material-symbols-outlined text-[14px]">chevron_right</span>
    <span class="text-primary font-bold">{% translate "Password Change" %}</span>
</nav>
{% endblock %}

{% block content %}
<div class="space-y-6 max-w-2xl mx-auto w-full">

    <!-- Page header (matches change_form.html pattern) -->
    <div>
        <h2 class="text-xl md:text-2xl font-black text-on-surface tracking-tight">
            {% translate "Change Password" %}
        </h2>
        <p class="text-xs text-on-surface-variant mt-1">
            {% translate "Enter your current password then choose a new one. Changes are saved immediately." %}
        </p>
    </div>

    {% include "admin/includes/toast.html" %}

    <form method="post" id="password-change-form" class="space-y-6">
        {% csrf_token %}

        {% if form.errors %}
        <div class="flex items-center gap-2 p-3 rounded-lg bg-danger/10 border border-danger/20 text-danger text-xs font-semibold">
            <span class="material-symbols-outlined text-sm">error</span>
            {% blocktranslate count counter=form.errors.items|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}
        </div>
        {% endif %}

        <!-- Current Password -->
        <fieldset class="space-y-4 border border-outline-variant bg-surface-lowest p-4 sm:p-6 rounded-xl shadow-sm">
            <legend class="text-xs font-black text-on-surface uppercase tracking-wider px-2 bg-surface-lowest">
                {% translate "Current Password" %}
            </legend>

            <div class="space-y-1.5 {% if form.old_password.errors %}text-danger{% endif %}">
                <label class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider" for="{{ form.old_password.id_for_label }}">
                    {% translate "Old Password" %}<span class="text-danger">*</span>
                </label>
                {% if form.old_password.errors %}
                <p class="text-[11px] text-danger font-semibold flex items-center gap-1">
                    <span class="material-symbols-outlined text-sm">error</span>
                    {{ form.old_password.errors|striptags }}
                </p>
                {% endif %}
                <div class="pw-input-wrap">
                    <input type="password"
                           name="{{ form.old_password.html_name }}"
                           id="{{ form.old_password.id_for_label }}"
                           class="pw-input"
                           autocomplete="current-password"
                           required>
                    <button type="button" class="pw-eye" onclick="togglePw('{{ form.old_password.id_for_label }}', this)" tabindex="-1">
                        <span class="material-symbols-outlined">visibility</span>
                    </button>
                </div>
            </div>
        </fieldset>

        <!-- New Password -->
        <fieldset class="space-y-4 border border-outline-variant bg-surface-lowest p-4 sm:p-6 rounded-xl shadow-sm">
            <legend class="text-xs font-black text-on-surface uppercase tracking-wider px-2 bg-surface-lowest">
                {% translate "New Password" %}
            </legend>

            <!-- New password 1 -->
            <div class="space-y-1.5 {% if form.new_password1.errors %}text-danger{% endif %}">
                <label class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider" for="{{ form.new_password1.id_for_label }}">
                    {% translate "New Password" %}<span class="text-danger">*</span>
                </label>
                {% if form.new_password1.errors %}
                <p class="text-[11px] text-danger font-semibold flex items-center gap-1">
                    <span class="material-symbols-outlined text-sm">error</span>
                    {{ form.new_password1.errors|striptags }}
                </p>
                {% endif %}
                <div class="pw-input-wrap">
                    <input type="password"
                           name="{{ form.new_password1.html_name }}"
                           id="{{ form.new_password1.id_for_label }}"
                           class="pw-input"
                           autocomplete="new-password"
                           required>
                    <button type="button" class="pw-eye" onclick="togglePw('{{ form.new_password1.id_for_label }}', this)" tabindex="-1">
                        <span class="material-symbols-outlined">visibility</span>
                    </button>
                </div>
                <!-- Strength bar -->
                <div class="pw-strength-bar" id="pw-strength-bar" style="display:none;">
                    <div class="pw-segment" id="ps1"></div>
                    <div class="pw-segment" id="ps2"></div>
                    <div class="pw-segment" id="ps3"></div>
                    <div class="pw-segment" id="ps4"></div>
                </div>
                <p class="text-[10px] font-semibold" id="pw-strength-label" style="display:none;"></p>

                {% if form.new_password1.help_text %}
                <div class="text-[11px] text-on-surface-variant bg-surface-low border border-outline-variant/60 rounded-lg p-3 space-y-1 [&_ul]:space-y-1 [&_li]:flex [&_li]:items-baseline [&_li]:gap-1.5 [&_li]:text-[11px]">
                    {{ form.new_password1.help_text|safe }}
                </div>
                {% endif %}
            </div>

            <!-- New password 2 (confirm) -->
            <div class="space-y-1.5 {% if form.new_password2.errors %}text-danger{% endif %}">
                <label class="text-[10px] font-bold text-on-surface-variant uppercase tracking-wider" for="{{ form.new_password2.id_for_label }}">
                    {% translate "Confirm New Password" %}<span class="text-danger">*</span>
                </label>
                {% if form.new_password2.errors %}
                <p class="text-[11px] text-danger font-semibold flex items-center gap-1">
                    <span class="material-symbols-outlined text-sm">error</span>
                    {{ form.new_password2.errors|striptags }}
                </p>
                {% endif %}
                <div class="pw-input-wrap">
                    <input type="password"
                           name="{{ form.new_password2.html_name }}"
                           id="{{ form.new_password2.id_for_label }}"
                           class="pw-input"
                           autocomplete="new-password"
                           required>
                    <button type="button" class="pw-eye" onclick="togglePw('{{ form.new_password2.id_for_label }}', this)" tabindex="-1">
                        <span class="material-symbols-outlined">visibility</span>
                    </button>
                </div>
                {% if form.new_password2.help_text %}
                <p class="text-[11px] text-on-surface-variant flex items-center gap-1">
                    <span class="material-symbols-outlined text-[13px]">info</span>
                    {{ form.new_password2.help_text }}
                </p>
                {% endif %}
            </div>
        </fieldset>

        <!-- Submit row (matches submit_line.html pattern) -->
        <div class="flex items-center justify-end gap-3 bg-surface-lowest border border-outline-variant rounded-xl px-5 py-3 shadow-sm">
            <button type="submit"
                    class="flex items-center gap-1.5 px-4 py-2 bg-primary text-white text-xs font-bold rounded-lg shadow-sm hover:opacity-90 transition-opacity">
                <span class="material-symbols-outlined text-sm">lock_reset</span>
                {% translate "Update Password" %}
            </button>
        </div>

    </form>
</div>

<script>
function togglePw(id, btn) {
    var input = document.getElementById(id);
    var icon  = btn.querySelector('.material-symbols-outlined');
    if (!input) return;
    if (input.type === 'password') {
        input.type = 'text';
        icon.textContent = 'visibility_off';
    } else {
        input.type = 'password';
        icon.textContent = 'visibility';
    }
}

// Password strength meter
(function () {
    var field = document.getElementById('{{ form.new_password1.id_for_label }}');
    var bar   = document.getElementById('pw-strength-bar');
    var lbl   = document.getElementById('pw-strength-label');
    var segs  = ['ps1','ps2','ps3','ps4'].map(function(id){ return document.getElementById(id); });
    if (!field) return;

    var levels = [
        { color: '#ef4444', text: 'Weak'   },
        { color: '#f97316', text: 'Fair'   },
        { color: '#eab308', text: 'Good'   },
        { color: '#22c55e', text: 'Strong' },
    ];

    function score(v) {
        var s = 0;
        if (v.length >= 8)  s++;
        if (v.length >= 12) s++;
        if (/[A-Z]/.test(v) && /[a-z]/.test(v)) s++;
        if (/[0-9]/.test(v) && /[^A-Za-z0-9]/.test(v)) s++;
        return Math.min(Math.max(s, 1), 4);
    }

    field.addEventListener('input', function () {
        if (!field.value) {
            bar.style.display = 'none';
            lbl.style.display = 'none';
            return;
        }
        bar.style.display = 'flex';
        lbl.style.display = 'block';
        var s = score(field.value);
        segs.forEach(function (seg, i) {
            seg.style.background = i < s ? levels[s-1].color : 'var(--outline-variant, #e2e8f0)';
        });
        lbl.textContent = 'Strength: ' + levels[s-1].text;
        lbl.style.color = levels[s-1].color;
    });
})();
</script>
{% endblock %}