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

{% block title %}
    {% if participant.language == 'en' %}FUNO - Part 2{% else %}FUNO - 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 0 4px 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;
    }
    .divider { border: none; border-top: 1px solid var(--neutral-lightest); margin: 24px 0; }

    /* Result banner */
    .result-box {
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
        border-radius: 8px; padding: 20px 24px; margin-bottom: 24px;
        text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .result-title { font-size: 20px; font-weight: 700; color: white; margin-bottom: 4px; }
    .result-subtitle { font-size: 14px; color: rgba(255,255,255,0.85); }

    /* Summary grid */
    .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
    .summary-item {
        background-color: var(--neutral-lightest); padding: 16px;
        border-radius: 6px; border-left: 4px solid var(--primary-light);
    }
    .summary-item.full { grid-column: 1 / -1; border-left-color: var(--primary-medium); }
    .summary-label { font-size: 13px; color: #666; margin-bottom: 4px; }
    .summary-value { font-size: 18px; font-weight: 700; color: var(--primary-dark); }

    /* Calculation */
    .info-box {
        background-color: var(--neutral-lightest); border-left: 4px solid var(--primary-lighter);
        padding: 14px 16px; border-radius: 4px; margin-bottom: 20px; font-size: 14px;
    }
    .calc-row {
        display: flex; justify-content: space-between;
        padding: 6px 0; border-bottom: 1px solid #dee2e6; font-size: 14px;
    }
    .calc-row.total {
        border-bottom: none; border-top: 2px solid var(--primary-medium);
        padding-top: 10px; margin-top: 6px;
        font-weight: 700; font-size: 16px; color: var(--primary-dark);
    }

    /* Payoff display */
    .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-bottom: 20px;
    }
    .payoff-label { font-size: 15px; opacity: 0.85; margin-bottom: 8px; }
    .payoff-amount { font-size: 40px; font-weight: 700; }

    .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 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;
    }
    .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;
    }
    @media (max-width: 600px) { .summary-grid { grid-template-columns: 1fr; } }
</style>

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

<!-- ── CONNECTION RESULT ───────────────────────────────────────────────────── -->
<div class="card">
    <h2>{% if participant.language == 'en' %}Group Connection{% else %}Gruppenverbindung{% endif %}</h2>

    {% if group_connection == "formed" %}
    <div class="result-box">
        <div class="result-title">
            {% if participant.language == 'en' %}Connection Established{% else %}Verbindung hergestellt{% endif %}
        </div>
        <div class="result-subtitle">
            {% if participant.language == 'en' %}Both you and your partner chose Option A.
            {% else %}Sie und Ihr*e Partner*in haben beide Option A gewählt.{% endif %}
        </div>
    </div>
    {% else %}
    <div class="result-box" style="background: linear-gradient(135deg, #555 0%, #777 100%);">
        <div class="result-title">
            {% if participant.language == 'en' %}No Connection{% else %}Keine Verbindung{% endif %}
        </div>
        <div class="result-subtitle">
            {% if participant.language == 'en' %}At least one player chose Option B.
            {% else %}Mindestens eine Person hat Option B gewählt.{% endif %}
        </div>
    </div>
    {% endif %}

    <div class="divider"></div>

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

    <div class="summary-grid">
        <div class="summary-item">
            <div class="summary-label">{% if participant.language == 'en' %}Your choice{% else %}Ihre Wahl{% endif %}</div>
            <div class="summary-value">
                {% if own_choice == 'invest' %}
                    {% if participant.language == 'en' %}Option A (invest){% else %}Option A (investiert){% endif %}
                {% else %}
                    {% if participant.language == 'en' %}Option B (private account){% else %}Option B (privates Konto){% endif %}
                {% endif %}
            </div>
        </div>
        <div class="summary-item">
            <div class="summary-label">{% if participant.language == 'en' %}Partner's choice{% else %}Wahl des*der Partners*in{% endif %}</div>
            <div class="summary-value">
                {% if other_choice == 'invest' %}
                    {% if participant.language == 'en' %}Option A (invest){% else %}Option A (investiert){% endif %}
                {% else %}
                    {% if participant.language == 'en' %}Option B (private account){% else %}Option B (privates Konto){% endif %}
                {% endif %}
            </div>
        </div>
    </div>

    <div class="divider"></div>

    <!-- ── PAYOFF CALCULATION ────────────────────────────────────────────────── -->
    <h2>{% if participant.language == 'en' %}Your Payoff{% else %}Ihre Auszahlung{% endif %}</h2>

    <div class="info-box">
        {% if own_choice == 'invest' %}
        <div class="calc-row">
            <span>{% if participant.language == 'en' %}Your choice:{% else %}Ihre Wahl:{% endif %}</span>
            <span>{% if participant.language == 'en' %}Option A - invested{% else %}Option A - investiert{% endif %}</span>
        </div>
        <div class="calc-row">
            <span>{% if participant.language == 'en' %}Immediate payoff:{% else %}Sofortige Auszahlung:{% endif %}</span>
            <span>0 {% if participant.language == 'en' %}points{% else %}Punkte{% endif %}</span>
        </div>
        {% else %}
        <div class="calc-row">
            <span>{% if participant.language == 'en' %}Your choice:{% else %}Ihre Wahl:{% endif %}</span>
            <span>{% if participant.language == 'en' %}Option B - private account{% else %}Option B - privates Konto{% endif %}</span>
        </div>
        <div class="calc-row">
            <span>{% if participant.language == 'en' %}{{ endowment }} × 1.8:{% else %}{{ endowment }} × 1,8:{% endif %}</span>
            <span>{{ private_return }} {% if participant.language == 'en' %}points{% else %}Punkte{% endif %}</span>
        </div>
        {% endif %}

        <div class="calc-row" style="font-size: 13px; color: #666; border-top: none; font-weight: 400;">
            <span>
                {% if participant.language == 'en' %}
                    Your stated belief: {{ belief_partner_prob }}% probability that partner chose Option A
                {% else %}
                    Ihre angegebene Einschätzung: {{ belief_partner_prob }}% Wahrscheinlichkeit, dass Partner*in Option A gewählt hat
                {% endif %}
            </span>
        </div>
    </div>

    <div class="payoff-box">
        <div class="payoff-label">
            {% if participant.language == 'en' %}Your total payoff from Phase 1:{% else %}Ihre Gesamtauszahlung aus Phase 1:{% endif %}
        </div>
        <div class="payoff-amount">{{ total_payoff }}</div>
    </div>

    <p style="font-size: 14px;">
        {% if participant.language == 'en' %}
            You have completed Phase 1. Click Continue to begin Phase 2 - the encoding task.
        {% else %}
            Sie haben Phase 1 abgeschlossen. Klicken Sie auf Weiter, um mit Phase 2 - der Kodieraufgabe - zu beginnen.
        {% endif %}
    </p>
</div>

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