{{ block title }}
{{ endblock }}
{{ block content }}
<!–– Header ––>
<h2>Tutorial - Decision Round 1 of 2</h2>
<br>
<!–– Main Body ––>
<table border="2" width="100%">
    <tr>
        <td>
            <br><br>
        </td>
    </tr>
</table><br>
<input type="hidden" id="round_number" value="{{ player.round_number }}">
<style>
        .mgslider-wrapper {
            border-spacing: 10px;
        }
        .mgslider-show {
            text-align: center;
        }
        .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: #808080;
        }
        .mgslider-feedback {
            -webkit-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
    <p>Click the bar to reveal the slider and decide how many tokens you claim in this round.</p>
    <div id="sliders_here"></div>
    <script src="{{ static 'slider.js' }}"></script>
    <script>
        $(document).ready(function (event) {
            slidertutorial = new mgslider("number_tutorial", 0, 100, 1);
            slidertutorial.recall = true; // Optional line to remember value across errors
            slidertutorial.print(document.getElementById("sliders_here"));
        });
        document.addEventListener('DOMContentLoaded', function() {
        initializeSliders();
        });
    </script>
{{ formfield_errors 'number_tutorial' }}
<br><br>
<button type="submit" class="btn btn-secondary">Next</button>
{{ endblock }}