<template>
  <AisNav class="gap-8 px-2 border border-ui-gray-100 rounded items-center shadow-lg"
          item-class="items-center gap-2 py-3 px-1 text-secondary hover"
  >
    <AisNavItem label="Home" href="/" :icon="faHome" />
    <AisNavItem label="Search" href="/search" icon="search" />
    <AisMenu label="Team" icon="group">
      <AisMenuItem label="Ed Hill"></AisMenuItem>
      <AisMenuItem label="Michael Alberhasky"></AisMenuItem>
      <AisMenuItem label="Cyrus Coffman"></AisMenuItem>
      <AisMenuItem label="Denny Crall"></AisMenuItem>
      <AisMenuItem label="Spencer Gritton"></AisMenuItem>
      <AisMenuItem label="Beth Koppes"></AisMenuItem>
      <AisMenuItem label="Ben O'Brien"></AisMenuItem>

      <AisMenu label="DB Team" :icon="faDatabase" dropright>
        <AisMenuItem label="Eric Hudson" icon="user"></AisMenuItem>
        <AisMenuItem label="Jeff Barnes" icon="user"></AisMenuItem>
        <AisMenuItem label="Dave Schau" icon="user"></AisMenuItem>

        <AisMenu label="Other" icon="unknown">
          <AisMenuItem label="Other 1"></AisMenuItem>
          <AisMenuItem label="Other 2"></AisMenuItem>
          <AisMenuItem label="Other 3" icon="user"></AisMenuItem>
        </AisMenu>
      </AisMenu>

      <AisMenu label="Students" :icon="faUserGraduate" dropright>
        <AisMenuItem label="Joshua Burbidge" :icon="faUserGraduate"></AisMenuItem>
        <AisMenuItem label="Student 2"></AisMenuItem>
        <AisMenuItem label="Student 3" icon="user"></AisMenuItem>

        <AisMenu label="Other" icon="unknown">
          <AisMenuItem label="Other 1"></AisMenuItem>
          <AisMenuItem label="Other 2"></AisMenuItem>
          <AisMenuItem label="Other 3" icon="user"></AisMenuItem>
        </AisMenu>
      </AisMenu>
    </AisMenu>

    <AisNavItem label="Support" href="/support" :icon="faHeartbeat"/>
    <AisNavItem label="Help" icon="unknown" @click="handleHelpClick" />
  </AisNav>
</template>


<script setup>
  import AisNav from "@/components/nav/AisNav.vue";
  import AisNavItem from "@/components/nav/AisNavItem.vue";
  import AisMenu from "@/components/menu/AisMenu.vue";
  import AisMenuItem from "@/components/menu/AisMenuItem.vue";
  import { faHome, faHeartbeat, faUserGraduate, faDatabase } from '@fortawesome/free-solid-svg-icons';
  import { library } from '@fortawesome/fontawesome-svg-core';
  library.add( faHome, faHeartbeat, faUserGraduate, faDatabase )

  const handleHelpClick = (e) => { console.log(`navbarExample.help.click: ${e}`) }
</script>

<script>
export default {
  name: "AisNavExample"
}
</script>