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

{% block title %}
    Second-price sealed-bid auction
{% endblock %}

{% block content %}

    <p style="color:darkred">
        You are one of {{ Constants.players_per_group }} players who are biding in an auction.
        <br><br>
        Your value of the good is {{ player.value }}.
        <br><br>
        You are in {{ subsession.round_number }} round now.
        <br><br>
        If your bid is the highest, then you will get the item and your payoff is evaluation minus bid. If not, then you
        will not get the item and your payoff is 0.
    </p >


    {% formfields %}
    {% next_button %}


    {% if player.round_number != 1 %}
        <div class = "card-header rb-3 text-center">
            <b>History Table</b>
        </div>

        <p>
            <div class="row justify-content-center">
                <table class="table" style="...">
                    <tr>
                        <th class="text-center">Round</th>
                        <th class="text-center">Your bid</th>
                        <th class="text-center">Win?</th>
                        <th class="text-center">Price</th>
                        <th class="text-center">Payoff</th>
                        <th class="text-center">Total earnings</th>

                    </tr>
                    <tbody>
                    {% for p in player.in_previous_rounds %}
                    <tr>
                        <td class="text-center my_style">{{p.round_number}}</td>
                        <td class="text-center my_style">{{p.bid}}</td>
                        <td class="text-center my_style">{{p.is_winner}}</td>
                        <td class="text-center my_style">{{p.price}}</td>
                        <td class="text-center my_style">{{p.payoff}}</td>
                        <td class="text-center my_style">{{participant.payoff}}</td>

                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </p>
    {% endif %}
{%  endblock %}