{% 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>
        For all the betting questions following this page, the conversion rate for the bonus payments will be:
    </p>
    <p style="text-align:center"><strong> 100 tokens = 2 GBP </strong></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="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 %}