{% 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 5px 0;
        font-size: 24px;
        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);
    }

    .info-box {
        background-color: var(--neutral-lightest);
        border-left: 4px solid var(--primary-lighter);
        padding: 15px 18px;
        margin: 20px 0 0 0;
        border-radius: 4px;
        font-size: 14px;
    }

    .availability-box {
        background-color: #eaf4fb;
        border-left: 4px solid var(--primary-medium);
        padding: 15px 18px;
        margin: 20px 0 0 0;
        border-radius: 4px;
        font-size: 14px;
    }

    .parts-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 18px;
    }

    .parts-table td {
        padding: 11px 14px;
        vertical-align: middle;
        border-bottom: 1px solid var(--neutral-lightest);
        font-size: 15px;
    }

    .parts-table tr:last-child td {
        border-bottom: none;
    }

    .parts-table td.part-label {
        width: 110px;
        font-weight: 600;
        color: var(--primary-dark);
        white-space: nowrap;
    }

    .parts-table td.part-duration {
        width: 90px;
        color: #777;
        font-size: 13px;
        white-space: nowrap;
        text-align: right;
    }

    .payoff-badge {
        display: inline-block;
        background-color: #e8f4eb;
        color: #2e7d40;
        border: 1px solid #b2d9b8;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
        padding: 2px 8px;
        margin-left: 8px;
        vertical-align: middle;
    }


    .divider {
        border: none;
        border-top: 1px solid var(--neutral-lightest);
        margin: 24px 0;
    }

    .centered-text {
        text-align: center;
        margin: 12px 0;
    }

    .button-section {
        text-align: center;
        margin-top: 36px;
    }

    .otree-btn-next {
        background-color: var(--primary-medium) !important;
        border: none !important;
        color: white !important;
        padding: 12px 30px !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
        margin-top: 10px !important;
    }

    .otree-btn-next:hover {
        background-color: var(--primary-dark) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    }

    h2 {
        color: var(--primary-dark);
        border-bottom: 2px solid var(--primary-light);
        padding-bottom: 8px;
        margin-top: 0;
        margin-bottom: 16px;
        font-size: 19px;
    }
</style>

<div class="header">
    <h1>
        {% if participant.language == 'en' %}
            Introduction
        {% elif participant.language == 'de' %}
            Einführung
        {% endif %}
    </h1>
</div>

<div class="card">

    <h2>
        {% if participant.language == 'en' %}Welcome{% else %}Willkommen{% endif %}
    </h2>

    {% if participant.language == 'en' %}
        <p>
            Thank you for your interest in the research project <b>FUNI</b>. You are currently
            completing the <b>pre-survey</b>, which takes place before the main laboratory
            experiment. Completing this survey is a prerequisite for participating in
            the laboratory session.
        </p>
    {% elif participant.language == 'de' %}
        <p>
            Vielen Dank für Ihr Interesse am Forschungsprojekt <b>FUNI</b>. Sie befinden sich
            gerade in der <b>Vorbefragung</b>, die vor dem eigentlichen Laborexperiment
            stattfindet. Das Ausfüllen dieser Vorbefragung ist Voraussetzung für Ihre Teilnahme
            an der Laborsitzung.
        </p>
    {% endif %}

    <div class="availability-box">
        {% if participant.language == 'en' %}
            <b>📅 Scheduling your laboratory session:</b> At the end of the preliminary questionnaire, you will be
            asked to indicate your availability for a potential lab appointment. Please indicate all dates on which
            you could attend. We will confirm your assigned session date by e-mail once the schedule has been finalised.
        {% elif participant.language == 'de' %}
            <b>📅 Terminplanung für Ihre Laborsitzung:</b> Sie werden am Ende der Vorbefragung gebeten, Ihre
            Verfügbarkeiten für einen möglichen Labortermin anzugeben. Bitte geben Sie alle Termine an, an denen
            Sie teilnehmen könnten. Wir bestätigen Ihnen Ihren zugeteilten Termin per E-Mail, sobald der Zeitplan
            feststeht.
        {% endif %}
    </div>

    <hr class="divider">

    <h2>
        {% if participant.language == 'en' %}
            Structure of the Pre-Survey
        {% elif participant.language == 'de' %}
            Aufbau der Vorbefragung
        {% endif %}
    </h2>

    {% if participant.language == 'en' %}
        <p>The pre-survey consists of three short tasks and a brief questionnaire at the end about your background.
            The total time required is approximately <b>10 minutes</b>.</p>
    {% elif participant.language == 'de' %}
        <p>Die Vorbefragung besteht aus drei sehr kurzen Aufgaben sowie einem abschließenden Kurzfragebogen zu Ihrem
            Hintergrund. Der gesamte Zeitaufwand beträgt ca. <b>10 Minuten</b>.
    {% endif %}

    <table class="parts-table">
        <tr>
            <td class="part-label">
                {% if participant.language == 'en' %}Task 1{% else %}Aufgabe 1{% endif %}
            </td>
            <td>
                {% if participant.language == 'en' %}
                    A series of decisions between different options.
                {% elif participant.language == 'de' %}
                    Eine Reihe von Entscheidungen zwischen verschiedenen Optionen.
                {% endif %}
            </td>
            <td class="part-duration">~ 2 min</td>
        </tr>
        <tr>
            <td class="part-label">
                {% if participant.language == 'en' %}Task 2{% else %}Aufgabe 2{% endif %}
            </td>
            <td>
                {% if participant.language == 'en' %}
                    A series of decisions between different options.
                {% elif participant.language == 'de' %}
                    Eine Reihe von Entscheidungen zwischen verschiedenen Optionen.
                {% endif %}
            </td>
            <td class="part-duration">~ 2 min</td>
        </tr>
        <tr>
            <td class="part-label">
                {% if participant.language == 'en' %}Task 3{% else %}Aufgabe 3{% endif %}
            </td>
            <td>
                {% if participant.language == 'en' %}
                    A single allocation decision.
                    <span class="payoff-badge">Paid out</span>
                {% elif participant.language == 'de' %}
                    Eine einzelne Verteilungsentscheidung.
                    <span class="payoff-badge">Wird vergütet</span>
                {% endif %}
            </td>
            <td class="part-duration">~ 1 min</td>
        </tr>
        <tr>
            <td class="part-label">
                {% if participant.language == 'en' %}Questionnaire{% else %}Fragebogen{% endif %}
            </td>
            <td>
                {% if participant.language == 'en' %}
                    A few short questions about your background.
                {% elif participant.language == 'de' %}
                    Einige kurze Fragen zu Ihrem Hintergrund.
                {% endif %}
            </td>
            <td class="part-duration">~ 3 min</td>
        </tr>
        <tr>
            <td class="part-label">
                {% if participant.language == 'en' %}Payment Informationen{% else %}Zahlungsinformationen{% endif %}
            </td>
            <td>
                {% if participant.language == 'en' %}
                    Enter IBAN, BIC, and address.
                    <span class="payoff-badge">Please have this information ready.</span>
                {% elif participant.language == 'de' %}
                    Eingabe von IBAN, BIC, Adresse.
                    <span class="payoff-badge">Bitte halten Sie die Informationen bereit.</span>
                {% endif %}
            </td>
            <td class="part-duration">~ 1 min</td>
        </tr>
    </table>

    <hr class="divider">

    <h2>
        {% if participant.language == 'en' %}
            Payments & Anonymity
        {% elif participant.language == 'de' %}
            Vergütung & Anonymität
        {% endif %}
    </h2>

    {% if participant.language == 'en' %}
        <p>
            You will receive a <b>show-up fee of {{ session.config.participation_fee }}</b>. for the pre-survey,
            as well as performance-based compensation for Task 3, which will be transferred to your account
            after the experiment. Please note that we can only pay you the  full amount if you also participate in the
            lab session.
        <p>
            All your answers are treated in strict confidence and you remain completely anonymous throughout the entire
            study. For more information on data protection, please see the next page.
        </p>
    {% elif participant.language == 'de' %}
        <p>
            Sie erhalten für die Vorbefragung eine Aufwandsentschädigung von {{ session.config.participation_fee }},
            sowie eine erfolgsabhängige Vergütung aus Aufgabe 3, die im Nachgang des Experiments auf Ihr Konto überwiesen
            wird. Bitte beachten Sie, dass wir Ihnen die Vergütung nur vollständig auszahlen können, wenn Sie auch an der
            Laborsession teilnehmen.
        <p>
            Alle Ihre Antworten werden absolut vertraulich behandelt und Sie bleiben während der gesamten Studie
            vollständig anonym. Weitere Informationen zum Datenschutz erhalten Sie auf der nächsten Seite.

        </p>
    {% endif %}

    <div class="info-box">
        {% if participant.language == 'en' %}
            <b>Please note:</b> Payments can only be made for fully completed surveys.
            Once you have started, you must complete the pre-survey entirely if you wish
            to receive a payment. Participation is entirely voluntary and may be discontinued
            at any time without personal disadvantage and without giving a reason — other than
            forfeiting the payment. If you discontinue, your data will be deleted to the extent
            it can still be attributed to you.
        {% elif participant.language == 'de' %}
            <b>Bitte beachten Sie:</b> Auszahlungen erfolgen nur für vollständig ausgefüllte
            Befragungen. Sobald Sie begonnen haben, müssen Sie die Vorbefragung vollständig
            abschließen, um eine Auszahlung zu erhalten. Die Teilnahme ist freiwillig und
            kann jederzeit ohne persönliche Nachteile und ohne Angabe von Gründen abgebrochen
            werden – mit Ausnahme des Verlusts des Auszahlungsanspruchs. Bei Abbruch werden
            Ihre Daten gelöscht, soweit sie Ihnen noch zugeordnet werden können.
        {% endif %}
    </div>

</div>

<div class="button-section">
    <button class="otree-btn-next btn btn-primary">
        {% if participant.language == 'en' %}Continue{% else %}Weiter{% endif %}
    </button>
</div>

{% endblock %}