<script setup>
import { ref } from 'vue';
import AisTable from '@/components/table/AisTable.vue'
import AisIcon from '@/components/icon/AisIcon.vue'

const fields = ref([
  { key: 'hawkId', label: 'Hawk ID', sortable: true },
  { key: 'univId', label: 'Univ ID', sortable: true, class: 'text-center' },
  { key: 'firstName', label: 'First Name', sortable: true },
  { key: 'lastName', label: 'Last Name', sortable: true },
  { key: 'email', label: 'Email', sortable: true, class: 'whitespace-nowrap' },
  { key: 'hireDate', label: 'Hire Date', sortable: true, class: 'text-center whitespace-nowrap' },
])
const items = ref([
  { "id": 7032,"hawkId": "cyepiskov0", "univId": "00549444", "firstName": "Chancey", "lastName": "Yepiskov", "fullName": "Chancey Yepiskov", "email": "chancey-yepiskov@uiowa.edu", "hireDate": "05/09/1990", "retired": false,"inactive": true },
  { "id": 2701,"hawkId": "beyden1", "univId": "00120802", "firstName": "Beaufort", "lastName": "Eyden", "fullName": "Beaufort Eyden", "email": "beaufort-eyden@uiowa.edu", "hireDate": "06/05/1998", "retired": false,"inactive": false },
])
</script>

<template>
  <div class="flex flex-col gap-4">
    <AisTable outlined
              :fields="fields"
              :items="items"
              caption="Caption using the 'caption' prop"
    ></AisTable>

    <AisTable outlined :fields="fields" :items="items">
      <template #caption>
        <div class="text-left flex flex-row gap-2">
          <span class="text-primary"><AisIcon icon="users"/></span>
          Caption using the 'caption' slot
        </div>
      </template>
    </AisTable>
  </div>
</template>