{{ extends "global/Page.html" }}
{{ block title }}The Auction{{ endblock }}

{{ block content }}


<!-- Includes the background style from the UW Teton Lab experiments -->
{{ include_sibling 'uw_teton_bg.html' }}

<!-- Style to center images and apply some basic formatting -->
<style>
    img {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 300px; /* Fixed width for consistency */
      height: 300px; /* Fixed height for consistency */
    }
    .description {
      text-align: center; /* Center-align the description text */
      margin-top: 10px; /* Space above the description */
    }
    .otree-timer {
        display: none;
    }
</style>

<!-- Introduction text explaining the auction -->
<p>
    You are being offered this item, whose market value is approximately $30:
</p>

<!-- Image of the selected item -->
<img src="{{ image_path }}" alt="Selected item for auction." class="center">

<!-- Description of the selected item displayed below the image -->
<p class="description">
    {{ description }}
</p>

<!-- Details about the auction and rules -->
<p>
    You will participate in an auction to determine if you will purchase this item. The total amount you can spend on this task is the ${{group.budget}}, the money that {{if player.participant.earner_round_2 == 1}}<b>you</b>{{else}}<b>your partner</b>{{endif}} <b>earned</b> from the matrix task; in other words you can spend up to ${{group.budget}} from the joint account. Remember, all money remaining in the joint account at the end of the study will be split evenly between you and your partner.
</p>
<p>
    <mark>Remember, the results of the first and second joint account and auction <b>are completely separate</b>, and only one will be chosen randomly for your final payment.</mark>
</p>
<p>
    Here's a reminder of the rules of the auction:
</p>
<ul style="list-style-type:number;">
    <li>You will place a bid on the item, corresponding to how much you would be willing to pay for this item.</li>
    <li>The computer will randomly draw a price for the item.</li>
    <li><b>If your bid is higher than the price</b> that the computer randomly selects, <b>you win the auction</b>, and you will pay the computer's chosen price to receive the item. <b>If your bid is lower than the price</b> that the computer randomly selects, <b>you lose the auction</b>, you do not pay the price and receive nothing.</li>
    <li>The strategy for this kind of auction is to bid <b>exactly the maximum amount you are willing to pay</b> for the good.</li>
</ul>

<br>

<!-- Form fields for participant input and the next button -->
{{ formfields }}

{{ next_button }}

{{ endblock }}

{{ block scripts }}
<script>
// This script is included to ensure that if tags are included in form fields they are observed
$(document).ready(function (e) {
    labels = document.getElementsByTagName("label");

    for (var i = 0; i < labels.length; i++) {
        labels[i].innerHTML = labels[i].innerHTML.replaceAll("&lt;", "<").
                              replaceAll("&gt;", ">");
    }
});
</script>
{{ endblock }}