<template>
  <div class="brand-shell min-h-screen text-[#fef9f0]">
  <UDashboardGroup storage-key="analytics-dashboard" class="h-full">
    <AppSidebar v-model:open="sidebarOpen" v-model:collapsed="sidebarCollapsed" />

    <UDashboardPanel class="bg-transparent">
      <template #header>
        <div class="flex flex-col gap-4 px-4 py-4 lg:px-6">
          <UDashboardNavbar :title="pageTitle" icon="i-lucide-pie-chart" toggle-side="left">
            <template #leading>
              <UDashboardSidebarCollapse variant="subtle" />
            </template>
            <template #toggle>
              <UDashboardSidebarToggle variant="subtle" />
            </template>
            <template #trailing>
              <UBadge variant="subtle" label="Supabase" class="uppercase tracking-wide" />
              <UBadge variant="subtle" label="Solo lectura" class="uppercase tracking-wide" />
              <UserMenu />
            </template>
          </UDashboardNavbar>
        </div>
      </template>

      <template #body>
        <div class="px-4 pb-10 lg:px-8">
          <slot />
        </div>
      </template>
    </UDashboardPanel>
  </UDashboardGroup>
</div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const sidebarOpen = ref(true)
const sidebarCollapsed = ref(false)

const pageTitle = computed(() => (route.meta.title as string) || 'Panel')
</script>
