<script setup lang="ts">
import { formatDate } from "@vueuse/core";

definePageMeta({
    layout: "content",
});

const { path } = useRoute();
</script>

<template>
    <ContentDoc>
        <template v-slot="{ doc }">
            <UContainer
                v-motion-fade
                class="flex flex-col gap-3 prose dark:prose-invert"
                as="article"
            >
                <h1>{{ doc.title }}</h1>
            </UContainer>

            <UContainer
                class="hidden md:block"
                as="figure"
                v-if="doc.coverImage"
                v-motion-fade
                :delay="500"
            >
                <NuxtImg
                    placeholder
                    :src="doc.coverImage"
                    :alt="doc.title"
                    height="1000"
                    width="1700"
                    class="rounded-lg"
                />
            </UContainer>
            <UContainer
                v-motion-fade
                :delay="500"
                class="flex flex-col gap-3 prose dark:prose-invert !pt-0"
                as="article"
            >
                <ContentRenderer :value="doc" />
            </UContainer>
        </template>

        <template #empty>
            <h1>Document is empty</h1>
        </template>
    </ContentDoc>

    <Footer v-motion-fade :delay="500" />
</template>
