<template>
    <div v-if="status === 'pending'" class="flex"><Loading /></div>
    <div class="flex flex-1 justify-start items-start" v-if="page">
        <template v-if="page.type === 'markdown'">
            <div class="flex flex-1 justify-start items-start flex-col px-24 py-6">
                <div class="flex flex-1 flex-row justify-between items-center">
                    <ProseH1>{{ page.title }}</ProseH1>
                    <Button v-if="isOwner"><NuxtLink :href="{ name: 'explore-edit-path', params: { path: path } }">Modifier</NuxtLink></Button>
                </div>
                <Markdown :content="page.content" />
            </div>
        </template>
        <template v-else>
            <span>Contenu non traitable</span>
        </template>
    </div>
    <div v-else-if="status === 'pending'"><Loading /></div>
    <div v-else-if="status === 'error'">{{ error?.message }}</div>
    <div v-else>Impossible de retrouver le contenu demandé</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 { loggedIn, user } = useUserSession();

const { data: page, status, error } = await useFetch(`/api/file/${encodeURIComponent(path.value)}`, { watch: [route, path], });
const isOwner = computed(() => user.value?.id === page.value?.owner);
</script>