<template>
    <div class="flex flex-col justify-center items-center px-2">
        <h1 class="font-bold text-3xl text-center m-10">Reddingsbrigade Waddinxveen</h1>
        <div class="max-w-xs w-full">
            <form @submit.prevent="submitLoginForm" class="flex flex-col">
                <label class="font-bold">Email</label>
                <input v-model="form.email" required="true" placeholder="user@example.com" class="input mb-5" type="email">

                <label class="font-bold">Password</label>
                <input v-model="form.password.password" required="true" class="input" :type="showPassword ? 'text' : 'password'">
                <div class="mb-5 mt-1 flex items-center">
                    <input v-model="showPassword" type="checkbox" class="mr-1 checkbox ">
                    <span>Show Password</span>
                </div>

                <div class="w-full flex">
                    <input type="submit" value="Login" class="btn w-24 ">
                    <button class="ml-auto hover:underline font-bold">Forgot Password?</button>
                </div>
            </form>
        </div>
    </div>
</template>

<script setup>
definePageMeta({
    title: 'Login',
    key: 'disable'
})

const showPassword = ref(false)

const form = ref({
    email: '',
    password: {
        password: '',
        confirm: '',
    }
})

const submitLoginForm = () => {

}

</script>