<script setup lang="ts">
const route = useRoute();
const items = [
  { label: "Übersicht", icon: "i-lucide-layout-dashboard", to: "/" },
  { label: "Instanzen", icon: "i-lucide-server-cog", to: "/instances" },
  { label: "Zustellungen", icon: "i-lucide-send", to: "/jobs" },
];
</script>

<template>
  <div class="min-h-screen">
    <header class="border-b border-gray-200 bg-white">
      <div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
        <div>
          <p class="text-xs font-semibold uppercase tracking-wide text-green-700">FEDEO Push</p>
          <h1 class="text-xl font-bold text-gray-950">Zentraler Push-Server</h1>
        </div>
        <UBadge color="success" variant="soft">Admin</UBadge>
      </div>
    </header>

    <div class="mx-auto grid max-w-7xl gap-6 px-4 py-6 sm:px-6 lg:grid-cols-[220px_1fr] lg:px-8">
      <aside class="lg:sticky lg:top-6 lg:self-start">
        <UNavigationMenu orientation="vertical" :items="items" />
      </aside>
      <main>
        <slot />
      </main>
    </div>
  </div>
</template>
