{{ 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. There is a warning system that may send an alarm.</p>
            <strong>
            {{ if player.field_maybe_none('warning_active') == True }}
            <p style="color:red">An alarm was sent in the previous round.</p>
            {{else}}
            <p style="color:green">No alarm was sent in the previous round.</p>
            {{ endif }}</strong>
        </td>
    </tr>
</table>
<br><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: #1e5bff;
        }
        .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>
 <button type="submit" class="btn btn-secondary">Next</button>
{{ endblock }}