<script setup>
import AppLayout from "../../../Layouts/AppLayout.vue";
import {NFlex, NH2, NSpace, NButton, NDataTable} from 'naive-ui'
import {h, ref} from "vue";
import {Link} from "@inertiajs/vue3";

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

const columns = ref([
    {
        title: 'Имя',
        key: 'name'
    },
    {
        title: 'Логин',
        key: 'login'
    },
    {
        title: 'Активен',
        key: 'is_active',
        render: (row) => {
            return row.is_active ? 'Да' : 'Нет'
        }
    },
    {
        title: 'Дата создания',
        key: 'created_at'
    },
    {
        title: 'Дата изменения',
        key: 'updated_at'
    },
    {
        title: 'Действия',
        key: 'actions',
        render: (row) => {
            return h(NButton, {
                text: true,
                size: 'small',
                tag: Link,
                href: `/admin/users/${row.id}`
            }, 'Редактировать')
        }
    },
])
</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>
                <NSpace>
                    <NButton :tag="Link" href="/admin/users/new" type="primary">
                        Создать учетную запись
                    </NButton>
                </NSpace>
            </NFlex>
        </template>
        <NDataTable class="max-w-6xl mx-auto mb-4 w-full" :columns="columns" :data="users" />
    </AppLayout>
</template>

<style scoped>
:deep(.n-h) {
    margin: 0;
}

:deep(.n-data-table-th),
:deep(.n-data-table-td) {
    font-size: var(--n-font-size);
}

</style>
