<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>
        <UNavigationMenu :items="links" highlight class="-mx-1 flex-1" />
      </UDashboardToolbar>
    </template>

    <template #body>
      <TheForm :application-form="applicationForm" @update:application-form="updateApplicationForm" />
    </template>
  </UDashboardPanel>
</template>

<script setup lang="ts">
const route = useRoute()

definePageMeta({
  // Prevent whole page from re-rendering when navigating between sections to keep state
  key: (route) => `${route.params.id}`
})

const applicationFormId = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
const {
  applicationForm,
  navigationLinks: links,
  dropdownItems: items,
  updateApplicationForm
} = await useApplicationFormNavigation(applicationFormId!)
</script>
