<template>
  <div v-if="page" class="content-page">
    <div class="page-header">
      <div class="container">
        <h1>{{ page.title }}</h1>
      </div>
    </div>

    <div class="container page-body">
      <div class="prose" v-html="page.content" />
    </div>
  </div>

  <div v-else class="not-found container">
    <h1>Page not found</h1>
    <NuxtLink to="/" class="btn btn-primary">Back to Home</NuxtLink>
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const { getPage } = useDirectus()

const { data: page } = await useAsyncData(`page-${route.params.slug}`, () =>
  getPage(route.params.slug as string)
)

if (page.value) {
  useSeoMeta({
    title: page.value.meta_title ?? `${page.value.title} – BasicStack`,
    description: page.value.meta_description ?? undefined,
  })
}
</script>

<style scoped>
.page-header {
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2xl) 0;
}

.page-body {
  padding: var(--space-2xl) var(--space-lg);
  max-width: 768px;
}

.not-found {
  padding: var(--space-3xl) var(--space-lg);
  text-align: center;
}
</style>
