{{-- Zahlungs-Block der Überweisung -- MAIL-Kontext. E-Mail-taugliches Markup (Inline-Styles, Tabellen).
     $giroCodeSrc: Bildquelle des GiroCodes (cid:) -- null, wenn kein GiroCode. --}}
<table cellpadding="0" cellspacing="0" border="0"
       style="width: 100%; max-width: 640px; border-collapse: collapse; font-family: Arial, sans-serif; font-size: 14px; color: #1f2937;">
    <tr>
        <td style="padding: 8px 12px; width: 180px; font-weight: 600; color: #4b5563; border-bottom: 1px solid #e5e7eb;">
            Kontoinhaber
        </td>
        <td style="padding: 8px 12px; border-bottom: 1px solid #e5e7eb;">{{ $accountOwner }}</td>
    </tr>
    <tr>
        <td style="padding: 8px 12px; font-weight: 600; color: #4b5563; border-bottom: 1px solid #e5e7eb;">IBAN</td>
        <td style="padding: 8px 12px; border-bottom: 1px solid #e5e7eb; font-family: monospace;">{{ $iban }}</td>
    </tr>
    <tr>
        <td style="padding: 8px 12px; font-weight: 600; color: #4b5563; border-bottom: 1px solid #e5e7eb;">
            Verwendungszweck
        </td>
        <td style="padding: 8px 12px; border-bottom: 1px solid #e5e7eb;">{{ $paymentPurpose }}</td>
    </tr>
    <tr>
        <td style="padding: 10px 12px; font-weight: 700; color: #111827; border-top: 2px solid #d1d5db;">Betrag</td>
        <td style="padding: 10px 12px; font-weight: 700; color: #111827; border-top: 2px solid #d1d5db;">{{ $amount }}</td>
    </tr>
</table>

@if ($giroCodeSrc)
    <table style="margin: 20px 0; border-collapse: collapse;">
        <tr style="vertical-align: top; background-color: #eaeaea;">
            <td style="padding: 20px; text-align: center; font-weight: bold;">
                <strong>Bequem überweisen mit QR-Code</strong><br/><br/>
                <img src="{{ $giroCodeSrc }}" alt="Giro-Code" style="width: 150px; height: 150px;"/>
            </td>
            <td style="padding: 10px 16px;">
                <strong>Und so funktioniert es</strong>
                <ol style="text-align: left; font-weight: normal; margin: 8px 0 0 18px; padding: 0;">
                    <li style="margin-bottom: 4px;">Öffne deine Banking-App und wähle „(Foto-)Überweisung“.</li>
                    <li style="margin-bottom: 4px;">Scanne den QR-Code (oder wähle einen Screenshot davon aus).</li>
                    <li>Prüfe die Daten und gib die Überweisung frei.</li>
                </ol>
            </td>
        </tr>
    </table>

    <p style="margin: 8px 0;">
        <a href="{{ $reminderUrl }}">Zahlungserinnerung in den Kalender setzen</a>
    </p>
@endif

<p style="margin: 12px 0 0;">
    Bitte zahle immer mit dem vorgegebenen Verwendungszweck, damit deine Zahlung eindeutig zugeordnet werden kann.
</p>

@if ($paymentDeadline)
    <p style="margin: 12px 0 0;">
        Bitte beachte, dass deine Anmeldung erst nach vollständigem Zahlungseingang bestätigt ist. Erfolgt dieser nicht
        bis zum <strong>{{ $paymentDeadline }}</strong>, kann deine Anmeldung storniert werden. Solltest du den Betrag
        bis dahin nicht oder nur teilweise zahlen können, kontaktiere bitte die Aktionsleitung, damit wir eine
        gemeinsame Lösung finden können.
    </p>
@endif