<script setup>
import { Head } from "@inertiajs/vue3";
import { reactive } from "vue";
import { router } from "@inertiajs/vue3";

const form = reactive({
    email: null,
    password: null,
});
function submit() {
    router.post("/login", form);
}
</script>

<style>
    @import "./login.css";
</style>

<template>
    <Head>
        <title>Login</title>
    </Head>

    <div
        class="container-sm text-center position-absolute translate-middle top-50 start-50"
    >
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            Welcome to {{ $page.props.appName }}
        </h2>
        <h3 class="font-semibold text-xl text-gray-800 leading-tight">
            Please, login in to begin
        </h3>

        <form @submit.prevent="submit">
            <p
                v-if="$page.props.errors.message"
                class="error alert alert-danger"
            >
                {{ $page.props.errors.message }}
            </p>
            <div class="mb-3">
                <label for="email" class="form-label">Email address</label>
                <input
                    type="email"
                    class="form-control"
                    id="email"
                    v-model="form.email"
                />
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">Password</label>
                <input
                    type="password"
                    class="form-control"
                    id="password"
                    v-model="form.password"
                />
            </div>
            <button id="submit" type="submit" class="btn btn-primary">Login</button>
        </form>
    </div>
</template>
