<template>
  <UDashboardPanel id="home">
    <template #header>
      <UDashboardNavbar title="Home" :ui="{ right: 'gap-3' }">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>

        <template #right>
          <UDropdownMenu :items="items">
            <UButton icon="i-lucide-plus" size="md" class="rounded-full" />
          </UDropdownMenu>
        </template>
      </UDashboardNavbar>

      <UDashboardToolbar>
        <template #left> toolbar left </template>
      </UDashboardToolbar>
    </template>

    <template #body>
      <UPageList>
        <UPageCard
          v-for="(applicationFormElem, index) in applicationForms"
          :key="index"
          variant="ghost"
          :to="`application-forms/${applicationFormElem.id}`"
        >
          <template #body>
            #{{ index }} {{ applicationFormElem.id }} {{ applicationFormElem.createdAt }}
            {{ applicationFormElem.isTemplate }}
          </template>
        </UPageCard>
      </UPageList>
    </template>
  </UDashboardPanel>
</template>

<script setup lang="ts">
import type { PagedApplicationFormDto } from '~/.api-client'
const { getAllApplicationForms } = useApplicationForm()

const items = [
  [
    {
      label: 'Neuer Mitbestimmungsantrag',
      icon: 'i-lucide-send',
      to: '/create'
    }
  ]
]

const { data } = await useAsyncData<PagedApplicationFormDto>(async () => {
  return await getAllApplicationForms()
})

const applicationForms = computed({
  get: () => data?.value?.content ?? [],
  set: (val) => {
    if (val && data.value) {
      data.value.content = val
    }
  }
})
</script>
