<template>
    <div v-if="status === 'pending'" class="flex">
        <Head>
            <Title>d[any] - Chargement</Title>
        </Head>
        <Loading />
    </div>
    <div class="flex flex-1 justify-start items-start" v-else-if="page">
        <Head>
            <Title>d[any] - Accueil</Title>
        </Head>
        <div class="flex flex-1 justify-start items-start flex-col xl:px-24 md:px-8 px-4 py-6">
            <div class="flex flex-1 flex-row justify-between items-center">
                <ProseH1>{{ page.title }}</ProseH1>
                <div class="flex gap-4">
                    <NuxtLink no-prefetch :href="{ name: 'explore-edit-path', params: { path: 'index' } }"><Button v-if="isOwner">Modifier la page</Button></NuxtLink>
                    <NuxtLink no-prefetch :href="{ name: 'explore-edit' }"><Button v-if="isOwner">Configurer le projet</Button></NuxtLink>
                </div>
            </div>
            <Markdown :content="page.content" />
        </div>
    </div>
    <div v-else-if="status === 'error'">
        <Head>
            <Title>d[any] - Erreur</Title>
        </Head>
        <span>{{ error?.message }}</span>
    </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 { loggedIn, user } = useUserSession();

const { data: page, status, error } = await useFetch(`/api/file/index`);
const isOwner = computed(() => user.value?.id === page.value?.owner);
</script>