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

{{ block title }}
    Slider Aufgabe
{{ endblock }}
{{ block content }}
<!-- Block Contents-->
<div class="d-flex flex-column align-items-center">
    <progress id="progress-bar" max ="{{params.num_sliders}}" value="0"></progress>
    <!--Todo: Anzahl in Zahlen -->
    <canvas id="canvas" class="m-2"></canvas>

    {{if DEBUG}}
        <button type="button" id="cheat-btn" class="btn btn-dark">Betrügen</button>
    {{ endif }}
</div>

<!-- Instruction add-->

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