{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Token Conversion
{% endblock %}

{% block content %}

    <script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js?config=TeX-MML-AM_CHTML">
</script>

    <style type="text/css">
    .tg  {border-collapse:collapse;border-spacing:0;}
    .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
    .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
    .tg .tg-lboi{border-color:inherit;text-align:left;vertical-align:middle}
    .tg .tg-9wq8{border-color:inherit;text-align:center;vertical-align:middle}
    .tg .tg-c3ow{border-color:inherit;text-align:center;vertical-align:top}
    .tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
    </style>

    <script>
    $('html').bind('keypress', function(e)
{
   if(e.keyCode == 13)
   {
      return false;
   }
});
    </script>

    <center>
    <table class="tg">
        <tr>
            <th class="tg-9wq8">Period</th>
            <th class="tg-lboi">\( {{ period }} \) of \( {{ total_periods }} \)</th>
        </tr>
      <tr>
        <td class="tg-9wq8">Income</td>
        <td class="tg-lboi">\( {{ income }} \)</td>
      </tr>
      <tr>
        <td class="tg-c3ow">Total Savings</td>
        <td class="tg-0pky">\( {{ savings }} \)</td>
      </tr>
    </table>
    </center>

    {% formfield player.consumption %}

{% endblock %}