{{ block title }}
Part 1
{{ endblock }}

{{ block content }}
<style>
    p {
        text-align: justify;
    }
    .slider_container {
        width: 100%;
    }
    .selector {
        border-right-color: transparent;
        border-right-width: 15px
    }

    datalist {
        display: flex;
    }

    option {
        width: 9%
    }

    input[type=range] {
        -webkit-appearance: none;
        margin: 18px 0;
        width: 100%;
    }

    input[type=range]:focus {
        outline: none;
    }

    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: black;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

    input[type=range]::-webkit-slider-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 36px;
        width: 16px;
        border-radius: 3px;
        background: red;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -14px;
        visibility: hidden;

    }

    input[type=range]:focus::-webkit-slider-runnable-track {
        background: black;
    }

    input[type=range]::-moz-range-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        background: black;
        border-radius: 1.3px;
        border: 0.2px solid #010101;
    }

    input[type=range]::-moz-range-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 36px;
        width: 16px;
        border-radius: 3px;
        background: red;
        cursor: pointer;
    }

    input[type=range]::-ms-track {
        width: 100%;
        height: 8.4px;
        cursor: pointer;
        background: transparent;
        border-color: transparent;
        border-width: 16px 0;
        color: transparent;
    }

    input[type=range]::-ms-fill-lower {
        background: black;
        border: 0.2px solid #010101;
        border-radius: 2.6px;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }

    input[type=range]::-ms-fill-upper {
        background: black;
        border: 0.2px solid #010101;
        border-radius: 2.6px;
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
    }

    input[type=range]::-ms-thumb {
        box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
        border: 1px solid #000000;
        height: 16px;
        width: 8px;
        border-radius: 3px;
        background: red;
        cursor: pointer;
    }

    input[type=range]:focus::-ms-fill-lower {
        background: black;
    }

    input[type=range]:focus::-ms-fill-upper {
        background: black;
    }

</style>
<p>
    You are in the role of Person B. Recall that
    {{ if player.treatment == "T1_B" or player.treatment == "T2_B" }}
    the computer randomly selects
    {{else}}
    the Person A you are matched with chooses
    {{endif}}
    from among the following options:
</p>
<ul>
    <li>
        A1:
        {{ if player.treatment == "T1_B" or player.treatment == "T2_B" }}
        Person A and Person B  remain at their
        {{else}}
        Person A and Person B  remain at their
        {{endif}}
        initial endowments of CZK 125
        (Person A)
        and CZK 375
        (Person B).
    </li>
    <li>
        A2: Person B can give Person A up to CZK 250
        {{ if player.treatment == "T1" or player.treatment == "T1_B" }}
        or take up to CZK 75 from Person A
        {{else}}
        .
        {{endif}}
    </li>

</ul>
<p>
    For the case that
    {{ if player.treatment == "T1_B" or player.treatment == "T2_B" }}
    the computer randomly selected
    {{else}}
    Person A chose
    {{endif}}
    A2, please indicate your transfer choice by
    clicking on the line below and moving the slider that appears. Making no change means choosing 0 on the slider.
    {{ if player.treatment == "T1" or player.treatment == "T1_B"}}
    Taking from Person A means choosing a negative amount on the slider.
    {{endif}}
    Giving to Person A means choosing a positive amount on the slider. When you move and place the slider at a given location, text will appear below the line
    showing you how much you and Person A will earn from this study if this part is chosen for payment. Your choice will
    be recorded after you click Next.
</p>

<table class="table table-borderless m-0 p-0">
    {{ if player.treatment == "T1" or player.treatment == "T1_B" }}
    <tr>
        <td colspan="6">Taking</td>
        <td colspan="3">No change</td>
        <td colspan="20" class="text-md-end">Giving</td>
    </tr>
    <tr>
        <td colspan="2" id="-75" class="text-md-start" style="width: 1%; margin-left: 0em;padding-left: 0em">-75</td>
        <td colspan="2" id="-50" class="text-md-center" style="width: 7%; margin-left: 2em;padding-left: 2em">-50</td>
        <td colspan="2" id="-25" class="text-md-center" style="width: 7%; margin-left: 2em;padding-left: 2em">-25</td>
        <td colspan="2" id="0" class="text-md-center" style="width: 7%; margin-left: 2em;padding-left: 2em">0</td>
        <td colspan="2" id="25" class="text-md-center" style="width: 7%">+25</td>
        <td colspan="2" id="50" class="text-md-center" style="width: 7%">+50</td>
        <td colspan="2" id="75" class="text-md-center" style="width: 7%">+75</td>
        <td colspan="2" id="100" class="text-md-center" style="width: 7%">+100</td>
        <td colspan="2" id="125" class="text-md-center" style="width: 7%">+125</td>
        <td colspan="2" id="150" class="text-md-center" style="width: 7%">+150</td>
        <td colspan="2" id="175" class="text-md-center" style="width: 7%">+175</td>
        <td colspan="2" id="200" class="text-md-center" style="width: 7%">+200</td>
        <td colspan="2" id="225" class="text-md-center" style="width: 7%">+225</td>
        <td colspan="2" id="250" class="text-md-end" style="width: 3%; margin-right: 1em;padding-right: 0.2em">+250</td>
    </tr>
    <tr>
        <td class="slider_container" colspan=30>
        <input type="range" value="0" min="-75" max="250" step="25" list="tickmarks" style="width: 100%;"
               oninput="tableClick(this)" id="slider" name="decision_B">
        </td>
    </tr>
    {{else}}
    <tr>
        <td colspan="2">No change</td>
        <td colspan="20" class="text-md-end">Giving</td>
    </tr>
    <tr>
        <td colspan="2" id="0" class="text-md-start" style="width: 4.7%; margin-left: 1em;padding-left: 0.2em">0</td>
        <td colspan="2" id="25" class="text-md-center" style="width: 10%;">+25</td>
        <td colspan="2" id="50" class="text-md-center" style="width: 9.1%;">+50</td>
        <td colspan="2" id="75" class="text-md-center" style="width: 10%;">+75</td>
        <td colspan="2" id="100" class="text-md-center" style="width: 10%;">+100</td>
        <td colspan="2" id="125" class="text-md-center" style="width: 9.1%;">+125</td>
        <td colspan="2" id="150" class="text-md-center" style="width: 10%;">+150</td>
        <td colspan="2" id="175" class="text-md-center" style="width: 11%;">+175</td>
        <td colspan="2" id="200" class="text-md-center" style="width: 10.5%;">+200</td>
        <td colspan="2" id="225" class="text-md-center" style="width: 9.1%;">+225</td>
        <td colspan="2" id="250" class="text-md-end" style="width: 9.1%; margin-right: 1em;padding-right: 0.2em">+250<td>
    </tr>
    <tr>
        <td class="slider_container" colspan="30">
        <input  type="range" value="0" min="0" max="250" step="25" list="tickmarks" style="width: 100%;"
               oninput="tableClick(this)" id="slider" name="decision_B">
        </td>
    </tr>
    {{endif}}
</table>

<table>
    <tr>
        <td colspan="22" id="explanation" style="visibility: hidden">
            If this part is chosen for payment, <b>You will receive: CZK <span id="you_receive">275</span></b> (i.e. CZK
            375 <span id="you_receive_explain">– CZK 100</span>) & <b>Person A will receive: CZK <span id="a_receive">225</span></b>
            (i.e. CZK 125 <span id="a_receive_explain">+ CZK 100</span>)
        </td>
    </tr>
</table>


<div class="text-md-start">

</div>
<script>
    window.slider_clicked  = false
    function tableClick(e) {
        document.getElementById('explanation').style.visibility = "visible"
        window.slider_clicked = true
        let decision = parseInt(e.value)
        let you_will_recieve = 375 - decision
        let person_a_will_recieve = 125 + decision
        $('<style>input[type="range"]::-webkit-slider-thumb { visibility: visible!important;}<style/>').appendTo('head');

        document.getElementById('you_receive').innerText = you_will_recieve;
        document.getElementById('a_receive').innerText = person_a_will_recieve;
        if (decision >= 0) {
            document.getElementById('you_receive_explain').innerText = "- " + decision;
            document.getElementById('a_receive_explain').innerText = "+ " + decision;
        } else {
            document.getElementById('you_receive_explain').innerText = "+ " + Math.abs(decision);
            document.getElementById('a_receive_explain').innerText = + decision;
        }
    }

    $('#form').submit(function (evt) {

        console.log("Submit check");
        if (window.slider_clicked === false) {
            evt.preventDefault();
        }
    })
</script>

<div class="float-end row">
    <button class="otree-btn-next btn btn-primary btn-danger">Next</button>
</div>

<div class="text-black-50 m-5 p-5 card">
    {{include 'p1/Instructions_content.html'}}
</div>
{{ endblock }}