<template>
  
    <n-form  
        label-placement="top"
        :model="formValue"
        ref="formRef"
        :rules="rules"
    >
        <n-form-item label="Benutzername" path="user">
            <n-input v-model:value="formValue.user" placeholder="Benutzername" />
        </n-form-item>
        <n-form-item label="Passwort" path="password">
            <n-input v-model:value="formValue.password" placeholder="Passwort"></n-input>
        </n-form-item>
        <div class="flex justify-center">
            <n-button class="bg-[#18A058]" type="success" @click="onClickLogin">Anmelden</n-button>
        </div>
    </n-form>
</template>

<script setup>
    import { ref } from 'vue'
    import { router } from '@inertiajs/vue3'
    import LoginLayout from '@/layouts/LoginLayout.vue'

    defineOptions({ layout: LoginLayout })

    const formRef = ref(null)
    const formValue = ref({
        user: '',
        password: ''
    })
    
    const rules = ref(undefined)

    function onClickLogin(){
        router.get(
            '/events'
        )
    }
</script>