{% extends "global/Page.html" %}
{% load otree %}

{% block title %}

Sliders

{% endblock %}

{% block styles %}

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

{% endblock %}

{% block content %}

<p id="alert" style="border: 1px solid red; color: red; display: none; padding: 5px 10px 5px 10px">
<i> You did not move all sliders to position 50. </i>
</p>

<p align="justify">
<i> Move all sliders to position 50 to continue.
(Hint: Dragging the slider thumb with your mouse works best!) </i>
</p>

{{ slider_formset.management_form }}

<center>

<table class="slider_table">
    <tr>
    {% for chunk in slider_values_and_forms %}
        <td>
        {% for offset, min, max, start, form in chunk %}
            <div class="slidecontainer" style="margin-left: {{ offset }}%">
                <input type="range" min="{{ min }}" max="{{ max }}" value="{{ start }}" class="slider" id="{{ form.end_pos.id_for_label }}" name="{{ form.end_pos.html_name }}">
                <label for="{{ form.end_pos.id_for_label }}"> </label>
                <input type="hidden" id="{{ form.touched.id_for_label }}" name="{{ form.touched.html_name }}" value="False">
                <input type="hidden" id="{{ form.id.id_for_label }}" name="{{ form.id.html_name }}" value="{{ form.id.value }}">
            </div>
        {% endfor %}
        </td>
    {% endfor %}
    </tr>
</table>

</center>

<br />

<button class="btn btn-primary btn-large" style="float: right" onclick="myFunction()"> Next </button>

{% endblock %}

{% block scripts %}

<script src="{% static 'slider_task/sliders.js' %}"> </script>

<script>

window.addEventListener("keydown", function(event) {
    if ([37, 38, 39, 40].indexOf(event.keyCode) > -1) {
        event.preventDefault();
    }
});

</script>

{% endblock %}