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

{% block content %}
<main class="flex justify-center items-center    container">
    <article 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>
    </article>

</main>
<div class="mt-8 mb-4">
    <div class="container mx-auto px-4 flex justify-between items-center w-mx-500-px">
        <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>
{% endblock %}