<template>
  <div class="mb-12">
    <div class="w-full mx-auto">
      <nav
        class="flex flex-wrap items-center space-x-1 font-mono uppercase justify-self-center"
      >
        <NuxtLink
          v-for="wizard in templateWizards"
          :key="wizard.id"
          :to="wizard.path"
          class="inline-flex items-center px-3 py-2 text-sm font-bold transition-colors whitespace-nowrap underline"
          :class="
            isActive(wizard.path)
              ? 'bg-black text-white dark:bg-white dark:text-black no-underline'
              : ''
          "
        >
          {{ wizard.name }}
        </NuxtLink>
      </nav>
    </div>
  </div>
</template>

<script setup lang="ts">
const route = useRoute();

const templateWizards = [
  {
    id: "membership-agreement",
    name: "Membership Agreement",
    path: "/templates/membership-agreement",
  },
  {
    id: "conflict-resolution-framework",
    name: "Conflict Resolution",
    path: "/templates/conflict-resolution-framework",
  },
  {
    id: "tech-charter",
    name: "Tech Charter",
    path: "/templates/tech-charter",
  },
  {
    id: "decision-framework",
    name: "Decision Framework",
    path: "/templates/decision-framework",
  },
];

function isActive(path: string): boolean {
  return route.path === path;
}
</script>

<style scoped>
/* Ensure horizontal scroll on mobile */
nav {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */
}

nav::-webkit-scrollbar {
  display: none; /* WebKit */
}
</style>
