<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 });

const form = useForm({
    name: '',
    email: '',
    password: '',
    password_confirmation: '',
});

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

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

    <VContainer class="d-flex justify-center py-8">
        <PageCard max-width="400">
            <template #header>
                <SectionHeading
                    eyebrow="Join DredgeNews"
                    title="Create your account"
                    subtitle="Unlimited stories, straight reporting, no noise."
                />
            </template>

            <VForm @submit.prevent="submit">
                <VTextField
                    v-model="form.name"
                    label="Full name"
                    autofocus
                    autocomplete="name"
                    :error-messages="form.errors.name"
                    class="mb-4"
                />

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

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

                <VTextField
                    v-model="form.password_confirmation"
                    label="Confirm password"
                    type="password"
                    autocomplete="new-password"
                    :error-messages="form.errors.password_confirmation"
                    class="mb-4"
                />

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

            <template #footer>
                Already have an account?
                <Link
                    :href="route('login')"
                    class="text-primary font-weight-medium"
                    >Sign in</Link
                >
            </template>
        </PageCard>
    </VContainer>
</template>
