<template>
    <div class="flex flex-1 justify-start items-start" v-if="overview">
        <Head>
            <Title>d[any] - {{ overview.title }}</Title>
        </Head>
        <Markdown v-if="overview.type === 'markdown'" :path="path" />
        <Canvas v-else-if="overview.type === 'canvas'" :path="path" />
        <ProseH2 v-else class="flex-1 text-center">Impossible d'afficher le contenu demandé</ProseH2>
    </div>
    <div v-else>
        <Head>
            <Title>d[any] - Erreur</Title>
        </Head>
        <div><ProseH2>Impossible d'afficher le contenu demandé</ProseH2></div>
    </div>
</template>

<script setup lang="ts">
const route = useRouter().currentRoute;
const path = computed(() => Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path);

const { content } = useContent();
const overview = computed(() => content.value.find(e => e.path === path.value));
</script>