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

    @page waitlist {
        header: html_myHeaderWaitlist;
    }

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

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

    table.attendances {
        font-size: 10pt;
        border-bottom: 1px solid cmyk(0, 0, 0, 100);
    }

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

    table.attendances th {
        text-align: left;
        font-weight: bold;
    }
</style>


{% macro header(headline, offer) %}
    <table width="100%" border="0">
        <tr>
            <td width="33%" style="color: cmyk(0,0,0,70); font-size: 9pt;">
                <p><span style="font-weight: bold">{{ offer.name }}</span> #{{ offer.id }}</p>
                <p><twig:Cms:OfferDate :dates="offer.dates" short /></p>
                <p>{{ 'min. ' ~ offer.minParticipants }} / {{ 'max. ' ~ offer.maxParticipants ~ ' TN' }}</p>
                <p>{{ 'zugelassen: ' ~ offer.attendancesConfirmed|length }}</p>
            </td>
            <td width="33%" align="center" style="font-weight: bold;font-size: 12pt">{{ headline }}</td>
            <td width="33%" style="text-align: right;"></td>
        </tr>
    </table>
{% endmacro %}

<div>

    <htmlpageheader name="myHeader" style="display:none">
        {{ _self.header('Teilnahmeliste', offer) }}
    </htmlpageheader>

    <htmlpageheader name="myHeaderWaitlist" style="display:none">
        {{ _self.header('Warteliste', offer) }}
    </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 offer.attendancesConfirmed is empty %}
        <p>Es sind keine Anmeldungen vorhanden.</p>
    {% endif %}

    {% set attendances = offer.attendancesConfirmed|sort((a, b) => attribute(a.participant, sort)|default <=> attribute(b.participant, sort)|default) %}
    <div>
        <table class="attendances" cellspacing="0" cellpadding="0" style="width: 100%">
            {% if expanded -%}
                <thead>
                <tr>
                    <th style="width:12pt;text-align:right">Nr.</th>
                    <th>Name / Alter</th>
                    <th style="width: 100pt">Kontakt</th>
                    {% for consentForm in consentForms -%}
                        <th style="width: 30pt; text-align: center; font-size: 9pt; font-weight: bold">{{ consentForm.title ?: (consentForm.text|length > 22 ? consentForm.text|slice(0, 22) ~ '…' : consentForm.text) }}</th>
                    {% endfor -%}
                    {% for extra in offer.applicationExtra ?? [] -%}
                        <th style="width: 30pt; text-align: center; font-size: 8pt; font-weight: bold">{{ extra.question|length > 22 ? extra.question|slice(0, 22) ~ '…' : extra.question }}</th>
                    {% endfor -%}
                    <th style="font-size: 8pt">Wichtige Infos</th>
                </tr>
                </thead>
            {% endif -%}
            {% for attendance in attendances -%}
                {{ include('@FerienpassCore/participant_list/pdf/_tr.html.twig') }}
            {% endfor %}
        </table>
    </div>

    {% set attendances = offer.attendancesWaitlisted|sort((a, b) => attribute(a.participant, sort)|default <=> attribute(b.participant, sort)|default) %}
    {% if attendances|length %}
        <div style="page: waitlist; page-break-before: always;">
            <table class="attendances" cellspacing="0" cellpadding="0" style="width: 100%">
                {% if expanded -%}
                    <thead>
                    <tr>
                        <th style="width:12pt;text-align:right">Nr.</th>
                        <th>Name / Alter</th>
                        <th style="width: 100pt">Kontakt</th>
                    {% for consentForm in consentForms -%}
                            <th style="width: 30pt; text-align: center; font-size: 9pt; font-weight: bold">{{ consentForm.title ?: (consentForm.text|length > 22 ? consentForm.text|slice(0, 22) ~ '…' : consentForm.text) }}</th>
                        {% endfor -%}
                        {% for extra in offer.applicationExtra ?? [] -%}
                            <th style="width: 30pt; text-align: center; font-size: 8pt; font-weight: bold">{{ extra.question|length > 22 ? extra.question|slice(0, 22) ~ '…' : extra.question }}</th>
                        {% endfor -%}
                        <th style="font-size: 8pt">Wichtige Infos</th>
                    </tr>
                    </thead>
                {% endif -%}
                {% for attendance in attendances -%}
                    {{ include('@FerienpassCore/participant_list/pdf/_tr.html.twig') }}
                {% endfor %}
            </table>
        </div>

    {% endif %}

    {% if expanded and consentForms|length -%}
        <p style="margin-top: 8pt; font-size: 8pt; color: cmyk(0,0,0,70)">
            <span style="font-weight: bold">Legende Einwilligungen:</span>
            <svg width="3mm" height="3mm" style="vertical-align: middle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><polyline points="40 144 96 200 224 72" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"/></svg> ja
            &nbsp;&nbsp;
            <svg width="3mm" height="3mm" style="vertical-align: middle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="200" y1="56" x2="56" y2="200" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"/><line x1="200" y1="200" x2="56" y2="56" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="24"/></svg> nein
            &nbsp;&nbsp;
            <svg width="3mm" height="3mm" style="vertical-align: middle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="56" y1="128" x2="200" y2="128" fill="none" stroke="cmyk(0,0,0,40)" stroke-linecap="round" stroke-width="20"/></svg> noch keine Entscheidung
        </p>
    {%- endif %}

    {% if expanded and (offer.applicationExtra ?? [])|length -%}
        <div style="margin-top: 10pt; font-size: 9pt">
            <p style="font-weight: bold">Zusatzfragen:</p>
            {% for extra in offer.applicationExtra ?? [] -%}
                <p>
                    <span style="font-weight: bold">{{ extra.question|length > 22 ? extra.question|slice(0, 22) ~ '…' : extra.question }}:</span>
                    {{ extra.question }}
                </p>
            {% endfor %}
        </div>
    {%- endif %}
</div>
