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

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

<template>
    <div class="grid grid-cols-2 gap-4">
        <Card>
            <CardHeader>
                <CardTitle
                    ><NuxtLink to="/admin/users">Users</NuxtLink></CardTitle
                >
                <CardDescription
                    >Add users or modify existing users' permissions or
                    warrens</CardDescription
                >
            </CardHeader>
            <CardContent>
                <ScrollArea class="max-h-96">
                    <div class="flex flex-col gap-4">
                        <AdminUserListing
                            v-for="user in adminStore.users"
                            :key="user.id"
                            :user
                            class="group/user flex flex-row items-center justify-between gap-4"
                        >
                            <template #actions>
                                <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>
                <div class="mt-4 flex flex-row">
                    <Button @click="adminStore.openCreateUserDialog"
                        >Create user</Button
                    >
                </div>
            </CardContent>
        </Card>
    </div>
</template>
