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

{% block title %}
    {% if participant.language == 'en' %}
        FUNI - Pre-Survey
    {% elif participant.language == 'de' %}
        FUNI - Vorbefragung
    {% 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 0 4px 0; font-size: 22px; font-weight: 600; }

    h2 {
        color: var(--primary-dark); border-bottom: 2px solid var(--primary-light);
        padding-bottom: 8px; margin-top: 0; margin-bottom: 14px; font-size: 17px;
    }

    .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);
    }
    .success-icon { font-size: 48px; text-align: center; margin-bottom: 16px; }
    .payoff-box {
        background-color: #e8f4eb; border-left: 4px solid #2e7d40;
        padding: 16px 20px; border-radius: 6px; margin: 20px 0; font-size: 14px;
    }
    .payoff-box strong { color: #2e7d40; }
    .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' %}Pre-Survey Complete{% else %}Vorbefragung abgeschlossen{% endif %}</h1>
</div>

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

    {% if participant.language == 'en' %}
        <p>Thank you for completing the pre-survey. Your answers have been saved successfully.</p>
        <p>You will receive a confirmation e-mail with your assigned laboratory session date shortly.</p>
    {% else %}
        <p>Vielen Dank für das Ausfüllen der Vorbefragung. Ihre Antworten wurden erfolgreich gespeichert.</p>
        <p>Sie erhalten in Kürze eine Bestätigungs-E-Mail mit Ihrem zugeteilten Laborsitzungstermin.</p>
    {% endif %}

    <div class="payoff-box">
        {% if participant.language == 'en' %}
            <strong>💶 Your earnings from the pre-survey:</strong>
            <ul style="margin: 10px 0 0 0; padding-left: 20px;">
                <li>Show-up fee: <strong>{{ showup_fee }} €</strong></li>
                <li>Task 3 (Dictator Game): <strong>{{ dictator_payoff }} €</strong></li>
            </ul>
            <p style="margin: 10px 0 0 0; font-size: 13px;">
                In addition, you will subsequently be matched with another participant from this study.
                You will receive the points that person allocated to you in the pre-survey — converted to euros.
                <strong>Your attendance at the laboratory session is required for payment.</strong>
                If you do not attend, these points and the show-up fee cannot be paid out to you.
            </p>
        {% else %}
            <strong>💶 Ihre Verdienste aus der Vorbefragung:</strong>
            <ul style="margin: 10px 0 0 0; padding-left: 20px;">
                <li>Aufwandsentschädigung: <strong>{{ showup_fee }} €</strong></li>
                <li>Aufgabe 3 (Diktatorspiel): <strong>{{ dictator_payoff }} €</strong></li>
            </ul>
            <p style="margin: 10px 0 0 0; font-size: 13px;">
                Darüber hinaus werden Sie im Nachgang mit einer anderen Person aus dieser Studie gematcht.
                Sie erhalten die Punkte, die diese Person Ihnen in der Vorbefragung zugeteilt hat — umgerechnet in Euro.
                <strong>Diese Auszahlung setzt Ihre Teilnahme an der Laborsitzung voraus.</strong>
                Sollten Sie nicht teilnehmen, können Ihnen diese Punkte und die Aufwandsentschädigung nicht ausgezahlt werden.
            </p>
        {% endif %}
    </div>

    <div class="info-box">
        {% if participant.language == 'en' %}
            You can now close this window. We look forward to seeing you at the laboratory session.
        {% else %}
            Sie können dieses Fenster nun schließen. Wir freuen uns, Sie bei der Laborsitzung zu sehen.
        {% endif %}
    </div>
</div>

{% endblock %}