{% 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);
}
</style>
{% endblock %}

{% block content %}
<div class="card info">
    <p>
        Before you continue, we would like to refresh your knowledge of how betting odds work below.
    </p>
    <p>
        <strong> Betting odds: </strong>
    </p>
    <p>
        Betting odds indicate how much you will be paid per token if you bet on the correct outcome.
        For example, if you bet 50 tokens on a win by the home team and the odds are 3.0, you would
        be paid 50 tokens x 3 = 150 tokens if the home team wins. If the home team doesn’t win, you would receive 0 tokens.
    </p>
    <p>
        <strong> Example: </strong>
    </p>
    <p>
        You have to bet 100 tokens across the three outcomes listed below. You can assign as many tokens as you like to each outcome,
        but they all have to add up to 100.
    </p>
    <div class="table fixed table-sm table-striped table-responsive" style="width: 500px;">
    <table class="table">
        <tr>
            <th style="text-align:center; border:1px solid #dddddd;"> </th>
            <th style="text-align:center; border:1px solid #dddddd;"> Win Home Team </th>
            <th style="text-align:center; border:1px solid #dddddd;"> Draw </th>
            <th style="text-align:center; border:1px solid #dddddd;"> Win Away Team </th>
        </tr>
        <tr>
            <td style="text-align:center; border:1px solid #dddddd;"> <strong> Odds </strong> </td>
            <td style="text-align:center; border:1px solid #dddddd;"> 3 </td>
            <td style="text-align:center; border:1px solid #dddddd;"> 3.5 </td>
            <td style="text-align:center; border:1px solid #dddddd;"> 2 </td>
        </tr>
    </table>
</div>
</div>
<br><br>
<div class="card info">
    <p>
        <strong> Example 1 </strong>: You bet all 100 tokens on a win by the home team. <strong> The match ends in a draw. </strong>
        How many tokens will you be paid?
    </p>
    {% formfield player.bet_primer1 %}
</div>
<br><br>
<div class="card info">
    <p>
        <strong> Example 2 </strong>: You bet 50 tokens on a draw and 50 tokens on a win by the home team. <strong> The home team wins. </strong>
        How many tokens will you be paid?
    </p>
    {% formfield player.bet_primer2 %}
</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="BetPrimer_time" id="BetPrimer_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('BetPrimer_time').value=page_time;
};

</script>
{% endblock %}