{{ block title }}
Auszahlung
{{ endblock }}

{{ block content }}
<style>
    .bg-payout {
        background-color: #e3f2fd !important;
    }

    /* Hellblau */
    .bg-donation {
        background-color: #e8f5e9 !important;
    }

    /* Hellgrün */
    .highlight-payout {
        border-bottom: 2px solid #2196F3;
        padding: 0 2px;
    }

    .highlight-donation {
        border-bottom: 2px solid #4CAF50;
        padding: 0 2px;
    }
</style>

<p>Im Folgenden finden Sie eine Übersicht über Ihre im Experiment verdienten Punkte und die entsprechende Auszahlung in
    Euro.</p>

<table style="width: 100%; border-collapse: collapse; margin-top: 20px;">
    <thead>
        <tr style="background-color: #f2f2f2;">
            <th style="padding: 10px; border: 1px solid #ccc; text-align: left;">Teil</th>
            <th style="padding: 10px; border: 1px solid #ccc; width: 25%;">Punkte</th>
            <th style="padding: 10px; border: 1px solid #ccc; width: 25%;">Auszahlung (€)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="padding: 10px; border: 1px solid #ccc; vertical-align: top;">
                Teil 1
                <ul style="margin:6px 0 0; padding-left:0; list-style-position:inside; font-size:0.9em; color:#555;">
                    {{ for label, points in part1_items }}
                    <li>{{ label }}</li>
                    {{ endfor }}
                </ul>
            </td>
            <td style="padding: 10px; border: 1px solid #ccc; vertical-align: top;">
                {{ payoff_part1 }}
                <ul style="margin:6px 0 0; padding-left:0; list-style:none; font-size:0.9em; color:#555;">
                    {{ for label, points in part1_items }}
                    <li>{{ points }}</li>
                    {{ endfor }}
                </ul>
            </td>
            <td style="padding: 10px; border: 1px solid #ccc; vertical-align: top;">{{ payoff_part1_eur }} €</td>
        </tr>
        <tr>
            <td style="padding: 10px; border: 1px solid #ccc; vertical-align: top;">
                Teil 3
                <ul style="margin:6px 0 0; padding-left:0; list-style-position:inside; font-size:0.9em; color:#555;">
                    <li>{{ part3_action_text }}</li>
                    <li>{{ part3_belief_text }}</li>
                </ul>
            </td>
            <td style="padding: 10px; border: 1px solid #ccc; vertical-align: top;">
                {{ payoff_part3 }}
                <ul style="margin:6px 0 0; padding-left:0; list-style:none; font-size:0.9em; color:#555;">
                    <li>{{ part3_action_points }}</li>
                    <li>{{ part3_belief_points }}</li>
                </ul>
            </td>
            <td style="padding: 10px; border: 1px solid #ccc; vertical-align: top; ">
                {{ payoff_part3_eur }} €
            </td>
        </tr>


        <tr>
            <td style="padding: 10px; border: 1px solid #ccc;">
                Teil 4
                {% if player.Participate == 1 %}
                <ul style="margin:6px 0 0; padding-left:0; list-style-position:inside; font-size:0.9em; color:#555;">
                    <li>{{ part4_hits }} Slider gelöst</li>
                </ul>
                {% endif %}
            </td>
            <td style="padding: 10px; border: 1px solid #ccc;">
                {% if player.Participate == 1 %}
                {{ payoff_part4 }}
                {% else %}
                —
                {% endif %}
            </td>
            <td style="padding: 10px; border: 1px solid #ccc;">
                {% if player.Participate == 1 %}
                {{ payoff_part4_eur }} €
                {% else %}
                —
                {% endif %}
            </td>
        </tr>
        <tr>
            <td style="padding: 10px; border: 1px solid #ccc;">Vergütung für das Erscheinen</td>
            <td style="padding: 10px; border: 1px solid #ccc;">{{ participation_points }}</td>
            <td style="padding: 10px; border: 1px solid #ccc;">{{ participation_fee }}</td>
        </tr>
        <tr style="font-weight: bold; background-color: #f9f9f9;">
            <td style="padding: 10px; border: 1px solid #ccc;">Ihre persönliche Gesamtauszahlung</td>
            <td style="padding: 10px; border: 1px solid #ccc;">{{ total_payoff_points }}</td>
            <td style="padding: 10px; border: 1px solid #ccc;">{{ total_payoff }}</td>
        </tr>
    </tbody>
</table>

<div
    style="background-color: #eef7ee; border: 1px solid #c8e6c9; border-left: 5px solid #4CAF50; padding: 15px; margin-top: 30px; margin-bottom: 10px; border-radius: 4px;">
    <span style="font-size: 1.1em; color: #2e7d32;"><strong>Ihre Abtretungen</strong></span><br>
    <div style="margin-top: 5px; color: #333; line-height: 1.5;">
        Durch die von Ihnen im Experiment getroffenen Entscheidungen ergibt sich ein Gesamtbetrag von
        <strong>{{ grand_total_points }} Punkten / {{ grand_total_eur }} €</strong>.
        Davon wird durch Ihre Entscheidungen ein Transfer in Höhe von insgesamt
        <strong class="bg-donation" style="padding: 2px 4px; border-radius: 3px;">{{ total_donation }} Punkten / {{
            total_donation_eur }} €</strong> ermöglicht.
        Dieser Betrag setzt sich wie folgt zusammen:
        <ul style="margin: 6px 0 10px 0; padding-left: 20px;">
            <li><strong>{{ donation_p1 }} Punkte / {{ donation_p1_eur }} €</strong> (aus Teil 1) an
                <strong>{{ donation_org_1 }}</strong>
            </li>
            <li><strong>{{ donation_p3 }} Punkte / {{ donation_p3_eur }} €</strong> (aus Teil 3) an
                <strong>{{ donation_org_3 }}</strong>
            </li>
        </ul>
        Ihr erzielter Auszahlungsbetrag beläuft sich damit auf <strong class="bg-payout"
            style="padding: 2px 4px; border-radius: 3px;">{{ total_payoff }}</strong>.
    </div>
</div>

<br>

{{ next_button }}

{{ endblock }}