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

const { data: content } = await useFetch(`/api/project/${route.params.projectId}/file`, {
    query: {
        path: unifySlug(route.params.slug)
    }
});

definePageMeta({
    layout: "explorer",
})
</script>

<template>
    <Head>
        <Title v-if="content && content[0]">{{ content[0].title }}</Title>
    </Head>
    <div class="flex-1 flex overflow-hidden">
        <template v-if="!!content && content[0] && content[0].type == 'Markdown' && !!content[0].content">
            <div class="md:px-24 ps-8 my-1 whitespace-break-spaces">
                <ProseH1>{{ content[0].title }}</ProseH1>
                <Markdown v-model="content[0].content"></Markdown>
            </div>
            <CommentSide class="hidden"></CommentSide>
        </template>
        <CanvasRenderer v-else-if="!!content && content[0] && content[0].type == 'Canvas' && !!content[0].content" :canvas="JSON.parse(content[0].content)"></CanvasRenderer>
        <div v-else-if="!!content && content[0]" class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
            <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher (ou vide)</div>
            <div class="text-lg text-light-60 dark:text-dark-60">Cette page est actuellement vide ou impossible à traiter</div>
        </div>
        <div v-else class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
            <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Introuvable</div>
            <div class="text-lg text-light-60 dark:text-dark-60">Cette page n'existe pas</div>
        </div>
    </div>
</template>