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

const contentPath = computed(() => route.path)
const { data: navigation } = await useAsyncData('docs-navigation', () => fetchContentNavigation())
const { data: page } = await useAsyncData(
  () => `docs-page-${contentPath.value}`,
  () => queryContent(contentPath.value).findOne(),
  { watch: [contentPath] }
)

if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Seite nicht gefunden' })
}
</script>

<template>
  <div class="docs-layout">
    <aside class="docs-aside">
      <NuxtLink class="docs-brand" to="/">FEDEO Docs</NuxtLink>
      <DocsSidebar :items="navigation || []" />
    </aside>

    <main class="docs-main">
      <article class="docs-article">
        <ContentRenderer :value="page" />
      </article>
    </main>
  </div>
</template>
