{% 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;
    }
    .info-box {
        background-color: var(--neutral-lightest); border-left: 4px solid var(--primary-lighter);
        padding: 13px 16px; border-radius: 4px; margin-bottom: 24px; font-size: 14px;
    }
    .question-text {
        font-size: 15px; font-weight: 600; color: var(--primary-dark); margin-bottom: 16px;
    }
    .input-row {
        display: flex; align-items: center; gap: 12px; margin-top: 8px;
    }
    .input-row input[type="number"] {
        width: 120px; padding: 10px 14px;
        border: 2px solid var(--primary-light); border-radius: 6px;
        font-size: 18px; font-weight: 600; color: var(--primary-dark);
    }
    .input-row input[type="number"]:focus {
        outline: none; border-color: var(--primary-medium);
    }
    .input-unit { font-size: 15px; color: #555; }
    .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;
    }
</style>

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

<div class="card">
    <h2>{% if participant.language == 'en' %}Belief about Your Partner{% else %}Einschätzung Ihres*Ihrer Mitspielers*in{% endif %}</h2>

    <div>
        {% if participant.language == 'en' %}
            <p>
                Before seeing the results, we would like to know what you think your partner contributed.
                If your estimate is within ±5 points of the actual contribution, you’ll receive an additional
                <strong>15 points</strong>.
            </p>
        {% else %}
            <p>
                Bevor Sie die Ergebnisse sehen, möchten wir Ihre Einschätzung zum Beitrag Ihres*Ihrer Mitspielers*in
                wissen. Wenn Ihre Schätzung den tatsächlichen Beitrag um nicht mehr als ± 5 Punkte abweicht, erhalten
                Sie zusätzlich <strong>15 Punkte</strong>.
            </p>
        {% endif %}
    </div>

    <p class="question-text">
        {% if participant.language == 'en' %}
            How many points do you think your partner invested in the group connection?
            (between 0 and {{ endowment }})
        {% else %}
            Wie viele Punkte denken Sie, hat Ihr*e Mitspieler*in in die Gruppenverbindung investiert?
            (zwischen 0 und {{ endowment }})
        {% endif %}
    </p>

    <div class="input-row">
        {% formfield player.belief_partner_contribution %}
        <span class="input-unit">{% if participant.language == 'en' %}points{% else %}Punkte{% endif %}</span>
    </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 %}