<script>
    import { Button, Input } from "$lib/components";
    import LL from "$lib/i18n/i18n-svelte";

    const formData = {
        emailAddress: "",
        password: "",
    };
</script>

<div class="min-h-full flex flex-col justify-center py-12 sm:px-6 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <h2
            class="mt-6 text-center text-3xl tracking-tight font-bold text-gray-900"
        >
            {$LL.createYourNewAccount()}
        </h2>
        <p class="mt-2 text-center text-sm text-gray-600">
            {$LL.or().toLowerCase()}
            <a href="/sign-in" class="link">{$LL.signIntoYourAccount()}</a>
        </p>
    </div>

    <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
            <form class="space-y-6" action="#">
                <Input
                    label={$LL.emailAddress()}
                    id="email"
                    name="email"
                    autocomplete="email"
                    required
                    type="email"
                    bind:value={formData.emailAddress}
                />

                <Input
                    label={$LL.password()}
                    id="password"
                    name="password"
                    required
                    type="password"
                    bind:value={formData.password}
                />
                <Button type="submit" text={$LL.submit()} fullWidth />
            </form>
        </div>
    </div>
</div>
