{{ block title }}
{{ endblock }}

{{ block content }}
<script type="text/javascript" src="{{ static 'js/Script_modal.js' }}"></script>
<link rel="stylesheet" href="{{ static 'css/css.css' }}">

<div class="content-box box-neutral">
    <h2 class="section-title">Experiment Complete &mdash; Your Earnings</h2>
    <hr class="section-divider">

    <p style="text-align:center; color:#555; font-size:1.05em; margin-bottom:6px;">
        Thank you for participating! Here is a summary of your earnings across all parts of the study.
    </p>

    <!-- Earnings breakdown table -->
    <div class="section-box box-calm" style="margin-top:24px;">
        <div class="section-header">
            <div class="icon">&#129689;</div>
            <h3>Earnings Breakdown</h3>
        </div>
        <table style="width:100%; border-collapse:collapse; margin-top:8px;">
            <tbody>
                <tr style="border-bottom:1px solid #eee;">
                    <td style="padding:10px 16px; color:#555;">Round 1 and 2 of Intelligence Test</td>
                    <td style="padding:10px 16px; text-align:right;">{{ practice_ecs }} ECs</td>
                </tr>
                <tr style="border-bottom:1px solid #eee;">
                    <td style="padding:10px 16px; color:#555;">Part I &mdash; Intelligence Test over rounds</td>
                    <td style="padding:10px 16px; text-align:right;">{{ part1_ecs }} ECs</td>
                </tr>
                <tr style="border-bottom:1px solid #eee;">
                    <td style="padding:10px 16px; color:#555;">
                        Part II &mdash; Various Games
                        <!-- <span style="font-size:0.85em; color:#888; margin-left:6px;">({{ game_selected_label }})</span> -->
                    </td>
                    <td style="padding:10px 16px; text-align:right;">{{ part2_ecs }} ECs</td>
                </tr>
                <tr style="border-top:2px solid #333; background:#f8f9fa;">
                    <td style="padding:12px 16px; font-weight:bold; font-size:1.05em;">Total</td>
                    <td style="padding:12px 16px; text-align:right; font-weight:bold; font-size:1.05em;">{{ total_ecs }} ECs</td>
                </tr>
            </tbody>
        </table>

        <!-- EUR conversion highlight -->
        <div style="margin-top:16px; padding:14px 18px; background:#e6ffe6; border-left:4px solid #388E3C; border-radius:4px; text-align:center;">
            <p style="margin:0; font-size:1.2em; font-weight:bold; color:#388E3C;">
                Your payment: &euro;{{ eur_amount }}
            </p>
            <p style="margin:6px 0 0; font-size:0.85em; color:#555;">
                ({{ total_ecs }} ECs &divide; {{ C.EC_exchange_rate }} = &euro;{{ eur_amount }})
            </p>
        </div>
    </div>

    <!-- Closing message -->
    <div class="section-box box-info" style="margin-top:24px;">
        <div class="section-header">
            <div class="icon">&#9989;</div>
            <h3>The experiment is now over</h3>
        </div>
        <p>
            You have completed all parts of the study.
            You will be paid your bonus payment + completion payment rounded up to the nearest 0.50 EUR.
        </p>
    </div>

    <br><br>

</div>

{{ endblock }}