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

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

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

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

    <form @submit.prevent="submit">
        <div>
            <label for="email">Email</label>
            <input
                id="email"
                type="email"
                v-model="form.email"
                required
                autofocus
                autocomplete="username"
            />
        </div>

        <div class="mt-4">
            <label for="password">Password</label>
            <input
                id="password"
                type="password"
                v-model="form.password"
                required
                autocomplete="current-password"
            />
        </div>

        <div class="flex items-center justify-end mt-4">
            <button type="submit" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
                Log in
            </button>
        </div>
    </form>
</template>
