<template>
  <div class="flex flex-col gap-3">
    <div class="grid grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
      <div class="whitespace-nowrap">Table Options</div>
      <div class="col-span-3 lg:col-span-5 xl:col-span-7">
        <div class="flex flex-wrap gap-x-4 gap-y-1">
          <AisCheckbox v-model="striped" size="sm">Striped</AisCheckbox>
          <AisCheckbox v-model="hover" size="sm">Hover</AisCheckbox>
          <AisCheckbox v-model="bordered" size="sm">Bordered</AisCheckbox>
          <AisCheckbox v-model="borderless" size="sm">Borderless</AisCheckbox>
          <AisCheckbox v-model="outlined" size="sm">Outlined</AisCheckbox>
          <AisCheckbox v-model="footClone" size="sm">Foot Clone</AisCheckbox>
        </div>
      </div>

      <div class="whitespace-nowrap">Table Sizes</div>
      <div class="col-span-3 lg:col-span-5 xl:col-span-7">
        <AisRadioGroup v-model="size"
                       :options="sizes"
                       name="tableSizes"
                       size="sm"
        />
      </div>

      <div class="whitespace-nowrap">Head Variant</div>
      <div class="col-span-3 lg:col-span-5 xl:col-span-7">
        <AisRadioGroup v-model="headVariant"
                       :options="headVariantOptions"
                       name="headVariants"
                       size="sm"
        />
      </div>
    </div>

    <div class="flex flex-row gap-2 justify-between items-end">
      <AisRadioGroup v-model="filter.cols.inactive"
                     size="sm"
                     class="rounded"
                     buttons
                     button-variant="default"
                     button-font="sans">
        <AisRadio value="">All</AisRadio>
        <AisRadio value="false">Active</AisRadio>
        <AisRadio value="true">Inactive</AisRadio>
      </AisRadioGroup>

      <AisInput v-model="filter.query" icon="search" size="sm" class="rounded w-1/4"></AisInput>
    </div>

    <AisTable show-empty
              :fields="fields"
              :items="items"
              :sort-by="['hireDate']"
              :filter="filter"
              :striped="striped"
              :bordered="bordered"
              :borderless="borderless"
              :outlined="outlined"
              :size="size"
              :hover="hover"
              :footClone="footClone"
              :head-variant="headVariant"
              :busy="items.length===0"
              :total-rows="totalRows"
              :current-page="currentPage"
              :per-page="perPage"
              @row-clicked="handleRowClick($event)"
              @row-dblclicked="handleRowDoubleClick($event)"
              @row-contextmenu="handleRowRightClick($event)"
              @row-hovered="handleRowHover($event)"
              @row-unhovered="handleRowUnhover($event)"
              @head-clicked="handleHeadClick($event)"
              @sort-changed="handleSortChange($event)"
              @filtered="handleFiltered($event)"
    >
      <template #caption>
        <div class="text-left flex flex-row gap-2">
          <span :class="captionIconClass"><AisIcon icon="users"/></span>
          Faculty List
        </div>
      </template>

      <template #body(univId)="{ value }">
        <a href="#">{{ value }}</a>
      </template>

      <template #body(retired)="{ item }">
        <AisIcon v-if="item.retired" icon="confirm"/>
      </template>
    </AisTable>

    <AisPagination rounded first-number last-number
                   v-model="currentPage"
                   :total-rows="totalRows"
                   :per-page="perPage"
                   align="center"
                   :limit="5"></AisPagination>
  </div>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import AisTable from '@/components/table/AisTable.vue'
  import AisPagination from '@/components/pagination/AisPagination.vue'
  import AisIcon from '@/components/icon/AisIcon.vue'
  import AisInput from '@/components/input/AisInput.vue'
  import AisRadioGroup from '@/components/radio-group/AisRadioGroup.vue'
  import AisRadio from '@/components/radio/AisRadio.vue'
  import AisCheckbox from "@/components/checkbox/AisCheckbox.vue";
  import { faEnvelope } from '@fortawesome/free-solid-svg-icons'
  import { library } from '@fortawesome/fontawesome-svg-core'
  library.add( faEnvelope )

  const getDisplayName = (value, key, item) => {
    return item.lastName + ', ' + item.firstName
  }

  const fields = ref([
    { key: 'univId', label: 'Univ ID', sortable: true, class: 'text-center' },
    { key: 'name', label: 'Display Name', formatter: getDisplayName, sortByFormatted: true, sortable: true, icon: 'user' },
    { key: 'email', label: 'Email', sortable: true, class: 'whitespace-nowrap', icon: faEnvelope },
    { key: 'hireDate', label: 'Hire Date', sortable: true, sortFormatter: 'date|YYYY-MM-DD', class: 'text-center whitespace-nowrap', icon: 'calendar', dateFilter: true },
    { key: 'retired', label: 'Retired', sortable: true, class: 'text-center', tdClass: 'text-success', filter: 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": false, "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": true, "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": false, "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 },
    { "id": 8338, "hawkId": "gtinniswood9", "univId": "00053635", "firstName": "Gerrard", "lastName": "Tinniswood", "fullName": "Gerrard Tinniswood", "email": "gerrard-tinniswood@uiowa.edu", "hireDate": "11/25/2020", "retired": true, "inactive": true },
    { "id": 8305, "hawkId": "ceassona", "univId": "00934477", "firstName": "Cara", "lastName": "Easson", "fullName": "Cara Easson", "email": "cara-easson@uiowa.edu", "hireDate": "02/15/1997", "retired": false, "inactive": true },
    { "id": 8688, "hawkId": "dseczykb", "univId": "00403077", "firstName": "Dur", "lastName": "Seczyk", "fullName": "Dur Seczyk", "email": "dur-seczyk@uiowa.edu", "hireDate": "07/31/1996", "retired": true, "inactive": true },
    { "id": 8062, "hawkId": "bstalleyc", "univId": "00572461", "firstName": "Bevin", "lastName": "Stalley", "fullName": "Bevin Stalley", "email": "bevin-stalley@uiowa.edu", "hireDate": "11/17/1994", "retired": false, "inactive": false },
    { "id": 6478, "hawkId": "ebernhardssond", "univId": "00633707", "firstName": "Evaleen", "lastName": "Bernhardsson", "fullName": "Evaleen Bernhardsson", "email": "evaleen-bernhardsson@uiowa.edu", "hireDate": "03/21/1990", "retired": true, "inactive": true },
    { "id": 5107, "hawkId": "mponcete", "univId": "00004601", "firstName": "Michail", "lastName": "Poncet", "fullName": "Michail Poncet", "email": "michail-poncet@uiowa.edu", "hireDate": "11/18/2019", "retired": false, "inactive": false },
    { "id": 5988, "hawkId": "mhartiganf", "univId": "00316331", "firstName": "Mac", "lastName": "Hartigan", "fullName": "Mac Hartigan", "email": "mac-hartigan@uiowa.edu", "hireDate": "03/01/1991", "retired": true, "inactive": false },
    { "id": 7557, "hawkId": "hpawelekg", "univId": "00214424", "firstName": "Hesther", "lastName": "Pawelek", "fullName": "Hesther Pawelek", "email": "hesther-pawelek@uiowa.edu", "hireDate": "11/25/2002", "retired": false, "inactive": false },
    { "id": 8653, "hawkId": "atuteh", "univId": "00167917", "firstName": "Arlan", "lastName": "Tute", "fullName": "Arlan Tute", "email": "arlan-tute@uiowa.edu", "hireDate": "04/30/2018", "retired": false, "inactive": true },
    { "id": 2118, "hawkId": "jcornbilli", "univId": "00337376", "firstName": "Joana", "lastName": "Cornbill", "fullName": "Joana Cornbill", "email": "joana-cornbill@uiowa.edu", "hireDate": "10/02/2001", "retired": true, "inactive": true },
    { "id": 2614, "hawkId": "mfeelyj", "univId": "00441189", "firstName": "Meredith", "lastName": "Feely", "fullName": "Meredith Feely", "email": "meredith-feely@uiowa.edu", "hireDate": "05/01/2019", "retired": true, "inactive": true },
    { "id": 4034, "hawkId": "gdowk", "univId": "00093302", "firstName": "Gabi", "lastName": "Dow", "fullName": "Gabi Dow", "email": "gabi-dow@uiowa.edu", "hireDate": "08/19/2008", "retired": false, "inactive": true },
    { "id": 8944, "hawkId": "bandragl", "univId": "00180957", "firstName": "Burl", "lastName": "Andrag", "fullName": "Burl Andrag", "email": "burl-andrag@uiowa.edu", "hireDate": "04/06/1991", "retired": true, "inactive": false },
    { "id": 1643, "hawkId": "ewyndhamm", "univId": "00465889", "firstName": "Emanuel", "lastName": "Wyndham", "fullName": "Emanuel Wyndham", "email": "emanuel-wyndham@uiowa.edu", "hireDate": "04/15/2015", "retired": true, "inactive": false },
    { "id": 3933, "hawkId": "atschirschkyn", "univId": "00471829", "firstName": "Alisa", "lastName": "Tschirschky", "fullName": "Alisa Tschirschky", "email": "alisa-tschirschky@uiowa.edu", "hireDate": "04/06/1995", "retired": false, "inactive": false },
    { "id": 6548, "hawkId": "emarklino", "univId": "00111055", "firstName": "Edin", "lastName": "Marklin", "fullName": "Edin Marklin", "email": "edin-marklin@uiowa.edu", "hireDate": "07/16/1993", "retired": false, "inactive": false },
    { "id": 8773, "hawkId": "pinottp", "univId": "00549245", "firstName": "Porty", "lastName": "Inott", "fullName": "Porty Inott", "email": "porty-inott@uiowa.edu", "hireDate": "06/19/1991", "retired": false, "inactive": true },
    { "id": 3048, "hawkId": "hgawithq", "univId": "00752282", "firstName": "Huntley", "lastName": "Gawith", "fullName": "Huntley Gawith", "email": "huntley-gawith@uiowa.edu", "hireDate": "01/05/2016", "retired": false, "inactive": false },
    { "id": 6438, "hawkId": "msellimanr", "univId": "00569992", "firstName": "Mikel", "lastName": "Selliman", "fullName": "Mikel Selliman", "email": "mikel-selliman@uiowa.edu", "hireDate": "04/20/2020", "retired": true, "inactive": true },
    { "id": 8563, "hawkId": "mramsiers", "univId": "00679501", "firstName": "Marilyn", "lastName": "Ramsier", "fullName": "Marilyn Ramsier", "email": "marilyn-ramsier@uiowa.edu", "hireDate": "03/22/2004", "retired": true, "inactive": false },
    { "id": 5896, "hawkId": "kheggisont", "univId": "00151064", "firstName": "Ken", "lastName": "Heggison", "fullName": "Ken Heggison", "email": "ken-heggison@uiowa.edu", "hireDate": "02/22/1993", "retired": false, "inactive": true },
    { "id": 3466, "hawkId": "ftodeou", "univId": "00355900", "firstName": "Freddy", "lastName": "Todeo", "fullName": "Freddy Todeo", "email": "freddy-todeo@uiowa.edu", "hireDate": "07/16/1991", "retired": true, "inactive": false },
    { "id": 8439, "hawkId": "wbaggotv", "univId": "00949758", "firstName": "Wells", "lastName": "Baggot", "fullName": "Wells Baggot", "email": "wells-baggot@uiowa.edu", "hireDate": "02/06/2007", "retired": true, "inactive": true },
    { "id": 9285, "hawkId": "shaughw", "univId": "00587247", "firstName": "Sascha", "lastName": "Haugh", "fullName": "Sascha Haugh", "email": "sascha-haugh@uiowa.edu", "hireDate": "03/26/1994", "retired": true, "inactive": true },
    { "id": 2117, "hawkId": "nluebbertx", "univId": "00846605", "firstName": "Natalya", "lastName": "Luebbert", "fullName": "Natalya Luebbert", "email": "natalya-luebbert@uiowa.edu", "hireDate": "12/21/1993", "retired": false, "inactive": true },
    { "id": 4461, "hawkId": "cbelfragey", "univId": "00624156", "firstName": "Chrysa", "lastName": "Belfrage", "fullName": "Chrysa Belfrage", "email": "chrysa-belfrage@uiowa.edu", "hireDate": "03/14/2009", "retired": false, "inactive": true },
    { "id": 8346, "hawkId": "rqualtroz", "univId": "00857855", "firstName": "Ruggiero", "lastName": "Qualtro", "fullName": "Ruggiero Qualtro", "email": "ruggiero-qualtro@uiowa.edu", "hireDate": "08/07/2004", "retired": false, "inactive": true },
    { "id": 5232, "hawkId": "fbird10", "univId": "00409574", "firstName": "Frank", "lastName": "Bird", "fullName": "Frank Bird", "email": "frank-bird@uiowa.edu", "hireDate": "11/10/2015", "retired": false, "inactive": false },
    { "id": 3147, "hawkId": "mschachter11", "univId": "00166832", "firstName": "Margery", "lastName": "Schachter", "fullName": "Margery Schachter", "email": "margery-schachter@uiowa.edu", "hireDate": "05/26/1990", "retired": true, "inactive": true },
    { "id": 1107, "hawkId": "dlauderdale12", "univId": "00792283", "firstName": "Dennie", "lastName": "Lauderdale", "fullName": "Dennie Lauderdale", "email": "dennie-lauderdale@uiowa.edu", "hireDate": "02/24/1999", "retired": false, "inactive": false },
    { "id": 5830, "hawkId": "tscoates13", "univId": "00217643", "firstName": "Tresa", "lastName": "Scoates", "fullName": "Tresa Scoates", "email": "tresa-scoates@uiowa.edu", "hireDate": "02/21/2015", "retired": false, "inactive": false },
    { "id": 6347, "hawkId": "lbarmby14", "univId": "00782331", "firstName": "Leonora", "lastName": "Barmby", "fullName": "Leonora Barmby", "email": "leonora-barmby@uiowa.edu", "hireDate": "06/22/2018", "retired": true, "inactive": false },
    { "id": 9328, "hawkId": "jantonomoli15", "univId": "00403864", "firstName": "Joseito", "lastName": "Antonomoli", "fullName": "Joseito Antonomoli", "email": "joseito-antonomoli@uiowa.edu", "hireDate": "03/14/2014", "retired": true, "inactive": true },
    { "id": 3510, "hawkId": "kkeyme16", "univId": "00164961", "firstName": "Krissy", "lastName": "Keyme", "fullName": "Krissy Keyme", "email": "krissy-keyme@uiowa.edu", "hireDate": "11/28/2001", "retired": true, "inactive": true },
    { "id": 2961, "hawkId": "hphilipot17", "univId": "00980816", "firstName": "Ham", "lastName": "Philipot", "fullName": "Ham Philipot", "email": "ham-philipot@uiowa.edu", "hireDate": "05/19/2007", "retired": true, "inactive": false },
    { "id": 6735, "hawkId": "mmattei18", "univId": "00615865", "firstName": "Micaela", "lastName": "Mattei", "fullName": "Micaela Mattei", "email": "micaela-mattei@uiowa.edu", "hireDate": "01/14/2001", "retired": true, "inactive": true },
    { "id": 1236, "hawkId": "wstollenhof19", "univId": "00829399", "firstName": "Wells", "lastName": "Stollenhof", "fullName": "Wells Stollenhof", "email": "wells-stollenhof@uiowa.edu", "hireDate": "01/19/2005", "retired": false, "inactive": false },
    { "id": 3437, "hawkId": "pstainer1a", "univId": "00823585", "firstName": "Patrizia", "lastName": "Stainer", "fullName": "Patrizia Stainer", "email": "patrizia-stainer@uiowa.edu", "hireDate": "09/23/1996", "retired": true, "inactive": false },
    { "id": 2936, "hawkId": "gscorey1b", "univId": "00166860", "firstName": "Gray", "lastName": "Scorey", "fullName": "Gray Scorey", "email": "gray-scorey@uiowa.edu", "hireDate": "03/31/1994", "retired": false, "inactive": true },
    { "id": 1619, "hawkId": "jkinghorn1c", "univId": "00579953", "firstName": "Janetta", "lastName": "Kinghorn", "fullName": "Janetta Kinghorn", "email": "janetta-kinghorn@uiowa.edu", "hireDate": "12/31/1994", "retired": true, "inactive": true },
    { "id": 5113, "hawkId": "fmorfey1d", "univId": "00022499", "firstName": "Florina", "lastName": "Morfey", "fullName": "Florina Morfey", "email": "florina-morfey@uiowa.edu", "hireDate": "04/10/2003", "retired": true, "inactive": false },
    { "id": 4008, "hawkId": "rcampbell1e", "univId": "00310438", "firstName": "Rodge", "lastName": "Campbell", "fullName": "Rodge Campbell", "email": "rodge-campbell@uiowa.edu", "hireDate": "12/21/2010", "retired": false, "inactive": false },
    { "id": 6313, "hawkId": "chaysey1f", "univId": "00691254", "firstName": "Celinda", "lastName": "Haysey", "fullName": "Celinda Haysey", "email": "celinda-haysey@uiowa.edu", "hireDate": "01/09/2003", "retired": true, "inactive": false },
    { "id": 6467, "hawkId": "vapplin1g", "univId": "00427255", "firstName": "Vivienne", "lastName": "Applin", "fullName": "Vivienne Applin", "email": "vivienne-applin@uiowa.edu", "hireDate": "09/01/2008", "retired": false, "inactive": true },
    { "id": 8088, "hawkId": "mbernholt1h", "univId": "00471504", "firstName": "Mattheus", "lastName": "Bernholt", "fullName": "Mattheus Bernholt", "email": "mattheus-bernholt@uiowa.edu", "hireDate": "03/15/2005", "retired": false, "inactive": true },
    { "id": 4124, "hawkId": "norviss1i", "univId": "00323354", "firstName": "Nerti", "lastName": "Orviss", "fullName": "Nerti Orviss", "email": "nerti-orviss@uiowa.edu", "hireDate": "12/14/2008", "retired": true, "inactive": true },
    { "id": 9864, "hawkId": "jbondar1j", "univId": "00184441", "firstName": "Joshia", "lastName": "Bondar", "fullName": "Joshia Bondar", "email": "joshia-bondar@uiowa.edu", "hireDate": "10/02/2005", "retired": true, "inactive": false },
    { "id": 7393, "hawkId": "fravelus1k", "univId": "00521656", "firstName": "Faydra", "lastName": "Ravelus", "fullName": "Faydra Ravelus", "email": "faydra-ravelus@uiowa.edu", "hireDate": "06/01/1998", "retired": false, "inactive": true },
    { "id": 3971, "hawkId": "wspratt1l", "univId": "00709251", "firstName": "Wynn", "lastName": "Spratt", "fullName": "Wynn Spratt", "email": "wynn-spratt@uiowa.edu", "hireDate": "11/28/2021", "retired": true, "inactive": true },
    { "id": 3957, "hawkId": "mcleaton1m", "univId": "00007808", "firstName": "Myrtle", "lastName": "Cleaton", "fullName": "Myrtle Cleaton", "email": "myrtle-cleaton@uiowa.edu", "hireDate": "07/24/1991", "retired": true, "inactive": true },
    { "id": 4752, "hawkId": "dknyvett1n", "univId": "00558039", "firstName": "Daisey", "lastName": "Knyvett", "fullName": "Daisey Knyvett", "email": "daisey-knyvett@uiowa.edu", "hireDate": "09/25/1994", "retired": true, "inactive": false },
    { "id": 8791, "hawkId": "sdorrian1o", "univId": "00908864", "firstName": "Staford", "lastName": "Dorrian", "fullName": "Staford Dorrian", "email": "staford-dorrian@uiowa.edu", "hireDate": "11/18/2006", "retired": false, "inactive": false },
    { "id": 2768, "hawkId": "cle1p", "univId": "00843092", "firstName": "Caye", "lastName": "Le Sarr", "fullName": "Caye Le Sarr", "email": "caye-le sarr@uiowa.edu", "hireDate": "03/05/2015", "retired": false, "inactive": true },
    { "id": 2774, "hawkId": "nocaine1q", "univId": "00241332", "firstName": "North", "lastName": "O'Caine", "fullName": "North O'Caine", "email": "north-o'caine@uiowa.edu", "hireDate": "05/07/2018", "retired": true, "inactive": true },
    { "id": 5308, "hawkId": "jniese1r", "univId": "00093807", "firstName": "Janina", "lastName": "Niese", "fullName": "Janina Niese", "email": "janina-niese@uiowa.edu", "hireDate": "03/18/1997", "retired": false, "inactive": false },
    { "id": 3111, "hawkId": "lhawtry1s", "univId": "00676694", "firstName": "Laura", "lastName": "Hawtry", "fullName": "Laura Hawtry", "email": "laura-hawtry@uiowa.edu", "hireDate": "03/15/1994", "retired": true, "inactive": true },
    { "id": 9591, "hawkId": "iplumbe1t", "univId": "00219681", "firstName": "Ive", "lastName": "Plumbe", "fullName": "Ive Plumbe", "email": "ive-plumbe@uiowa.edu", "hireDate": "08/16/2015", "retired": true, "inactive": true },
    { "id": 8838, "hawkId": "fkeitch1u", "univId": "00327289", "firstName": "Frederic", "lastName": "Keitch", "fullName": "Frederic Keitch", "email": "frederic-keitch@uiowa.edu", "hireDate": "03/28/2015", "retired": false, "inactive": true },
    { "id": 7516, "hawkId": "elalor1v", "univId": "00638318", "firstName": "Elisabetta", "lastName": "Lalor", "fullName": "Elisabetta Lalor", "email": "elisabetta-lalor@uiowa.edu", "hireDate": "04/07/1998", "retired": false, "inactive": true },
    { "id": 7083, "hawkId": "tpyson1w", "univId": "00464225", "firstName": "Tamas", "lastName": "Pyson", "fullName": "Tamas Pyson", "email": "tamas-pyson@uiowa.edu", "hireDate": "06/15/2002", "retired": true, "inactive": true },
    { "id": 3824, "hawkId": "gokeefe1x", "univId": "00146544", "firstName": "Gretel", "lastName": "O'Keefe", "fullName": "Gretel O'Keefe", "email": "gretel-o'keefe@uiowa.edu", "hireDate": "01/22/2012", "retired": true, "inactive": true },
    { "id": 2626, "hawkId": "ndrinan1y", "univId": "00532978", "firstName": "Nero", "lastName": "Drinan", "fullName": "Nero Drinan", "email": "nero-drinan@uiowa.edu", "hireDate": "08/04/2017", "retired": true, "inactive": true },
    { "id": 7164, "hawkId": "csplain1z", "univId": "00966293", "firstName": "Cecilla", "lastName": "Splain", "fullName": "Cecilla Splain", "email": "cecilla-splain@uiowa.edu", "hireDate": "04/21/2021", "retired": false, "inactive": true },
    { "id": 5622, "hawkId": "apuckett20", "univId": "00895741", "firstName": "Abie", "lastName": "Puckett", "fullName": "Abie Puckett", "email": "abie-puckett@uiowa.edu", "hireDate": "05/23/2008", "retired": true, "inactive": true },
    { "id": 6512, "hawkId": "felmes21", "univId": "00395781", "firstName": "Fonz", "lastName": "Elmes", "fullName": "Fonz Elmes", "email": "fonz-elmes@uiowa.edu", "hireDate": "01/19/1991", "retired": true, "inactive": true },
    { "id": 4295, "hawkId": "mdeporte22", "univId": "00881930", "firstName": "Mil", "lastName": "Deporte", "fullName": "Mil Deporte", "email": "mil-deporte@uiowa.edu", "hireDate": "04/05/1995", "retired": true, "inactive": false },
    { "id": 2832, "hawkId": "geastmead23", "univId": "00617432", "firstName": "Gretta", "lastName": "Eastmead", "fullName": "Gretta Eastmead", "email": "gretta-eastmead@uiowa.edu", "hireDate": "10/13/1995", "retired": true, "inactive": true },
    { "id": 8817, "hawkId": "wpanas24", "univId": "00045500", "firstName": "Way", "lastName": "Panas", "fullName": "Way Panas", "email": "way-panas@uiowa.edu", "hireDate": "08/09/2017", "retired": false, "inactive": false },
    { "id": 6927, "hawkId": "zbarling25", "univId": "00078128", "firstName": "Zorina", "lastName": "Barling", "fullName": "Zorina Barling", "email": "zorina-barling@uiowa.edu", "hireDate": "08/16/1998", "retired": true, "inactive": true },
    { "id": 9612, "hawkId": "pbergstram26", "univId": "00375188", "firstName": "Price", "lastName": "Bergstram", "fullName": "Price Bergstram", "email": "price-bergstram@uiowa.edu", "hireDate": "11/27/2009", "retired": false, "inactive": true },
    { "id": 3558, "hawkId": "fteasdale27", "univId": "00927101", "firstName": "Fair", "lastName": "Teasdale", "fullName": "Fair Teasdale", "email": "fair-teasdale@uiowa.edu", "hireDate": "03/03/1990", "retired": true, "inactive": false },
    { "id": 6765, "hawkId": "bholston28", "univId": "00181238", "firstName": "Brocky", "lastName": "Holston", "fullName": "Brocky Holston", "email": "brocky-holston@uiowa.edu", "hireDate": "12/15/2018", "retired": false, "inactive": true },
    { "id": 4494, "hawkId": "ewalasik29", "univId": "00751738", "firstName": "Ermanno", "lastName": "Walasik", "fullName": "Ermanno Walasik", "email": "ermanno-walasik@uiowa.edu", "hireDate": "06/06/2004", "retired": true, "inactive": false },
    { "id": 4168, "hawkId": "pruxton2a", "univId": "00852703", "firstName": "Pablo", "lastName": "Ruxton", "fullName": "Pablo Ruxton", "email": "pablo-ruxton@uiowa.edu", "hireDate": "04/28/1991", "retired": false, "inactive": false },
    { "id": 1022, "hawkId": "jcopeman2b", "univId": "00819011", "firstName": "Joe", "lastName": "Copeman", "fullName": "Joe Copeman", "email": "joe-copeman@uiowa.edu", "hireDate": "07/24/2011", "retired": true, "inactive": false },
    { "id": 7838, "hawkId": "rmcshee2c", "univId": "00682567", "firstName": "Robenia", "lastName": "McShee", "fullName": "Robenia McShee", "email": "robenia-mcshee@uiowa.edu", "hireDate": "01/03/1996", "retired": true, "inactive": false },
    { "id": 5482, "hawkId": "adunkinson2d", "univId": "00817602", "firstName": "Annalee", "lastName": "Dunkinson", "fullName": "Annalee Dunkinson", "email": "annalee-dunkinson@uiowa.edu", "hireDate": "04/20/1993", "retired": false, "inactive": false },
    { "id": 1396, "hawkId": "scolquit2e", "univId": "00325842", "firstName": "Sigfrid", "lastName": "Colquit", "fullName": "Sigfrid Colquit", "email": "sigfrid-colquit@uiowa.edu", "hireDate": "10/20/1992", "retired": false, "inactive": false },
    { "id": 8700, "hawkId": "gfrowen2f", "univId": "00289843", "firstName": "Glori", "lastName": "Frowen", "fullName": "Glori Frowen", "email": "glori-frowen@uiowa.edu", "hireDate": "05/29/2013", "retired": false, "inactive": false },
    { "id": 8282, "hawkId": "rsannes2g", "univId": "00346699", "firstName": "Reba", "lastName": "Sannes", "fullName": "Reba Sannes", "email": "reba-sannes@uiowa.edu", "hireDate": "04/26/2017", "retired": true, "inactive": true },
    { "id": 9311, "hawkId": "cheeron2h", "univId": "00929705", "firstName": "Cory", "lastName": "Heeron", "fullName": "Cory Heeron", "email": "cory-heeron@uiowa.edu", "hireDate": "03/14/2004", "retired": true, "inactive": false },
    { "id": 2779, "hawkId": "pkynoch2i", "univId": "00874844", "firstName": "Pace", "lastName": "Kynoch", "fullName": "Pace Kynoch", "email": "pace-kynoch@uiowa.edu", "hireDate": "07/11/2015", "retired": true, "inactive": true },
    { "id": 7684, "hawkId": "omarnane2j", "univId": "00776460", "firstName": "Olva", "lastName": "Marnane", "fullName": "Olva Marnane", "email": "olva-marnane@uiowa.edu", "hireDate": "09/18/2003", "retired": true, "inactive": true },
    { "id": 3312, "hawkId": "lreiglar2k", "univId": "00533738", "firstName": "Louie", "lastName": "Reiglar", "fullName": "Louie Reiglar", "email": "louie-reiglar@uiowa.edu", "hireDate": "10/29/2018", "retired": false, "inactive": false },
    { "id": 6580, "hawkId": "yvigours2l", "univId": "00982156", "firstName": "Yorker", "lastName": "Vigours", "fullName": "Yorker Vigours", "email": "yorker-vigours@uiowa.edu", "hireDate": "06/20/2001", "retired": true, "inactive": true },
    { "id": 5808, "hawkId": "khails2m", "univId": "00467737", "firstName": "Kerr", "lastName": "Hails", "fullName": "Kerr Hails", "email": "kerr-hails@uiowa.edu", "hireDate": "04/26/2016", "retired": false, "inactive": false },
    { "id": 7544, "hawkId": "lmcalpin2n", "univId": "00315938", "firstName": "Lilla", "lastName": "McAlpin", "fullName": "Lilla McAlpin", "email": "lilla-mcalpin@uiowa.edu", "hireDate": "12/28/1994", "retired": false, "inactive": false },
    { "id": 9684, "hawkId": "amanagh2o", "univId": "00765071", "firstName": "Allina", "lastName": "Managh", "fullName": "Allina Managh", "email": "allina-managh@uiowa.edu", "hireDate": "07/16/2016", "retired": true, "inactive": true },
    { "id": 7229, "hawkId": "snoddle2p", "univId": "00372596", "firstName": "Skye", "lastName": "Noddle", "fullName": "Skye Noddle", "email": "skye-noddle@uiowa.edu", "hireDate": "06/05/2016", "retired": false, "inactive": true },
    { "id": 5489, "hawkId": "vgirard2q", "univId": "00676910", "firstName": "Vere", "lastName": "Girard", "fullName": "Vere Girard", "email": "vere-girard@uiowa.edu", "hireDate": "03/23/2016", "retired": true, "inactive": false },
    { "id": 7688, "hawkId": "diapico2r", "univId": "00566940", "firstName": "Delmor", "lastName": "Iapico", "fullName": "Delmor Iapico", "email": "delmor-iapico@uiowa.edu", "hireDate": "04/27/2006", "retired": true, "inactive": true },
  ])

  const filter = ref({
    query: '',
    cols: {
      inactive: '',
    }
  })

  const size = ref('')
  const headVariant = ref('')
  const striped = ref(true)
  const bordered = ref(true)
  const borderless = ref(false)
  const outlined = ref(false)
  const hover = ref(true)
  const footClone = ref(false)
  const sizes = ref([
    { value: '',   label: 'Default' },
    { value: 'sm', label: 'Small' },
    { value: 'lg', label: 'Large' },
  ])
  const headVariantOptions = ref([
    { value: '', label: 'None' },
    { value: 'primary', label: 'Primary' },
    { value: 'secondary', label: 'Secondary' },
  ])

  const currentPage = ref(1)
  const perPage = ref(10)
  const totalRows = computed( () => filteredItems.value.length || 0 )
  const filteredItems = ref([...items.value])

  const captionIconClass = computed(() => headVariant.value === 'secondary' ? 'text-secondary' : 'text-primary')

  const handleRowClick = (e) => {
      console.log('handleRowClick...' + JSON.stringify(e));
  }
  const handleRowDoubleClick = (e) => {
      console.log('handleRowDoubleClick...' + JSON.stringify(e));
  }
  const handleRowRightClick = (e) => {
      console.log('handleRowRightClick...' + JSON.stringify(e));
  }
  const handleRowHover = (e) => {
      // console.log('handleRowHover...' + JSON.stringify(e));
  }
  const handleRowUnhover = (e) => {
      // console.log('handleRowUnhover...' + JSON.stringify(e));
  }
  const handleHeadClick = (e) => {
      console.log('handleHeadClick...' + JSON.stringify(e));
  }
  const handleSortChange = (e) => {
      console.log('handleSortChange...' + JSON.stringify(e));
  }
  const handleFiltered = (e) => {
      // console.log('handleFiltered...' + e);
      filteredItems.value = e;
  }
</script>
