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

{% block title %}

{% endblock %}

{% block styles %}
<style>
.otree-btn-next {
    float: right;
    display: none;
    }
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);
}

.th_style {
    font-weight:400;
    text-align:center;
    width: 6% ;
}
span{
    border-radius: 5px;
    text-align: center;
    border: 1px gray;
    padding: 5px 5px;
    background-color: #AED6F1;
    float: left;
    width: 110px;
}
input{
    border-radius: 5px;
    text-align: center;
    border: 1px gray;
    padding: 5px 5px;
    background-color: #AED6F1;
    margin-left: 0px;
}
.col-form-label {
  font-weight:bold;
}
table {
    table-layout: auto;
    border-collapse: collapse;
    width: 100%;
}

.table tr, .table th, .table td {
    border: none;
    border-top: none;
    border-bottom: none;
}

table .absorbing-column {
    width: 100%;
}
</style>
{% endblock %}

{% block content %}

<div class="card info">
    <label class="col-form-label">
    <strong>  Match 4: {{ home_team }} vs. {{ away_team }} </strong>
    </label>
    <p>
        For this match, the bookmaker's forecasted probabilities of each outcome of the match are the following:
    </p>
    <div class="table fixed table-sm table-responsive" style="width: 500px;">
        <table class="table">
            <tr style="background-color:#f2f2f2">
                <th style="text-align:center; border:1px solid #dddddd;"> </th>
                <th style="text-align:center; border:1px solid #dddddd;"> Win {{ home_team_abbv }} </th>
                <th style="text-align:center; border:1px solid #dddddd;"> Draw </th>
                <th style="text-align:center; border:1px solid #dddddd;"> Win {{ away_team_abbv }} </th>
            </tr>
            <tr>
                <td style="text-align:center; border:1px solid #dddddd;"> <strong> Probabilities: </strong> </td>
                <td style="text-align:center; border:1px solid #dddddd;"> {{ prob_homewin }}% </td>
                <td style="text-align:center; border:1px solid #dddddd;"> {{ prob_draw }}% </td>
                <td style="text-align:center; border:1px solid #dddddd;"> {{ prob_awaywin }}% </td>
            </tr>
        </table>
    </div>
</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="Benchmark_Treat_time" id="Benchmark_Treat_time" step="0.000001">

{% endblock %}

{% block scripts %}
<script>
var startTime;

$(document).ready(function() {
    startpage_time = Date.now();
    $('.otree-btn-next').show();
});

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

</script>
{% endblock %}