<script setup>
 const props = defineProps({
     event: Object
 })

</script>

<template>
    <h2>Übersicht</h2>
    <div class="participant-flexbox">
        <div class="participant-flexbox-row top">
            <div class="left">
                <h3>Teilnehmende</h3>
                <table class="participant-income-table" style="margin-bottom: 40px;">
                    <tr>
                        <th>Teili</th>
                        <td>7 Personen:</td>
                        <td>35,00 Euro</td>
                    </tr>

                    <tr>
                        <th>Teili</th>
                        <td>7 Personen:</td>
                        <td>35,00 Euro</td>
                    </tr>

                    <tr>
                        <th>Teili</th>
                        <td>7 Personen:</td>
                        <td>35,00 Euro</td>
                    </tr>

                    <tr>
                        <th colspan="2">Sonstiges</th>
                        <td>{{ props.event.flatSupport }}</td>
                    </tr>

                    <tr>
                        <th style="padding-bottom: 20px" colspan="2">Förderung</th>
                        <td style="padding-bottom: 20px">
                            {{ props.event.supportPersonCalced }}<br />
                            <label style="font-size: 9pt;">({{ props.event.supportPerson }} / Tag p.P.)</label>
                        </td>
                    </tr>



                    <tr>
                        <th colspan="2" style="border-width: 1px; border-bottom-style: solid">Gesamt</th>
                        <td style="font-weight: bold; border-width: 1px; border-bottom-style: solid">{{ props.event.totalIncome }}</td>
                    </tr>

                    <tr style="color:#4caf50;" v-if="props.event.totalBalance.value >= 0">
                        <th style="padding-top: 20px; font-size: 12pt !important;" colspan="2">Bilanz</th>
                        <td style="font-weight: bold; padding-top: 20px; font-size: 12pt !important;">{{ props.event.totalBalance.text }}</td>
                    </tr>

                    <tr style="color:#f44336;" v-else>
                        <th style="padding-top: 20px; font-size: 12pt !important;" colspan="2">Bilanz</th>
                        <td style="font-weight: bold; padding-top: 20px; font-size: 12pt !important;">{{ props.event.totalBalance.text }}</td>
                    </tr>

                </table>

                <strong>Anmelde-URL: {{props.event.url}}</strong>
            </div>

            <div class="right">
                <h3>Ausgaben</h3>
                <table class="event-payment-table">
                    <tr v-for="amount in props.event.costUnit.amounts">
                        <th>{{amount.name}}</th>
                        <td>{{amount.string}}</td>
                    </tr>
                    <tr>
                        <th style="color:#f44336; border-width: 1px; border-bottom-style: solid; padding-top: 20px">Gesamt</th>
                        <td style="color:#f44336; border-width: 1px; border-bottom-style: solid; padding-top: 20px; font-weight: bold">{{props.event.costUnit.overAllAmount.text}}</td>
                    </tr>
                </table>
            </div>
        </div>

    </div>

</template>

<style scoped>
.participant-flexbox {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 95%;
    margin: 20px auto 0;
}

.participant-flexbox-row {
    display: flex;
    gap: 10px; /* Abstand zwischen den Spalten */
}

.participant-flexbox-row.top .left {
    flex: 0 0 50%;
    padding: 10px;
}

.participant-flexbox.top .right {
    flex: 0 0 50%;
    padding: 10px;
}

.participant-income-table,
.event-payment-table {
    width: 300px;
}

.participant-income-table th {
    width: 20px;
    font-size: 11pt !important;
}

.participant-income-table tr td:first-child {
    width: 25px !important;
    font-size: 11pt;
}
</style>
