<script lang="ts">
	import ResourceCard from "$lib/components/resources/ResourceCard.svelte";
	import ResourceListPage from "$lib/components/resources/ResourceListPage.svelte";
	import Button from "$lib/components/ui/Button.svelte";
	import IconEdit from "~icons/tabler/edit";
	import IconPlus from "~icons/tabler/plus";

    let { data } = $props();
</script>

<ResourceListPage heading="Users">
    {#snippet actionSnippet()}
        <Button Icon={IconPlus} a href="/dashboard/users/new">Add User</Button>
    {/snippet}

    {#snippet contentSnippet()}
        <div class="flex gap-4 flex-wrap">
            {#each data.users as user}
                <ResourceCard title={user.name} subtitle="{user.groups!.length} groups, {user.devices!.length} devices">
                    {#snippet actionsSnippet()}
                        <Button Icon={IconEdit} a href="/dashboard/users/{user.id}" extra="!p-2"/>
                    {/snippet}
                </ResourceCard>
            {/each}
        </div>
    {/snippet}
</ResourceListPage>