<script setup>
import {onMounted, reactive} from "vue";

const events = reactive({
    'upcomingEvents': '',

})

onMounted(async () => {
    const response = await fetch('/api/v1/dashboard/upcoming-events');
    const data = await response.json();
    Object.assign(events, data);
});

</script>

<template>
    <table class="widget-content-item" v-if="events.upcomingEvents.length > 0">
        <tr>
            <td style="font-weight: bold">Veranstaltung</td>
            <td style="font-weight: bold">Teilis</td>
            <td style="font-weight: bold">Team</td>
            <td style="font-weight: bold">GruFüs</td>
        </tr>

        <tr v-for="event in events.upcomingEvents">
            <td><a :href="'/event/details/' + event.identifier" class="link">{{event.nameShort}}</a></td>
            <td style="text-align: center;">{{event.countParticipant}}</td>
            <td style="text-align: center;">{{event.countTeam}}</td>
            <td style="text-align: center;">{{event.countVolunteer}}</td>
        </tr>
    </table>

    <p v-else style="padding: 10px; font-weight: bold">Es existieren im Moment keine Veranstaltungen, für die du verantwortlich bist.</p>

</template>

<style scoped>

</style>
