<script setup lang="ts">
import { Head, useForm, Link } from '@inertiajs/vue3';
import { route } from 'ziggy-js';
import MainLayout from '@/layouts/MainLayout.vue';
import PageCard from '@/components/PageCard.vue';
import SectionHeading from '@/components/SectionHeading.vue';

defineOptions({ layout: MainLayout });

defineProps<{
    status?: string;
}>();

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

const submit = () => {
    form.post(route('login.store'), {
        onFinish: () => form.reset('password'),
    });
};
</script>

<template>
    <Head title="Login" />

    <VContainer class="d-flex justify-center py-8">
        <PageCard max-width="400">
            <template #header>
                <SectionHeading
                    title="Sign in"
                    subtitle="Welcome back. Enter your details to continue reading."
                />
            </template>

            <VAlert
                v-if="status"
                type="success"
                variant="tonal"
                density="compact"
                class="mb-4"
            >
                {{ status }}
            </VAlert>

            <VForm @submit.prevent="submit">
                <VTextField
                    v-model="form.email"
                    label="Email address"
                    type="email"
                    autofocus
                    autocomplete="username"
                    :error-messages="form.errors.email"
                    class="mb-4"
                />

                <VTextField
                    v-model="form.password"
                    label="Password"
                    type="password"
                    autocomplete="current-password"
                    :error-messages="form.errors.password"
                    class="mb-1"
                />

                <VCheckbox
                    v-model="form.remember"
                    label="Keep me signed in"
                    density="compact"
                    hide-details
                    class="mb-4"
                />

                <VBtn
                    type="submit"
                    block
                    size="large"
                    color="primary"
                    :loading="form.processing"
                >
                    Sign in
                </VBtn>
            </VForm>

            <template #footer>
                New to DredgeNews?
                <Link
                    :href="route('register')"
                    class="text-primary font-weight-medium"
                >
                    Create an account
                </Link>
            </template>
        </PageCard>
    </VContainer>
</template>
