{{ block title }}
    <h6>Completed so far:</h6>
    
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-label="Progress" style="width: {{ percentage }}%" aria-valuenow="{{ percentage }}" aria-valuemin="0" aria-valuemax="100">{{ percentage }}%</div>
    </div> <br><br>
    
{{ endblock }}

{{ block content }}

<h1>Game Screen</h1>
    First, we will explain the game's mechanics. Then, we will explain the rules of the Savings Game.<br><br>
    The below is an example of the primary screen you will see and interact with during the Savings Game. 
    On the next page, we explain each component of this screen.<br><br>

    {{ next_button }}


<!-- CSS styles -->
<style>
    .flex-container {
        float: center;
        padding: 20px;
    }
  
    .flex-child {
        width: 33%;
        float: left;
        padding: 20px;
    }
  
    .flex-child-2 {
        width: 33%;
        min-height: 247.98px;
        float: left;
        padding: 20px;
    }
  
    .flex-child-3 {
        width: 33%;
        float: left;
        padding: 20px;
    }
    
    .flex-child-4 {
        width: 67%;
        float: right;
        padding: 20px;
    }
  
    /* Inserting this collapsed row between two flex items will make 
    * the flex item that comes after it break to a new row */
    .break {
        width: 100%;
        float: center;
        height: 40px;
    }
  
  </style>
  
  <div class="flex-container">
    <div class="flex-child">
        <h3>Starting Balances</h3>
        <div class="card border-0">
            <div class="card-body">
                <h6 class="card-title"><b>Interest Earned Last Period</b></h6>
                <p class="card-text">
                    <span id="interest-earned"></span>
                </p>
            </div>
        </div>
  
        <div class="card border-0">
            <div class="card-body">
                <h6 class="card-title"><b>Total Cash</b></h6>
                <p class="card-text">
                    <span id="total-cash"></span>
                </p>
            </div>
        </div>
    </div>
    
    <div class="flex-child">
        <h3>Ending Balances</h3>
        <div class="card border-0">
            <div class="card-body">
                <h6 class="card-title"><b>Savings Account</b></h6>
                <p class="card-text">
                    <span id="final-savings"></span>
                </p>
            </div>
        </div>
    
        <div class="card border-0">
            <div class="card-body">
                <h6 class="card-title"><b>Stock</b></h6>
                <p class="card-text">
                    <span id="final-stock"></span> units
                </p>
            </div>
        </div>
    </div>
    
  </div>
  
  <br>
  <div class="break"></div>
  <div class="break"></div>
  <div class="break"></div>
  <div class="break"></div>
  <br>
  
  <div class="flex-container">
    <div class="flex-child-3">
        <h3>Catalog</h3>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Food</h5>
                <p>   
                    Price: <span id="new-price"></span>
                </p>           
                <button type="button" value="1" onclick="addToCart(this)" class="btn btn-secondary">+1</button>
            </div>
        </div>
    </div>
    <div class="flex-child-4">
        <h3>My Cart</h3>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>Name</th>
                <th>Quantity</th>
                <th>Total price</th>
                <th></th>
            </tr>
            </thead>
            <tbody id="cart-body">
  
            </tbody>
        </table>
  
  
        <p>
            <button class="btn btn-primary">
                Finalize Purchase (Total : <b><span id="cart-total"></span></b>)
            </button>
  
            <script>
  
                let myCart = document.getElementById('cart-body');
                let myBalance = document.getElementById('cart-body2');
                let cartTotal = document.getElementById('cart-total');
                let cardInterestEarned = document.getElementById('interest-earned');
                let cardCashOnHand = document.getElementById('total-cash');
                let cardFinalSavings = document.getElementById('final-savings');
                let cardFinalStock = document.getElementById('final-stock');
                let cardNewPrice = document.getElementById('new-price');;
  
                function cu(amount) {
                    return `${amount} ₮`;
                }
  
                function liveRecv(data) {
                    let html = '';
                    console.log(data)
                    for (let item of data.items) {
                        html += `
        <tr>
            <td>${item.name}</td>
            <td>${item.quantity}</td>
            <td>${cu(item.total_price.toFixed(2))}</td>
            <td><button type="button" value="${item.sku}" onclick="removeFromCart(this)" class="btn btn-secondary">-1</button></td>
        </tr>`;
                    }
                    console.log('1');
                    myCart.innerHTML = html;
                    cartTotal.innerText = cu(data.total_price.toFixed(2));
                    cardInterestEarned.innerText = cu(data.interestEarned.toFixed(2));
                    cardCashOnHand.innerText = cu(data.cashOnHand.toFixed(2));
                    cardFinalSavings.innerText = cu(data.finalSavings.toFixed(2));
                    cardFinalStock.innerText = data.finalStock;
                    cardNewPrice.innerText = cu(data.newPrice.toFixed(2)); 
            }
            
            </script>
    </div>
  </div>
  
  <br><br>
  
  <script>
  
    function addToCart(ele) {
        modifyCart(ele.value, 1);
    }
  
    function removeFromCart(ele) {
        modifyCart(ele.value, -1);
    }
  
    function modifyCart(sku, delta) {
        liveSend({'sku': sku, 'delta': delta});
    }
  
    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({});
    })
  
  </script>


{{ endblock }}