{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
    {% if participant.language == 'en' %}Thank You{% else %}Vielen Dank{% endif %}
{% endblock %}

{% block content %}
<style>
    :root {
        --primary-dark: #153268; --primary-medium: #005f9b;
        --primary-light: #0091c8; --primary-lighter: #50a5d2;
        --neutral-dark: #3b3b3a; --neutral-lightest: #ececed;
    }
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
           background-color: var(--neutral-lightest); color: var(--neutral-dark); line-height: 1.6; }
    .header { background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
              color: white; padding: 20px 25px; border-radius: 8px;
              margin-bottom: 24px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
    .header h1 { margin: 0; font-size: 22px; font-weight: 600; }
    .card { background: white; border-radius: 8px; padding: 30px; margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.08); border-left: 4px solid var(--primary-light); }
    h2 { color: var(--primary-dark); border-bottom: 2px solid var(--primary-light);
         padding-bottom: 8px; margin-top: 0; margin-bottom: 16px; font-size: 17px; }
    .success-icon { font-size: 48px; text-align: center; margin-bottom: 16px; }

    /* Earnings table */
    .earnings-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
    .earnings-table th {
        background: var(--primary-dark); color: white;
        padding: 10px 14px; text-align: left; font-weight: 600; font-size: 13px;
    }
    .earnings-table td { padding: 10px 14px; border-bottom: 1px solid var(--neutral-lightest); }
    .earnings-table tr:last-child td { border-bottom: none; }
    .earnings-table tr:hover td { background: #f5f9fc; }
    .earnings-table td:last-child { text-align: right; font-weight: 600; color: var(--primary-dark); }

    /* Total row */
    .total-row td {
        background: var(--neutral-lightest) !important;
        border-top: 2px solid var(--primary-medium) !important;
        font-weight: 700 !important; font-size: 15px;
        color: var(--primary-dark) !important;
    }

    /* Payoff box */
    .payoff-box {
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
        color: white; border-radius: 8px; padding: 24px;
        text-align: center; margin: 20px 0;
    }
    .payoff-label { font-size: 15px; opacity: 0.85; margin-bottom: 8px; }
    .payoff-amount { font-size: 42px; font-weight: 700; }

    .info-box { background-color: var(--neutral-lightest); border-left: 4px solid var(--primary-lighter);
                padding: 13px 16px; border-radius: 4px; margin-top: 16px; font-size: 13px; }
</style>

<div class="header">
    <h1>{% if participant.language == 'en' %}Experiment Complete{% else %}Experiment abgeschlossen{% endif %}</h1>
</div>

<div class="card">
    <div class="success-icon">✅</div>

    <p style="text-align: center; font-size: 16px; margin-bottom: 24px;">
        {% if participant.language == 'en' %}
            Thank you very much for your participation! Below is a summary of your earnings.
        {% else %}
            Vielen Dank für Ihre Teilnahme! Nachfolgend finden Sie eine Übersicht Ihrer Verdienste.
        {% endif %}
    </p>

    <h2>{% if participant.language == 'en' %}Your Earnings Overview{% else %}Übersicht Ihrer Verdienste{% endif %}</h2>

    <table class="earnings-table">
        <thead>
            <tr>
                <th>{% if participant.language == 'en' %}Phase{% else %}Phase{% endif %}</th>
                <th>{% if participant.language == 'en' %}Description{% else %}Beschreibung{% endif %}</th>
                <th style="text-align:right;">{% if participant.language == 'en' %}Points{% else %}Punkte{% endif %}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><strong>Phase 1</strong></td>
                <td>{% if participant.language == 'en' %}Group connection game{% else %}Gruppenverbindungsspiel{% endif %}</td>
                <td>{{ points_p1 }}</td>
            </tr>
            <tr>
                <td><strong>Phase 2</strong></td>
                <td>{% if participant.language == 'en' %}Encoding task{% else %}Kodieraufgabe{% endif %}</td>
                <td>{{ points_p2 }}</td>
            </tr>
            <tr>
                <td><strong>Phase 3</strong></td>
                <td>{% if participant.language == 'en' %}Shock phase{% else %}Schockphase{% endif %}</td>
                <td>{{ points_p3 }}</td>
            </tr>
            <tr>
                <td><strong>Phase 4</strong></td>
                <td>
                    {% if participant.language == 'en' %}Encoding task (Option {{ option_taken }})
                    {% else %}Kodieraufgabe (Option {{ option_taken }}){% endif %}
                </td>
                <td>{{ points_p4 }}</td>
            </tr>
            <tr class="total-row">
                <td colspan="2">
                    <strong>{% if participant.language == 'en' %}Total Points{% else %}Gesamtpunkte{% endif %}</strong>
                </td>
                <td>{{ total_points }}</td>
            </tr>
        </tbody>
    </table>

    <div class="payoff-box">
        <div class="payoff-label">
            {% if participant.language == 'en' %}
                Total payment ({{ total_points }} pts × {{ points_to_euros }} €/pt + {{ showup_fee }} € show-up fee)
            {% else %}
                Gesamtauszahlung ({{ total_points }} Pkt × {{ points_to_euros }} €/Pkt + {{ showup_fee }} € Aufwandsentschädigung)
            {% endif %}
        </div>
        <div class="payoff-amount">{{ total_euros }} €</div>
    </div>

    <div class="info-box">
        {% if participant.language == 'en' %}
            Your payment will be transferred to your bank account within the next few weeks.
            You can now close this window. Thank you for your contribution to our research!
        {% else %}
            Ihre Auszahlung wird innerhalb der nächsten Wochen auf Ihr Bankkonto überwiesen.
            Sie können dieses Fenster nun schließen. Vielen Dank für Ihren Beitrag zu unserer Forschung!
        {% endif %}
    </div>
</div>

{% endblock %}