{% extends "home.html" %}

{% block modal %}
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Detail Art</h5>
      </div>
      <div class="modal-body">       
        <p>Art Name</p>
        <p>Art Image</p>
        <p>Description</p>
        <p>Current Bid Price</p>
        <p>Buyout Price</p>
        <p>Starting Bid Price</p>
        <p>Bid History: Bidder Name and time(order by desc)</p>
        <table>
            <tr>
            <th>Bidder Name</th>
            <th>Bidding Time</th>
            <th>Bidding Price</th>
            </tr>
            <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>
        <p>Who Created</p>
        <p>Auction ends in time</p>
        <p>Art Owner</p>
        <hr>
        <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>
        <form method="POST">
            <input 
            type="bidding_price" 
            class="form-control" 
            id="bidding_price"
            name="bidding_price"
            placeholder="Enter Bidding Price"
            />
            <label for="Bidding Price"></label>
            <p>At the backend needs to record the bidder nickname and time. And the record will be showing at the bid history table</p>
            <button type="button" class="btn btn-primary">Bid</button>
            <a href="{{url_for('dashboards.home')}}">Close</a>
        </div>
      </div>
      <div class="modal-footer">
      </div>
    </div>
  </div>
</div>
<script>
    $(document).ready(function(){
        console.log("Windows is loaded")
        $("#exampleModal").modal("show")
    })
</script>
{% endblock %}