{% 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.time_endowment }},
                multiply = true,
                multiplier = 2;
            rangeInput(endowment, multiply, multiplier)
        })
    </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.time_endowment }} credits. Out of these
                    {{ Constants.time_endowment }} credits, we will ask you to choose how many you want to keep and how many you want to invest for the future.
                    The invested credits will be doubled in the future.
                </p>
            </div>
            <p align="center">
                Please choose one of the following options and then confirm your choice:<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>Today</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="time_decision"
                               value="None" min="0" max="{{ Constants.time_range_input_steps }}"
                               required="" id="id_time_decision"/>
                    </div>
                    <div class="col-3">
                        <div class="row">
                            <div class="col"><b>In 1 month</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>Today</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>1 Month</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="time_decision"
                               value="None" min="0" max="{{ Constants.time_range_input_steps }}"
                               required="" id="id_time_decision"/>
                    </div>
                </div>
            </div>

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

{% endblock %}