<!DOCTYPE html>
<html lang="{{lang}}" data-theme="light">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{title}}</title>
    <link rel="stylesheet" href="css/lila.css">
</head>

<body>
    <main class="flex justify-center items-center container">
        <div class="w-mx-500-px">
            <h3 class="text-center mb-4">{{translate['Recover password']}}</h3>
            <form id="change-password-form">

                <div class="mb-4">
                    <label for="new_password">{{translate['password']}} ({{translate['new']}})</label>
                    <input type="password" id="new_password" name="new_password" class="w-full" required>
                </div>
                <div class="mb-4">
                    <label for="confirm_password">{{translate['confirm_password']}}</label>
                    <input type="password" id="confirm_password" name="confirm_password" class="w-full" required>
                </div>
                <button type="submit" class="w-full">{{translate['Save']}}</button>
                <p id="message" class="mt-2 text-center"></p>
            </form>
            <div class="mt-4 text-center">
                <p><a href="/login" class="underline">{{translate['login']}}</a></p>
            </div>

        </div>
    </main>
    <div class="mt-8 mb-4">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <a href="/set-language/es" role="button" class="fill">
                Español (Esp)
            </a>
            <a href="/set-language/en" role="button" class="fill">
                English (US)
            </a>
        </div>
    </div>
    <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';
                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';
                    message.textContent = result.msg;
                } else {
                    message.className = 'text-red-500 mt-2 text-center';
                    message.textContent = result.msg || 'An error occurred.';
                }
            } catch (error) {
                message.className = 'text-red-500 mt-2 text-center';
                message.textContent = 'Failed to connect to the server.';
            }
        });
    </script>
</body>

</html>