<script setup lang="ts">
import type { AuthUser } from '~/types/auth';

definePageMeta({
    layout: 'admin',
    middleware: ['is-admin'],
});

const session = useAuthSession();
const adminStore = useAdminStore();

const users: AuthUser[] = [
    {
        id: '5a307466-bf2e-4cf2-9b11-61f024e8fa71',
        name: '409',
        email: '409dev@protonmail.com',
        admin: true,
    },
    {
        id: '99132ce4-045c-4d4b-b957-61f5e99e708b',
        name: 'test-user',
        email: 'test@user.com',
        admin: false,
    },
];
</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 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>
