{% 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;
        border-radius: 8px;
        margin-bottom: 30px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }

    .header h1 {
        margin: 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;
        margin: 20px 0;
        border-radius: 4px;
    }

    .warning-box {
        background-color: #fff3cd;
        border-left: 4px solid #ffc107;
        padding: 15px;
        margin: 20px 0;
        border-radius: 4px;
    }

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

    .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: 20px !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;
    }

    ul, ol {
        padding-left: 25px;
        margin: 15px 0;
    }

    li {
        margin: 8px 0;
    }

    strong {
        color: var(--primary-dark);
    }

        .comprehension-line {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 2px;
        margin: 0;
        padding: 0;
        line-height: 1.2;
    }

    .comprehension-line span {
        display: flex;
        align-items: center;
    }

    .comprehension-line input {
        width: 60px;
        padding: 3px 5px;
        border: 1px solid #ccc;
        border-radius: 3px;
        text-align: center;
    }

    h2 {
        color: var(--primary-dark);
        border-bottom: 2px solid var(--primary-light);
        padding-bottom: 10px;
        margin-top: 30px;
    }

    h3 {
        color: var(--primary-medium);
        margin-top: 20px;
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
        table-layout: fixed;
    }

    table th:nth-child(1),
    table td:nth-child(1) {
        width: 25%;
    }

    table th:nth-child(2),
    table td:nth-child(2) {
        width: 35%;
    }

    table th:nth-child(3),
    table td:nth-child(3) {
        width: 40%;
    }

    th {
        background-color: var(--primary-medium);
        color: white;
        padding: 12px;
        text-align: left;
        font-weight: 500;
    }

    td {
        padding: 12px;
        border-bottom: 1px solid #d9dada;
    }

    tr:hover {
        background-color: var(--neutral-lightest);
    }
</style>

<div class="header">
    <h1>Phase 2</h1>
</div>

<div class="card">
    <h2>
        {% if participant.language == 'en' %}
            Instructions for phase 2
        {% elif participant.language == 'de' %}
            Instruktionen für Phase 2
        {% endif %}
    </h2>
    {% if participant.language == 'en' %}
        <p>
            You will now make a one-time investment decision together with the same player you were paired with in Phase 1.
            You must decide how many points you want to invest into building a <strong>group connection</strong> with
            your partner.
        </p>

        <div class="info-box">
            <strong>Your Starting Points:</strong>
            <p style="margin: 5px 0;">
                You start this phase with <strong>{% player.participant.phase1_points %} points</strong> - the points
                you earned in Phase 1.
            </p>
        </div>

        <h3>Investment Decision</h3>
        <p>
            You can invest any amount between <strong>0 and {% player.participant.phase1_points %} points</strong>.
        </p>

        <ul>
            <li><strong>Invested points</strong> are used to build the group connection and will <strong>not be returned
            </strong> to you.</li>
            <li><strong>Points you keep</strong> (do not invest) will be <strong>doubled</strong> and added to your payoff.</li>
        </ul>

        <h3>Establishing a group connection</h3>
        <p>
            A group connection is only formed if the total investment from you and your partner reaches a certain
            threshold. The higher this total investment, the stronger the connection becomes. However, the formation
            of a group connection does not guarantee that you will be able to use its benefits going forward, as any
            connection can break with a certain probability. While stronger group connections break with lower
            probability, they offer no additional benefits beyond that. In the following table, you can see which
            thresholds you need to reach to build a weak or strong group connection, and the probability with which
            each breaks.
        </p>

        <table>
            <tr>
                <th>Total Investment</th>
                <th>Result</th>
                <th>Break Probability</th>
            </tr>
            <tr>
                <td>Less than 80 points</td>
                <td><strong>No connection</strong> is formed</td>
                <td>-</td>
            </tr>
            <tr>
                <td>80 - 145 points</td>
                <td><strong>Weak connection</strong> is formed</td>
                <td>60% chance of breaking in later phases</td>
            </tr>
            <tr>
                <td>146 points or more</td>
                <td><strong>Strong connection</strong> is formed</td>
                <td>30% chance of breaking in later phases</td>
            </tr>
        </table>

        <div class="warning-box">
            <strong>Important:</strong> Group connections are not guaranteed to last. Even if a connection is formed,
            it may break in later phases of the study as indicated by the probabilities above.
        </div>

        <h3>Benefits of Group Connections</h3>
        <p>
            A group connection will help you and your partner complete tasks more easily in later phases. A stronger
            connection provides more help than a weak connection.
        </p>
        <h3>Your Payoff Calculation</h3>
        <p>Your payoff from this phase is calculated as follows:</p>

        <div class="success-box">
            <strong>Payoff = (Points you keep) × 2</strong>
            <p style="margin: 10px 0 0 0;">Plus potential benefits from the group connection in later phases</p>
        </div>

            <h3>Example Calculation and Comprehension Question</h3>
            <div class="info-box">
                <p><strong>Scenario:</strong></p>
                <p><i>To illustrate the calculation – your actual points may vary</i></p>
                <ul>
                    <li>You have 50 points from Phase 1</li>
                    <li>You invest 30 points</li>
                    <li>You keep 20 points</li>
                    <li>Your partner invests 55 points</li>
                    <li>Total investment: 30 + 55 = <strong>85 points</strong></li>
                </ul>

                <p><strong>Comprehension Question about the Result:</strong></p>
                <ul style="list-style-type: none;">
                    <li>
                        <span class="comprehension-line">
                            <span>{{ formfield player.comq1_group_connection_en }}</span>
                            <span>group connection is formed.</span>
                        </span>
                        </span>
                    </li>
                    <li>
                        <span class="comprehension-line">
                            <span>Your immediate payoff:</span>
                            <span>{{ formfield player.comq2_points_kept }}</span>
                            <span>points.</span>
                        </span>
                    </li>
                </ul>
            </div>

            <h3>Information You Will Receive</h3>
            <p>
                After both you and your partner have made your investment decisions, you will see:
            </p>
            <ul>
                <li>The total investment amount (your investment + partner's investment)</li>
                <li>Which type of connection was formed (none, weak, or strong)</li>
                <li>Your payoff from this phase</li>
            </ul>

        {% elif participant.language == 'de' %}
            <p>
                Sie treffen nun eine einmalige Investitionsentscheidung zusammen mit demselben*derselben Spieler*in,
                mit dem*der Sie in Phase 1 gepaart waren. Sie müssen entscheiden, wie viele Punkte Sie in den Aufbau
                einer <strong>Gruppenverbindung</strong> mit Ihrem*Ihrer Partner*in investieren möchten.
            </p>

            <div class="info-box">
                <strong>Ihre Startpunkte:</strong>
                <p style="margin: 5px 0;">
                    Sie beginnen diese Phase mit <strong>{% player.participant.phase1_points %} Punkten</strong> -
                    den Punkten, die Sie in Phase 1 verdient haben.
                </p>
            </div>

            <h3>Investitionsentscheidung</h3>
            <p>
                Sie können jeden Betrag zwischen <strong>0 und
                {% player.participant.phase1_points %} Punkten</strong> investieren.
                <ul>
                    <li><strong>Investierte Punkte</strong> werden für den Aufbau der Gruppenverbindung verwendet und
                        <strong>nicht zurückerstattet</strong>.</li>
                    <li><strong>Punkte, die Sie behalten</strong> (nicht investieren), werden <strong>verdoppelt</strong>
                        und zu Ihrer Auszahlung addiert.</li>
                </ul>
            </p>

            <h3>Zustandekommen von Gruppenverbindungen</h3>
            <p>
                Eine Gruppenverbindung kommt nur zustande, wenn die Gesamtinvestition von Ihnen und Ihrem*Ihrer Partner*in
                einen bestimmten Schwellenwert erreicht. Je höher diese Gesamtinvestition ausfällt, desto stärker wird
                die Verbindung. Allerdings garantiert das Zustandekommen einer Gruppenverbindung nicht, dass Sie deren
                Vorteile im weiteren Verlauf auch nutzen können, denn jede Verbindung kann mit einer bestimmten
                Wahrscheinlichkeit brechen. Stärkere Gruppenverbindungen brechen zwar mit geringerer Wahrscheinlichkeit,
                bieten aber abgesehen davon keine zusätzlichen Vorteile. In der folgenden Tabelle sehen Sie, welche
                Schwellenwerte Sie erreichen müssen, um eine schwache oder starke Gruppenverbindung aufzubauen
                und mit welcher Wahrscheinlichkeit diese jeweils bricht.
            </p>

            <table>
                <tr>
                    <th>Gesamtinvestition</th>
                    <th>Ergebnis</th>
                    <th>Wahrscheinlichkeit des Bruchs</th>
                </tr>
                <tr>
                    <td>Weniger als 80 Punkte</td>
                    <td><strong>Keine Verbindung</strong> wird gebildet</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td>80 - 145 Punkte</td>
                    <td><strong>Schwache Verbindung</strong> wird gebildet</td>
                    <td>60% Wahrscheinlichkeit in späteren Phasen zu brechen</td>
                </tr>
                <tr>
                    <td>146 Punkte oder mehr</td>
                    <td><strong>Starke Verbindung</strong> wird gebildet</td>
                    <td>30% Wahrscheinlichkeit in späteren Phasen zu brechen</td>
                </tr>
            </table>

            <div class="warning-box">
                <strong>Wichtig:</strong> Gruppenverbindungen sind nicht garantiert dauerhaft. Selbst wenn eine
                Verbindung gebildet wird, kann sie in späteren Phasen der Studie brechen, wie durch die obigen
                Wahrscheinlichkeiten angegeben.
            </div>

            <h3>Vorteile von Gruppenverbindungen</h3>
            <p>
                Eine Gruppenverbindung wird Ihnen und Ihrem Partner helfen, Aufgaben in späteren Phasen leichter zu
                bewältigen. Eine stärkere Verbindung bietet nicht mehr Möglichkeiten, sondern hat lediglich eine
                geringere Wahrscheinlichkeit zu brechen.
            </p>

            <h3>Berechnung Ihrer Auszahlung</h3>
            <p>Ihre Auszahlung aus dieser Phase wird wie folgt berechnet:</p>

            <div class="success-box">
                <strong>Auszahlung = (Behaltene Punkte) × 2</strong>
                <p style="margin: 10px 0 0 0;">Plus mögliche Vorteile durch die Gruppenverbindung in späteren Phasen</p>
            </div>

            <h3>Berechnungsbeispiel und Verständnisfragen</h3>
            <div class="info-box">
                <p><strong>Szenario:</strong></p>
                <p><i>Zur Veranschaulichung der Berechnung – Ihre tatsächlichen Punkte können abweichen</i></p>
                <ul>
                    <li>Sie haben 50 Punkte aus Phase 1</li>
                    <li>Sie investieren 30 Punkte</li>
                    <li>Sie behalten 20 Punkte</li>
                    <li>Ihr Partner investiert 55 Punkte</li>
                    <li>Gesamtinvestition: 30 + 55 = <strong>85 Punkte</strong></li>
                </ul>

                <p><strong>Verständnisfragen zum Ergebnis:</strong></p>
                <ul style="list-style-type: none;">
                    <li>
                        <span class="comprehension-line">
                            <span>{{ formfield player.comq1_group_connection_de }}</span>
                            <span>Gruppenverbindung wird gebildet.</span>
                        </span>
                    </li>
                    <li>
                        <span class="comprehension-line">
                            <span>Ihre sofortige Auszahlung:</span>
                            <span>{{ formfield player.comq2_points_kept }}</span>
                            <span>Punkte.</span>
                        </span>
                    </li>
                </ul>
            </div>

            <h3>Informationen, die Sie erhalten werden</h3>
            <p>
                Nachdem Sie und Ihr*e Partner*in Ihre Investitionsentscheidungen getroffen haben, sehen Sie:
            </p>
            <ul>
                <li>Den Gesamtinvestitionsbetrag (Ihre Investition + Investition des*der Partners*in)</li>
                <li>Welche Art von Verbindung gebildet wurde (keine, schwach oder stark)</li>
                <li>Ihre Auszahlung aus dieser Phase</li>
            </ul>
        {% endif %}
</div>

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

{% endblock %}