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

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static "global/css/range_input.css" %}">
{% endblock %}

{% block scripts %}
    <script src="https://cdn.rangetouch.com/2.0.0/rangetouch.js"></script>
    <script type="text/javascript" src="{% static "global/js/range_input_standard.js" %}"></script>
    <script type="text/javascript">
        $(function () {
            var touch = {{ touch|json }};
            if (touch) {const ranges = RangeTouch.setup('input[type="range"]');}
            var standard= true,
                multiply = false;
            rangeInput(standard, multiply);
            var field = {};
            $('input[type=range]').on('input click change', function () {
                field[$(this).attr('name')] = $(this).val();
                $('input[name=self_confidence]').val(JSON.stringify(field))
            });

            var ses = $('input[name=Sciences_Économiques_et_Sociales]'),
                math = $('input[name=Mathématiques]');

            $('[name=ses_no]').change(function () {
                if ($(this).is(':checked')) {
                    ses.addClass('myclassskip');
                    ses.removeClass('myclass');
                } else {
                    ses.removeClass('myclassskip');
                }
            });
            $('[name=math_no]').change(function () {
            if ($(this).is(':checked')) {
                math.removeClass('myclass');
                math.addClass('myclassskip')
            } else {
                math.removeClass('myclassskip');
            }
            });
        })
    </script>

{% endblock %}

{% block title %}
{% endblock %}

{% block content %}

    <div class="wrapper">

        <p align="center" class="mb-4">
            {{ Constants.self_confidence_label }}<br>
            <i style="font-size: smaller">
                (Click on the axis below to position the cursor and indicate your rank in your class. 
                For example, if you select 100, you indicate that you think you are the best in your class. 
                If you select 0, you indicate that you think you are the worst.)
            </i>
        </p>

        <div class="container-fluid">
            {% for t, l in topics %}
                <div class="row range-field">
                    <div class="col-md-4 text-sm-left text-md-right mt-4">{{ t }}</div>
                    <div class="col-md-8">
                        <div class="row no-gutters">
                            <div class="col-1 mt-4 text-right pr-3">0</div>
                            <div class="col-9">
                                <span class="rs-label mb-4" style="z-index: 1"></span>
                                <input class="form-control" type="range" step="1" min="1" max="100" name="{{ l }}" style="margin: 0px">
                            </div>
                            <div class="col-2 mt-4 pl-3">100</div>
                        </div>
                    </div>
                </div>
                {% if forloop.counter == 2 %}
                    <div class="row no-gutters mt-2 text-center">
                        <div class="col-4"></div>
                        <div class="col-8">
                            {% formfield player.math_no %}
                        </div>
                    </div>
                {% endif %}
                {% if forloop.counter == 3 and is_in_year == 3 %}
                    <div class="row no-gutters mt-2 text-center">
                        <div class="col-4"></div>
                        <div class="col-8">
                            {% formfield player.ses_no %}
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
        {{ form.self_confidence.as_hidden }}

        <button class="otree-btn-next btn btn-primary">Confirm</button>

    </div>

{% endblock %}