{{ block title }}
Practice round:
{{ endblock }}
{{ block content }}
<p>


    <br/>
    <br/>
    In the game, you and each of the three other group members start with {{ C.ENDOWMENT }} each. You each have the
    opportunity to contribute your {{ C.ENDOWMENT }} to a group project. The group project pays out
    {{ player.single_payout }} to each group member for each {{ C.ENDOWMENT }} that is contributed.
    <br/>
    <br/>
    This means that: If you contribute your {{ C.ENDOWMENT }}, you will end up with {{ player.single_payout }} plus
    {{ player.single_payout }} for each other group member that contributes. If you do not contribute your
    {{ C.ENDOWMENT }}, you will keep your {{ C.ENDOWMENT }} and also receive {{ player.single_payout }} for each group
    member that contributes.
    <br/>
    <br/>
    On this screen, you can see how the contribution decisions from you and the other members affect earnings.
    <br/>
    <br/>
    You must spend at least 60 seconds in this screen before you can advance to round 1.
{#    If you have any questions, please raise your hand.#}
</p>
{#<h3>Hypothetical Decisions</h3>#}
{#<div class="d-flex flex-wrap">#}
{#    {{ for p in C.PRODUCTS }}#}
{#    <div class="card">#}
{#        <div class="card-body">#}
{#            <h5 class="card-title">{{ p.name }}</h5>#}
{#            <p class="card-text">#}
{#                Price: {{ p.unit_price }}#}
{#            </p>#}
{#            <button type="button" value="{{ p.sku }}" onclick="addToCart(this)" class="btn btn-secondary">Contribute</button>#}
{#            <button type="button" value="{{ p.sku }}" onclick="removeFromCart(this)" class="btn btn-secondary">Do not contribute</button>#}
{#        </div>#}
{#    </div>#}
{#    {{ endfor }}#}
{#</div>#}

</br>
<table class="table table-striped">
    <thead>
    <tr>
        <th>Player</th>
{#        <th>Contributed</th>#}
        <th>Contribution Decision</th>
{#        <th>Contribution Decision Button</th>#}
{#        <th>Earnings</th>#}
        <th></th>
    </tr>
    </thead>
    <tbody id="cart-body">

    </tbody>
</table>


<p>

    <h4>Your earnings in this scenario would be: <b><span id="cart-total"></span></b></h4>
    <h4>Player 2's earnings in this scenario would be:  <b><span id="cart-play2"></span></b></h4>
    <h4>Player 3's earnings in this scenario would be:  <b><span id="cart-play3"></span></b></h4>
    <h4>Player 4's earnings in this scenario would be:  <b><span id="cart-play4"></span></b></h4>
    <br/>

    <button class="btn btn-primary" style="display: none" id="next-button"> Advance to round 1</button>

    <script>
    setTimeout(function() {
    document.getElementById('next-button').style.display = 'block';
    }, 60 * 1000);
    </script>

    <script>
        let myCart = document.getElementById('cart-body');
        let cartTotal = document.getElementById('cart-total');
        let cartPlay2 = document.getElementById('cart-play2');
        let cartPlay3 = document.getElementById('cart-play3');
        let cartPlay4 = document.getElementById('cart-play4');

        function cu(amount) {
            if (amount === 1) {
                return ` $${amount}.00`;
            } else {
                return ` $${amount}0`;
            }
        }

        function liveRecv(data) {
            let html = '';
            for (let item of data.items) {
                html += `
<tr>
    <td>${item.name}</td>
    {#<td>${item.quantity}</td>#}
    <td>${item.contributioncall}</td>
    <td><button type="button" value="${item.sku}" onclick="addToCart(this)" class="btn btn-secondary">Contribute</button></td>
    <td><button type="button" value="${item.sku}" onclick="removeFromCart(this)" class="btn btn-secondary">Do not contribute</button></td>

    {#<td>${cu(item.total_price)}</td>#}
</tr>`;
            }
            myCart.innerHTML = html;
            cartTotal.innerText = cu(data.total_price + 1);
            cartPlay2.innerText = cu(data.player2_price);
            cartPlay3.innerText = cu(data.player3_price);
            cartPlay4.innerText = cu(data.player4_price);
        }

    </script>
 <br>
<br/>


<script>
    function addToCart(ele) {
        modifyCart(ele.value, 1);
    }

    function removeFromCart(ele) {
        modifyCart(ele.value, 0);
    }

    function modifyCart(sku, delta) {
        liveSend({'sku': sku, 'delta': delta});
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({});
    });

</script>


{{ endblock }}