<template>
    <NUtilsComponentRouter
      v-slot="{ component }"
      :routes="routes"
      :base="base"
      :mode="mode"
  >
    <NUtilsComponentShell
      :orientation="orientation"
      :items="navItems"
      :active-match="activeMatch"
      :page-offset="pageOffset"
    >
      <template v-if="showLeading" #leading>
        <div class="px-4 py-3 border-gray-200 dark:border-gray-800 flex items-center gap-2.5">
          <div class="flex items-center justify-center w-7 h-7 rounded-lg bg-primary-100 dark:bg-primary-900/40 shrink-0">
            <UIcon name="i-lucide-scan-line" class="w-4 h-4 text-primary-600 dark:text-primary-400" />
          </div>
          <span class="text-sm font-semibold tracking-tight">NVENT</span>
        </div>
      </template>

      <template #trailing>
        <div class="mt-auto px-3 py-3 border-t border-gray-200 dark:border-gray-800">
            <!-- TODO -->
        </div>
      </template>

      <component :is="component" />
    </NUtilsComponentShell>
  </NUtilsComponentRouter>

  <!-- Confirm Modal from nutils -->
  <NUtilsConfirmModal />
</template>

<script setup>
import Workers from "./workers.vue";
import Workflows from "./workflows/index.vue";
import WorkflowRuns from "./workflows/runs.vue";
import WorkflowRun from "./workflows/[id].vue";
defineProps({
  base: { type: String, required: false, default: "view" },
  mode: { type: String, required: false, default: "query" },
  orientation: { type: String, required: false, default: "horizontal" },
  activeMatch: { type: String, required: false, default: "exact" },
  pageOffset: { type: [String, Number], required: false, default: 0 },
  showLeading: { type: Boolean, required: false, default: true }
});
const navItems = [
  [
    { label: "Workflows", icon: "i-lucide-workflow", path: "/workflows" },
    { label: "Workers", icon: "i-lucide-server", path: "/workers" }
  ]
];
const routes = {
  "/workflows": Workflows,
  "/workflows/runs": WorkflowRuns,
  "/workflows/runs/:id": WorkflowRun,
  "/workers": Workers
};
</script>
