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

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

    table.consents {
        font-size: 10pt;
        border-bottom: 1px solid #000;
        width: 100%;
        border-collapse: collapse;
    }

    table.consents th, table.consents td {
        padding: 5pt 6pt;
        border-top: 1px solid #000;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        vertical-align: top;
    }

    table.consents th {
        background-color: #eee;
        font-weight: bold;
    }

    .status-signed { color: green; font-weight: bold; }
    .status-declined { color: red; font-weight: bold; }
    .status-absent { color: #777; }
</style>

<htmlpageheader name="myHeader" style="display:none">
    <table width="100%" border="0">
        <tr>
            <td width="33%" style="color: #777; font-size: 9pt;">
                <p><span style="font-weight: bold">{{ offer.name }}</span> #{{ offer.id }}</p>
            </td>
            <td width="33%" align="center" style="font-weight: bold;font-size: 12pt">Einwilligungen Übersicht</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: #777">Export: {DATE j.m.Y H:i}</td>
            <td width="50%" style="font-size: 8pt; color: #777; text-align: right;">Seite {PAGENO}/{nbpg}</td>
        </tr>
    </table>
</htmlpagefooter>

<div>
    <table class="consents">
        <thead>
            <tr>
                <th>Teilnehmer:in</th>
                {% for form in consentForms %}
                    <th>
                        {% set text = form.text|striptags %}
                        {{ form.title ?? (text|length > 60 ? text|slice(0, 60) ~ '...' : text) }}
                    </th>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
            {% for row in rows %}
                <tr>
                    <td>
                        {{ row.participant.firstname }} {{ row.participant.lastname }}
                        <div style="font-size: 8pt; color: #777">{{ row.participant.user.name }}</div>
                    </td>
                    {% for state in row.states %}
                        <td align="center">
                            {% if state.hasSignature %}
                                {% if state.signature.decision == 1 %}
                                    <span class="status-signed">Akzeptiert</span>
                                {% else %}
                                    <span class="status-declined">Abgelehnt</span>
                                {% endif %}
                                <div style="font-size: 8pt">{{ state.signature.signedAt|date('d.m.Y') }}</div>
                            {% elseif state.isCompulsory %}
                                <span class="status-absent">Fehlt</span>
                            {% else %}
                                {% if state.isOptOut %}
                                    <span class="status-signed">Akzeptiert</span>
                                    <div style="font-size: 8pt; color: #777">(Voreinstellung, ohne aktive Entscheidung)</div>
                                {% elseif state.isOptIn %}
                                    <span class="status-declined">Abgelehnt</span>
                                    <div style="font-size: 8pt; color: #777">(Voreinstellung, ohne aktive Entscheidung)</div>
                                {% endif %}
                            {% endif %}
                        </td>
                    {% endfor %}
                </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
