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

{% block content %}

    <style>
        .mgslider-wrapper {
            border-spacing: 10px;
        }
        .mgslider-show {
            text-align: center;
        }
        .mgslider-limit {
            width: 5%;
            min-width: 40px;
            height: 40px;
            margin: 100px;
            text-align: center;
            background: #eee;
            border: 1px solid #888;
        }
        .mgslider-limit, .mgslider-value {
            font-variant-numeric: tabular-nums;
        }
        .mgslider-before {
            height: 16px;
            width: 100%;
            background: #1e5bff;
        }
        .mgslider-feedback {
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>


<p><b>
Out of the 16 prediction trials, how many do you think you predicted correctly?
</b></p>

{{ formfield_errors 'predicted_correct_self' }}

<p style="font-size: small;color: #888888; text-align: center" >Click the blue bar to reveal the slider.</p>

<div id="sliders_here"></div>

<br><br>

<p><b>How certain are you about the previous answer?</b></p>

<div class="certainty-container">
    <div class="certainty-scale">
        {% for v in certainty_values %}
            <label class="certainty-option">
                <input type="radio"
                       name="certainty"
                       value="{{ v }}"
                       required>
                <span>{{ v }}%</span>
            </label>
        {% endfor %}
    </div>

    <div class="certainty-labels">
        <span class="left-label"><b>Very uncertain</b></span>
        <span class="right-label"><b>Completely certain</b></span>
    </div>
</div>


<style>
    .certainty-container {
        display: inline-block;  /* shrink to the scale’s width */
    }

    .certainty-scale {
        display: flex;
        flex-wrap: nowrap;
        gap: 18px;              /* ⬅ increase/decrease spacing here */
        align-items: flex-start;
    }

    .certainty-option {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
        white-space: nowrap;
    }

    .certainty-option span {
        margin-top: 3px;
        font-size: 11px;
        color: #444;
    }

    .certainty-labels {
        margin-top: 6px;
        font-size: 12px;
        display: flex;
        justify-content: space-between;  /* left/right under first/last button */
    }
</style>



<script src="{{ static 'mgslider.js' }}"></script>

<script>
    $(document).ready(function (event) {
        slider1 = new mgslider("predicted_correct_self", 0, 16, 1);
        slider1.yourvalue = "Correct predictions";
        slider1.print(document.getElementById("sliders_here"));
    });
</script>


<br><br><br>

<button class="btn btn-primary">Continue</button>

{% endblock %}