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

{% block title %}
    {% if participant.language == 'en' %}
        FUNI - Pre-Survey
    {% elif participant.language == 'de' %}
        FUNI - Vorbefragung
    {% 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;
    }

    h2 {
        color: var(--primary-dark);
        border-bottom: 2px solid var(--primary-light);
        padding-bottom: 8px;
        margin-top: 0;
        margin-bottom: 14px;
        font-size: 17px;
    }

    .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);
    }

    .endowment-display {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: var(--neutral-lightest);
        border-radius: 8px;
        padding: 16px 22px;
        margin-bottom: 28px;
    }

    .endowment-label {
        font-size: 14px;
        color: #555;
    }

    .endowment-value {
        font-size: 26px;
        font-weight: 700;
        color: var(--primary-dark);
    }

    .input-section label {
        display: block;
        font-weight: 600;
        color: var(--primary-dark);
        margin-bottom: 10px;
        font-size: 15px;
    }

    .input-section input[type="number"] {
        width: 100%;
        max-width: 200px;
        padding: 10px 14px;
        border: 2px solid #dee2e6;
        border-radius: 6px;
        font-size: 18px;
        font-weight: 600;
        color: var(--primary-dark);
        transition: border-color 0.2s ease;
    }

    .input-section input[type="number"]:focus {
        outline: none;
        border-color: var(--primary-medium);
    }

    .input-hint {
        font-size: 13px;
        color: #888;
        margin-top: 6px;
    }

    .live-summary {
        background-color: #eaf4fb;
        border: 1px solid var(--primary-lighter);
        border-radius: 6px;
        padding: 16px 20px;
        margin-top: 24px;
        font-size: 14px;
    }

    .live-summary table {
        width: 100%;
        border-collapse: collapse;
    }

    .live-summary td { padding: 5px 0; }

    .live-summary td:last-child {
        text-align: right;
        font-weight: 700;
        color: var(--primary-dark);
    }

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

    .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>
        {% if participant.language == 'en' %}Task 3{% else %}Aufgabe 3{% endif %}
    </h1>
</div>

<div class="card">

    <div class="endowment-display" style="justify-content: center; gap: 10px;">
        <span class="endowment-label">
            {% if participant.language == 'en' %}Your endowment:{% else %}Ihr Startguthaben:{% endif %}
        </span>
        <span class="endowment-value">{{ C.ENDOWMENT }} {% if participant.language == 'en' %}points{% else %}Punkte{% endif %}</span>
    </div>

    <div class="input-section">
        <label>
            {% if participant.language == 'en' %}
                How many points do you want to transfer to another participant?
            {% else %}
                Wie viele Punkte möchten Sie an eine andere Person abgeben?
            {% endif %}
        </label>
        {% formfield player.amount_given %}
        <p class="input-hint">{% if participant.language == 'en' %}Enter a value between 0 and {{ C.ENDOWMENT }}.
            {% else %}Geben Sie einen Wert zwischen 0 und {{ C.ENDOWMENT }} ein.{% endif %}</p>
    </div>

    <div class="live-summary">
        <table>
            <tr>
                <td>{% if participant.language == 'en' %}You transfer:{% else %}Sie geben ab:{% endif %}</td>
                <td id="given-display">–</td>
            </tr>
            <tr>
                <td>{% if participant.language == 'en' %}You keep:{% else %}Sie behalten:{% endif %}</td>
                <td id="kept-display">–</td>
            </tr>
        </table>
    </div>

</div>

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

<script>
    const endowment = {{ C.ENDOWMENT }};
    const input = document.getElementById('id_amount_given');
    const givenDisplay = document.getElementById('given-display');
    const keptDisplay  = document.getElementById('kept-display');
    const lang = "{{ participant.language }}";

    function updateSummary() {
        const given = parseInt(input.value, 10);
        const unit = lang === 'en' ? 'pts' : 'Punkte';
        if (!isNaN(given) && given >= 0 && given <= endowment) {
            givenDisplay.textContent = given + ' ' + unit;
            keptDisplay.textContent  = (endowment - given) + ' ' + unit;
        } else {
            givenDisplay.textContent = '–';
            keptDisplay.textContent  = '–';
        }
    }
    if (input) {
        input.addEventListener('input', updateSummary);
        updateSummary();
    }
</script>

{% endblock %}