<script setup lang="ts">
import { ScrollArea } from '@/components/ui/scroll-area';
import type { Warren } from '#shared/types/warrens';

definePageMeta({
    middleware: ['authenticated'],
});

const store = useWarrenStore();

function selectWarren(warren: Warren) {
    store.setCurrentWarren(warren.id, '/');
    navigateTo({
        path: '/warrens/files',
    });
}
</script>

<template>
    <ScrollArea class="h-full w-full">
        <div class="flex flex-row gap-2">
            <Button
                v-for="(warren, uuid) in store.warrens"
                :key="uuid"
                class="h-12 w-44"
                variant="outline"
                size="lg"
                @click="() => selectWarren(warren)"
            >
                <Icon name="lucide:folder-root" />
                <span clas="truncate">{{ warren.name }}</span>
            </Button>
        </div>
    </ScrollArea>
</template>
