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

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static "global/css/range_input_bicolor.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_bicolor.js" %}"></script>
    <script type="text/javascript">
        $(function () {
            var touch = {{ touch|json }};
            if (touch) {const ranges = RangeTouch.setup('input[type="range"]');}
            rangeInput();
        })
    </script>
{% endblock %}

{% block title %}
{% endblock %}

{% block content %}

        <div class="container-fluid">
            {% for field in form %}
                <div class="row mb-4">
                    <div class="col-md-4">{{ field.label }}</div>
                    <div class="col-md-8 pr-0 pr-md-3 pl-0 pl-md-3">
                        <div class="row no-gutters mt-3 mt-md-0">
                            <div class="col-4 col-md-4 col-lg-3 text-right"><b>Not like me</b></div>
                            <div class="col-5 col-md-5 col-lg-6" style="padding-left: 13px; padding-right: 13px">
                                <div class="row no-gutters m-0" style="margin-top: 6.4px!important; z-index: -1!important">
                                    <div class="col-3" >
                                        <div class="row no-gutters">
                                            <div class="col-2" style="background-color: #dc6950; height: 15px; border-right: 1px solid black; border-radius: 7px 0 0 7px;"></div>
                                            <div class="col-10" style="background-color: #dc6950; height: 15px; border-right: 1px solid black;"></div>
                                        </div>
                                    </div>
                                    <div class="col-3" style="background-color: #dc6950; height: 15px; border-right: 1px solid black"></div>
                                    <div class="col-3" style="background-color: #9bae5e; height: 15px; border-right: 1px solid black"></div>
                                    <div class="col-3">
                                        <div class="row no-gutters">
                                            <div class="col-10" style="background-color: #9bae5e; height: 15px"></div>
                                            <div class="col-2" style="background-color: #9bae5e; height: 15px; border-left: 1px solid black; border-radius: 0 7px 7px 0;"></div>
                                        </div>
                                    </div>
                                </div>
                                <input type="range" step="1" min="1" max="5" name="{{ field.name }}">
                            </div>
                            <div class="col-3 col-md-3 text-left"><b>Like me</b></div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

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

{% endblock %}