<script setup>
import {onMounted, reactive} from "vue";
import Icon from "../../../../../Views/Components/Icon.vue";

const myParticipations = reactive({
    'myParticipations': '',

})

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

function navigateTo(url) {
    window.location.href = url;
}
</script>

<template>
    <table v-if="myParticipations.myParticipations.length >  0">
        <tr v-for="participation in myParticipations.myParticipations.slice(0, 3)" class="widget-content-item">
            <td>
                {{participation.eventName}}<br />
                {{participation.event.location}},
                {{participation.arrivalDateReadable}} - {{participation.departureDateReadable}}
            </td>
            <td>
                <Icon name="euro-sign" style="padding: 2px; font-size: 10pt; color: #ffffff; margin-right: 5px;" :class="participation.needs_payment ? 'bg-red' : 'bg-green'" />
                <Icon name="award" style="padding: 2px; font-size: 10pt; color: #ffffff; margin-right: 5px;" :class="participation.cocColor" />
            </td>
        </tr>
    </table>
    <p v-else>
        Du bist aktuelle für keine Veranstaltung angemeldet.<br /><br />
        <input type="button" value="Jetzt anmelden" class="button" @click="navigateTo('/event/available-events')" />

    </p>
</template>

<style scoped>
.bg-red {
    background-color: red;
}

.bg-green {
    background-color: green;
}

.bg-yellow {
    background-color: #e4e44c;
}
</style>
