{{ block title }}
    Final Results
{{ endblock }}

{{ block styles }}
<style>
    .hundred{
        width: 100%;
    }
    .wallet{
        display: block;
        background-color: #fff2cc;
        vertical-align: top;
        margin-top: 20px;
    }
    .twenty{
        width: 18%;
        display: inline-block;
    }
    .verticalmiddle{
        height: 100%;
        line-height: 0;
        vertical-align: middle;
    }
    .walletimage{
        height: 4em;
    }
    .marketcashimage{
        width: 50%;
    }
    .walletlabel{
        display: inline-block;
        font-size: 2em;
        border: 1px solid black;
    }
    .flex{
        display: flex;
        justify-content: center;
    }
    .fifty{
        width: 45%;
        display: inline-block;
    }
    .twentyfive{
        width: 23%;
        display: inline-block;
    }
    .walletcircle{
        border-radius: 50%;
        width: 2em;
        height: 2em;
        text-align: center;
        font-size: 1.75em;
        font-weight: bold;
        line-height: 2em;
    }
    .color1{
        background-color: {{ subsession.token_color_1 }}
    }
    .color2{
        background-color: {{ subsession.token_color_2 }}
    }
    .color3{
        background-color: {{ subsession.token_color_3 }}
    }
    .color4{
        background-color: {{ subsession.token_color_4 }}
    }
    .thirty{
        width: 30%;
        display: inline-block;
    }
    .cashgreen{
        background-color: #00b453;
    }
    .cashgreenborder{
        border: 5px solid #00b453;
    }
    .walletlabel{
        display: inline-block;
        font-size: 2em;
        border: 1px solid black;
    }
</style>
{{ endblock }}

{{ block content }}

    <div class="hundred">
        {{ if subsession.payoff_type == 'random' }}
        Round selected: {{ player.randomly_paid_round }}<br>
        <div class="hundred flex">
            <div class="label twenty">Total Earnings:</div>
            <div class="value twenty">{{ participant.payoff }}</div>
        </div>
        <div class="hundred flex">
            <div class="label twenty"> </div>
            <div class="value twenty">{{ participant.payoff_plus_participation_fee }}</div>
        </div>
        {{ else }}
        <div class="hundred flex">
            <div class="label twenty">Accumulated Earnings:</div>
            <div class="value twenty">{{ participant.payoff }}</div>
        </div>
        <div class="hundred flex">
            <div class="label twenty"> </div>
            <div class="value twenty">{{ participant.payoff_plus_participation_fee }}</div>
        </div>
        {{ endif }}
    </div>
{{ endblock }}