<script setup lang="ts">
const route = useRoute();
const { data: user } = useFetch(`/api/users/${route.params.id}`);
const { data: projects } = useFetch(`/api/users/${route.params.id}/projects`);
const { data: comments } = useFetch(`/api/users/${route.params.id}/comments`);
</script>

<template>
    <Head>
        <Title>{{ user?.username ?? "Inconnu" }}</Title>
    </Head>
    <div v-if="user" class="border border-light-35 dark:border-dark-35 p-4 flex gap-4">
        <div>                            
            <picture :width=128 :height=128 class="flex" >
                <source :src="`/users/${user?.id}/normal.jpg`" :width=128 :height=128 />
                <Icon :icon="`users/unknown`" :width=128 :height=128 ></Icon>
            </picture>
        </div>
        <div class="flex flex-col">
            <span class="text-xl font-semibold">{{ user?.username }}</span>
            <span>Inscrit depuis le {{ format(new Date(user.signin_timestamp), 'dd/MM/yyyy') }}</span>
            <br/>
            <span>A créé {{ projects?.length ?? 0 }} projet(s)</span>
            <span>A créé {{ comments?.length ?? 0 }} commentaire(s)</span>
        </div>
    </div>
    <div v-else class="h-100 w-100 flex flex-1 flex-col justify-center items-center">
        <div class="text-3xl font-extralight tracking-wide text-light-60 dark:text-dark-60">Introuvable</div>
        <div class="text-lg text-light-60 dark:text-dark-60">Cette page n'existe pas</div>
    </div>
</template>