<script setup lang="ts">
const { data: characters, error, status } = await useFetch(`/api/character`, { params: { visibility: "public" } });
</script>

<template>
    <Head>
        <Title>d[any] - Liste des personnages</Title>
    </Head>
    <div class="flex flex-col">
        <div v-if="status === 'pending'" class="flex flex-1 justify-center align-center">
            <Loading size="large" />
        </div>
        <div v-else-if="status === 'success'" class="grid p-6 2xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 gap-4 w-full">
            <div class="border border-light-30 dark:border-dark-30 p-3 flex flex-row gap-4" v-for="character of characters">
                <Avatar size="large" icon="radix-icons:person" src="" />
                <div class="flex flex-1 flex-shrink flex-col truncate">
                    <NuxtLink class="text-xl font-bold hover:text-accent-blue truncate" :to="{ name: 'character-id', params: { id: character.id } }" :title="character.name">{{ character.name }}</NuxtLink>
                    <span class="text-sm truncate">Niveau {{ character.level }}</span>
                </div>
            </div>
        </div>
        <div v-else>
            <span>Erreur de chargement</span>
            <span>{{ error?.message }}</span>
        </div>
    </div>
</template>