<script setup>
  const router = useRouter()

  const items = ref([])

  const setupPage = async () => {
    items.value = (await useNuxtApp().$api("/api/tenant/users")).users
    items.value = items.value.map(i => i.profile)
  }

  setupPage()

  const templateColumns = [
    {
      key: 'employee_number',
      label: "MA-Nummer",
    },{
      key: 'full_name',
      label: "Name",
    },{
      key: "email",
      label: "E-Mail",
    }
  ]
  const selectedColumns = ref(templateColumns)
  const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))

</script>

<template>
  <UDashboardNavbar title="Benutzer Einstellungen">
      <template #right>
        <UButton
          @click="router.push(`/profiles/create`)"
          disabled
        >
          + Mitarbeiter
        </UButton>
      </template>
  </UDashboardNavbar>
  <UTable
    :rows="items"
    :columns="columns"
    @select="(i) => navigateTo(`/staff/profiles/${i.id}`)"
  >

  </UTable>
</template>

<style scoped>

</style>