{{ block title }}Part {{ player.subsession.part_roman }} - Decision Stage: Round {{ player.subsession.round_in_part }}{{ endblock }}
{{ block content }}
<hr>
&nbsp;
<p>You role in this round is B. Please pick a ball from the urn below.</p>
&nbsp;

<table class="tableBalls">
    <tr>
        <td colspan="3"><button class="buttonBall" id="ball9"></button></td>
        <td colspan="3"><button class="buttonBall" id="ball10"></button></td>
    </tr>
    <tr>
        <td colspan="2"><button class="buttonBall" id="ball6"></button></td>
        <td colspan="2"><button class="buttonBall" id="ball7"></button></td>
        <td colspan="2"><button class="buttonBall" id="ball8"></button></td>
    </tr>
    <tr>
        <td colspan="3"><button class="buttonBall" id="ball4"></button></td>
        <td colspan="3"><button class="buttonBall" id="ball5"></button></td>
    </tr>
    <tr>
        <td colspan="2"><button class="buttonBall" id="ball1"></button></td>
        <td colspan="2"><button class="buttonBall" id="ball2"></button></td>
        <td colspan="2"><button class="buttonBall" id="ball3"></button></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
&nbsp;
<p>You picked a {{ picked_ball_color }} ball.</p>
<p id="message"></p>

<div id="next">{{ next_button }}</div>


&nbsp;
<div id="pastResults">
    <hr>
    &nbsp;
    <p>See information about the previous rounds in the table below.</p>
    <table class="resultsTable" id="tableVertical">
        <tr>
            <td>Round</td>
            <td>Own Status</td>
            <td>Own Action</td>
            <td>Other's Action</td>
            <td>Payoff</td>
        </tr>
    </table>
</div>




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

<style>
    .buttonBall {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: blue;
        color: white;
    }
    .tableBalls {
        border: 3px solid black;
        border-top: none;
    }
    table.tableBalls td {
        text-align: center;
        width: 35px;
    }
    .resultsTable {
        border: 1px solid #ccc;
        margin-left: auto;
        margin-right: auto;
    }
    table.resultsTable th, table.resultsTable td {
        padding: 15px;
        border: 1px solid #ccc;
    }
</style>

<script>
    const pickedBall = "{{ picked_ball }}";
    const pickedBallNumber = pickedBall.match(/\d+/g)[0];
    const pickedBallColor = "{{ picked_ball_color }}";
    const pickedBallButton = document.getElementById(pickedBall);

    pickedBallButton.style.backgroundColor = pickedBallColor;

    // Make buttons unclickable
    const balls = document.querySelectorAll('.buttonBall');
    balls.forEach(ball => {
        ball.style.pointerEvents = 'none';
    });

    const action = document.getElementById("action");
    let actionText = ''
    if (pickedBallColor == "red") {
        actionText = '1';
        action.value = 1;
    } else {
        actionText = '2';
        action.value = 2;
    };
    document.getElementById("message").innerHTML = 'Thus, your action in this round will be action ' + actionText + '.';


    const roles = {{ roles }};
    const payoffs = {{ payoffs }};
    const actions = {{ actions }};
    const partnerActions = {{ partner_actions }};
    const n = roles.length;
    const rounds = createRounds(n);

    const data = [rounds, roles, actions, partnerActions, payoffs];

    function createRounds(x) {
        const arr = [];
        for (let i = 1; i <= x; i++) {
            arr.push(i);
        }
        return arr;
    }

    function makeElement(parent, child) {
        let el = document.createElement("td");
        let textEl = document.createTextNode(child);
        el.appendChild(textEl);
        parent.appendChild(el)
    }

    function makePastRoundsTable(data) {
        for (let i = 0; i <= n-1; i++) {
            let el = document.createElement("tr");

            data.forEach(function (d) {
                makeElement(el, d[i])
            })

            document.getElementById("tableVertical").appendChild(el);
        }
    }


    makePastRoundsTable(data);

    if ({{ player.subsession.round_in_part }} == 1) {
        document.getElementById("pastResults").style.display = "none";
    }

</script>

{{ endblock }}