{{ block title }}Round results{{ endblock }}
{{ block content }}

<div class="container">
    <div class="card">
        <div class="card-body">
            <table>
                <thead>
                <tr>
                    <th class="table_header">Your extraction</th>
                    <th class="table_header" colspan="3">Other 3 participants</th>
                    <th class="table_header">Group extraction</th>
                    <th class="table_header">Your payoff for last round</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="highlight_value">{{player.extraction}}</td>
                    <td id = "other0"></td>
                    <td id = "other1"></td>
                    <td id = "other2"></td>
                    <td>{{group.group_extraction}}</td>
                    <td class="highlight_value" id = "payoff_lbl">{{player.payoff_task3}}</td>
                </tr>
                </tbody>
            </table>
            <br>
            <div class="alert alert-warning" role="alert" id = "remaining"></div>
            <p>Click next to proceed to the next round. In <span class = "otree-timer__time-left"></span> this page will close to proceed to the next round.</p>
        </div>
    </div>
</div>

<script>
    let other0 = js_vars.other0,
        other1 = js_vars.other1,
        other2 = js_vars.other2,
        remaining = js_vars.remaining,
        payoff_t3 = js_vars.payoff_t3,
        other0_lbl = document.getElementById("other0"),
        other1_lbl = document.getElementById("other1"),
        other2_lbl = document.getElementById("other2"),
        payoff_lbl = document.getElementById("payoff_lbl"),
        remaining_lbl = document.getElementById("remaining");


    window.addEventListener("load", (event) => {
        other0_lbl.innerText = other0;
        other1_lbl.innerText = other1;
        other2_lbl.innerText = other2;

        if (remaining < 4){
            remaining_lbl.style.display = "inline-block";
            remaining_lbl.innerText = "Please note that one of your group members has dropped from this task. Their contributions will be zero for the remaining rounds. There are " + remaining + " active players."
        }
        payoff_lbl.innerText = payoff_t3;
    });

</script>

<style>
    #negative_lbl{
        display: none;
    }
    .otree-timer {
        display: none;
    }
    #remaining{
        display: none;
    }
    .card {
        margin-bottom: 50px;
    }

    .table_header {
        font-weight: bold;
        border: black 2px solid;
        padding: 10px;
        text-align: center;
    }

    table td {
        text-align: center;
        padding: 5px;
        border: gray 2px solid;
    }

    .highlight_value {
        font-size: 25px;
        font-weight: bold;
    }

    table {
        margin: auto;
        width: 80%;
        padding: 10px;
    }
</style>

{{ next_button }}

{{ endblock }}