{{ extends 'global/Page.html' }}
{{ block title }}
    Estimating the GDP per capita - Country {{ player.round_number }} of {{ C.NUM_ROUNDS }}
{{ endblock }}
{{ block content }}

    <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: #185177;
        }
        .mgslider-after {

            background: #185177;
        }
    </style>


    <div style="text-align: justify;" class="card bg-light mb-3  ">
        <div class="card-body">
            {{ formfield_errors 'confidence' }}

            <br>
        <table class="table">
            <tr>
                <td>Your estimate for the GDP per capita of country {{ player.round_number }} is:</td>
                <td style="text-align:center"> {{ player.initialguess }} </td>
            </tr>
        </table>
            <br>

            <p> <b> How confident are you that your estimate deviates by no more than 5 points from the actual GDP per capita?</b> In this case, this means the actual GDP per capita would be between {{ player.minconfidence}} and {{ player.maxconfidence}}.</p>
            <p>On the following scale, <b>0</b> means you are <b>absolutely unsure</b> about your estimate. <b>100</b> means you are <b>completely sure</b> that your estimate deviates by no more than 5 points. </p>
            <p>Please click on the blue bar to reveal the slider.</p>

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

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

            <script>
                $(document).ready(function (event) {

                    slider1 = new mgslider("confidence", 0, 100, 1);
                    slider1.print(document.getElementById("sliders_here"));
                });
            </script>

        </div>
    </div>

    <br>
    <!-- {{ next_button }}  -->
    <button class="otree-btn-next btn btn-primary button1" style="float: right;">Continue</button>

{{ endblock }}