{% 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.redistribute_endowment }},
                multiply = false;
            rangeInput(endowment, multiply)
        })
    </script>
{% endblock %}

{% block styles %}
    <link rel="stylesheet" type="text/css" href="{% static "global/css/style.css" %}">
    <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 ask you to allocate credits between two other participants (that we will call participant A and participant B).
            </p>
            <p>
                {{ partners }}
            </p>
            {% if player.redistribute_version == 'merit' %}
                <div style="text-align: center"><b><u>Step 1</u></b></div>
                <p>
                    Participants A and B each had the first task of placing cursors in the
                    middle of a line from 0 to 100 (as you did previously).
                    A and B, however, weren't playing against each other in this slider activity.
                </p>

                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6 my-auto">
                            <div style="text-align: center"><b><u>Step 2</u></b></div>
                            <p>
                                We randomly match the two participants and we
                                <b>divide the {{ total_endowment }} credits between them</b>.
                            </p>
                            <p>
                                To determine the split, we look at the number of cursors placed correctly by each player.
                            </p>
                            <p>
                                <b>We allocate {{ Constants.redistribute_max_endowment }} credits to the participant who correctly 
                                    placed the most cursors and {{ Constants.redistribute_min_endowment }} credit to the other participant.</b> 
                                    Between them, therefore, the two participants have {{ total_endowment }} credits.
                            </p>
                        </div>
                        <div class="col-md-6 my-auto">
                            <div style="position: relative">
                                <img src="{% static "redistribute/redistribute_merit_1.png" %}"
                                     width="90%" style="margin-right: auto; margin-left: auto; display: block">
                            </div>
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-6 my-auto">
                            <div style="text-align: center"><b><u>Step 1</u></b></div>
                            <p>
                                The two participants were randomly matched, then <b>{{ Constants.redistribute_max_endowment }}
                                credits</b> were awarded to participant A and <b>{{ Constants.redistribute_min_endowment }} credit</b>
                                to participant B (randomly).
                            </p>
                            <p>
                                Thus, between them, the two participants have {{ total_endowment }} credits.
                            </p>
                        </div>
                        <div class="col-md-6 my-auto">
                            <div style="position: relative">
                                <img src="{% static "redistribute/redistribute_nomerit_1.png" %}"
                                     width="90%" style="margin-right: auto; margin-left: auto; display: block">
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
            <br>
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6 my-auto">
                        <div style="text-align: center"><b><u>Step
                            {% if player.redistribute_version == 'merit' %}3{% else %}2{% endif %}</u></b></div>
                        <p>
                            <b>Your task is to determine the final allocation of credits between the two participants.</b>
                        </p>
                        <p>
                            You can leave the current distribution unchanged
                            ({{ Constants.redistribute_max_endowment }}-{{ Constants.redistribute_min_endowment }}),
                            or choose any other final distribution.
                        </p>
                        <p>
                            Both participants will receive the credits corresponding to the distribution you have chosen.
                        </p>
                    </div>
                    <div class="col-md-6 my-auto">
                        <div style="position: relative">
                            <img src="{% static "redistribute/redistribute_nomerit_2.png" %}"
                                 width="90%" style="margin-right: auto; margin-left: auto; display: block">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p align="center">
            Which final  distribution do you want to choose for participants A and B?<br>
            <i style="font-size: smaller">(Click on the blue bar 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>Participant A</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="redistribute_decision"
                           value="None" min="1" max="{{ Constants.redistribute_range_input_steps }}"
                           required="" id="id_redistribute_decision"/>
                </div>
                <div class="col-3">
                    <div class="row">
                        <div class="col"><b>Participant B</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>Participant A</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>Participant B</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="redistribute_decision"
                           value="None" min="1" max="{{ Constants.redistribute_range_input_steps }}"
                           required="" id="id_redistribute_decision"/>
                </div>
            </div>
        </div>

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