<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, filter: true },
  { key: 'univId', label: 'Univ ID', sortable: true, class: 'text-center', filter: true },
  { key: 'firstName', label: 'First Name', sortable: true, filter: true },
  { key: 'lastName', label: 'Last Name', sortable: true, filter: true },
  { key: 'retired', label: 'Retired', sortable: true, class: 'text-center', tdClass: 'text-success', filter: true },
  { key: 'hireDate', label: 'Hire Date', sortable: true, class: 'text-center whitespace-nowrap', dateFilter: true },
])
const items = ref([
  { "id": 3167, "hawkId": "ckunkler4", "univId": "00580573", "firstName": "Cyrillus", "lastName": "Kunkler", "fullName": "Cyrillus Kunkler", "email": "cyrillus-kunkler@uiowa.edu", "hireDate": "06/30/1990", "retired": true, "inactive": false },
  { "id": 7032, "hawkId": "jcooper11", "univId": "00549444", "firstName": "John", "lastName": "Cooper", "fullName": "John Cooper", "email": "john-cooper@uiowa.edu", "hireDate": "05/09/1990", "retired": false, "inactive": false },
  { "id": 1717, "hawkId": "scooper3", "univId": "01133454", "firstName": "Steve", "lastName": "Cooper", "fullName": "Steve Cooper", "email": "steve-cooper@uiowa.edu", "hireDate": "01/09/2010", "retired": true, "inactive": false },
  { "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": true },
  { "id": 9380, "hawkId": "fstokey2", "univId": "00341804", "firstName": "Franky", "lastName": "Stokey", "fullName": "Franky Stokey", "email": "franky-stokey@uiowa.edu", "hireDate": "06/11/1993", "retired": true, "inactive": true },
  { "id": 8167, "hawkId": "mloisi3", "univId": "00769787", "firstName": "Maximilien", "lastName": "Loisi", "fullName": "Maximilien Loisi", "email": "maximilien-loisi@uiowa.edu", "hireDate": "01/02/1996", "retired": false, "inactive": false },
  { "id": 7137, "hawkId": "nroggerone5", "univId": "00815761", "firstName": "Noella", "lastName": "Roggerone", "fullName": "Noella Roggerone", "email": "noella-roggerone@uiowa.edu", "hireDate": "03/08/1990", "retired": false, "inactive": true },
  { "id": 7477, "hawkId": "tmcnamara6", "univId": "00198639", "firstName": "Tannie", "lastName": "McNamara", "fullName": "Tannie McNamara", "email": "tannie-mcnamara@uiowa.edu", "hireDate": "12/26/2000", "retired": true, "inactive": true },
  { "id": 8112, "hawkId": "csneesby7", "univId": "00846913", "firstName": "Cherlyn", "lastName": "Sneesby", "fullName": "Cherlyn Sneesby", "email": "cherlyn-sneesby@uiowa.edu", "hireDate": "09/20/2020", "retired": false, "inactive": false },
  { "id": 5702, "hawkId": "lcouves8", "univId": "00541147", "firstName": "Linnell", "lastName": "Couves", "fullName": "Linnell Couves", "email": "linnell-couves@uiowa.edu", "hireDate": "05/28/1997", "retired": false, "inactive": true },
])
</script>

<template>
  <div class="flex flex-col gap-2">
    <AisTable bordered
              :fields="fields"
              :items="items"
    >
      <template #body(retired)="{ item }">
        <AisIcon v-if="item.retired" icon="confirm"/>
      </template>
    </AisTable>
  </div>
</template>