
<style>
    @page {
        header: html_myHeader;
        footer: html_myFooter;
        margin-top: 4cm;
    }

    h1 {
        text-align: center;
        font-weight: bold;
        font-size: 14pt;
    }

    h2 {
        font-weight: bold;
        font-size: 16pt;
        margin: 0;
    }

    table.items {
        font-size: 10pt;
    }

    table.items td {
        padding: 5pt 6pt;
        border-bottom: 1px solid cmyk(0, 0, 0, 8);
        vertical-align: top;
    }

    table.items tr:nth-child(2n+1) {
        background-color: cmyk(0, 0, 0, 4);
    }
</style>

<div>

    <htmlpageheader name="myHeader" style="display:none">
        <table width="100%" border="0">
            <tr>
                <td width="33%" style="color: cmyk(0,0,0,70); font-size: 9pt;">
                    <p style="font-weight: bold">TEST</p>
                    <p>Berichtzeitraum: xx}</p>
                </td>
                <td width="33%" align="center" style="font-weight: bold;font-size: 12pt">XXX</td>
                <td width="33%" style="text-align: right;"></td>
            </tr>
        </table>
    </htmlpageheader>

    <htmlpagefooter name="myFooter" style="display:none">
        <table width="100%">
            <tr>
                <td width="50%" style="font-size: 8pt; color: cmyk(0,0,0,60)">Export: {DATE j.m.Y H:i}</td>
                <td width="50%" style="font-size: 8pt; color: cmyk(0,0,0,60);text-align: right;">Seite {PAGENO}/{nbpg}
                </td>
            </tr>
        </table>
    </htmlpagefooter>

    {% if items is empty %}
        <p>Es sind keine Zahlungen in diesem Berichtzeitraum.</p>
    {% endif %}

    <table class="items" cellspacing="0" cellpadding="0" style="width: 100%">
        {% for item in items -%}
            <tr>
                <td style="width:12pt;text-align:right;font-weight: bold; color: cmyk(0,0,0,70);font-size: 10pt">{{ loop.index }}</td>
                <td>
                    <p>{{ item.billingAddress|nl2br }}</p>
                    <p>{{ item.billingEmail }}</p>
                    {% if participant.member %}
                        <p style="color: cmyk(0,0,0,70)">
                            <span style="font-weight: bold">Kontakt:</span> {{ participant.member.firstname ~ ' ' ~ participant.member.lastname }}
                        </p>
                    {% endif %}
                </td>
                <td style="color: cmyk(0,0,0,70)">
                    <p>{{ item.status }}</p>
                </td>
                <td style="color: cmyk(0,0,0,70)">
                    <span
                            {% if item.isCancelled %}
                                style="text-decoration: line-through"
                            {% endif %}
                    >
                        {{ (item.totalAmount/100)|format_currency('EUR', locale='de') }}
                    </span>
                </td>
                <td style="width: 22%"></td>
            </tr>
        {% endfor %}
    </table>
</div>
