{% 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;
        }

        .btn {
            border-radius: 0;
        }

    </style>

{% endblock %}

{% block content %}

    <div class="fixed-left">
        <b>Finished! </b> <br>
    </div>

    <div class="fixed-right">
        <b>Highest hand:</b> <br>
        <table>
            {% if player.session.config.show_individual_highest_hands %}
            <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>
            {% endif %}
            <tr>
                <th>Total:</th>
                <td>{{ player.highest_hand_first_draw|add:player.highest_hand_second_draw }}</td>
            </tr>
        </table>
    </div>

    <div class="center">
        <img id="face-down-card" src="{% static "blackjack/images/cards-collection.svg" %}" width="450px">
        <p><b>Thank you for playing Highest Two Card Combination!</b></p>
        <p style="line-height: 12px"><b>Your final score is <span class="circle">{{ player.highest_hand_first_draw|add:player.highest_hand_second_draw }}</span></b></p>
        <p style="line-height: 12px"><b>Your payoff is <span style="color: red">{{ player.payoff }}</span></b></p>
    </div>

{% endblock %}