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

{% block title %}
    {% if participant.language == 'en' %}FUNI - Part 2{% else %}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: 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: 20px 0; }
    .result-box {
        background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-medium) 100%);
        border-radius: 8px; padding: 20px 24px; margin-bottom: 20px;
        text-align: center; color: white; box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    .result-box-label { font-size: 14px; opacity: 0.85; margin-bottom: 6px; }
    .result-box-value { font-size: 40px; font-weight: 700; }
    .summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
    .summary-item { background: var(--neutral-lightest); border-radius: 6px; padding: 16px;
                    border-left: 4px solid var(--primary-light); }
    .summary-label { font-size: 12px; color: #888; margin-bottom: 4px; }
    .summary-value { font-size: 22px; font-weight: 700; color: var(--primary-dark); }
    .calc-row { display: flex; justify-content: space-between;
                padding: 7px 0; border-bottom: 1px solid #dee2e6; font-size: 14px; }
    .calc-row:last-child { 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); }
    .belief-result { border-radius: 6px; padding: 14px 16px; margin-bottom: 16px; font-size: 14px; }
    .belief-result.correct { background-color: #e8f4eb; border-left: 4px solid #2e7d40; }
    .belief-result.correct strong { color: #2e7d40; }
    .belief-result.incorrect { background-color: #fdecea; border-left: 4px solid #c0392b; }
    .belief-result.incorrect strong { color: #c0392b; }
    .note-box { background-color: #fff8e1; border-left: 4px solid #f9a825;
                padding: 13px 16px; border-radius: 4px; font-size: 14px; margin-top: 16px; }
    .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); }
    @media (max-width: 480px) { .summary-grid { grid-template-columns: 1fr; } }
</style>

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

<div class="card">
    <h2>{% if participant.language == 'en' %}Help Summary{% else %}Zusammenfassung der Hilfe{% endif %}</h2>

    <div class="summary-grid">
        <div class="summary-item">
            <div class="summary-label">
                {% if participant.language == 'en' %}Help you gave{% else %}Geleistete Hilfe{% endif %}
            </div>
            <div class="summary-value">{{ help_given }} {% if participant.language == 'en' %}pts{% else %}Pkt.{% endif %}</div>
        </div>
        <div class="summary-item" style="border-left-color: var(--primary-medium);">
            <div class="summary-label">
                {% if participant.language == 'en' %}Help you received{% else %}Erhaltene Hilfe{% endif %}
            </div>
            <div class="summary-value">{{ help_received }} {% if participant.language == 'en' %}pts{% else %}Pkt.{% endif %}</div>
        </div>
    </div>

    {% if connection == 'none' %}
    <div class="note-box">
        {% if participant.language == 'en' %}
            You had no active group connection, so no help was exchanged.
        {% else %}
            Sie hatten keine aktive Gruppenverbindung, daher wurde keine Hilfe ausgetauscht.
        {% endif %}
    </div>
    {% else %}
    <div class="note-box">
        {% if participant.language == 'en' %}
            {% if help_received == 0 %}
                Your partner did not invest any points in helping you.
            {% else %}
                Your partner invested <strong>{{ help_received }} points</strong> in helping you.
                {% if participant.language == 'en' %}This reduces your task difficulty in Phase 4.{% endif %}
            {% endif %}
        {% else %}
            {% if help_received == 0 %}
                Ihr*e Mitspieler*in hat keine Punkte in Ihre Unterstützung investiert.
            {% else %}
                Ihr*e Mitspieler*in hat <strong>{{ help_received }} Punkte</strong> in Ihre Unterstützung
                investiert. Dies erleichtert Ihre Aufgabe in Phase 4.
            {% endif %}
        {% endif %}
    </div>
    {% endif %}
</div>

{% if connection != 'none' %}
<div class="card">
    <h2>{% if participant.language == 'en' %}Belief Elicitation Bonus{% else %}Bonus aus der Einschätzungsaufgabe{% endif %}</h2>

    {% if belief_help_bonus > 0 %}
    <div class="belief-result correct">
        <strong>✓ {% if participant.language == 'en' %}Correct!{% else %}Korrekt!{% endif %}</strong>
        {% if participant.language == 'en' %}
            Your token distribution earned you a bonus.
        {% else %}
            Ihre Tokenverteilung hat Ihnen einen Bonus eingebracht.
        {% endif %}
    </div>
    {% else %}
    <div class="belief-result incorrect">
        <strong>{% if participant.language == 'en' %}No bonus this time.{% else %}Kein Bonus diesmal.{% endif %}</strong>
        {% if participant.language == 'en' %}
            Your tokens were not concentrated on the correct transfer amount.
        {% else %}
            Ihre Token waren nicht auf den tatsächlichen Transferbetrag konzentriert.
        {% endif %}
    </div>
    {% endif %}

    <div class="info-box" style="background-color: var(--neutral-lightest);
         border-left: 4px solid var(--primary-lighter); padding: 13px 16px;
         border-radius: 4px; margin-top: 16px; font-size: 14px;">
        <div class="calc-row">
            <span>{% if participant.language == 'en' %}Actual help received:{% else %}Tatsächlich erhaltene Hilfe:{% endif %}</span>
            <span>{{ help_received }} {% if participant.language == 'en' %}pts{% else %}Pkt.{% endif %}</span>
        </div>
        <div class="calc-row">
            <span>{% if participant.language == 'en' %}Bonus formula:{% else %}Bonusformel:{% endif %}</span>
            <span>({% if participant.language == 'en' %}tokens on correct column{% else %}Token auf richtiger Spalte{% endif %} ÷ 100) × 20</span>
        </div>
        <div class="calc-row">
            <span>{% if participant.language == 'en' %}Your belief bonus:{% else %}Ihr Einschätzungsbonus:{% endif %}</span>
            <span>{{ belief_help_bonus }} {% if participant.language == 'en' %}pts{% else %}Pkt.{% endif %}</span>
        </div>
    </div>
    <div style="margin-top: 16px;">
         {% if participant.language == 'en' %}
            <p>Click "Continue" now to begin Phase 4 with the task you selected.</p>
         {% else %}
            <p>Klicken Sie jetzt auf Weiter, um mit Ihrer gewählten Aufgabe in Phase 4 zu beginnen.</p>
         {% endif %}
     </div>
</div>
{% endif %}

<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 %}