<script setup>
  import {ref} from "vue";
  import AisCard from "@/components/card/AisCard.vue";
  import AisIcon from "@/components/icon/AisIcon.vue";
  import AisTable from "@/components/table/AisTable.vue";
  import { defaultItems, defaultFields } from '@/components/table/examples/table-data.js'

  const fields = ref(defaultFields)
  const items = ref(defaultItems)
</script>

<template>
  <AisCard no-body>
    <template #header>
      <AisIcon icon="users" />&nbsp;
      <b>Team Roster</b>
    </template>

    <div class="block w-full overflow-y-auto max-h-96">
      <AisTable class="flush"
                :fields="fields"
                :items="items"
                bordered
                sticky-headers
      ></AisTable>
    </div>

    <template #footer>
      <div class="text-blue-600">
        <AisIcon icon="info" />&nbsp;
        Full-time staff only
      </div>
    </template>
  </AisCard>
</template>
