{% block styles  %}
    <link href="{% static 'sliders.css' %}" rel="stylesheet"/>
{% endblock %}

{{ block title }}
<h1 style="color:darkblue;">Slider task practice</b></h1>
{{ endblock }}

{{ block content }}
<div class="d-flex flex-column align-items-center">
    <progress id="progress-bar" max="{{ params.num_sliders }}" value="0"></progress>

    <canvas id="canvas" class="m-2"></canvas>

    {{ if DEBUG }}
    <button type="button" id="cheat-btn" class="btn btn-dark">Cheat</button>
    {{ endif }}
</div>
<br>
{{ include Constants.instructions_template }}

{{ endblock }}

{{ block scripts }}
<script src="{{ static 'sliders.js' }}"></script>
{{ if DEBUG }}<script src="{{ static 'real_effort_cheating.js' }}"></script>{{ endif }}
{{ endblock }}