<!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>
            <p>
                <small>
                    {{translate['Forgot your password? No problem. Just let us know your email address and we will email
                    you a password reset link that will allow you to choose a new one']}}
                </small>
            </p>
            <form id="forgot-password-form">
                <div class="mb-4">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" class="w-full" required>
                </div>
                <button type="submit" class="w-full">{{translate['Send']}}</button>
                <div class="mt-4 text-center">
                    <p><a href="/login" class="underline">{{translate['login']}}</a></p>
                </div>
                <p id="message" class="mt-2 text-center"></p>
            </form>
        </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('forgot-password-form').addEventListener('submit', async function (event) {
            event.preventDefault();
            const form = event.target;
            const formData = new FormData(form);
            const message = document.getElementById('message');
            try {
                const response = await fetch('/forgot-password', {
                    method: 'POST',
                    body: JSON.stringify(Object.fromEntries(formData)),
                    headers: { 'Content-Type': 'application/json' }
                });
                const result = await response.json();
                if (response.ok) {
                    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>