<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lila JS </title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@0.3.2/dist/basecoat.cdn.min.css">
    <script src="https://cdn.jsdelivr.net/npm/basecoat-css@0.3.2/dist/js/all.min.js" defer></script>
    <script src="https://seip25.github.io/Lila_js/lila.js"></script>
     <script>
        const t = {{ translate | safe}} // jijnja2 translates
    </script>
</head>
<body  class="bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 font-sans antialiased min-h-screen flex flex-col ">

    <main id="app" class="container mx-auto px-4 py-8 flex-grow    w-full lg:w-1/3 sm:w-full"></main>

    <footer class="bg-gray-100 py-4 mt-auto">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <a href="/set-language/es" class="text-gray-600 hover:text-gray-800 transition-colors font-medium">
                Español (Esp)
            </a>
            <a href="/set-language/en" class="text-gray-600 hover:text-gray-800 transition-colors font-medium">
                English (US)
            </a>
        </div>
    </footer>
   
    <script>
        App.createComponent('lila-link', {
            template: /*html*/ `<a href="#\${props.href}" class="\${props.class}" data-on:click="handleClick">
                                    <slot></slot>
                                </a>`,
            actions: {
                handleClick(event) {
                    event.preventDefault();
                    App.navigate(this.props.href);
                }
            }
        });

        App.createComponent('lila-card', {
            template: /*html*/`
                    <article  class="card w-full" >
                      <header>
                        <h2 class="text-center">\${props.title}</h2>
                    </header>
                    <section>
                    <slot></slot>
                    </section>
                </article >
                    `
        });

        App.createComponent('login-template', {
            state: (props) => ({ email: '', password: '' }),
            actions: {
                async submit(event = false) {
                    if (event) event.preventDefault();
                    console.log(this.state)
                    const { email, password } = this.state;
                    let response = await fetch('/api/example', {
                        method: 'POST',
                        body: JSON.stringify({ email, password })
                    });
                    if (response.ok) {
                        const data = await response.json();

                        alert(`The Backend response is ${JSON.stringify(data)}`)
                    }

                }
            },
            template:  /*html*/`
                    <lila-card title = "${t['login']}" >
                        <form >
                             <div class="grid gap-3">
                                 <label class="label">Email</label>
                                <input class="input" type="email" data-model="email" /> 
                            </div>
                              <div class="grid gap-3 mt-4">
                                <div class="flex items-center gap-2">
                                    <label for="demo-card-form-password">${t['password']}</label>
                                    <lila-link href="/forgot-password" 
                                    class="ml-auto inline-block text-sm underline-offset-4 hover:underline"
                                     >${t['forgot your password']}</lila-link>
                                </div>
                                 <input class="input" type="password" data-model="password" /> 
                              </div>
                            <button data-on:click="submit" class="btn w-full mt-6" >
                                ${t['Send']}
                            </button>
                        </form>
                        <div class="mt-4 ">
                          <lila-link href="/register" 
                                    class="text-center flex justify-center w-full   text-sm underline-offset-4 hover:underline"
                                     >${t['create account']}</lila-link>
                        </div>
            </lila-card >
            `
        });

        App.createComponent('register-template', {
            state: (props) => ({
                name: '',
                email: '',
                password: '',
                confirm_password: ''
            }),
            actions: {
                submit(event = false) {
                    if (event) event.preventDefault();

                    const { name, email, password, confirm_password } = this.state;
 
                    if (!name || !email || !password || !confirm_password) {
                        alert('Please complete all fields..');
                        return;
                    }

                    if (password !== confirm_password) {
                        alert('Passwords do not match');
                        return;
                    }

                    console.log({ name, email, password });
                    alert(`Account for ${name} created successfully!`);
                }
            },
            template: /*html*/`
        <lila-card title="${t['register']}">
            <form>
                <div class="grid gap-3">
                    <label class="label">${t['Name']}</label>
                    <input class="input" type="text" data-model="name" /> 
                </div>

                <div class="grid gap-3 mt-4">
                    <label class="label">${t['Email']}</label>
                    <input class="input" type="email" data-model="email" /> 
                </div>

                <div class="grid gap-3 mt-4">
                    <label class="label">${t['password']}</label>
                    <input class="input" type="password" data-model="password" /> 
                </div>

                <div class="grid gap-3 mt-4">
                    <label class="label">${t['confirm_password']}</label>
                    <input class="input" type="password" data-model="confirm_password" /> 
                </div>

                <button data-on:click="submit" class="btn w-full mt-6">
                    ${t['register']}
                </button>
            </form>
            <div class="mt-4">
                <lila-link href="/" 
                    class="text-center flex justify-center w-full text-sm underline-offset-4 hover:underline">
                    ${t['Back']}
                </lila-link>
            </div>
        </lila-card>
    `
        });

        App.createComponent('forgot-password-template', {
            state: (props) => ({
                email: ''
            }),
            actions: {
                submit(event = false) {
                    if (event) event.preventDefault();
                    const { email } = this.state;

                    if (!email) {
                        alert('Please enter your email address.');
                        return;
                    }

                    console.log('Sending recovery link to:', email);
                    alert('Sending recovery link to:', email);
                }
            },
            template: /*html*/`
        <lila-card title="${t['Recover password']}">
        <p class="text-gray-800 dark:text-gray-100 mb-4 mt-4">
            ${t['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']}
        </p>
            <form>
                <div class="grid gap-3">
                    <label class="label">${t['Email']}</label>
                    <input class="input" type="email" data-model="email" placeholder="example@example.com" /> 
                </div>

                <button data-on:click="submit" class="btn w-full mt-6">
                    ${t['Send']}
                </button>
            </form>
            <div class="mt-4">
                <lila-link href="/" 
                    class="text-center flex justify-center w-full text-sm underline-offset-4 hover:underline">
                    ${t['Back']}
                </lila-link>
            </div>
        </lila-card>
    `
        });

        App.defineRoute('/', () => '<login-template></login-template>');
        App.defineRoute('/register', () => '<register-template></register-template>');
        App.defineRoute('/forgot-password', () => '<forgot-password-template></forgot-password-template>');

        App.mount('app');

    </script>

</body>

</html>