<script setup>
import { useRoute } from 'vue-router'
import { GnNavList, GnNavigationShell, GnToastProvider } from 'gnexus-ui-kit/vue'

const route = useRoute()

const navItems = [
  { label: 'Дашборд', icon: 'ph-squares-four', to: '/' },
]
</script>

<template>
  <GnToastProvider :lifetime="4000">
    <!-- Логин — без шелла навигации -->
    <template v-if="route.meta.public">
      <router-view />
    </template>

    <GnNavigationShell
      v-else
      brand="GHard Monitor"
      logo-src=""
      current="Gnexus Hardware Monitor"
      title="Мониторинг"
      subtitle="GHard"
      footer-left="GHard Monitor"
      footer-right="v0.1"
    >
      <template #default="{ close }">
        <GnNavList :items="navItems" @select="close" />
      </template>

      <template #content>
        <div class="app-page">
          <router-view />
        </div>
      </template>
    </GnNavigationShell>
  </GnToastProvider>
</template>

<style>
/* Служебный layout-контейнер страницы (стили кита не дублируем) */
.app-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 24px 64px;
  width: 100%;
  box-sizing: border-box;
}

/* .tabs у кита — flex-wrap: узкая панель помещается рядом со списком табов.
   Заставляем панели всегда занимать собственную строку на всю ширину. */
.tabs .tabs-panels {
  flex-basis: 100%;
}
</style>