<script setup lang="ts">
const route = useRoute();
const path = unifySlug(route.params.slug);

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

<template>
    <div class="site-body-center-column">
        <div class="render-container">
            <template v-if="!!content && content[0] && content[0].type == 'Markdown' && !!content[0].content">
                <div class="render-container-inner">
                    <div class="publish-renderer">
                        <div class="markdown-preview-view markdown-rendered node-insert-event hide-title">
                            <div class="markdown-preview-sizer markdown-preview-section" style="padding-bottom: 0px;">
                                <h1>{{ content[0].title }}</h1>
                                <Markdown :content="content[0].content" />
                            </div>
                        </div>
                    </div>
                </div>
                <RightComponent :id="content[0].id" />
            </template>
            <CanvasRenderer v-else-if="!!content && content[0] && content[0].type == 'Canvas' && !!content[0].content" :canvas="JSON.parse(content[0].content)" />
            <div v-else-if="!!content && content[0]">
                <div class="not-found-container">
                    <div class="not-found-image"></div>
                    <div class="not-found-title">Impossible d'afficher (ou vide)</div>
                    <div class="not-found-description">Cette page est actuellement vide ou impossible à traiter</div>
                </div>
            </div>
            <div v-else class="not-found-container">
                <div class="not-found-image"></div>
                <div class="not-found-title">Introuvable</div>
                <div class="not-found-description">Cette page n'existe pas</div>
            </div>
        </div>
    </div>
</template>