<!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="/public/css/lila.css">
</head>
<body>
    <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>
     <footer>
             <div class="container mx-auto px-4 flex justify-between items-center">
        <a
          href="/set-language/es"
          class="text-secondary underline"
        >
          Español (Esp)
        </a>
        <a
          href="/set-language/en"
          class="text-secondary underline"
        >
          English (US)
        </a>
      </div>
        </footer>
    <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>
</body>
</html>