<style>
    @page {
        header: html_header;
        footer: html_footer;
        margin-top: 3.2cm;
    }

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

    table.meta {
        font-size: 10pt;
        color: cmyk(0, 0, 0, 80);
        margin-bottom: 16pt;
    }

    table.meta td {
        padding: 1pt 0;
        vertical-align: top;
    }

    table.sums {
        width: 100%;
        font-size: 11pt;
    }

    table.sums th {
        text-align: left;
        border-bottom: 1.5px solid black;
        padding: 6pt;
        font-size: 8.5pt;
        text-transform: uppercase;
        color: cmyk(0, 0, 0, 70);
    }

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

    table.sums td.num {
        text-align: right;
    }

    table.sums tfoot td {
        font-weight: bold;
        font-size: 12pt;
        border-top: 2px solid black;
        border-bottom: none;
    }
</style>

<htmlpageheader name="header" style="display:none">
    <table width="100%" border="0">
        <tr>
            <td style="font-weight: bold; font-size: 11pt;">Kassenbericht</td>
            <td style="text-align: right; font-size: 9pt; color: cmyk(0,0,0,60);">Erstellt: {DATE j.m.Y H:i}</td>
        </tr>
    </table>
</htmlpageheader>

<htmlpagefooter name="footer" style="display:none">
    <table width="100%">
        <tr>
            <td style="font-size: 8pt; color: cmyk(0,0,0,60)">Ferienpass &ndash; Kassenbericht</td>
            <td style="font-size: 8pt; color: cmyk(0,0,0,60); text-align: right;">Seite {PAGENO}/{nbpg}</td>
        </tr>
    </table>
</htmlpagefooter>

<div>
    <h1>Kassenbericht</h1>

    {% if filterInfo is not empty %}
        <table class="meta" cellspacing="0" cellpadding="0">
            {% for label, value in filterInfo %}
                <tr>
                    <td style="width: 4.5cm; font-weight: bold">{{ label }}</td>
                    <td>{{ value }}</td>
                </tr>
            {% endfor %}
        </table>
    {% endif %}

    <table class="sums" cellspacing="0" cellpadding="0">
        <thead>
        <tr>
            <th>Zahlungsart</th>
            <th style="text-align: right; width: 3cm">Belege</th>
            <th style="text-align: right; width: 4cm">Summe</th>
        </tr>
        </thead>

        <tbody>
        {% for method, group in groups %}
            <tr>
                <td>{{ method }}</td>
                <td class="num">{{ group.count }}</td>
                <td class="num">{{ (group.sum / 100)|format_currency('EUR', locale='de') }}</td>
            </tr>
        {% else %}
            <tr>
                <td colspan="3" style="color: cmyk(0,0,0,60)">Keine bezahlten Belege im gewählten Zeitraum.</td>
            </tr>
        {% endfor %}
        </tbody>

        <tfoot>
        <tr>
            <td>Gesamt</td>
            <td class="num">{{ count }}</td>
            <td class="num">{{ (total / 100)|format_currency('EUR', locale='de') }}</td>
        </tr>
        </tfoot>
    </table>
</div>
