<script setup lang="ts">
definePageMeta({
    layout: 'admin',
    middleware: ['is-admin'],
});

const session = useAuthSession();
const adminStore = useAdminStore();
</script>

<template>
    <div class="grid gap-4 lg:grid-cols-2">
        <Card class="overflow-hidden">
            <CardHeader>
                <CardTitle
                    ><NuxtLink to="/admin/users">Users</NuxtLink></CardTitle
                >
                <CardDescription
                    >Add users or modify existing users' permissions or
                    warrens</CardDescription
                >
            </CardHeader>
            <CardContent class="max-h-64 overflow-hidden">
                <ScrollArea class="h-full w-full overflow-hidden">
                    <div class="flex w-full flex-col gap-2 overflow-hidden">
                        <AdminUserListing
                            v-for="user in adminStore.resources.users"
                            :key="user.id"
                            :user
                        >
                            <template #actions>
                                <Button
                                    class="m-1"
                                    variant="outline"
                                    size="icon"
                                    @click="
                                        () =>
                                            adminStore.openEditUserDialog(user)
                                    "
                                >
                                    <Icon name="lucide:pencil" />
                                </Button>
                                <Button
                                    class="m-1"
                                    variant="destructive"
                                    size="icon"
                                    :disabled="session?.user.id === user.id"
                                    @click="
                                        () =>
                                            adminStore.openDeleteUserDialog(
                                                user
                                            )
                                    "
                                >
                                    <Icon name="lucide:trash-2" />
                                </Button>
                            </template>
                        </AdminUserListing>
                    </div>
                </ScrollArea>
            </CardContent>
            <CardFooter>
                <div class="mt-4 flex grow flex-row justify-end">
                    <Button @click="adminStore.openCreateUserDialog"
                        >Create</Button
                    >
                </div>
            </CardFooter>
        </Card>
    </div>
</template>
