<template>
    <!-- <HoverPopup @before-show="fetch">
        <template #content>
            <Suspense suspensible>
                <div class="mw-[400px]">
                    <div v-if="fetched === false" class="loading w-[400px] h-[150px]"></div>
                    <template v-else-if="!!data">
                        <div v-if="data.description" class="pb-4 pt-3 px-8">
                            <span class="text-2xl font-semibold">#{{ data.tag }}</span>
                            <Markdown :content="data.description"></Markdown>
                        </div>
                        <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
                            <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Fichier vide</div>
                            <div class="text-lg text-light-60 dark:text-dark-60">Cette page est vide</div>
                        </div>
                    </template>
                    <div class="h-100 w-100 flex flex-1 flex-col justify-center items-center" v-else>
                        <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Impossible d'afficher</div>
                        <div class="text-lg text-light-60 dark:text-dark-60">Cette page est impossible à traiter</div>
                    </div>
                </div>
                <template #fallback><div class="loading w-[400px] h-[150px]"></div></template>
            </Suspense>
        </template>
        <template #default>
            <span class="before:content-['#'] cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30">
                <slot></slot>
            </span>
        </template>
    </HoverPopup> -->
    <span class="before:content-['#'] cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30">
        <slot></slot>
    </span>
</template>

<!-- <script setup lang="ts">
import type { Tag } from '~/types/api';

const { tag } = defineProps({
    tag: {
        type: String,
        required: true,
    }
});

const data = ref<Tag>(), fetched = ref(false);
const route = useRoute();
const project = computed(() => parseInt(Array.isArray(route.params.projectId) ? '0' : route.params.projectId));
async function fetch()
{
    if(fetched.value)
        return;

    data.value = await $fetch(`/api/project/${project.value}/tags/${encodeURIComponent(tag)}`);
    fetched.value = true;
}
</script> -->