{{ block title }}Part {{ player.subsession.part_roman }} - Decision Stage: Round {{ player.subsession.round_in_part }}{{ endblock }}
{{ block content }}
<hr>
<style>
    th, td {
        padding: 15px;
        border: 1px solid #ccc;
    }
    table {
        border: 1px solid #ccc;
        margin-left: auto;
        margin-right: auto;
    }
</style>

&nbsp;
<p>Please make your decision by clicking one of the blue buttons.</p>
&nbsp;
<div class="form-group required">
    <table class="table table-bordered text-center" style="width: auto; margin: auto">
        <tr>
            <th colspan="2" rowspan="2"></th>
            <th colspan="2">Other's Action</th>
        </tr>
        <tr>
            <th>1</th>
            <th>2</th>
        </tr>
        <tr>
            <th rowspan="2"><span>Own Action</span></th>
            <!--<td style="width: 98px"><b>1</b></td>-->
            <td><button name="action" value=1 class="btn btn-primary btn-large">1</button></td>
            <td>{{C.PAYOFF_C}}</td>
            <td>{{ payoff_a }}</td>
        </tr>
        <tr>
            <!--<td><b>2</b></td>-->
            <td><button name="action" value=2 class="btn btn-primary btn-large">2</button></td>
            <td>{{ C.PAYOFF_D }}</td>
            <td>{{C.PAYOFF_B}}</td>
        </tr>
    </table>
</div>

&nbsp;
<div id="pastResults">
    <hr>
    &nbsp;
    <p>See information about the previous rounds in the table below.</p>
    <table 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>

<script>

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