<script setup>
import dayjs from "dayjs";

const dataStore = useDataStore()

const templateColumns = [
  {
    key: "state",
    label: "Status"
  },
  {
    key: "user",
    label: "Mitarbeiter"
  }, {
    key: "date",
    label: "Datum"
  }, {
    key: "start",
    label: "Start"
  }, {
    key: "end",
    label: "Ende"
  }, {
    key: "device",
    label: "Gerät"
  }
]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))

</script>

<template>
  <UDashboardNavbar title="Anwesenheiten">

  </UDashboardNavbar>
  <UDashboardToolbar>
    <template #right>
      <USelectMenu
          v-model="selectedColumns"
          icon="i-heroicons-adjustments-horizontal-solid"
          :options="templateColumns"
          multiple
          class="hidden lg:block"
          by="key"
      >
        <template #label>
          Spalten
        </template>
      </USelectMenu>
    </template>
  </UDashboardToolbar>
  <UTable
    :rows="dataStore.workingtimes"
    :columns="columns"
    :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Anwesenheiten anzuzeigen' }"
  >
    <template #user-data="{row}">
      {{dataStore.getProfileById(row.user).fullName }}
    </template>
    <template #device-data="{row}">
      <!-- TODO: Load devices      -->
    </template>
  </UTable>
</template>

<style scoped>

</style>