{{ block title }}
    Price-change | Month {{ player.round_number }} of {{ C.NUM_ROUNDS }}
{{ endblock }}

{{ block content }}

<!-- Timer display (on/off) -->
<style>
    .otree-timer {
    display: none;
    }
</style>

<style>
    .mgslider-wrapper {
        border-spacing: 10px;
    }
    .mgslider-limit {
        width: 10%;
        min-width: 75px;
        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;
    }
</style>

<h6><i>Click the blue bar to reveal the slider. Drag it along the bar to select your estimate.</i></h6>

<br>

<p>By what <b>percentage (%)</b> would you estimate the price of <b>Food</b> changed between <b>month {{ rounds12Before }} and month {{ player.round_number }}</b>?</p>

    <div id="sliders_here_1"></div>

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

    <script>
        $(document).ready(function (event) {
            slider1 = new mgslider("inf", -100, 100, 1);
            slider1.print(document.getElementById("sliders_here_1"));
            slider1.yourvalue = "Your estimate";
            slider1.f2s = function (val) {
                return val.toFixed(0) + ' %';
            }
        });
    </script>

{{ next_button }}

{{ endblock }}