<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*in
        </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;">
            {{ $accountIban }}
        </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>

@php
    $girocodeSrc = $message->embedData($girocodeBinary, 'girocode.png', 'image/png');
@endphp
<table style="margin: 20px;">
    <tr style="vertical-align: top; background-color: #eaeaea; border-spacing: 0">

        <td style="padding: 20px; text-align: center; font-weight: bold;">
            <strong>
                Bequem überweisen mit QR-Code
            </strong><br/><br/>

            <img
                style="padding-left: 20px;width: 150px; height: 150px;"
                src="{{ $girocodeSrc }}"
                alt="Giro-Code">
        </td>
        <td>
            <p style="padding-left:10px; padding-right: 10px; text-align: left;">
                <strong>Und so funktioniert es</strong><br/>
                <ul style="text-align: left; list-style: decimal; font-weight: normal">
                    <li style="padding-right: 10px;">Mache einen Screenshot des QR-Codes</li>
                    <li style="padding-right: 10px;">Öffne deine Banking-App und wähle den Menüpunkt
                        „(Foto-)Überweisung“.
                    </li>
                    <li style="padding-right: 10px;">Wähle das gespeicherte Bild aus</li>
                </ul>
            </p>
        </td>
    </tr>
</table>

<p>
    Bitte zahle immer mit dem vorgegeben Betreff, damit deine Zahlung möglichst einfach zugeordnet werden kann.<br/>
    Sollte die Zahlung innerhalb dieser Frist nicht oder nur teilweise möglich sein, kontaktiere bitte die
    Aktionsleitung, sodass wir eine gemeinsame Lösung finden können.
</p>
