<script setup lang="ts">
definePageMeta({
    guestsGoesTo: '/user/login',
})
let { user, clear } = useUserSession();
</script>

<template>
    <Head>
        <Title>Mon profil</Title>
    </Head>
    <div class="grid grid-cols-4 w-full items-start py-8 gap-6 content-start" v-if="user">
        <div class="flex gap-4 col-span-3 border border-light-35 dark:border-dark-35 p-4">
            <Avatar icon="radix-icons:person" :src="`/users/${user?.id}.medium.jpg`" class="w-32 h-32" />
            <div class="flex flex-col items-start">
                <ProseH5>{{ user.username }}</ProseH5>
                <ProseH5>{{ user.email }}</ProseH5>
                <HoverCard>
                    <template v-slot:default><div class="border-light-red dark:border-dark-red bg-light-red bg-opacity-25 dark:bg-dark-red dark:bg-opacity-25 text-light-red dark:text-dark-red py-1 px-3" v-if="user.state === 0">Votre adresse mail n'as pas encore été validée. <Button class="ms-4">Renvoyez un mail</Button></div></template>
                    <template v-slot:content><span>Tant que votre adresse mail n'as pas été validée, vous n'avez que des droits de lecture.</span></template>
                </HoverCard>
            </div>
        </div>
        <div class="flex-1">
            <Button @click="async () => await clear()">Se deconnecter</Button>
        </div>
        <div class="flex">
            <ProseTable class="!m-0">
                <ProseThead>
                    <ProseTr>
                        <ProseTh>Permission</ProseTh>
                    </ProseTr>
                </ProseThead>
                <ProseTbody>
                    <ProseTr v-for="permission in user.permissions">
                        <ProseTd>{{ permission }}</ProseTd>
                    </ProseTr>
                </ProseTbody>
            </ProseTable>
        </div>
    </div>
</template>