<script setup>
import { DashboardLayout, EpisodeEntry, LoadingConditional } from '@/components'
import { ref, onMounted } from 'vue';
import { getEpisodeActions } from '@/api/pse-squared.js';

const episodes = ref(null);
const received = ref(false);

onMounted(async () => {
    try {
        const response = await getEpisodeActions();

        received.value = true;
        episodes.value = response.data;
    } catch(err) {
    }
});

</script>
<template>
    <DashboardLayout>
        <h1 class="h1 mb-4">
            {{ $t("message.mostRecentlyHeardEpisodes") }}
        </h1>
        
        <LoadingConditional :waiting-for="received">
            <div class="list-group w-auto">
                <EpisodeEntry
                    v-for="(action, index) in episodes.actions"
                    :key="index"
                    :action="action"
                />
            </div>
            <p v-if="episodes.actions.length == 0">
                {{ $t('message.noEpisodes') }}
            </p>
        </LoadingConditional>
    </DashboardLayout>
</template>
<style>
</style>

