<script setup>
import {NButton, NFlex, NGi, NGrid, NH2, NForm, NFormItem, NInput} from "naive-ui";
import AppLayout from "../../../Layouts/AppLayout.vue";
import AppContainer from "../../../Components/AppContainer.vue";
import AppPanel from "../../../Components/AppPanel.vue";
import {useForm} from "@inertiajs/vue3";
import {ref} from "vue";

const props = defineProps({
    departments: {
        type: Array,
        default: []
    },
    roles: {
        type: Array,
        default: []
    }
})

const form = ref({
    'name': '',
    'login': '',
    'password': '',
    'is_active': true,
})

</script>

<template>
    <AppLayout>
        <template #header>
            <NFlex align="center" justify="space-between" class="max-w-6xl mx-auto mt-6 mb-4 w-full">
                <NH2>
                    Создание нового пользователя
                </NH2>
            </NFlex>
        </template>
        <AppContainer>
            <AppPanel>
                <NForm v-model:model="form">
                    <NFormItem label="Имя">
                        <NInput v-model:value="form.name" />
                    </NFormItem>
                    <NFormItem label="Логин">
                        <NInput v-model:value="form.login" />
                    </NFormItem>
                    <NFormItem label="Логин">
                        <NInput v-model:value="form.password" />
                    </NFormItem>
                    <NFormItem label="Логин">
                        <NInput v-model:value="form.password" />
                    </NFormItem>
                </NForm>
            </AppPanel>
        </AppContainer>
    </AppLayout>
</template>

<style scoped>

</style>
