{{ 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;
<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="picked_ball" id="picked_ball"/>
<input type="hidden" name="picked_ball_color" id="picked_ball_color"/>

<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 colors = {{ colors }};

    for (let i = 1; i <= 10; i++) {
        const button = document.getElementById(`ball${i}`);
        button.addEventListener("click", () => {
            document.getElementById("picked_ball").value = button.id;
            document.getElementById("picked_ball_color").value = colors[i-1];
        });
    }

    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 }}