{{ 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 get the opportunity to buy this item by participating in an auction that works the same way as the practice auction you just learned about. If you win the auction, the item will be delivered to the lab and we will contact you so you can pick it up from us at a time that is convenient to you. The total amount you can spend on this task is the ${{group.budget}}, the money that {{if player.participant.earner_round_1 == 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>
    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>

<p>
    The money you can spend on this item is the ${{ group.budget }} in the joint account.
</p>

<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 }}