<script setup lang="ts">

import {CharacterLabel, useCharactersStore} from "@/characters";
import {useAuthStore} from "@/auth";
import {ArrowPathIcon} from '@heroicons/vue/24/outline';

const charactersStore = useCharactersStore()
const authStore = useAuthStore()

const addCharacter = () => authStore.addCharacter();
</script>

<template>
    <div class="grid mb-2 mt-4">
      <div class="mb-4 border-b-1 flex justify-end">
        <button class="mb-2" @click="addCharacter">Add chacarcter</button>
      </div>
      <div v-for="character in charactersStore.characters" :key="character.characterId" class="flex items-center mb-2">
        <CharacterLabel class="grow" :character="character" />
        <button class="btn-icon" @click="charactersStore.reloadActivities(character.characterId)"><ArrowPathIcon /></button>
      </div>
    </div>
</template>