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

{#{% block title %}#}
{#    Page title#}
{#{% endblock %}#}

{% block styles %}

    <style>

        div.fixed-left {
            position: fixed;
            top: 30px;
            left: 30px;
            width: 200px;
            border: 3px solid #000000;
            padding: 2px;
        }

        div.fixed-right {
            position: fixed;
            top: 30px;
            right: 30px;
            width: 160px;
            border: 3px solid #000000;
            padding: 2px;
        }

        .center {
            margin: auto;
            width: 50%;
        {#border: 3px solid #73AD21;#} padding: 10px;
            text-align: center;
        }

        .circle {
            height: 40px;
            width: 40px;
            font-size: 20px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            border-radius: 50%;
            color: #fff;
            background: red;
        }

        table {
            border: 3px solid black;
            text-align: center;
            table-layout: fixed;
            margin: 10px;
            color: white;
        }

        tr:hover {
            background-color: black;
        }

        .btn {
            border-radius: 0;
        }

    </style>

{% endblock %}

{% block content %}

    <div class="fixed-left">
        <b>Practice rounds finished! </b> <br>
    </div>

    {#    <div class="fixed-right">#}
    {#        <b>Highest hand:</b> <br>#}
    {#        <table>#}
    {#            <tr>#}
    {#                <th>1st hand:</th>#}
    {#                <td>{{ player.highest_hand_first_draw }}</td>#}
    {#            </tr>#}
    {#            <tr>#}
    {#                <th>2nd hand:</th>#}
    {#                <td>{{ player.highest_hand_second_draw }}</td>#}
    {#            </tr>#}
    {#            <tr>#}
    {#                <th>Total:</th>#}
    {#                <td>{{ player.highest_hand_first_draw|add:player.highest_hand_second_draw }}</td>#}
    {#            </tr>#}
    {#        </table>#}
    {#    </div>#}

    <div class="center">
        <p><b>Depending on your final score in the game, you will receive the following prize amounts:</b></p>
        <table>
            <col width="50%"/>
            <col width="50%"/>
            <tr bgcolor="black">
                <th>Final score</th>
                <th>Prize Amount (% of participation payment)</th>
            </tr>
            <tr bgcolor="#fe8181">
                <td>16</td>
                <td>6%</td>
            </tr>
            <tr bgcolor="#fe5757">
                <td>17</td>
                <td>12%</td>
            </tr>
            <tr bgcolor="#fe2e2e">
                <td>18</td>
                <td>25%</td>
            </tr>
            <tr bgcolor="#cb2424">
                <td>19</td>
                <td>50%</td>
            </tr>
            <tr bgcolor="#b62020">
                <td>20</td>
                <td>100%</td>
            </tr>
        </table>
    </div>

    <button type="submit" class="btn btn-dark btn-large" style="width: 100%;">Continue</button>

{% endblock %}