{% extends "base.html" %}

{% block content %}
<div class="mx-auto text-center">
    <!------  Profile Information ---------->
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <ul class="nav nav-pills mb-3 nav-tabs" id="pills-tab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="Profile-tab" data-toggle="tab" href="#Profile" role="tab" aria-controls="Profile" aria-selected="true">Profile</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="Wallet-tab" data-toggle="tab" href="#Wallet" role="tab" aria-controls="Wallet" aria-selected="false">Wallet</a>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="Profile" role="tabpanel" aria-labelledby="Profile-tab">   
                        <div class="row row-cols-3">
                            <div class="d-flex flex-column align-items-center text-center">
                                {% if user.profile_image %}
                                <img src="static/uploads/{{ user.profile_image }}" class="user_profile_image_size">
                                {% else %}
                                <img src="static/templates/defaultprofileimg.png" class="user_profile_image_size">
                                {% endif %}
                                <div class="mt-3">
                                    <h4>{{ user.username }}</h4>
                                    <p class="text-secondary mb-1">{{ user.email }}</p>
                                    <hr class="hr1_size">
                                <!------  Upload Profile Image ---------->
                                    <div class="mt-3">
                                        <p><b>Upload Profile Image</b></p> 
                                        <form action="" method="POST" enctype="multipart/form-data">
                                        {{ form2.hidden_tag() }}
                                        {{ form2.upload(class="Select_Picture_Button") }}
                                        <br />
                                        {{ form2.submit(class="btn btn-grey input-UploadProfile-Browse", accept="image/png, image/jpeg" ) }}
                                        <p>Only <b>PNG's</b>, <b>JPEG's</b></p>
                                        </form>
                                    </div>
                                </div>
                                <!------  Change Password ---------->
                                <form method="POST">
                                    {{ form.hidden_tag() }}
                                    <div class="card-body">
                                        <hr class="hr2_size">
                                        <p><b>Change Password</b></p><br>
                                        <div class="row">
                                            <div class="col-sm-3">
                                                <h6 class="mb-0 change_password_location"><label for="password">Current Password</label></h6><br>
                                            </div>
                                            <div class="col-sm-9 text-secondary">
                                                {{ form.cpasswd() }}
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-3">
                                                <h6 class="mb-0 change_password_location" ><label for="password">New Password</label></h6><br>
                                            </div>
                                            <div class="col-sm-9 text-secondary">
                                                {{ form.passwd_1() }}
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-3">
                                                <h6 class="mb-0 change_password_location"><label for="password_confirm">Password<br>(Confirm)</label></h6><br>
                                            </div>
                                            <div class="col-sm-9 text-secondary">
                                                {{ form.passwd_2() }}
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-12">
                                                {{ form.submit(class="btn btn-grey update_password-form-btn") }}
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="Wallet" role="tabpanel" aria-labelledby="Wallet-tab">
                        <div class="row row-cols-3">
                            <div class="d-flex flex-column align-items-center text-center">
                                <p class="wallet-word-position"><b>Wallet Amount</b></p><br>
                                <div class="input-group mb-3 wallet-box-position">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text">$</span>
                                    </div>
                                    <div class="input-group-append">
                                        <span class="input-group-text wallet_amount-size"> {{ wallet_amount }}</span>
                                    </div>
                                </div>
                                <hr class="hr1_size">
                                <!--Top Up-->
                                <div class="row">
                                    <p><b>Top Up</b></p>
                                </div>
                                <div class="row">
                                    <div class="input-group mb-3">
                                        <form method="POST">
                                            {{ form3.hidden_tag() }}
                                            {{ form3.amount(placeholder="Input Amount to Top Up", class="topup-box") }}
                                            <span class="shadow-none">{{ form3.submit( class="btn topup-button_color") }}</span>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!------  List Art By Me/ Own /Bidding Record ---------->
            <div class="col">
                    <div class="container">
                        <ul class="nav nav-pills mb-3 nav-tabs" id="pills-tab" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" id="art_by_me-tab" data-toggle="tab" href="#art_by_me" role="tab" aria-controls="art_by_me" aria-selected="true">Art By Me</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="art_by_own-tab" data-toggle="tab" href="#art_by_own" role="tab" aria-controls="art_by_own" aria-selected="false">Art I Own</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" id="bidding_record-tab" data-toggle="tab" href="#bidding_record" role="tab" aria-controls="bidding_record" aria-selected="false">My Current Bids</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active" id="art_by_me" role="tabpanel" aria-labelledby="art_by_me-tab">   
                                <div class="row row-cols-3">
                                {%for art in my_creation%}
                                    <div class="card col-md-4 shadow p-3 mb-5 bg-white rounded"  type="button">
                                        <form method="POST">
                                            <!--<a href="detail"></a>-->
                                            <button name="focus_but" type="submit" class="btn btn-link" value="{{art.filehash}}"><img class="image_bid_item_size" src="static/repository/{{art.dname}}"></button>
                                        </form>
                                            <div class="row" id="market_item_name_left">
                                            <b>{{art.name}}</b>
                                            </div>
                                    </div>
                                {% endfor %}
                                </div>
                            </div>
                            <div class="tab-pane fade" id="art_by_own" role="tabpanel" aria-labelledby="art_by_own-tab">
                                <div class="row row-cols-3">
                                    {%for art in my_art%}
                                    <div class="card col-md-4 shadow p-3 mb-5 bg-white rounded"  type="button">
                                        <form method="POST">
                                            <!--<a href="detail"></a>-->
                                            <button name="focus_but" type="submit" class="btn btn-link" value="{{art.filehash}}"><img class="image_bid_item_size" src="static/repository/{{art.dname}}"></button>
                                        </form>
                                            <div class="row" id="market_item_name_left">
                                                <b>{{art.name}}</b>
                                            </div>
                                    </div>
                                  {% endfor %}
                                </div>
                            </div>
                            <div class="tab-pane fade" id="bidding_record" role="tabpanel" aria-labelledby="bidding_record-tab">
                                <table class="table">
                                    <thead class="thead-colour">
                                        <tr>
                                        <th>Item Name</th>
                                        <th>Bid Time</th>
                                        <th>Bid Price</th>
                                        </tr>
                                    </thead>
                                    {% for u in ubh %}
                                    <tr>
                                        <td>{{ u[0] }}</td>
                                        <td>{{ u[1] }}</td>
                                        <td>{{ u[2] }}</td>
                                    </tr>
                                    {% endfor %}
                                </table>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}