{% extends "etfs/Basetf.html" %}

{% load otree static %}

{% block title %}

{% endblock %}

{% block content %}

<div id="wrap">

<div id="dividendos" style="overflow-x:auto;">
{% include "etfs/table_dividend.html" %}
</div>

<div id="prahran" style="overflow-x:auto;">
{% include "etfs/table_market.html" %}
</div>

<div id="placeholder">
{% include "etfs/table_cash.html" %}
</div>

<div id="right_col">

<table>
  <tr>
    <td>  </td>
    <td> <font color="blue"> Bid </font> </td>
    <td><font color="blue"> Unit </font></td>
    <td><font color=#3E1A13> Ask</font></td>
    <td><font color=#3E1A13> Units</font></td>
  </tr>
  <tr>
    <td><font size="3"> A </font> </td>
    <td>{% formfield player.bida %}</td>
    <td> {% formfield player.nbida %}</td>
    <td>{% formfield player.aska %}</td>
    <td> {% formfield player.naska %}</td>
    </tr>
      <tr>
    <td><font size="3"> B </font> </td>
    <td>{% formfield player.bidb %}</td>
    <td> {% formfield player.nbidb %}</td>
    <td>{% formfield player.askb %}</td>
    <td> {% formfield player.naskb %}</td>
    </tr>
      <tr>
    <td><font size="3"> C </font> </td>
    <td>{% formfield player.bidc %}</td>
    <td> {% formfield player.nbidc %}</td>
    <td>{% formfield player.askc %}</td>
    <td> {% formfield player.naskc %}</td>
    </tr>
</table>

 {% next_button %}

</div>


</div>

<div id="footer">
<p>
In terminal period: A and B will pay {{pfinala}} each, C will pay {{pfinalc}}. 
<ul>
<li>A pays either +{{diva}} or -{{diva}} in dividends each period</li>
<li>B pays the opposite of A in periods 1-7 and in periods 8-15 the opposite of A, plus {{divb}}</li>
<li>C pays 0 in periods 1-7 and {{divb}} in periods 8-15.</li>
</ul>
</div>


<div id="footer2">
<p> <strong> Time left</strong> </p>
<p id="mycounter"> </p>
</div>

{% block scripts %}
<script type="text/javascript">
i = 180;
function onTimer() {
  document.getElementById('mycounter').innerHTML = i;
  i--;
  if (i < 0) {
    alert('Your time is up. Make a choice!');
  }
  else {
    setTimeout(onTimer, 1000);
  }
}

onTimer()
</script>


{% endblock %}
{% endblock %}