<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);
});

</script>

<template>
    <h2>Meine Anmeldungen</h2>
    <p v-for="participation in myParticipations.myParticipations" class="widget-content-item">
        <table>
            <tr>
                <td style="width: 40%; font-weight: bold;">{{participation.eventName}}</td>
                <td style="width: 30%; font-weight: bold;">{{participation.arrivalDateReadable}} - {{participation.departureDateReadable}}</td>
                <td style="width: 30%;">
                    <Icon name="euro-sign" style="padding: 5px; font-size: 11pt; color: #ffffff; margin-right: 5px;" :class="participation.needs_payment ? 'bg-red' : 'bg-green'" />
                    <Icon name="award" style="padding: 5px; font-size: 11pt; color: #ffffff; margin-right: 5px;" :class="participation.cocColor" />

                </td>
            </tr>
            <tr>
                <td>
                    {{participation.event.postal_code}} {{participation.event.location}}<br />
                </td>
                <td>
                    <a class="link" :href="`/api/v1/event/participant/${participation.identifier}/ical`">In Kalender importieren</a>
                </td>
                <td>
                    {{participation.amountPaid.readable}} / {{participation.amountExpected.readable}}
                </td>
            </tr>
            <tr>
                <td colspan="2">&nbsp;</td>
                <td>eFZ-Status: {{participation.efzStatusReadable}}</td>
            </tr>
        </table>
    </p>
    <p v-if="myParticipations.myParticipations.length === 0">Du bist aktuelle für keine Veranstaltung angemeldet.</p>
    <p>
        <input type="button" value="Für weitere Veranstaltung anmelden" class="button" />
    </p>


</template>

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

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

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