{% extends layout | default('lila/base.html') %}
{% block title %}{{title}}{% endblock %}

{% block content %}
<main
    class="min-h-screen bg-bg-body dark:bg-bg-body-dark flex flex-col justify-center items-center px-4 py-12 transition-colors duration-300 font-sans">
    <div class="card w-full max-w-md p-8 transform hover:scale-101">
        <h3 class="text-lila text-3xl text-center mb-8">
            {{translate['Recover password']}}
        </h3>

        <form id="change-password-form" class="space-y-6">
            <div>
                <label for="new_password"
                    class="block text-sm font-bold text-slate-600 dark:text-slate-400 mb-2">{{translate['password']}}
                    ({{translate['new']}})</label>
                <input type="password" id="new_password" name="new_password" class="input-lila" required>
            </div>
            <div>
                <label for="confirm_password"
                    class="block text-sm font-bold text-slate-600 dark:text-slate-400 mb-2">{{translate['confirm_password']}}</label>
                <input type="password" id="confirm_password" name="confirm_password" class="input-lila" required>
            </div>

            <button type="submit" class="btn-primary w-full justify-center">
                {{translate['Save']}}
            </button>

            <div class="text-center pt-2">
                <p class="text-sm text-slate-500">
                    <a href="/login" class="link-lila">{{translate['login']}}</a>
                </p>
            </div>

            <p id="message" class="mt-2 text-center text-sm font-semibold"></p>
        </form>
    </div>

    <!-- Language Selector -->
    <div class="mt-8 w-full max-w-md flex justify-center gap-2">
        <a href="?lang=es" class="btn-secondary">
            <span>🇪🇸</span> Español
        </a>
        <a href="?lang=en" class="btn-secondary">
            <span>🇺🇸</span> English
        </a>
    </div>
</main>

<script>
    document.getElementById('change-password-form').addEventListener('submit', async function (event) {
        event.preventDefault();
        const form = event.target;
        const formData = new FormData(form);
        const new_password = formData.get('new_password');
        const confirm_password = formData.get('confirm_password');
        const message = document.getElementById('message');
        const email = "{{email}}";
        const token = "{{token}}";
        if (new_password !== confirm_password) {
            message.className = 'text-red-500 mt-2 text-center text-sm font-semibold';
            message.textContent = '{{translate["Passwords not match"]}}';
            return;
        }
        try {
            const response = await fetch('/change-password', {
                method: 'POST',
                body: JSON.stringify({
                    email,
                    token,
                    new_password,
                    confirm_password
                }),
                headers: { 'Content-Type': 'application/json' }
            });
            const result = await response.json();
            if (response.ok && result.success) {
                message.className = 'text-green-500 mt-2 text-center text-sm font-semibold';
                message.textContent = result.msg;
            } else {
                message.className = 'text-red-500 mt-2 text-center text-sm font-semibold';
                message.textContent = result.msg || 'An error occurred.';
            }
        } catch (error) {
            message.className = 'text-red-500 mt-2 text-center text-sm font-semibold';
            message.textContent = 'Failed to connect to the server.';
        }
    });
</script>
{% endblock %}