{% extends "base.html" %}

{% block content %}
<style>
body{
    color: #1a202c;
    text-align: left;
    background-color: #e2e8f0; 
    padding-top: 100px; 

}
.main-body {
    padding: 15px;
    
}
.card {
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06);
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 0 solid rgba(0,0,0,.125);
    border-radius: .25rem;
}

.card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1rem;
}

.gutters-sm {
    margin-right: -8px;
    margin-left: -8px;
}

.gutters-sm>.col, .gutters-sm>[class*=col-] {
    padding-right: 8px;
    padding-left: 8px;
}
.mb-3, .my-3 {
    margin-bottom: 1rem!important;
}

.bg-gray-300 {
    background-color: #e2e8f0;
}
.h-100 {
    height: 100%!important;
}
.shadow-none {
    box-shadow: none!important;
}
.input-UploadProfile-Browse {
    width: 80px;
    color:transparent;
}
ul {
  list-style-type: none;
  float: left;
}

.href_link_button
{
  float: right;
}

.list li {
    display:inline-block;
    vertical-align: middle;
    list-style-position: outside;
    list-style-type: disc;
    margin-right: 1em;
    text-align: left;
    white-space: nowrap;
    list-style-type: none;
}
.bull {
    display:list-item
}
</style>

<div class="mx-auto text-center">
<!------  Profile Information ---------->
<div class="container">
    <div class="main-body">
        <p>Profile</p>
          <div class="row gutters-sm">
            <div class="col-md-4 mb-3">
              <div class="card">
                <div class="card-body">
                  <div class="d-flex flex-column align-items-center text-center">
                    {% if user.profile_image %}
                    <img src="static/uploads/{{ user.profile_image }}" style="width:150px">
                    {% else %}
                    <img src="static/uploads/defaultprofileimg/defaultprofileimg.png" style="width:150px">
                    {% endif %}
                    <div class="mt-3">
                      <h4>{{ user.username }}</h4>
                      <p class="text-secondary mb-1">{{ user.email }}</p>
                      <hr>
                      <!------  Upload Profile Image ---------->
                      <div class="mt-3">
                        <p><b>Upload Profile Image</b></p> 
                        <form action="" method="POST" enctype="multipart/form-data">
                        <input
                            class="input-UploadProfile-Browse"
                            type="file" 
                            id="profile_image" 
                            name="profile_image" 
                            accept="image/png, image/jpeg" 
                            onchange="form.submit()" 
                            value="Upload"
                            src="http://example.com/path/to/image.png"
                        >
                      </div> 
                      <p>**Accept Only <b>PNG's</b>, <b>JPEG's</b>**</p>
                    </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-8">
              <div class="card mb-3">
                <form method="POST">
                    <div class="card-body">
                        <p><b>Change Username or Password</b></p><br>
                        <div class="row">
                            <div class="col-sm-3">
                            <h6 class="mb-0"><label for="username">Username</label></h6><br>
                            </div>
                            <div class="col-sm-9 text-secondary">
                                <input type="text" id="username" name="username"><br>
                            </div>
                        </div>
                    <hr style="border: 1px solid rgb(177, 176, 176);"/>
                        <div class="row">
                            <div class="col-sm-3">
                            <h6 class="mb-0"><label for="password">Password</label></h6><br>
                            </div>
                            <div class="col-sm-9 text-secondary">
                                <input type="text" id="password" name="password"><br>
                            </div>
                        </div>
                    <hr>
                        <div class="row">
                            <div class="col-sm-3">
                            <h6 class="mb-0"><label for="password_confirm">Password(Confirm)</label></h6><br>
                            </div>
                            <div class="col-sm-9 text-secondary">
                                <input type="text" id="password_confirm" name="password_confirm">
                            </div>
                        </div>
                    <hr>
                        <div class="row">
                            <div class="col-sm-12">
                                <input type="submit" value="Submit" class="btn btn-info"></a>
                            </div>
                        </div>
                    </div>
                </form>
              </div>
            </div>
          </div>
    </div>
</div>

<!------  List of bookmarks you have created ---------->
<form action="/" method="POST">
<input type="submit" value="Download"><!------ a button for downloading their bookmarks for backup)---------->
</form>
<!------  The edit button of the page is edit_bookmark.html ---------->
<!------ (Each bookmark will have an edit button for creators to manage their bookmarks (the edit button will redirect to the edit page where the user can change it to public or private, modify the link, description)</p>---------->
<div class="container">
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <div class="section-title">
                <h1 class="heading bold">List of bookmarks you have created</h1>
                <hr>
            </div>
        </div>
        <!-- Code: Each Group of Box-->
        <div class="col-lg-4 col-md-4 col-sm-4">
            <div class="inner_box">
                <h3>(Group1)</h3>
                <hr>
                <!-- Code: Each Link in the Box-->
                <ul class="list">
                    <li><span class="bull">(ICON) (NAME) (STATUS)</span></li>
                    <li class="href_link_button">
                        <a href="(Web_link)">
                            <img src="static/logo/link_logo.png"width="25" height="25">
                        </a>
                        <button type="submit">Edit</button>
                    </li>
                </ul>
                <!-- (End) Code: Each Link in the Box (End)-->
                <br>
            </div>
        </div>
        <!--(End) Code: Each Group of Box (End)-->
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>
<div class="clearfix"></div>
{% endblock %}
</div>