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

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static "compete/css/style.css" %}">
    <style>
        .otree-timer {
            display: none;
        }
    </style>
{% endblock %}

{% block scripts %}
    <script type="text/javascript" src="{% static "compete/js/sliders.js" %}"></script>
    <script src="https://cdn.rangetouch.com/2.0.0/rangetouch.js"></script>
    <script type="text/javascript">
        $(function () {
            const ranges = RangeTouch.setup('input[type="range"]');
        })
    </script>
    <script>
        $(document).keydown(function(e){
            e.preventDefault();
        });
    </script>
    <script src="/static/otree/js/jquery.countdown.min.js"></script>
    <script>
        $(function () {
            var startTimer = {{ participant.vars.start_task|json }};
            var minForTask = {{ Constants.time_for_task|json }};
            var currentDate = new Date().valueOf();
            var remainingTimeoutSeconds = minForTask * 60 * 1000 - (currentDate - startTimer * 1000);
            var milliseconds = Math.floor(remainingTimeoutSeconds);
            $('#otree-timer__time-left').countdown(currentDate.valueOf() + milliseconds)
                .on('update.countdown', function (event) {
                    var format = '%-N:%S';
                    $(this).html(event.strftime(format));
                })
                .on('finish.countdown', function (event) {
                    var centered_sliders = 0;
                    $("input.slider").each(function() {
                        if ($(this).val() === "50") {
                            centered_sliders++;
                        }
                    });
                    $('input#id_centered_sliders').val(centered_sliders);
                    $('#form').submit();
                });
        });
    </script>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}
    <div class="otree-timer alert alert-warning" style="display: block">
        <p>Remaining time :
            <span style="font-weight: bold">
                <span id="otree-timer__time-left"></span>
            </span>
        </p>
    </div>
    <h5 style="text-align: center"><b>Please position sliders on the number 50 as quickly as possible.</b></h5>
    <hr>
    <div class="container-fluid" style="margin-left: -20px">
        {% for chunk, offset in session.vars.sliders_for_task %}
            <div class="row no-gutters align-items-center" style="margin-left: {{ offset }}%; margin-right: -{{ offset }}%;">
            {% for start in chunk %}
                <input type="range" min="{{ Constants.sliders_min }}" max="{{ Constants.sliders_max }}" value="{{ start }}" class="slider col-3" >
                <output class="slider-value col-1 pl-2"></output>
            {% endfor %}
            </div>
        {% endfor %}
   </div>

    {{ form.centered_sliders.as_hidden }}

    <hr>
{% endblock %}