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

{% block title %}
Choice Round {{ current_round }}
{% endblock %}

{% block content %}

<style>
    .page-wrap {
        max-width: 1100px;
        margin: 0 auto;
    }

    .intro-card, .decision-card, .followup-card {
        background: #ffffff;
        border: 1px solid #dbe5ef;
        border-radius: 20px;
        padding: 1.4rem 1.4rem 1.25rem;
        box-shadow: 0 10px 28px rgba(15, 41, 77, 0.08);
    }

    .intro-card {
        margin-bottom: 1.6rem;
    }

    .decision-card {
        margin-bottom: 1.4rem;
    }

    .followup-card {
        margin-bottom: 1.6rem;
        display: none;
    }

    .intro-text {
        font-size: 1.04rem;
        line-height: 1.65;
    }

    .section-title {
        font-weight: 700;
        font-size: 1.08rem;
        margin-bottom: 0.85rem;
    }

    .light-label {
        color: #67b7e1;
        font-weight: 700;
    }

    .dark-label {
        color: #1f4f9b;
        font-weight: 700;
    }

    .decision-visual-title {
        text-align: center;
        font-size: 0.95rem;
        line-height: 1.35;
        font-weight: 600;
        color: #334155;
        margin-bottom: 0.85rem;
    }

    .visual-wrap {
        width: 860px;
        margin: 0 auto 1.2rem auto;
    }

    .rule-panel {
        position: relative;
        width: 860px;
        height: 150px;
        margin: 0 auto;
        background: transparent;
        border: none;
    }

    .rule-label {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        text-align: center;
        font-weight: 700;
        font-size: 1rem;
        pointer-events: none;
        white-space: nowrap;
        display: none;
    }

    .rule-label-left {
        left: 25%;
        color: #1f4f9b;
    }

    .rule-label-right {
        left: 75%;
        color: #67b7e1;
    }

    .threshold-line {
        position: absolute;
        top: -12px;
        bottom: -12px;
        width: 4px;
        background: #e03131;
        pointer-events: none;
        display: none;
    }

    .axis-shell {
        position: relative;
        width: 860px;
        height: 90px;
        margin: 0 auto;
    }

    .axis-line {
        position: absolute;
        left: 0;
        right: 0;
        top: 44px;
        height: 3px;
        background: #b8c2cc;
        border-radius: 999px;
    }

    .axis-tick {
        position: absolute;
        top: 0;
        transform: translateX(-50%);
        font-size: 0.82rem;
        color: #475569;
        text-align: center;
        white-space: nowrap;
    }

    .axis-tick::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 28px;
        width: 2px;
        height: 10px;
        background: #94a3b8;
        transform: translateX(-50%);
    }

    .threshold-badge {
        position: absolute;
        top: 56px;
        transform: translateX(-50%);
        background: #ffffff;
        color: #d72c32;
        border: 1px solid #f0b0b4;
        border-radius: 999px;
        padding: 0.16rem 0.45rem;
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1;
        box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);
        display: none;
    }

    .slider-shell {
        position: relative;
        width: 860px;
        height: 70px;
        margin: 0.15rem auto 0 auto;
    }

    .slider-caption {
        text-align: center;
        font-size: 0.82rem;
        color: #475569;
        font-weight: 600;
        margin-bottom: 0.35rem;
    }

    .horizontal-range {
        width: 100%;
        appearance: none;
        background: transparent;
        cursor: pointer;
    }

    .horizontal-range:focus {
        outline: none;
    }

    .horizontal-range::-webkit-slider-runnable-track {
        height: 7px;
        background: #d7dde4;
        border-radius: 999px;
    }

    .horizontal-range::-webkit-slider-thumb {
        appearance: none;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: transparent;
        border: 0;
        box-shadow: none;
        margin-top: -8px;
    }

    .horizontal-range.is-active::-webkit-slider-thumb {
        background: #e03131;
        border: 3px solid #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    }

    .horizontal-range::-moz-range-track {
        height: 7px;
        background: #d7dde4;
        border-radius: 999px;
    }

    .horizontal-range::-moz-range-thumb {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .horizontal-range.is-active::-moz-range-thumb {
        background: #e03131;
        border: 3px solid #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    }

    .horizontal-range.is-locked {
        pointer-events: none;
        opacity: 0.75;
        cursor: not-allowed;
    }

    .rule-text-block {
        max-width: 950px;
        margin: 0.3rem auto 0 auto;
        line-height: 1.55;
        font-size: 1rem;
        display: none;
    }

    .rule-line {
        margin-top: 0.55rem;
    }

    .note-line {
        margin-top: 0.65rem;
        font-size: 0.92rem;
        line-height: 1.5;
        color: #5d6b79;
    }

    .field-block {
        margin-top: 0.9rem;
    }

    .field-block label {
        display: block;
        font-weight: 700;
        margin-bottom: 0.6rem;
        line-height: 1.45;
    }

    .number-input {
        width: 100%;
        max-width: 220px;
        border: 1px solid #bbc9d8;
        border-radius: 10px;
        padding: 0.7rem 0.8rem;
        font-size: 1rem;
        box-sizing: border-box;
    }

    .inline-actions {
        width: 860px;
        margin: 1.15rem auto 0 auto;
        display: flex;
        justify-content: center;
    }

    .confirm-btn[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .locked-banner {
        display: none;
        max-width: 950px;
        margin: 0.95rem auto 0 auto;
        padding: 0.8rem 1rem;
        border-radius: 12px;
        background: #eef6ff;
        border: 1px solid #c8dcf5;
        color: #1c4d7d;
        font-weight: 600;
        text-align: center;
    }

    .confirm-warning {
        display: none;
        margin-top: 0.85rem;
        color: #b42318;
        font-weight: 600;
        text-align: center;
    }

    .submit-row {
        text-align: right;
        display: none;
        margin-top: 1.3rem;
    }

    @media (max-width: 900px) {
        .visual-wrap,
        .axis-shell,
        .slider-shell,
        .rule-panel,
        .inline-actions {
            width: 100%;
        }
    }
</style>

<div class="page-wrap">
    <div class="intro-card">
        <div class="intro-text">
            <b>You are a <span style="color: darkblue;">DARK BLUE</span> player.</b><br><br>
            First guess the cutoff chosen by the <span style="color: mediumseagreen; font-weight:700;">GREEN</span> player and click <b>Confirm cutoff</b>.<br><br>
            <span style="font-size: 0.92em;">
                This guess is incentivized: at the end of the experiment, one round will be randomly selected for payment. If in that round your guess is exactly correct, you earn an additional <b>2 tokens</b>; if your guess is at most <b>5 points</b> away from the true cutoff, you earn an additional <b>1 token</b>; otherwise, you earn <b>0 additional tokens</b>.
            </span><br><br>
            Then answer the remaining questions.
        </div>
    </div>

    {{ formfield_errors 'Belief_Dark_Principal' }}
    {{ formfield_errors 'Belief_Dark_Principal_Confidence' }}
    {{ formfield_errors 'Belief_Dark_Light' }}

    <input type="hidden" name="Belief_Dark_Principal" id="Belief_Dark_Principal_hidden" value="">

    <div class="decision-card">
        <div class="section-title">Your guess of GREEN's cutoff</div>

        <div class="decision-visual-title">
            Difference in output:
            <span class="light-label">Light Blue</span> −
            <span class="dark-label">Dark Blue</span>
        </div>

        <div class="visual-wrap">
            <div class="rule-panel">
                <div class="rule-label rule-label-left" id="belief_dark_left_label">DARK BLUE wins</div>
                <div class="threshold-line" id="Belief_Dark_Principal_line"></div>
                <div class="rule-label rule-label-right" id="belief_dark_right_label">LIGHT BLUE wins</div>
            </div>

            <div class="axis-shell">
                <div class="axis-line"></div>

                <div class="axis-tick" style="left:0%;">-120</div>
                <div class="axis-tick" style="left:8.333%;">-100</div>
                <div class="axis-tick" style="left:16.667%;">-80</div>
                <div class="axis-tick" style="left:25%;">-60</div>
                <div class="axis-tick" style="left:33.333%;">-40</div>
                <div class="axis-tick" style="left:41.667%;">-20</div>
                <div class="axis-tick" style="left:50%;">0</div>
                <div class="axis-tick" style="left:58.333%;">20</div>
                <div class="axis-tick" style="left:66.667%;">40</div>
                <div class="axis-tick" style="left:75%;">60</div>
                <div class="axis-tick" style="left:83.333%;">80</div>
                <div class="axis-tick" style="left:91.667%;">100</div>
                <div class="axis-tick" style="left:100%;">120</div>

                <div class="threshold-badge" id="Belief_Dark_Principal_badge">0</div>
            </div>

            <div class="slider-shell">
                <div class="slider-caption">Move left/right</div>
                <input
                    type="range"
                    id="Belief_Dark_Principal_slider"
                    value="0"
                    step="1"
                    min="-120"
                    max="120"
                    class="horizontal-range"
                >
            </div>
        </div>

        <div class="rule-text-block" id="belief_dark_rule_text_block">
            <div class="rule-line" id="belief_dark_rule_text"></div>
            <div class="note-line" id="belief_dark_tie_text"></div>
        </div>

        <div class="inline-actions">
            <button type="button" id="confirm-belief-dark-threshold" class="btn btn-primary confirm-btn" disabled>Confirm cutoff</button>
        </div>

        <div id="locked-banner-belief-dark" class="locked-banner">
            Cutoff locked on this page: <span id="locked-threshold-value-belief-dark"></span>
        </div>

        <div id="confirm-warning-belief-dark" class="confirm-warning">
            Please click on the slider and then click “Confirm cutoff”.
        </div>
    </div>

    <div id="followup-card-dark-belief" class="followup-card">
        <div class="section-title">Additional questions</div>

        <div class="field-block">
            <label for="Belief_Dark_Principal_Confidence">How confident are you in this guess? (0 to 100)</label>
            <input
                type="number"
                id="Belief_Dark_Principal_Confidence"
                name="Belief_Dark_Principal_Confidence"
                min="0"
                max="100"
                step="1"
                class="number-input"
                required
            >
        </div>

        <div class="field-block">
            <label for="Belief_Dark_Light">What effort do you think the <span class="light-label">LIGHT BLUE</span> player chose? (0 to 100)</label>
            <input
                type="number"
                id="Belief_Dark_Light"
                name="Belief_Dark_Light"
                min="0"
                max="100"
                step="1"
                class="number-input"
                required
            >
        </div>
    </div>

    <div id="submit-row-dark-belief" class="submit-row">
        <input type="submit" class="btn btn-primary btn-large" value="Submit" style="height:50px;width:200px">
    </div>
</div>

<script>
    (function () {
        function signedNumber(n) {
            return n > 0 ? `+${n}` : `${n}`;
        }

        const slider = document.getElementById('Belief_Dark_Principal_slider');
        const hidden = document.getElementById('Belief_Dark_Principal_hidden');
        const badge = document.getElementById('Belief_Dark_Principal_badge');
        const line = document.getElementById('Belief_Dark_Principal_line');
        const leftLabel = document.getElementById('belief_dark_left_label');
        const rightLabel = document.getElementById('belief_dark_right_label');
        const ruleTextBlock = document.getElementById('belief_dark_rule_text_block');
        const ruleText = document.getElementById('belief_dark_rule_text');
        const tieText = document.getElementById('belief_dark_tie_text');

        const confirmButton = document.getElementById('confirm-belief-dark-threshold');
        const followupCard = document.getElementById('followup-card-dark-belief');
        const submitRow = document.getElementById('submit-row-dark-belief');
        const warningBox = document.getElementById('confirm-warning-belief-dark');
        const lockedBanner = document.getElementById('locked-banner-belief-dark');
        const lockedValue = document.getElementById('locked-threshold-value-belief-dark');
        const form = slider.closest('form');

        let thresholdConfirmed = false;
        let sliderActivated = false;

        function updateVisual(value) {
            const min = parseInt(slider.min, 10);
            const max = parseInt(slider.max, 10);
            const pct = ((value - min) / (max - min)) * 100;

            line.style.left = `calc(${pct}% - 2px)`;
            badge.style.left = `${pct}%`;
            badge.textContent = signedNumber(value);

            leftLabel.style.left = `${pct / 2}%`;
            rightLabel.style.left = `${(pct + 100) / 2}%`;
        }

        function updateText(value) {
            const lightColor = '<span class="light-label">LIGHT BLUE</span>';
            const darkColor = '<span class="dark-label">DARK BLUE</span>';

            if (value > 0) {
                ruleText.innerHTML =
                    `${lightColor} receives the high payment if their work output exceeds ${darkColor}’s work output by <b>more than ${value}</b> points.`;

                tieText.innerHTML =
                    `<b>Note:</b> If ${lightColor}’s work output is <b>exactly ${value}</b> points higher than ${darkColor}’s work output, the high payment is randomly allocated between the two BLUE players.`;
            } else if (value < 0) {
                const absValue = Math.abs(value);

                ruleText.innerHTML =
                    `${darkColor} receives the high payment if their work output exceeds ${lightColor}’s work output by <b>more than ${absValue}</b> points.`;

                tieText.innerHTML =
                    `<b>Note:</b> If ${darkColor}’s work output is <b>exactly ${absValue}</b> points higher than ${lightColor}’s work output, the high payment is randomly allocated between the two BLUE players.`;
            } else {
                ruleText.innerHTML =
                    `${lightColor} receives the high payment if their work output exceeds ${darkColor}’s work output.`;

                tieText.innerHTML =
                    `<b>Note:</b> If both BLUE players have <b>exactly the same</b> work output, the high payment is randomly allocated between the two BLUE players.`;
            }
        }

        function activateSlider() {
            if (!sliderActivated) {
                sliderActivated = true;
                slider.classList.add('is-active');
                badge.style.display = 'block';
                line.style.display = 'block';
                ruleTextBlock.style.display = 'block';
                leftLabel.style.display = 'block';
                rightLabel.style.display = 'block';
                confirmButton.disabled = false;
            }
        }

        function refreshAll() {
            const value = parseInt(slider.value, 10);
            updateVisual(value);
            updateText(value);
        }

        function confirmThreshold() {
            if (!sliderActivated) {
                return;
            }

            const value = slider.value;
            hidden.value = value;
            thresholdConfirmed = true;

            slider.disabled = true;
            slider.classList.add('is-locked');
            confirmButton.style.display = 'none';
            warningBox.style.display = 'none';

            lockedValue.textContent = signedNumber(parseInt(value, 10));
            lockedBanner.style.display = 'block';
            followupCard.style.display = 'block';
            submitRow.style.display = 'block';
        }

        slider.addEventListener('mousedown', function () {
            activateSlider();
            refreshAll();
        });

        slider.addEventListener('touchstart', function () {
            activateSlider();
            refreshAll();
        }, { passive: true });

        slider.addEventListener('keydown', function () {
            activateSlider();
            refreshAll();
        });

        slider.addEventListener('input', function () {
            activateSlider();
            refreshAll();
        });

        slider.addEventListener('change', function () {
            activateSlider();
            refreshAll();
        });

        confirmButton.addEventListener('click', confirmThreshold);

        form.addEventListener('submit', function (event) {
            if (!thresholdConfirmed || hidden.value === '') {
                event.preventDefault();
                warningBox.style.display = 'block';
            }
        });
    })();
</script>

{% endblock %}