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

{% block title %}
    {% if participant.language == 'en' %}
        FUNI - Part 2
    {% elif participant.language == 'de' %}
        FUNI - 2. Teil
    {% 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: 28px 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: 14px; font-size: 17px; }
    p  { font-size: 14px; line-height: 1.8; margin-bottom: 10px; }
    .rule-box { background: #eaf4fb; border-left: 4px solid var(--primary-medium);
                padding: 14px 18px; border-radius: 4px; margin: 14px 0; font-size: 14px; }
    table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 14px; }
    th  { background: var(--primary-dark); color: white; padding: 11px 14px;
          text-align: left; font-weight: 600; }
    td  { padding: 11px 14px; border-bottom: 1px solid #e0e0e0; vertical-align: top; }
    tr:hover td { background: #f5f9fc; }
    .phase-num { font-weight: 700; color: var(--primary-dark); white-space: nowrap; }
    .button-section { text-align: center; margin-top: 28px; }
    .otree-btn-next { background-color: var(--primary-medium) !important; border: none !important;
                      color: white !important; padding: 12px 36px !important; border-radius: 6px !important;
                      font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important; }
    .otree-btn-next:hover { background-color: var(--primary-dark) !important; transform: translateY(-2px); }
</style>

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

<!-- PAIRING -->
<div class="card">
    <h2>{% if participant.language == 'en' %}General Instructions{% else %}Allgemeine Informationen{% endif %}</h2>
    {% if participant.language == 'en' %}
        <p>
            On this page, you will find general information about the experiment: an overview of the process
            as well as an explanation of how you can earn money.
        </p>
        <p>
            At the start of the experiment, you will be randomly paired with <strong>another person</strong> in this
            room. This pairing will remain in effect for the entire session. The identity of your partner
            will remain unknown to you at all times: all decisions are made anonymously via the computer.
            You will complete some tasks on your own, and others together with your partner.
        </p>
    {% else %}
        <p>
            Auf dieser Seite erhalten Sie allgemeine Informationen zum Experiment: einen Überblick über den Ablauf
            sowie eine Erläuterung Ihrer Verdienstmöglichkeiten.
        </p>
        <p>
            Zu Beginn des Experiments werden Sie zufällig mit <strong>einer anderen Person</strong> in diesem
            Raum gepaart. Diese Paarung bleibt für die gesamte Sitzung bestehen. Die Identität Ihres Gegenübers
            bleibt Ihnen dabei stets unbekannt: alle Entscheidungen werden anonym über den Computer getroffen.
            Manche Aufgaben bearbeiten Sie alleine, andere gemeinsam mit Ihrer gepaarten Person.
        </p>
    {% endif %}

    <h2>{% if participant.language == 'en' %}Structure of the Session{% else %}Ablauf der Sitzung{% endif %}</h2>
    {% if participant.language == 'en' %}
        <p>Today's session consists of <strong>four phases</strong>. You will now receive
        instructions for all phases before making any decisions.</p>
    {% else %}
        <p>Die heutige Sitzung besteht aus <strong>vier Phasen</strong>. Sie erhalten jetzt
        die Instruktionen für alle Phasen, bevor Sie Entscheidungen treffen.</p>
    {% endif %}

    <table>
        <tr>
            <th style="width:18%;">{% if participant.language == 'en' %}Phase{% else %}Phase{% endif %}</th>
            <th style="width:52%;">{% if participant.language == 'en' %}Content{% else %}Inhalt{% endif %}</th>
            <th style="width:30%;">{% if participant.language == 'en' %}Duration{% else %}Dauer{% endif %}</th>
        </tr>
        <tr>
            <td class="phase-num">Phase 1</td>
            <td>{% if participant.language == 'en' %}Investment decision (group connection)
                {% else %}Investitionsentscheidung (Gruppenverbindung){% endif %}</td>
            <td>~ 3 min</td>
        </tr>
        <tr>
            <td class="phase-num">Phase 2</td>
            <td>{% if participant.language == 'en' %}Encoding task
                {% else %}Kodieraufgabe{% endif %}</td>
            <td>13 {% if participant.language == 'en' %}min{% else %}Min.{% endif %}</td>
        </tr>
        <tr>
            <td class="phase-num">Phase 3</td>
            <td>{% if participant.language == 'en' %}Shock&amp; Decision on the next steps
                {% else %}Schock &amp; Entscheidung über den weiteren Verlauf{% endif %}</td>
            <td>~ 3 min</td>
        </tr>
        <tr>
            <td class="phase-num">Phase 4</td>
            <td>{% if participant.language == 'en' %}Encoding task
                {% else %}Kodieraufgabe{% endif %}</td>
            <td>13 {% if participant.language == 'en' %}min{% else %}Min.{% endif %}</td>
        </tr>
    </table>

    <!-- EARNINGS -->
    <h2>{% if participant.language == 'en' %}Earnings and Payment{% else %}Verdienste und Auszahlung{% endif %}</h2>
    {% if participant.language == 'en' %}
        <p>All earnings in the experiment are measured in <strong>points</strong>. At the end
        of the session, your total points from all phases are converted to euros. You also
        receive a show-up fee. The total amount will be transferred to the bank account
        you provided in the pre-survey.</p>
        <div class="rule-box">
            💰 <strong>Conversion rate:</strong> 100 points = 1 euro<br><br>
            💶 <strong>Show-up fee:</strong> Regardless of your earnings, you will receive a show-up fee of
            {{ participation_fee }} €.<br><br>
            💳 <strong>Payment method:</strong> bank transfer to the account provided in the pre-survey
        </div>
    {% else %}
        <p>Alle Verdienste im Experiment werden in <strong>Punkten</strong> gemessen. Am Ende
        der Sitzung werden Ihre Gesamtpunkte aus allen Phasen in Euro umgerechnet. Sie erhalten
        zusätzlich eine Show-Up Fee. Der Gesamtbetrag wird auf das Bankkonto
        überwiesen, das Sie in der Vorbefragung angegeben haben.</p>
        <div class="rule-box">
            💰 <strong>Umrechnungskurs:</strong> 100 Punkte = 1 Euro<br><br>
            💶 <strong>Show-Up Fee:</strong> Sie erhalten unabhängig von Ihren Verdiensten eine Show-up Fee in Höhe von
            {{ participation_fee }} €<br><br>
            💳 <strong>Zahlungsweise:</strong> Banküberweisung auf das in der Vorbefragung angegebene Konto
        </div>
    {% endif %}
</div>

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