<script setup lang="ts">
import Button from 'primevue/button';
import ProfileListEntry from './ProfileListEntry.vue';
import { usePrfStore } from '../stores';

const prf = usePrfStore();
</script>

<template>
    <div class="mt-4 flex flex-row flex-wrap align-middle gap-4">
        <Button
            label="O.N.G.E.K.I. profile"
            icon="pi pi-plus"
            class="ongeki-button profile-button"
            @click="() => prf.create('ongeki')"
        />
        <Button
            label="CHUNITHM profile"
            icon="pi pi-plus"
            class="chunithm-button profile-button"
            @click="() => prf.create('chunithm')"
            :disabled="true"
        />
    </div>
    <div class="mt-12 flex flex-col flex-wrap align-middle gap-4">
        <div v-for="p in prf.list">
            <ProfileListEntry :p="p" />
        </div>
    </div>
</template>

<style>
.profile-button {
    width: 14em;
    white-space: nowrap;
}

.ongeki-button {
    background-color: var(--p-pink-400) !important;
    border-color: var(--p-pink-400) !important;
}

.ongeki-button:hover,
.ongeki-button:active {
    background-color: var(--p-pink-300) !important;
    border-color: var(--p-pink-300) !important;
}

.chunithm-button {
    background-color: var(--p-yellow-400) !important;
    border-color: var(--p-yellow-400) !important;
}
.chunithm-button:hover,
.chunithm-button:active {
    background-color: var(--p-yellow-300) !important;
    border-color: var(--p-yellow-300) !important;
}
</style>
