<template>
    <n-menu 
        mode="horizontal"
        :options="menuOptions"
        class="-mx-4"
    />
    <n-form
        :model="userModel"
        label-placement="left"
        require-mark-placement="right-hanging"
        label-width="auto"
    >
        <n-form-item label="ID" path="id">
            <n-text>{{ userModel.id }}</n-text>
        </n-form-item>
        <n-form-item label="Benutzername" path="username">
            <n-input
                class="align-middle"
                v-model:value="userModel.username"
            />
        </n-form-item>
        <n-form-item label="Ist Admin?" path="is_admin">
            <n-checkbox v-model:checked="userModel.is_admin"/>
        </n-form-item>
        <n-form-item label="Passwort" path="password">
            <n-input
                type="password"
                show-password-on="mouseclick"
                placeholder="Passwort"
                v-model:value="userModel.password"
            />
        </n-form-item>
        <n-form-item label="Passwort wiederholen" path="password_repeat">
            <n-input
                type="password"
                show-password-on="mouseclick"
                placeholder="Passwort wiederholen"
                v-model:value="userModel.password_repeat"
            />
        </n-form-item>
    </n-form>

    {{ userModel }}
    

</template>

<script setup>

import BELayout from '@/layouts/BELayout.vue'
import { Link } from '@inertiajs/vue3'
import { h, reactive } from 'vue'
import { NIcon } from 'naive-ui'
import {
    ArrowBackFilled as Back
} from '@vicons/material'

defineOptions({
    layout: BELayout
})

const props = defineProps(['user'])

const userModel = reactive(props.user)

const menuOptions = [
    {
        label: () => 
            h(
                Link,
                {
                    href: "/users",
                    method: "get",
                }, 
                () => "Zurück"
            ),
            key: 'back',
            icon: () => h(NIcon, { component: Back }),
    }
]
</script>