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

  .equation {
    text-align:center;
    font-size: larger;
  }

</style>

<h1>Real Interest Rate</h1>
  Now, when you play the Savings Game, you will have an additional piece of information displayed next to the Starting and Ending Balances: <b>Market Data</b>. 
  An example of this new screen is shown below.<br><br>
  Market Data provides you the <b>Real Interest Rate</b>.<br><br>
  The Real Interest Rate is approximately equal to the difference between the interest rate paid on your Savings Account (<i>Nominal Interest Rate</i>) and the percentage by which the price of Food changes (<i>Inflation Rate</i>).<br><br>
  <br><p class="equation"><b>Real Interest Rate = Nominal Interest Rate - Inflation Rate</b></p><br><br>

<h3>Negative Real Interest Rate</h3>
  When the Real Interest Rate is negative, you are <b>losing purchasing power</b> and can afford <b>less Food</b> than before.<br><br>

<h3>Positive Real Interest Rate</h3>
  When the Real Interest Rate is positive, you are <b>gaining purchasing power</b> and can afford <b>more Food</b> than before.<br><br>


  <div class="flex-containter">
    {{ next_button }}
  </div>

<!-- 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 Month</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 class="flex-child-2">
      <h3>Market Data</h3>
      <div class="card border-0">
          <div class="card-body">
              <h6 class="card-title"><b>Real Interest Rate</b></h6>
              <p class="card-text">
                  <span id="real-interest"></span> %
              </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" type="button" onclick="getData(this)" id="final-purch">
              Finalize Purchase (Total : <b><span id="cart-total"></span></b>)
              <input type="hidden" name="responseTime" id="responseTime"/> 
          </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');
              let cardRealInterest = document.getElementById('real-interest');
              let buttonFinalPurch =  document.getElementById('final-purch')

              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;
                  buttonFinalPurch.value = data.finalStock;
                  cardNewPrice.innerText = cu(data.newPrice.toFixed(2));
                  cardRealInterest.innerText = data.realInterest_1;
                  console.log('3');

                  var stockLaura = data.finalStock;
                  console.log('stockLaura',stockLaura);

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