<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
import AisHeader from "@/components/header/AisHeader.vue";
import AisBrandBar from "@/components/brand-bar/AisBrandBar.vue";
import AisFooter from "@/components/footer/AisFooter.vue";
import AisFooterLinks from "@/components/footer/AisFooterLinks.vue"
import AisInputExample from '@/components/input/examples/AisInputExample.vue'
</script>

<template>
  <div class="ais-shell grid gap-12">
   <AisBrandBar site="AIS Components" />

    <div class="w-11/12 max-w-ui-max mx-auto">
      <div class="grid gap-6">
        <AisInputExample />
        <AisInputExample />
      </div>
    </div>

    <AisFooter :site="{label: 'Brand Manual', href:'https://brand.uiowa.edu'}">
      <template #primary>
      <AisFooterLinks
          :heading="{ label: 'Support', visible: true }"
          :items="[
          { label: 'Office of the President', href: 'https://maui.uiowa.edu' },
          { label: 'Office of Strategic Communications', href: 'https://myui.uiowa.edu' },
          { label: 'COVID Response', href: 'https://icon.uiowa.edu' },
                    { label: 'Office of the President', href: 'https://maui.uiowa.edu' },
          { label: 'Office of Strategic Communications', href: 'https://myui.uiowa.edu' },
          { label: 'COVID Response', href: 'https://icon.uiowa.edu' },
          { label: 'COVID Response', href: 'https://icon.uiowa.edu' },
          { label: 'Office of the President', href: 'https://maui.uiowa.edu' },
          { label: 'Office of Strategic Communications', href: 'https://myui.uiowa.edu' },
          { label: 'COVID Response', href: 'https://icon.uiowa.edu' },

        ]"
      />
      </template>

      <template #secondary>
        <AisFooterLinks
                        :heading="{ label: 'Example Links', visible: true }"
                        :items="[
          { label: 'Office of the President', href: 'https://maui.uiowa.edu' },
          { label: 'Office of Strategic', href: 'https://myui.uiowa.edu' },
          { label: 'COVID Response', href: 'https://icon.uiowa.edu' },
        ]"
        />
      </template>

    </AisFooter>
  </div>
</template>

<style>
  .ais-shell {
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
  }
</style>