{{ block title }}Results{{ endblock }}
{{ block content }}

<div id="header-logo">
    <span><img src="https://www.smu.edu.sg/sites/all/themes/smubase_nw2_rev/svg/logo-d-smu.svg" alt="smu-logo" width="200" height="auto"></span>
    <span><p style="margin-top:10px; font-size:11px;"><i>Created by the Centre for Teaching Excellence.</i></p></span>
    <hr>
</div>

<h3 id="title">Results</h3>

<p>
    {{ if player.is_winner }}
        You won the auction! And your earnings for this round are {{player.payoff}}
        {{ elif player.is_tied }}
        {{ player.number_of_players_tied }} players (Including you) tied for the auction. Your earnings are {{player.payoff}}
    {{ else }}
        You did not win the auction.
    {{ endif }}
</p>

<table>

    <tr>
        <td>Your bid</td>
        <td>Winning bid</td>
        <td>Item value</td>
        <td>Your payoff</td>
        <td>Total Earnings</td>
    </tr>

<tr>
    <th>{{ player.bid_amount }}</th>
    <th>{{ group.highest_bid }}</th>
    <th>{{ player.item_value_actual }}</th>
    <th>{{ player.payoff }}</th>
    <th>{{ player.total_earnings }}</th>
</tr>

</table>

<p id="endScreen"; style = 'endScreen' ></p>

<script>
if ({{player.round_number}} == {{Constants.num_rounds}}) {
        document.getElementById("endScreen").innerHTML = "Well done! The session is over. Your total earnings across {{Constants.num_rounds}} rounds is {{player.total_earnings}} .";
    }
</script>

{{ next_button }}

<style>
table, td, th {
    border: 2px solid #707070;
}

td { 
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}
    
th {
    width: 13%;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
    font-weight: bold;
} 

#endScreen {
    font-size: 22px; font-weight: bold;
}
    
.otree-body {
    background-color: {{ Constants.style_background_color }};
    color: {{ Constants.style_text_color }};
}

.otree-title {
    visibility: hidden;
    height: 0;
}
    
</style>

{{ endblock }}