{% extends "base.j2" -%}

{%- block append_to_head_tag_section %}
  <title>Auction — {{ product_title }}</title>
  <meta name="description" content="Live auction for {{ product_title }}." />
{%- endblock %}

{% block content %}
<section class="one-column auction-page" data-auction-id="{{ id }}">

  <div class="auction-header well">
    <h1 class="type-title">{{ product_title }}</h1>
    <p>
      <a href="{{ product_url }}">View product page</a>
      &middot;
      <a href="{{ shop_url }}">View shop</a>
    </p>

    <div class="auction-state-badge auction-state-{{ state }}">
      {{ state_human }}{% if has_reserve and not reserve_met %} &middot; reserve not met{% endif %}
    </div>
  </div>

  <div class="auction-stats well">
    <div class="auction-stat">
      <span class="auction-stat-label">Current high</span>
      <span class="auction-stat-value" id="auction-current-high">${{ "%.2f"|format(current_high) }}</span>
    </div>
    <div class="auction-stat">
      <span class="auction-stat-label">Time remaining</span>
      <span class="auction-stat-value" id="auction-countdown" data-end-timestamp="{{ end_timestamp or '' }}">
        {%- if is_active -%}…{%- elif is_ended or is_terminal -%}ended{%- else -%}—{%- endif -%}
      </span>
    </div>
    {% if has_buy_now %}
    <div class="auction-stat">
      <span class="auction-stat-label">Buy now</span>
      <span class="auction-stat-value">${{ "%.2f"|format(buy_now_price) }}</span>
    </div>
    {% endif %}
  </div>

  {% if is_ended and user_is_winner and not is_settled and payment_deadline_timestamp %}
  <section class="well auction-winner-pay">
    <h3 class="type-title">You won this auction!</h3>
    <p>
      Complete payment <strong data-pay-deadline="{{ payment_deadline_timestamp }}">{{ payment_deadline_human }}</strong>, or the auction will be released to the next-highest bidder.
    </p>
    <form method="post" action="/a/{{ id }}/checkout" class="auction-checkout-form">
      <input type="submit" class="mps-submit mps-button-green" value="Pay ${{ '%.2f'|format(current_high) }} now" />
    </form>
  </section>
  {% endif %}

  {% if is_active %}
    {% if user_is_seller %}
      <div class="well">
        <p>You own this auction. You cannot place bids on your own listing.</p>
      </div>
    {% elif request.user is none %}
      <div class="well">
        <p>
          <a href="/join-or-log-in" class="mps-button mps-button-blue">Log in to bid</a>
        </p>
      </div>
    {% else %}
      <form method="post" action="/a/{{ id }}/bid" id="auction-bid-form" class="auction-bid-form well">
        <label for="auction-bid-amount">Your bid (USD)</label>
        <input
          type="number" step="0.01" min="{{ "%.2f"|format(min_next_bid) }}"
          name="amount" id="auction-bid-amount"
          value="{{ "%.2f"|format(min_next_bid) }}"
          required
        />
        <small>Minimum next bid: ${{ "%.2f"|format(min_next_bid) }}</small>

        <label for="auction-max-proxy">Max proxy ceiling (optional)</label>
        <input
          type="number" step="0.01" min="{{ "%.2f"|format(min_next_bid) }}"
          name="max_proxy" id="auction-max-proxy"
          placeholder="Auto-bid up to this amount"
        />
        <small>The system will outbid others up to your ceiling.</small>

        <input type="submit" class="mps-submit" value="Place Bid" />
      </form>

      {% if has_buy_now %}
      <form method="post" action="/a/{{ id }}/buy-now" id="auction-buy-now-form" class="well">
        <p>Skip the bidding — buy now for ${{ "%.2f"|format(buy_now_price) }}.</p>
        <input type="submit" class="mps-submit" value="Buy Now" />
      </form>
      {% endif %}

      <form method="post" action="/a/{{ id }}/watch" id="auction-watch-form">
        <input type="submit" class="mps-button" value="Watch this auction" />
      </form>
    {% endif %}
  {% endif %}

  <div id="auction-flash" class="auction-flash" role="status" aria-live="polite"></div>

</section>

<script src="/static/js/auction.js"></script>
{% endblock %}
