{% extends "base.html" %}
{% block title %}{% trans %}Change Password{% endtrans %} – OnlineConvert{% endblock %}
{% block content %}
<div class="max-w-lg mx-auto px-4 py-10">
    <div class="mb-6 flex items-center gap-3">
        <a href="{{ full_url('/dashboard') }}" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-all text-sm"><i class="fa fa-arrow-left"></i></a>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">{% trans %}Change Password{% endtrans %}</h1>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}{% for cat, msg in messages %}<script>window._oc_flash=window._oc_flash||[];window._oc_flash.push({cat:{{ cat|tojson }},msg:{{ msg|tojson }}});</script>{% endfor %}{% endwith %}

    {% 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-change-pw-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('/account/change-password') }}" class="space-y-5">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="current_password">{% trans %}Current Password{% endtrans %}</label>
                <input type="password" id="current_password" name="current_password" required autocomplete="current-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 %}Enter your current password{% endtrans %}" data-testid="input-current-password">
            </div>
            <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="6" 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 %}At least 6 characters{% endtrans %}" data-testid="input-new-password">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5" for="confirm_password">{% trans %}Confirm New 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-confirm-new-password">
            </div>
            <div class="pt-2">
                <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-change-password">
                    <i class="fa fa-key mr-2"></i>{% trans %}Update Password{% endtrans %}
                </button>
            </div>
        </form>
        <div class="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
            {% trans %}Forgot your password?{% endtrans %} <a href="{{ full_url('/forgot-password') }}" class="text-primary dark:text-primary-light hover:underline" data-testid="link-forgot-from-change">{% trans %}Reset it{% endtrans %}</a>
        </div>
    </div>
</div>
{% endblock %}