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

            background: #016f70;
        }
    </style>


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

            <br>
            <table class="table">
                <tr>
                <td>Your initial estimate was:</td>
                <td style="text-align:center"> {{ player.initialguess }} </td>
                </tr>
                <tr>
                <td>Your confidence in the initial estimate was:</td>
                <td style="text-align:center"> {{ player.confidence }} </td>
                </tr>
                {{ if player.receivesupport == 1 }}
                <tr>
                <td>The algorithm's estimate is:</td>
                <td style="text-align:center"> {{ player.gdpcappredict }} </td>
                </tr>
                {{ endif }}
                 <tr>
                <td>The submitted estimate for the GDP per capita of country {{ player.round_number }} is:</td>
                <td style="text-align:center"> {{ player.finalguess }} </td>
                </tr>
        </table>
            <br>


            <p> <b> How much confidence do you have that the submitted estimate deviates by no more than 5 points from actual GDP per capita?</b> </p>
            <p>On the following scale, <b>0</b> means you are <b>absolutely unsure</b> about the submitted estimate. <b>100</b> means you are <b>completely sure</b> that the submitted estimate deviates by no more than 5 points. </p>
            <p>Please click on the green 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("finalconfidence", 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 }}