{% extends "base.html" %}
{% block title %}{% trans %}Reset Password{% endtrans %} – OnlineConvert{% endblock %}
{% block content %}
<div class="min-h-[60vh] flex items-center justify-center px-4 py-12">
    <div class="w-full max-w-md">
        <div class="text-center mb-8">
            <div class="w-16 h-16 rounded-full bg-primary/10 dark:bg-primary/20 flex items-center justify-center mx-auto mb-4">
                <i class="fa fa-lock-open text-2xl text-primary dark:text-primary-light"></i>
            </div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{% trans %}Set New Password{% endtrans %}</h1>
            <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{% trans %}Choose a strong new password for your account.{% endtrans %}</p>
        </div>

        {% if error %}
        <div class="mb-5 px-4 py-3 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-sm text-red-700 dark:text-red-400" data-testid="alert-reset-error">
            <i class="fa fa-exclamation-circle mr-1"></i> {{ error }}
        </div>
        {% endif %}

        <div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 p-6">
            <form method="POST" action="{{ full_url('/reset-password/' ~ token) }}" class="space-y-5">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="new_password">{% trans %}New Password{% endtrans %}</label>
                    <input type="password" id="new_password" name="new_password" required minlength="8" autocomplete="new-password"
                        class="w-full px-4 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all text-sm"
                        placeholder="{% trans %}Min 8 chars, uppercase, number, symbol{% endtrans %}" autofocus data-testid="input-reset-new-password">
                    <div id="pw-strength-bar" class="mt-2 h-1.5 rounded-full bg-gray-200 dark:bg-gray-700 overflow-hidden hidden">
                        <div id="pw-strength-fill" class="h-full rounded-full transition-all duration-300" style="width:0%"></div>
                    </div>
                    <div id="pw-strength-label" class="mt-1 text-xs text-gray-400 hidden"></div>
                    <ul id="pw-requirements" class="mt-2 space-y-0.5 hidden">
                        <li id="req-len"   class="text-xs flex items-center gap-1.5 text-gray-400"><i class="fa fa-circle text-[8px]"></i> {% trans %}At least 8 characters{% endtrans %}</li>
                        <li id="req-upper" class="text-xs flex items-center gap-1.5 text-gray-400"><i class="fa fa-circle text-[8px]"></i> {% trans %}Uppercase letter{% endtrans %}</li>
                        <li id="req-lower" class="text-xs flex items-center gap-1.5 text-gray-400"><i class="fa fa-circle text-[8px]"></i> {% trans %}Lowercase letter{% endtrans %}</li>
                        <li id="req-num"   class="text-xs flex items-center gap-1.5 text-gray-400"><i class="fa fa-circle text-[8px]"></i> {% trans %}Number{% endtrans %}</li>
                        <li id="req-sym"   class="text-xs flex items-center gap-1.5 text-gray-400"><i class="fa fa-circle text-[8px]"></i> {% trans %}Special character{% endtrans %}</li>
                    </ul>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="confirm_password">{% trans %}Confirm Password{% endtrans %}</label>
                    <input type="password" id="confirm_password" name="confirm_password" required autocomplete="new-password"
                        class="w-full px-4 py-2.5 rounded-xl border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all text-sm"
                        placeholder="{% trans %}Repeat new password{% endtrans %}" data-testid="input-reset-confirm-password">
                </div>
                <button type="submit" class="w-full py-3 rounded-xl bg-primary hover:bg-primary/90 text-white font-semibold transition-all shadow-lg shadow-primary/20" data-testid="btn-reset-submit">
                    <i class="fa fa-check mr-2"></i>{% trans %}Reset Password{% endtrans %}
                </button>
            </form>
        </div>

        <p class="mt-4 text-center text-sm text-gray-400 dark:text-gray-500">
            <a href="{{ full_url('/login') }}" class="text-primary dark:text-primary-light hover:underline"><i class="fa fa-arrow-left mr-1"></i>{% trans %}Back to login{% endtrans %}</a>
        </p>
    </div>
</div>

<script>
(function() {
    var pwInput = document.getElementById('new_password');
    if (!pwInput) return;
    var bar = document.getElementById('pw-strength-bar');
    var fill = document.getElementById('pw-strength-fill');
    var label = document.getElementById('pw-strength-label');
    var reqs = document.getElementById('pw-requirements');
    var reqLen = document.getElementById('req-len');
    var reqUpper = document.getElementById('req-upper');
    var reqLower = document.getElementById('req-lower');
    var reqNum = document.getElementById('req-num');
    var reqSym = document.getElementById('req-sym');
    var levels = [
        {pct:'20%', color:'#ef4444', text:'Very Weak'},
        {pct:'40%', color:'#f97316', text:'Weak'},
        {pct:'60%', color:'#eab308', text:'Fair'},
        {pct:'80%', color:'#22c55e', text:'Strong'},
        {pct:'100%',color:'#16a34a', text:'Very Strong'}
    ];
    function setReq(el, ok) {
        var icon = el.querySelector('i');
        if (ok) {
            el.classList.remove('text-gray-400'); el.classList.add('text-green-500');
            if (icon) { icon.className = 'fa fa-check-circle text-[8px]'; }
        } else {
            el.classList.add('text-gray-400'); el.classList.remove('text-green-500');
            if (icon) { icon.className = 'fa fa-circle text-[8px]'; }
        }
    }
    pwInput.addEventListener('focus', function() {
        bar.classList.remove('hidden'); label.classList.remove('hidden'); reqs.classList.remove('hidden');
    });
    pwInput.addEventListener('input', function() {
        var v = this.value;
        var checks = [v.length >= 8, /[A-Z]/.test(v), /[a-z]/.test(v), /[0-9]/.test(v), /[^A-Za-z0-9]/.test(v)];
        var score = checks.filter(Boolean).length;
        setReq(reqLen, checks[0]); setReq(reqUpper, checks[1]); setReq(reqLower, checks[2]);
        setReq(reqNum, checks[3]); setReq(reqSym, checks[4]);
        if (v.length === 0) { fill.style.width = '0%'; label.textContent = ''; return; }
        var lvl = levels[Math.max(0, score - 1)];
        fill.style.width = lvl.pct; fill.style.background = lvl.color;
        label.textContent = lvl.text; label.style.color = lvl.color;
    });
})();
</script>
{% endblock %}