{{ 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 is {{player.payoff}}
        {{ elif player.is_tied }}
        {{ player.number_of_players_tied }} players (Including you) tied for the auction. Your earnings is {{player.payoff}}
    {{ else }}
        You did not win the auction.
    {% endif %}
</p>

<table>

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

<tr>
    <th>{{ player.bid_amount }}</th>
    <th>{{ group.paying_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 black;
    }
    
    td{
        padding: 15px 25px;  
        text-align: left;
    }
    
    th{
        padding: 15px 25px;  
        text-align: center;
    } 
    
     #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 }}