<template>
  <v-layout>
    <DefaultAppBar @toggle-ai-panel="showAiPanel = !showAiPanel" />
    <!--
    <LeftSidebarNavigationDrawer /> -->

    <v-main>
      <!-- Provides the application the proper gutter -->
      <v-container
        fluid
        class="h-100"
      >
        <h2 class="text-h3 mt-3">{{ title }}</h2>
        <ExactingBreadcrumbs
          class="pl-0 pt-2 mb-1"
          :items="breadcrumbs"
        />

        <router-view />
      </v-container>
    </v-main>

    <AiChatPanel
      v-if="showAiPanel"
      v-model="showAiPanel"
    />
  </v-layout>
</template>

<script setup lang="ts">
import { ref } from "vue"

import useBreadcrumbs from "@/use/use-breadcrumbs"

import DefaultAppBar from "@/components/layout/DefaultAppBar.vue"
import ExactingBreadcrumbs from "@/components/layout/ExactingBreadcrumbs.vue"
//import LeftSidebarNavigationDrawer from "@/components/administration-layout/LeftSidebarNavigationDrawer.vue"

const { title, breadcrumbs } = useBreadcrumbs(undefined, undefined, {
  baseCrumb: {
    title: "Administration Dashboard",
    to: {
      name: "administration/AdministrationDashboardPage",
    },
  },
})

const showAiPanel = ref(false)
</script>
