<template>
  
    <n-form  
        label-placement="top"
        :model="formValue"
        ref="formRef"
        :rules="rules"
    >
        <n-form-item label="Benutzername" path="username">
            <n-input v-model:value="formValue.username" 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>
    <div>
        {{ response }}
    </div>
</template>

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

    defineOptions({ layout: LoginLayout })
    const props = defineProps(['response'])

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

    function onClickLogin(){
        router.post('/login', formValue)
    }
</script>