<script setup lang="ts">
type MarkdownOverview = any;
const { overview } = defineProps<{
    overview: MarkdownOverview
}>();

const { data: content, status } = await useFetch(`/api/file/content/${encodeURIComponent(overview.path)}`, { watch: [overview] });

const { user } = useUserSession();
const isOwner = computed(() => user.value?.id === overview.owner);
</script>

<template>
    <div class="flex flex-1 justify-start items-start flex-col xl:px-24 md:px-8 px-4 py-6">
        <Loading v-if="status === 'pending'" />
        <template v-else>
            <div class="flex flex-1 flex-row justify-between items-center">
                <ProseH1>{{ overview.title }}</ProseH1>
                <div class="flex gap-4">
                    <NuxtLink :href="{ name: 'explore-edit', hash: '#' + overview.path }" v-if="isOwner"><Button>Modifier</Button></NuxtLink>
                </div>
            </div>
            <MarkdownRenderer v-if="content" :content="content.content" />
        </template>
    </div>
</template>