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

{% block scripts %}
    <script src="https://cdn.rangetouch.com/2.0.0/rangetouch.js"></script>
    <script type="text/javascript" src="{% static "global/js/range_input.js" %}"></script>
    <script type="text/javascript">
        $(function () {
            var touch = {{ touch|json }};
            if (touch) {const ranges = RangeTouch.setup('input[type="range"]');}
            var endowment = {{ Constants.dictator_endowment }},
                multiply = false;
            rangeInput(endowment, multiply)
        })
    </script>
{% endblock %}

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

{% block title %}
{% endblock %}

{% block content %}
    <div class="wrapper">
        <div class="wrapper instructions">
            <p>
                In this activity, we will allocate you {{ Constants.dictator_endowment }} credits.
                Your task is to choose how many credits you want to keep for yourself and how many you want 
                to give to another participant.
            </p>
            <p>
                {{ partner }}
            </p>
        </div>
        <p align="center">
            Please choose an option from the following distributions :<br>
            <i style="font-size: smaller">(Click on the axis below to position and move the cursor.)</i>
        </p>

        <div class="container-fluid range-field">
            <div class="row text-center d-none d-lg-flex">
                <div class="col-3">
                    <div class="row">
                        <div class="col"><b>You Keep</b></div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="col left-value w-75 mx-auto" style="height: 50px;
                            border: 1px solid #ced4da; border-radius: 20px; line-height: 45px"></div>
                        </div>
                    </div>
                </div>
                <div class="col-6 mt-3">
                    <input class="form-control" type="range" name="dictator_decision"
                           value="None" min="0" max="{{ Constants.dictator_range_input_steps }}"
                           required="" id="id_dictator_decision"/>
                </div>
                <div class="col-3">
                    <div class="row">
                        <div class="col"><b>You are giving</b></div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="col right-value w-75 mx-auto" style="height: 50px;
                            border: 1px solid #ced4da; border-radius: 20px; line-height: 45px"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row text-center d-md-flex d-lg-none justify-content-between no-gutters">
                <div class="col-5 col-md-4">
                    <div class="row">
                        <div class="col"><b>You keep</b></div>
                    </div>
                    <div class="row">
                        <div class="col left-value w-75 mx-auto" style="height: 50px;
                        border: 1px solid #ced4da; border-radius: 20px; line-height: 45px"></div>
                    </div>
                </div>
                <div class="col-5 col-md-4">
                    <div class="row">
                        <div class="col"><b>You are giving</b></div>
                    </div>
                    <div class="row">
                        <div class="col right-value w-75 mx-auto" style="height: 50px;
                        border: 1px solid #ced4da; border-radius: 20px; line-height: 45px"></div>
                    </div>
                </div>
            </div>
            <div class="row text-center d-md-block d-lg-none justify-content-center">
                <div class="col-9 mt-3 mx-auto">
                    <input class="form-control" type="range" name="dictator_decision"
                           value="None" min="0" max="{{ Constants.dictator_range_input_steps }}"
                           required="" id="id_dictator_decision"/>
                </div>
            </div>
        </div>

        <button class="otree-btn-next btn btn-primary">Confirm</button>
    </div>
{% endblock %}