<template>
    <GuestLayout>
        <Head title="Login" />
        <div class="space-y-6">
            <div>
                <h2 class="text-2xl font-semibold">Sign in</h2>
                <p class="mt-2 text-sm text-slate-500">
                    Use the administrator account to continue.
                </p>
            </div>

            <form class="space-y-4" @submit.prevent="submit">
                <div>
                    <label class="text-sm font-medium">Email</label>
                    <input
                        v-model="form.email"
                        type="email"
                        class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2"
                        placeholder="admin@aurora.test"
                    />
                    <p v-if="form.errors.email" class="mt-1 text-xs text-red-600">
                        {{ form.errors.email }}
                    </p>
                </div>

                <div>
                    <label class="text-sm font-medium">Password</label>
                    <input
                        v-model="form.password"
                        type="password"
                        class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2"
                        placeholder="password"
                    />
                    <p
                        v-if="form.errors.password"
                        class="mt-1 text-xs text-red-600"
                    >
                        {{ form.errors.password }}
                    </p>
                </div>

                <label
                    class="flex items-center gap-2 text-sm text-slate-600"
                    for="remember"
                >
                    <input
                        v-model="form.remember"
                        type="checkbox"
                        class="rounded border-slate-300"
                        id="remember"
                        name="remember"
                    />
                    Remember me
                </label>

                <button
                    type="submit"
                    class="w-full rounded-lg bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-slate-800"
                    :disabled="form.processing"
                >
                    Sign in
                </button>
            </form>

            <p class="text-center text-sm text-slate-500">
                Need a demo account?
                <a class="font-semibold text-slate-900" href="/signup"
                    >View signup</a
                >
            </p>
        </div>
    </GuestLayout>
</template>

<script setup>
import { Head, useForm } from '@inertiajs/vue3';
import GuestLayout from '../../Layouts/GuestLayout.vue';

const form = useForm({
    email: '',
    password: '',
    remember: false,
});

const submit = () => {
    form.post('/login');
};
</script>
