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

{{ block content }}
<style>
    p {
        text-align: justify;
    }
</style>
<p>
    Please choose one of the two options (A1 or A2) below. Your choice will be recorded after you click on the Next
    button.
</p>


<div class="row">

    <button onclick="inputByButton(this)" type="button" id="A1" value="A1"
            class="m-5 mb-0 btn btn-outline-primary text-md-center text-dark "><b> A1: Person A and Person B remain at their initial
        endowments of
        CZK 125 (Person A) and CZK 375 (Person B).</b>
    </button>
    <p id="explanation_A1" style="visibility: hidden" class="container m-5 mt-1 text-md-center font-italic"><i>
        If you select this option and Part 1 is chosen for payment at the end of this study, then you will receive CZK
        125
        and Person B will receive CZK 375.</i>
    </p>

</div>

<div class="row">

    <button onclick="inputByButton(this)" type="button" id="A2" value="A2"
            class="m-5 mb-0 btn btn-outline-primary text-md-center text-dark "><b> A2: Person B can give Person A up to CZK
        250 from her/his endowment
        {{ if player.treatment == "T1" or player.treatment == "T1_B" }}
        or take up to CZK 75 from Person A
        {{endif}}
        .
    </b>
    </button>
    <p id="explanation_A2" style="visibility: hidden" class="container m-5 mt-1 text-md-center  font-italic"><i>
        If you select this option and Part 1 is chosen for payment at the end of the experiment, then the choice of
        Person B
        will determine both your earnings.</i>
    </p>
</div>


<input type="hidden" name="decision_A" id="decision_A"/>

<div class="float-end">
    <button class="otree-btn-next btn btn-primary btn-danger">Next</button>
</div>
<script>
    function inputByButton(e) {
        if (e.id === "A1") {
            document.getElementById('A1').classList.add('active');
            document.getElementById('A2').classList.remove('active');
            document.getElementById('decision_A').value = "A1";
            document.getElementById('explanation_A1').style.visibility = "visible";
            document.getElementById('explanation_A2').style.visibility = "hidden";

        }
        if (e.id === "A2") {
            document.getElementById('A2').classList.add('active');
            document.getElementById('A1').classList.remove('active');

            document.getElementById('decision_A').value = "A2";
            document.getElementById('explanation_A2').style.visibility = "visible";
            document.getElementById('explanation_A1').style.visibility = "hidden";

        }

    }
</script>
{{ endblock }}