{% 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['create account']}}</h3>
            <form id="register-form">
                <div class="mb-4">
                    <label for="name">{{translate['name']}}</label>
                    <input type="text" id="name" name="name" class="w-full" required>
                </div>
                <div class="mb-4">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" class="w-full" required>
                </div>
                <div class="mb-4">
                    <label for="password">{{translate['password']}}</label>
                    <input type="password" id="password" name="password" class="w-full" required>
                </div>
                <div class="mb-4">
                    <label for="password_2">{{translate['confirm_password']}}</label>
                    <input type="password" id="password_2" name="password_2" class="w-full" required>
                </div>
                <button type="submit" class="w-full">{{translate['register']}}</button>
                <div class="mt-4 text-center">
                    <p>{{translate['Already have an account?']}} <a href="/login"
                            class="underline">{{translate['login']}}</a></p>
                </div>
                <p id="error-message" class="text-red-500 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('register-form').addEventListener('submit', async function (event) {
            event.preventDefault();
            const form = event.target;
            const formData = new FormData(form);
            const errorMessage = document.getElementById('error-message');
            try {
                const response = await fetch('/register', {
                    method: 'POST',
                    body: JSON.stringify(Object.fromEntries(formData)),
                    headers: { 'Content-Type': 'application/json' }
                });
                const result = await response.json();
                if (response.ok && result.success) {
                    window.location.replace('/dashboard');
                } else {
                    errorMessage.textContent = result.msg || 'Failed to register.';
                }
            } catch (error) {
                errorMessage.textContent = 'Failed to connect to the server.';
            }
        });
    </script>
{% endblock %}