{% extends "base.html" %}

{% block content %}
<div class="container">
  <!-- Product section-->
  <section class="py-5">
    <div class="container px-4 px-lg-5 my-5">
      <div class="row gx-4 gx-lg-5 align-items-center">
        <!-- Art Image-->
        <div class="col-md-6"><img class="card-img-top mb-5 mb-md-0" src="static/repository/website_photo/navbar_icon.png" alt="..." /></div>
          <div class="col-md-6">
            <!-- AuctionEnd Time-->
            <div class="small mb-1">
              (Auction ends in time)
            </div>
            <!-- Art Name-->
            <h1 class="display-5 fw-bolder">(Art Name)</h1>
            <!-- Art Description-->
            <p class="lead">(Description)</p>
            <div class="fs-5 mb-5">
              <!-- Price & Name-->
              <span class="text-decoration-line-through">Current Bid Price: (Current Bid Price) USD</span><br>
              <span class="text-decoration-line-through">Buyout Price: (Buyout Price) USD</span><br>
              <span class="text-decoration-line-through">Minimum Price: (Minimum Price) USD</span><br>
              <span class="text-decoration-line-through">Who Created: (Creator Name)</span><br>
              <span class="text-decoration-line-through">Art Owner: (Owner Name)</span><br>
            </div>
            <!-- Bid button-->
            <div class="d-flex">
              <form method="POST">
                <input 
                  type="text" 
                  class="form-control text-center me-3 bidding_price_size" 
                  id="bidding_price"
                  name="bidding_price"
                  placeholder="Enter Bidding Price"
                />
                <label for="Bidding Price"></label>
                <button class="btn btn-dark flex-shrink-0 input-submit" type="submit">Bid</button>
                <p>(At the backend needs to record the bidder nickname and time. And the record will be showing at the bid history table)</p>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Bid History-->
  <div class="row">
    <div class="col body-column">
      <br>
      <h3>Bid History(order by desc)</h3>
    </div>
  </div>
  <!-- Bid Table-->
  <div class="container">
    <table class="table">
      <thead class="thead-dark">
        <tr>
        <th>Bidder Name</th>
        <th>Bidding Time</th>
        <th>Bidding Price</th>
        </tr>
      </thead>
      <tr>
        <td>Patrick Star</td>
        <td>2022-4-3 15:30:00</td>
        <td>150</td>
      </tr>
      <tr>
        <td>SpongeBob SquarePants</td>
        <td>2022-4-2 10:00:00</td>
        <td>100</td>
      </tr>
    </table>

    <hr>
    <h3>(For the Bid button</h3>
    <p>Only show the bid button if the user login. The bidding price needs higher than before.</p>
    <p>If the user enters the buyout price, the auction will be ended.</p>
    <p>Will not show the bid button for who created the auction.)</p>
  </div>
</div>
{% endblock %}