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

{% block title %}

{% endblock %}

{% block styles %}
    <style>
    .otree-btn-next {
    float: right;
    }
.form-check-input {
    position: relative;
    vertical-align: top;
    margin-left: auto;
    margin-right: auto
}
.col-form-label {
    font-weight:bold;
}
p{
    text-align: justify;
    text-justify: inter-word;
}
.info {
    padding: 15px 15px 0px 15px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
strong{display: inline;}
</style>
{% endblock %}


{% block content %}
<div class="card info" style="background-color:#AED6F1;">
    <p>

        <strong> Note: </strong> following match will determine your potential bonus:
    </p>
    <p>
        <strong> {{ home_team }} vs. {{ away_team }}. </strong>
    </p>
    <p>
    You decided to bet <strong> {{ win_bet }} </strong> Token(s) on a win by {{ home_team }} at odds <strong> {{ home_team_winodds }} </strong>
        and to bet <strong> {{ lose_bet }} </strong> Token(s) on {{ home_team }} not winning, at odds
        of <strong> {{ home_team_loseodds }}. </strong>
    </p>
    <p>
    For each of these events, you will be paid the following amounts in Tokens:
    <br>
{{ home_team }} wins: <strong> {{ win_payoff }} </strong> <br>
{{ away_team }} doesn't win: <strong> {{ lose_payoff }} </strong> <br>
    <p/>
</div>
<br><br>


<div style="display:inline-block; margin:0; float: left;"> </div> <button onclick="endPage()" class="otree-btn-next btn btn-primary"> Next </button>
<br><br>
<input type="hidden" name="PotentialBonus_a_time" id="PotentialBonus_a_time" step="0.000001">

{% endblock %}

{% block scripts %}
<script>

    $(document).ready(function() {
    startpage_time = Date.now();
      });

      function endPage() {
       var endpage_time = Date.now();
       page_time = (endpage_time - startpage_time)/1000;
       document.getElementById('PotentialBonus_a_time').value=page_time;
       };

    </script>
{% endblock %}