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

        <template #right>
          <UTooltip text="Notifications" :shortcuts="['N']">
            <UButton color="neutral" variant="ghost" square>
              <UChip color="error" inset>
                <UIcon name="i-lucide-bell" class="size-5 shrink-0" />
              </UChip>
            </UButton>
          </UTooltip>
        </template>
      </UDashboardNavbar>

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

    <template #body>
      <UForm class="space-y-4" :state="{}" @submit="onSubmit">
        <FormEngine :form-elements="data?.content[0].formElements ?? []" />
        <UButton type="submit">Submit</UButton>
      </UForm>
    </template>
  </UDashboardPanel>
</template>

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

const { getAllApplicationForms } = useApplicationForm()

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

function onSubmit() {
  console.log('Submitted')
}
</script>
