<script setup>
import { ref } from 'vue';
import AisTable from '@/components/table/AisTable.vue'
import AisInput from '@/components/input/AisInput.vue'
import AisRadioGroup from '@/components/radio-group/AisRadioGroup.vue'
import AisRadio from '@/components/radio/AisRadio.vue'

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

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": 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 },
])
</script>

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

      <AisRadioGroup v-model="filter.cols.inactive"
                     size="sm"
                     class="rounded"
                     buttons
                     button-variant="default"
                     button-font="sans">
        <AisRadio value="">All</AisRadio>
        <AisRadio value="true">Inactive</AisRadio>
        <AisRadio value="false">Active</AisRadio>
      </AisRadioGroup>

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

    <AisTable outlined show-empty
              :fields="fields"
              :items="items"
              :filter="filter"
    ></AisTable>
  </div>
</template>