{% 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: 20px; font-size: 14px; }
    .slider-block { margin-bottom: 28px; }
    .slider-label { font-weight: 600; color: var(--primary-dark); font-size: 15px; margin-bottom: 10px; display: block; }
    .slider-row { display: flex; align-items: center; gap: 16px; }
    .slider-row input[type="range"] { flex: 1; accent-color: var(--primary-medium); height: 6px; }
    .slider-value { font-size: 18px; font-weight: 700; color: var(--primary-dark);
                    min-width: 48px; text-align: right; }
    .divider { border: none; border-top: 1px solid var(--neutral-lightest); margin: 22px 0; }
    .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); }
</style>

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

<div class="card">
    <h2>{% if participant.language == 'en' %}Your Belief about the Destruction Probability{% else %}Ihre Einschätzung zur Zerstörungswahrscheinlichkeit{% endif %}</h2>

    <div class="info-box">
        {% if participant.language == 'en' %}
            Before the result is revealed, we would like to know your belief about the probability
            that your group connection will be destroyed. Please indicate a lower and upper bound
            for your estimate. Your answer does not affect your payoff.
        {% else %}
            Bevor Ihre Gruppenverbindung mit einer bestimmten Wahrscheinlichkeit zerstört wird, möchten wir Ihre
            Einschätzung über die Höhe der Zerstörungswahrscheinlichkeit wissen. Bitte geben Sie eine untere und
            obere Grenze für Ihre Schätzung an. Ihre Antwort hat keinen Einfluss auf Ihre Auszahlung.
        {% endif %}
    </div>

    <!-- Hidden oTree fields -->
    <div style="display:none;">{% formfields %}</div>

    <!-- Lower bound slider -->
    <div class="slider-block">
        <span class="slider-label">
            {% if participant.language == 'en' %}Lower bound (minimum probability):{% else %}Untere Grenze (Mindestwahrscheinlichkeit):{% endif %}
        </span>
        <div class="slider-row">
            <span style="font-size:13px; color:#888;">0%</span>
            <input type="range" id="slider-lower" min="0" max="100" value="0"
                   oninput="updateSlider('lower')">
            <span style="font-size:13px; color:#888;">100%</span>
            <span class="slider-value" id="val-lower">0%</span>
        </div>
    </div>

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

    <!-- Upper bound slider -->
    <div class="slider-block">
        <span class="slider-label">
            {% if participant.language == 'en' %}Upper bound (maximum probability):{% else %}Obere Grenze (Höchstwahrscheinlichkeit):{% endif %}
        </span>
        <div class="slider-row">
            <span style="font-size:13px; color:#888;">0%</span>
            <input type="range" id="slider-upper" min="0" max="100" value="100"
                   oninput="updateSlider('upper')">
            <span style="font-size:13px; color:#888;">100%</span>
            <span class="slider-value" id="val-upper">100%</span>
        </div>
    </div>
</div>

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

<script>
    function updateSlider(which) {
        const lower = parseInt(document.getElementById('slider-lower').value);
        const upper = parseInt(document.getElementById('slider-upper').value);
        document.getElementById('val-lower').textContent = lower + '%';
        document.getElementById('val-upper').textContent = upper + '%';
        // Sync to hidden oTree inputs
        document.getElementById('id_belief_destruction_lower').value = lower;
        document.getElementById('id_belief_destruction_upper').value = upper;
    }
    // Init
    document.getElementById('id_belief_destruction_lower').value = 0;
    document.getElementById('id_belief_destruction_upper').value = 100;
</script>
{% endblock %}