{{ block title }}
Part 2
{{ endblock }}
{{ block content }}
<style>
      p {
        text-align: justify;
    }
</style>

<p>
    For your first prediction, please guess in which of the
    {{if player.treatment == "T1" or player.treatment == "T1_B"}}
    13
    {{else}}
    10
    {{endif}}
    intervals below a transfer made by Person B would lie:
</p>
<p>
    At the end of this session, the computer will calculate the average amount transferred by all Person Bs in this
    session. If the average lies in the interval you selected and this is your decision-that-counts, you will earn CZK
    200 in additional payment.

</p>
<center>
    {{if player.treatment == "T1" or player.treatment == "T1_B"}}
        <style>
    .bracket_more {
        height: 75px;
        width: 100%;
    }

    .bracket_less {
        height: 270px;
        width: 100%;
    }

    .bracket_less_row {
        height: 60%;
    }
      .interval_row {
        width: 60%;

        border: 1px solid black;
    }

</style>
    <table class="table-borderless text-md-center container row-eq-height" style="width:50%">
        <tr>
            <td rowspan="3" id="explanation_more">
                Person B takes money from Person A
            </td>
            <td class="bracked_more_row" rowspan="3">
                <img id="bracket_more" class="bracket_more" src="{{ static 'img/brackets_grey.png' }}"/>
            </td>
            <td id="1" class="interval_row" onclick="selectInterval(this)">-75 to -50</td>
        </tr>
        <tr>
            <td id="2" class="interval_row" onclick="selectInterval(this)">-49 to -25</td>
        </tr>
        <tr>
            <td id="3" class="interval_row" onclick="selectInterval(this)">-24 to -1</td>
        </tr>
        <tr>
            <td rowspan="10" id="explanation_less">
                Person B gives money to Person A
            </td>
            <td rowspan="10" class="bracket_more_row">
                <img id="bracket_less" class="bracket_less" src="{{ static 'img/brackets_grey.png' }}"/>
            </td>

            <td id="4" class="interval_row" onclick="selectInterval(this)">0 to +25</td>
        </tr>
        <tr>
            <td id="5" class="interval_row" onclick="selectInterval(this)">+26 to +50</td>
        </tr>
        <tr>
            <td id="6" class="interval_row" onclick="selectInterval(this)">+51 to +75</td>
        </tr>
        <tr>
            <td id="7" class="interval_row" onclick="selectInterval(this)">+76 to +100</td>
        </tr>
        <tr>
            <td id="8" class="interval_row" onclick="selectInterval(this)">+101 to +125</td>
        </tr>
        <tr>
           <td id="9" class="interval_row align-content-around flex-wrap" onclick="selectInterval(this)">+126 to +150
            </td>
        </tr>
        <tr>
            <td id="10" class="interval_row" onclick="selectInterval(this)">+151 to +175</td>
        </tr>
        <tr>
            <td id="11" class="interval_row" onclick="selectInterval(this)">+176 to +200</td>
        </tr>
        <tr>
            <td id="12" class="interval_row" onclick="selectInterval(this)">+201 to +225</td>
        </tr>
        <tr>
            <td id="13" style=" border: 1px solid black;" class="interval_row" onclick="selectInterval(this)">+226 to
                +250
            </td>
        </tr>
    </table>
<script>
    function selectInterval(e) {
        let interval_rows = document.getElementsByClassName("interval_row")
        for (let i = 0; i < interval_rows.length; i++) {
            interval_rows[i].classList.remove('btn-primary')
        }
        document.getElementById(e.id).classList.add("btn-primary")
        document.getElementById("decision1_A").value = e.id

        if (e.id >= 4) {
            document.getElementById("explanation_less").classList.add("fw-bold")
            document.getElementById("bracket_less").src = "{{ static 'img/brackets.png' }}"
            document.getElementById("explanation_more").classList.remove("fw-bold")
            document.getElementById("bracket_more").src = "{{ static 'img/brackets_grey.png' }}"
        } else {
            document.getElementById("explanation_more").classList.add("fw-bold")
            document.getElementById("bracket_more").src = "{{ static 'img/brackets.png' }}"
            document.getElementById("explanation_less").classList.remove("fw-bold")
            document.getElementById("bracket_less").src = "{{ static 'img/brackets_grey.png' }}"
        }
        //console.log(document.getElementById("decision1_A").value)
        // bracket explanation _more, _less

    }
</script>
{{else}}
        <style>
    .bracket_more {
        height: 150px;
        width: 100%;
    }

    .bracket_less {
        height: 150px;
        width: 100%;
    }

    .bracket_less_row {
        height: 60%;
    }
      .interval_row {
        width: 60%;

        border: 1px solid black;
    }

</style>
    <table class="table-borderless text-md-center container row-eq-height" style="width:50%">
        <tr>
            <td rowspan="5" id="explanation_more">
                Person B earns more than Person A
            </td>
            <td class="bracked_more_row" rowspan="5">
                <img id="bracket_more" class="bracket_more" src="{{ static 'img/brackets_grey.png' }}"/>
            </td>

            <td id="4" class="interval_row" onclick="selectInterval(this)">0 to +25</td>
        </tr>
        <tr>
            <td id="5" class="interval_row" onclick="selectInterval(this)">+26 to +50</td>
        </tr>
        <tr>
            <td id="6" class="interval_row" onclick="selectInterval(this)">+51 to +75</td>
        </tr>
        <tr>
            <td id="7" class="interval_row" onclick="selectInterval(this)">+76 to +100</td>
        </tr>
        <tr>
            <td id="8" class="interval_row" onclick="selectInterval(this)">+101 to +125</td>
        </tr>
        <tr>
            <td rowspan="5" id="explanation_less">
                Person B earns less than Person A
            </td>
            <td rowspan="5" class="bracket_more_row">
                <img id="bracket_less" class="bracket_less" src="{{ static 'img/brackets_grey.png' }}"/>
            </td>
            <td id="9" class="interval_row align-content-around flex-wrap" onclick="selectInterval(this)">+126 to +150
            </td>
        </tr>
        <tr>
            <td id="10" class="interval_row" onclick="selectInterval(this)">+151 to +175</td>
        </tr>
        <tr>
            <td id="11" class="interval_row" onclick="selectInterval(this)">+176 to +200</td>
        </tr>
        <tr>
            <td id="12" class="interval_row" onclick="selectInterval(this)">+201 to +225</td>
        </tr>
        <tr>
            <td id="13" style=" border: 1px solid black;" class="interval_row" onclick="selectInterval(this)">+226 to
                +250
            </td>
        </tr>
    </table>
<script>
    function selectInterval(e) {
        let interval_rows = document.getElementsByClassName("interval_row")
        for (let i = 0; i < interval_rows.length; i++) {
            interval_rows[i].classList.remove('btn-primary')
        }
        document.getElementById(e.id).classList.add("btn-primary")
        document.getElementById("decision1_A").value = e.id

        if (e.id >= 9) {
            document.getElementById("explanation_less").classList.add("fw-bold")
            document.getElementById("bracket_less").src = "{{ static 'img/brackets.png' }}"
            document.getElementById("explanation_more").classList.remove("fw-bold")
            document.getElementById("bracket_more").src = "{{ static 'img/brackets_grey.png' }}"
        } else {
            document.getElementById("explanation_more").classList.add("fw-bold")
            document.getElementById("bracket_more").src = "{{ static 'img/brackets.png' }}"
            document.getElementById("explanation_less").classList.remove("fw-bold")
            document.getElementById("bracket_less").src = "{{ static 'img/brackets_grey.png' }}"
        }
        //console.log(document.getElementById("decision1_A").value)
        // bracket explanation _more, _less

    }
</script>
{{endif}}
</center>
<input type="hidden" name="decision1_A" id="decision1_A"/>



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


{{ endblock }}