{% 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; font-size: 22px; font-weight: 600; }
    .card {
        background: white; border-radius: 8px; padding: 28px 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;
    }
    p { font-size: 14px; line-height: 1.8; margin-bottom: 10px; }

    .bonus-box {
        background: #fff8e1; border-left: 4px solid #f39c12;
        padding: 12px 16px; border-radius: 4px; margin: 16px 0; font-size: 14px;
    }
    .question-text {
        font-size: 15px; font-weight: 600; color: var(--primary-dark); margin: 20px 0 8px 0;
    }

    /* Slider */
    .slider-container { margin: 24px 0; }
    .slider-labels {
        display: flex; justify-content: space-between;
        font-size: 12px; color: #777; margin-bottom: 6px;
    }
    input[type="range"] {
        -webkit-appearance: none; appearance: none;
        width: 100%; height: 8px; border-radius: 4px;
        background: linear-gradient(
            to right,
            var(--primary-medium) 0%,
            var(--primary-medium) var(--fill),
            #dde var(--fill),
            #dde 100%
        );
        outline: none; cursor: pointer;
        --fill: 50%;
    }
    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none; appearance: none;
        width: 22px; height: 22px; border-radius: 50%;
        background: var(--primary-dark); border: 3px solid white;
        box-shadow: 0 2px 6px rgba(0,0,0,0.25); cursor: pointer;
    }
    input[type="range"]::-moz-range-thumb {
        width: 22px; height: 22px; border-radius: 50%;
        background: var(--primary-dark); border: 3px solid white;
        box-shadow: 0 2px 6px rgba(0,0,0,0.25); cursor: pointer;
    }

    /* Current value display */
    .prob-display { text-align: center; margin: 16px 0 24px 0; }
    .prob-number { font-size: 48px; font-weight: 700; color: var(--primary-dark); line-height: 1; }
    .prob-label { font-size: 14px; color: #666; margin-top: 4px; }

    /* Hide the default oTree number input */
    #id_belief_partner_prob { display: none; }

    .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 36px !important; border-radius: 6px !important;
        font-size: 16px !important; font-weight: 600 !important; cursor: pointer !important;
    }
    .otree-btn-next:hover { background-color: var(--primary-dark) !important; transform: translateY(-2px); }
</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>

    <p>
        {% if participant.language == 'en' %}
            Before seeing the results, please state how likely you think it is that your partner
            chose <strong>Option A</strong> (invested in the group connection).
        {% else %}
            Bevor Sie die Ergebnisse sehen, geben Sie bitte an, für wie wahrscheinlich Sie es halten,
            dass Ihr*e Partner*in <strong>Option A</strong> gewählt hat (in die Gruppenverbindung investiert hat).
        {% endif %}
    </p>

    <p class="question-text">
        {% if participant.language == 'en' %}
            How likely is it that your partner chose Option A (invested)?
        {% else %}
            Wie wahrscheinlich ist es, dass Ihr*e Partner*in Option A gewählt hat (investiert hat)?
        {% endif %}
    </p>

    <!-- Current probability display -->
    <div class="prob-display">
        <div class="prob-number" id="probNumber">50</div>
        <div class="prob-label">%</div>
    </div>

    <!-- Slider -->
    <div class="slider-container">
        <div class="slider-labels">
            <span>{% if participant.language == 'en' %}0% - Certainly Option B{% else %}0 % - Sicher Option B{% endif %}</span>
            <span>{% if participant.language == 'en' %}100% - Certainly Option A{% else %}100 % - Sicher Option A{% endif %}</span>
        </div>
        <input type="range" id="beliefSlider" min="0" max="100" step="1" value="50">
    </div>

    <!-- Hidden oTree field driven by the slider -->
    {% formfield player.belief_partner_prob %}
</div>

<script>
    const slider      = document.getElementById('beliefSlider');
    const probNumber  = document.getElementById('probNumber');
    const hiddenInput = document.getElementById('id_belief_partner_prob');

    function update() {
        const p = parseInt(slider.value, 10);
        probNumber.textContent = p;
        slider.style.setProperty('--fill', p + '%');
        if (hiddenInput) {
            hiddenInput.value = p;
            hiddenInput.dispatchEvent(new Event('change'));
        }
    }

    slider.addEventListener('input', update);
    update();
</script>

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