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

<template>
    <div style="padding: 20px 0;">
        <h3>Hallo {{ props.participant.nicename }},</h3>
        <p>Vielen Dank für dein Interesse an der Veranstaltung {{event.name}}<br />Wir haben folgende Daten erhalten:</p>

        <table class="form-table" style="margin-bottom: 20px;">
            <tr><td>Anreise:</td><td>{{ props.participant.arrival }}</td></tr>
            <tr><td>Abreise:</td><td>{{ props.participant.departure }}</td></tr>
            <tr><td>Teilnahmegruppe:</td><td>{{ props.participant.participationType }}</td></tr>
            <tr><td>&nbsp;</td><td>
                <a class="link" :href="`/api/v1/event/participant/${props.participant.identifier}/ical`">In Kalender importieren</a>
            </td></tr>
        </table>

        <div v-if="props.participant.efz_status === 'NOT_CHECKED'" style="font-weight: bold; color: #b45309; margin-bottom: 20px;">
            Dein erweitertes Führungszeugnis konnte nicht automatisch geprüft werden. Bitte kontaktiere die Aktionsleitung.
        </div>
        <div v-else-if="props.participant.efz_status === 'CHECKED_INVALID'" style="font-weight: bold; color: #dc2626;  margin-bottom: 20px;">
            Du hast noch kein erweitertes Führungszeugnis hinterlegt. Bitte reiche es umgehend ein.
        </div>

        <template v-if="props.participant.paymentSummary?.hasPaymentInformation">
            <!-- Frei konfigurierter Text (z.B. Barzahlung) -->
            <div v-if="props.participant.paymentSummary.html" v-html="props.participant.paymentSummary.html"
                 style="margin-bottom: 16px;"></div>

            <!-- Strukturierte Zeilen (z.B. Überweisung) -->
            <template v-else>
                <table class="form-table" style="margin-bottom: 16px;">
                    <tr v-for="(line, index) in props.participant.paymentSummary.lines" :key="line.label">
                        <td>{{ line.label }}:</td>
                        <td><strong v-if="line.label === 'Betrag'">{{ line.value }}</strong>
                            <template v-else>{{ line.value }}</template>
                        </td>
                        <td v-if="index === 0 && props.participant.paymentSummary.showGiroCode && props.participant.identifier !== ''"
                            :rowspan="props.participant.paymentSummary.lines.length"
                            style="vertical-align: top; padding-left: 20px;">
                            <img :src="'/print-girocode/' + props.participant.identifier" alt="GiroCode"
                                 style="max-width: 180px;"/>
                            <span
                                style="width: 180px; text-align: center; display: block; font-size: 0.8rem; color: #6b7280; margin-top: 4px;">Giro-Code</span>
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>
                            <a class="link"
                               :href="`/api/v1/event/participant/${props.participant.identifier}/ical-payment`">Erinnerung
                                in Kalender setzen</a>
                        </td>
                    </tr>
                </table>

                <p>
                    Bitte beachte, dass deine Anmeldung erst nach Zahlungseiongang vollständig ist.<br/>
                    Wenn dieser nicht bis zum {{ props.event.registrationFinalEnd.formatted }} erfolgt, kann deine
                    Anmeldung storniert werden.<br/><br/>
                    Solltest du den Beitrag bis zu diesem Datum nicht oder nur teilweise überweisen können, kontaktiere
                    bitte die Aktionsleitung, damit wir eine gemeinsame Lösiung finden können.
                </p>
            </template>
        </template>
        <p v-else>
            Du musst keinen Beitrag überweisen. Deine Anmeldung ist bestätigt.
        </p>

        <p>
            Du erhältst innerhalb von 2 Stunden eine E-Mail mit weiteren Informationen.<br />
            Kontakt: <a :href="'mailto:' + props.event.email" style="color: #2563eb;">{{ props.event.email }}</a>
        </p>
    </div>
</template>
