<script setup>
import { useForm } from '@inertiajs/inertia-vue3';
import GuestLayout from '../Share/Layout/Guest.vue';

defineOptions({ layout: GuestLayout });

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

function login() {
    form.post('/dashboard/login');
}
</script>

<template>
    <InertiaHead title="Logowanie" />
    <div class="max-w-screen-sm mx-auto p-4 bg-neutral-100 rounded-md border border-gray-200 shadow">
        <h1 class="pb-4 text-3xl font-robot font-light">Logowanie</h1>
        <form class="flex flex-col gap-4" @submit.prevent="form.post('/dashboard/login')">
            <div class="flex flex-col gap-1 w-full">
                <label for="email"
                    class="text-gray-500">E-mail</label>
                <input id="email"
                    :class="['w-full px-2.5 py-2 border-b-2 rounded-md', form.errors.email ? 'border-red-300 focus:border-red-400 hover:border-red-500 outline-none text-red-900 placeholder-red-400' : 'border-neutral-300 focus:border-neutral-400 hover:border-neutral-500 outline-none text-gray-900 placeholder-gray-400']"
                    type="email"
                    v-model="form.email"
                    placeholder="Podaj swój e-mail" />
                <span class="text-red-400" v-if="form.errors.email">{{ form.errors.email }}</span>
            </div>
            <div class="flex flex-col">
                <label for="password"
                    class="text-gray-500">Hasło</label>
                <input
                    id="password"
                    :class="['w-full px-2.5 py-2 border-b-2 rounded-md', form.errors.email ? 'border-red-300 focus:border-red-400 hover:border-red-500 outline-none text-red-900 placeholder-red-400' : 'border-neutral-300 focus:border-neutral-400 hover:border-neutral-500 outline-none text-gray-900 placeholder-gray-400']"
                    type="password"
                    v-model="form.password"
                    placeholder="Podaj swoje hasło" />
            </div>
            <button class="px-0.5 py-1 rounded-lg bg-[#436da7] border-4 border-[#436da7] text-white text-lg hover:bg-transparent hover:text-[#436da7]">Zaloguj</button>
        </form>
    </div>
</template>
