{{ block title }}
{{ endblock }}
{{ block content }}
<!–– Header ––>
<h2>Tutorial - Decision Round 2 of 2</h2>
<br>
<!–– Main Body ––>
<table border="2" width="100%">
    <tr>
        <td>
            <p>Last round you successfully claimed <strong>{{player.number_2tutorial1}}</strong> tokens. </p>
        </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>If you want to adjust the number of tokens you claim in this round, move the slider. If you do not want to adjust the number of tokens you claim, press “next”.</p>
    <div id="sliders_here"></div>
    <script src="{{ static 'slider.js' }}"></script>
    <script>
        $(document).ready(function (event) {
            slidertutorial2 = new mgslider("number_2tutorial", 0, 100, 1);
            slidertutorial2.recall = true; // Optional line to remember value across errors
            slidertutorial2.print(document.getElementById("sliders_here"));
        });
        document.addEventListener('DOMContentLoaded', function() {
        initializeSliders();
        });
    </script>
{{ formfield_errors 'number_2tutorial' }}
<br><br>
<button type="submit" class="btn btn-secondary">Next</button>
{{ endblock }}