artFi/app/templates/detail_art_for_market.html

{% extends "market.html" %}

{% block modal %}
<div class="modal fade bd-example-modal-xl" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-body">
         <!-- 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-->
        <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>
  </div>
</div>

<!-- Script for run Modal-->
<script>
    $(document).ready(function(){
        console.log("Windows is loaded")
        $("#exampleModal").modal("show")
    })
    $(document).ready(function(e) {
      $('#exampleModal').on('hidden.bs.modal', function(e) {
        window.location.href = '{{url_for('dashboards.market')}}'
      });
    });
</script>
{% endblock %}