{% extends "global/Page.html" %}
{% load otree static %}
    <style>
    .mystyle{
    color: darkorchid; font-family: "Arial Black"; font-size: 12px; letter-spacing: 2px;
        word-spacing: 2px; font-style: normal; font-variant: normal; text-transform: none;
    }
    </style>
{% block title %}
    2nd Price Sealed-Bid Auction - Bid
{% endblock %}

{% block content %}
    <p class ="mystyle">
    Every round, each player is assigned personal value for the item auctioned.
    Simultaneously, each player places a bid not exceeding his/her value. All bids are sealed and not visible to other players.
        The highest bidder wins, and receives the payoff equal to the difference between her/his personal value and
        the SECOND highest bid, placed by a non-winner.
        Non-winners receive zero payoff. Each round all players are randomly re-assigned to new groups.
        <br><br>
        <div style="width: 150px; border: 5px solid black; height: 50px ">
        Round {{ subsession.round_number }} of {{ Constants.num_rounds }}
        </div>
        <br>
        You are one of {{ Constants.players_per_group }} bidders
        <br>
        Your value is {{ player.value }}
        <br><br>
    </p>

    {% formfields %}

    {% next_button %}

    {% if player.round_number != 1 %}
        <div class="card-header mb-3 text-center" style="background: #DEF0FC; color: green">
            <b>History Table</b>
        </div>
        <p>
        <div class="row justify-content-center">
             <table class="table" style="width: 500px">
                <tr>
                    <th class="text-center">Round</th>
                    <th class="text-center">Your bid</th>
                    <th class="text-center">Win?</th>
                    <th class="text-center">2nd highest bid</th>
                </tr>
                 <tbody>
                 {% for p in player.in_previous_rounds %}
                     <tr>

                         <td class="text-center mystyle">{{ p.round_number }}</td>
                         <td class="text-center">{{ p.bid }}</td>
                         <td class="text-center">{% if p.is_winner == True %}Yes{% else %}No{% endif %}</td>
                     </tr>
                 {% endfor %}
                 {% for g in group.in_previous_rounds %}
                     <tr>
                        <td class="text-center">{{ g.second_hi_bid }}</td>
                     </tr>
                 {% endfor %}

                 </tbody>
             </table>
        </div>
        </p>
    {% endif %}

{% endblock %}