{{ extends 'global/Page.html' }}
{{ block title }}Your Input: Expected Payoffs{{ endblock }}

{{ block content }}

<style>
.section-divider { border: none; border-top: 4px solid #999; margin: 20px 0; }

.slider-wrapper {
    width: 80%;
    margin: 16px auto 8px auto;
}
.slider-track-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.slider-track-row .slider-label {
    font-size: 15px;
    font-weight: bold;
    min-width: 30px;
    text-align: center;
}
.payoff-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #ddd;
    outline: none;
    cursor: pointer;
}
.payoff-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0d6efd;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}
.payoff-slider.activated::-webkit-slider-thumb {
    opacity: 1;
}
.payoff-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: #0d6efd;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s;
}
.payoff-slider.activated::-moz-range-thumb {
    opacity: 1;
}
.value-display {
    margin-top: 10px;
    font-size: 16px;
}
.box {
    border: 2px solid #aaa;
    border-radius: 8px;
    padding: 16px;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}
</style>

<p>After each round, you will report a number from <b>{{ slider_min }} to {{ slider_max }}</b> that reflects the assignment payoffs you anticipate receiving on a slider.</p>

<p>After you submit your number, the computer will draw a random number between <b>{{ slider_min }} and {{ slider_max }}</b>.</p>
<ul>
    <li>If the random number is <b>higher</b> than the number you entered, you will be paid the <b>random number</b>.</li>
    <li>If the random number is <b>equal to or lower</b> than the number you entered, your payment will be your assignment payoff in this task as well.</li>
</ul>

<p>To earn the highest payoff, you should <b>enter the amount that makes the assignment payoff and a guaranteed payment seem equally attractive</b>.</p>

<p>You can click below to familiarize yourself with the interface.</p>

<hr class="section-divider">

<div class="box">
    <p>Please enter a number from <b>{{ slider_min }} to {{ slider_max }}</b> that best reflects what you think the last assignment task is worth:</p>
    <div class="slider-wrapper">
        <div class="slider-track-row">
            <span class="slider-label">{{ slider_min }}</span>
            <input type="range" id="prac-slider" class="payoff-slider"
                   min="{{ slider_min }}" max="{{ slider_max }}" step="1"
                   value="{{ slider_min }}">
            <span class="slider-label">{{ slider_max }}</span>
        </div>
        <div id="value-display" class="value-display" style="display:none;">
            Value: <b id="value-text"></b>
        </div>
    </div>
    <input type="hidden" name="prac_ep" id="prac-ep-input" value="">
</div>

<p></p>
{{ next_button }}

<script>
document.addEventListener('DOMContentLoaded', function() {
    var slider       = document.getElementById('prac-slider');
    var valueDisplay = document.getElementById('value-display');
    var valueText    = document.getElementById('value-text');
    var hiddenInput  = document.getElementById('prac-ep-input');
    var activated    = false;

    function updateFill() {
        var min = parseFloat(slider.min);
        var max = parseFloat(slider.max);
        var val = parseFloat(slider.value);
        var pct = activated ? (val - min) / (max - min) * 100 : 0;
        slider.style.background =
            'linear-gradient(to right, #0d6efd ' + pct + '%, #ddd ' + pct + '%)';
    }

    slider.addEventListener('pointerdown', function() {
        if (!activated) {
            activated = true;
            slider.classList.add('activated');
        }
    });

    slider.addEventListener('input', function() {
        updateFill();
        valueDisplay.style.display = '';
        valueText.textContent = slider.value;
        hiddenInput.value = slider.value;
    });

    updateFill();
});
</script>

{{ endblock }}