{% 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 method="POST">
    <input name="dl_bookml"  value="dl_bookml" style="display:none;"/>
    <button type="submit" class="btn btn-info">Download Bookmarks</button>
</form>
<!------  The edit button of the page is edit_bookmark.html ---------->
<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-->
        {% for bg, bml in bdic.items(): %}
        <div class="col-lg-4 col-md-4 col-sm-4">
            <div class="inner_box">
                <h3>{{ bg }}</h3>
                <hr>
                <!-- Code: Each Link in the Box-->
                {% for bm in bml: %}
                <ul class="list">
                    <li><span class="bull">ICON {{ bm.name }} {{ bm.status }}</span></li>
                    <li class="href_link_button">
                        <a href="{{ bm.link }}">
                            <img src="static/logo/link_logo.png"width="25" height="25">
                        </a>
                        <button type="submit">Edit</button>
                    </li>
                </ul>
                {% endfor %}
                <!-- (End) Code: Each Link in the Box (End)-->
                <br>
            </div>
        </div>
        <!--(End) Code: Each Group of Box (End)-->
        {% endfor %}
        <div class="clearfix"></div>
    </div>
    <div class="clearfix"></div>
</div>
<div class="clearfix"></div>
</div>
{% endblock %}