{% extends "base.html" %}

{% block content %}
<style>
table, th, td {
    border: 1px solid black;
}
</style>

<!--Change Password-->
<form method="POST">
    <div class="card-body">
        <p><b>Change Password</b></p><br>
    <hr style="border: 1px solid rgb(177, 176, 176);"/>
        <div class="row">
            <div class="col-sm-3" style='position:relative; left:20px'>
            <h6 class="mb-0"><label for="current_password">Current Password</label></h6><br>
            </div>
            <div class="col-sm-9 text-secondary">
                <input type="password" id="current_password" name="current_password"><br>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3" style='position:relative; left:20px'>
            <h6 class="mb-0"><label for="password">Password</label></h6><br>
            </div>
            <div class="col-sm-9 text-secondary">
                <input type="password" id="password" name="password"><br>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3" style='position:relative; left:20px'>
            <h6 class="mb-0"><label for="password_confirm">Password<br>(Confirm)</label></h6><br>
            </div>
            <div class="col-sm-9 text-secondary">
                <input type="password" id="password_confirm" name="password_confirm">
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <input type="submit" value="Submit" class="btn btn-info"></a>
            </div>
        </div>
    </div>
</form>

<h1>Show 2FA and Email Confirmation. If the user turns on it, it will show a green tick. If not, it will show a red tick.</h1>
<p>At here, you may just use 1 to show green tick, 2 to show red tick. I will styling after building front-end</p>
<p>2FA: 1 </p>
<p>Email Confirmation: 1 </p>

<hr>
<h1>Show user information</h1>
<p>{{user.email}}</p>
<p>{{user.username}}</p>
<hr>
<p>Art I Own</p>
<p>1. Art Name</p>
<p>2. Art Image(Click the photo will go to pop up detail art page)</p>
<hr>
<p>Art by Me</p>
<p>1. Art Name</p>
<p>2. Art Image(Click the photo will go to pop up detail art page)</p>
<a href="{{url_for('dashboards.modal_profile')}}">Popup</a>

{% block modal %}{% endblock %}
{% block script %}{% endblock %}
<hr>
<p>Show the user bidding record</p>
<table>
    <tr>
      <th>Bidding Art Item Name</th>
      <th>Bidding Time(Order by DESC)</th>
      <th>Bidding Price</th>
    </tr>
    <tr>
        <td>The Krusty Krab</td>
        <td>2022-4-3 15:30:00</td>
        <td>150</td>
    </tr>
    <tr>
        <td>Chum Bucket</td>
        <td>2022-4-2 10:00:00</td>
        <td>100</td>
     </tr>
  </table>
{% endblock %}