<script setup>
import { ref } from 'vue';
import AisTable from '@/components/table/AisTable.vue'
import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
import { library } from '@fortawesome/fontawesome-svg-core'
library.add( faEnvelope )

const fields = ref([
  { key: 'hawkId', label: 'Hawk ID', sortable: true },
  { key: 'univId', label: 'Univ ID', sortable: true, class: 'text-center' },
  { key: 'name', label: 'Display Name', sortable: true, icon: 'user' },
  { key: 'email', label: 'Email', sortable: true, class: 'whitespace-nowrap', icon: faEnvelope },
  { key: 'hireDate', label: 'Hire Date', sortable: true, class: 'text-center whitespace-nowrap', icon: 'calendar' },
])
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 },
  { "id": 9380,"hawkId": "fstokey2", "univId": "00341804", "firstName": "Franky", "lastName": "Stokey", "fullName": "Franky Stokey", "email": "franky-stokey@uiowa.edu", "hireDate": "06/11/1993", "retired": false,"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": 3167,"hawkId": "ckunkler4", "univId": "00580573", "firstName": "Cyrillus", "lastName": "Kunkler", "fullName": "Cyrillus Kunkler", "email": "cyrillus-kunkler@uiowa.edu", "hireDate": "06/30/1990", "retired": false,"inactive": false },
])
</script>

<template>
  <div>
    <AisTable :fields="fields" :items="items" foot-clone>
      <!-- A custom formatted data column cell -->
      <template #body(name)="{ item }">
        {{ item.lastName }}, {{ item.firstName }}
      </template>
    </AisTable>
  </div>
</template>