{% extends "base.html" %}

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

}
.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;
}

.bookmark_box_background_color {
    background-color: #fff;
    border-radius: .5rem;
    background-image: url("static/logo/home_bookmark_logo.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.href_link_button
{
  float: right;
  list-style-type: none;
}

.list li {
    display:block;
    list-style-position: outside;
    list-style-type: disc;
    text-align: left;
    list-style-type: none;
    
}
.list_li_height {
    height: nowrap;
}
.bull {
    display:list-item
}

.text_border {
    border: 4px solid gray;
    padding: 2px 0px 4px 0px;
}

</style>
<div class="mx-auto text-center">
<!------  Profile Information ---------->
<div class="container">
    <div class="main-body">
          <div class="row">
            <div class="col-md-4">
              <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"
                        >
                        <p>**Accept Only <b>PNG's</b>, <b>JPEG's</b>**</p>
                      </div>
                        </form>
                    </div>
                    <form method="POST">
                        <div class="card-body">
                            <hr style="border: 3px solid rgb(177, 176, 176); width:327px; border-radius: 5px;">
                            <p><b>Change Username or Password</b></p><br>
                            <div class="row">
                                <div class="col-sm-3" style='position:relative; left:20px'>
                                <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" 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="text" 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="text" 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>
                    <form method="POST">
                        <div class="card-body">
                            <hr style="border: 3px solid rgb(177, 176, 176); width:327px; border-radius: 5px;"/>
                            <p><b>Background Colour Customization</b></p><br>
                            <input type="image" src="static/logo/Background_Colour_Customization_LightBlue_logo.png" alt="LightBlue" id="theme_color" name="theme_color" value="lightblue">
                            <input type="image" src="static/logo/Background_Colour_Customization_White_logo.png" alt="White" id="theme_color" name="theme_color" value="white">
                            <input type="image" src="static/logo/Background_Colour_Customization_Black_logo.png" alt="Black" id="theme_color" name="theme_color" value="black">
                            <p>Current: <b><u>(ColourName)</u></b></p>
                        </div>
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <div class="card">
                <div class="container">
                    <div class="col-md-12">
                        <h2 class="text-center" style="padding-left:75px; padding-right:75px;">List of bookmarks you have created </h2>
                        <hr>
                        <!------  List of bookmarks you have created ---------->
                        <form method="POST" target="_blank">
                            <input name="dl_bookml"  value="dl_bookml" style="display:none;"/>
                            <button type="submit" class="btn btn-info">Download Bookmarks for backup</button>
                        </form>
                        <br>
                    </div>
                    <div class="row">
                    {% for bg, bml in bdic.items(): %}
                        <div class="col-md-6">
                            <div class="bookmark_box_background_color" style="border-style: inset;">
                                <div>
                                    <h3 >{{ bg }}</h3>
                                    <hr>
                                    <!-- Code: Each Link in the Box-->
                                    {% for bm in bml: %}
                                    <div class="row">
                                        <div class="col.md-4">
                                            <ul class="list">
                                                <li><img src="static/sitecons/{{bm.icon}}" height=25 width=25> {{ bm.name }}</li>
                                        </div>
                                        <div class="col.md-4" style="position:absolute; right:17px;">
                                            <li class="href_link_button">
                                            <a href="{{ bm.link }}" TARGET="_BLANK">
                                            <img src="static/logo/link_logo.png"width="30" height="30">
                                            </a>
                                            <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#ModifyBookmark" style="padding: 3px; font-size: 6px; border-width: 3px;"><b>Edit</b></button>
                                            <b class="text_border"><i>{{ bm.status }}</i></b>
                                            </li>
                                            </ul>
                                        </div>
                                    </div>
                                    {% endfor %}
                                <!-- (End) Code: Each Link in the Box (End)-->
                                </div>
                            </div>
                            <br>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>
<!-- Modal Popup for Edit Button-->
{% block modal %}
<div class="modal" id="ModifyBookmark" tabindex="-1" role="dialog" aria-labelledby="ModifyBookmarkLabel" aria-hidden="true" >
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
            <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="row g-0">
                  <div class="col-md-6 col-lg-5 d-none d-md-block">
                    <img
                      src="/static/logo/edit_logo.png"
                      alt="bookmark_logo"
                      style="width: 1000px;"
                    />
                  </div>
                  <div class="col-md-6 col-lg-7 d-flex align-items-center">
                    <div class="card-body p-4 p-lg-5 text-black">
                        <!--Form-->
                        <form method="POST" enctype="multipart/form-data">
                            <div class="d-flex align-items-center mb-3 pb-1" style='position:relative; right:40px'>
                              <span class="h1 fw-bold mb-0">Modify your bookmark</span>
                            </div>
          
                            <div class="form-outline mb-4" style='position:relative; right:60px'>
                              <label class="form-label" for="web_link">Website Link</label>
                              <input type="text" name="web_link" class="form-control form-control-lg" style="width:400px" />
                            </div>
          
                            <div class="form-outline mb-4" style='position:relative; right:60px'>
                              <label class="form-label" for="web_name">Name  <b>(Up to 12 characters in length)</b></label>
                              <input type="text" name="web_name" maxlength="12" class="form-control form-control-lg" style="width:400px"/>
                            </div>
          
                            <div class="form-outline mb-4" style='position:relative; right:60px'>
                                <label class="form-label" for="web_group">Existing Groups  <b>(Up to 12 characters in length)</b></label><br>
                                <select name="web_group" style="height:47px" required aria-invalid="false"> 
                                  <option value="cng-555">Create new group:</option>
                                  {% for bg in bgroups %}
                                  <option name="web_group" value="{{ bg.group }}">{{ bg.group }}</option>
                                  {% endfor %}
                                </select>
                                <input type="text" name="new_group" maxlength="12" style='position:relative; left:20px; height:47px;' placeholder="Name new group here"/>
                            </div>  
                            
                            <div class="form-outline mb-4" style='position:relative; right:60px'>
                                <label class="form-label" for="share_public_private">Is this a Public or Private bookmark?</label><br>
                                <input type="radio" id="share_public_private" name="share_public_private" value="public" checked="checked" style="transform:scale(2);">
                                <label for="Public">&nbspPublic</label><br>
                                <input type="radio" id="share_public_private" name="share_public_private" value="private" style="transform:scale(2);">
                                <label for="Private">&nbspPrivate</label><br>
                            </div>  
          
                            <div class="pt-1 mb-4" style='position:relative; right:60px'>
                              <button class="btn btn-dark btn-lg btn-block" type="submit" style="width:400px; position:relative; top:-30px; padding-right: 0px;">Modify</button>
                            </div>
          
                          </form>
                          <!--(End) Form (End)-->
                    </div>
                  </div>

              </div>
            </div>
          </div>
    </div>
  </div>
</div>
{% endblock %}
{% endblock %}