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

{{ block title }}
{{ if player.foundjob == False}}
<h1 style="color:darkblue;"><b>Round {{ player.round_number}}: You are searching for a new job</b></h1>
{{else}}
<h1 style="color:darkblue;"><b>Round {{ player.round_number}}: You received a job offer! To keep it, complete at least {{player.num_correct_benchmark}} sliders! </b></h1>
{{endif}}
{{ 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 }}