{% extends "base.html" %}

{% block content %}
<style>
body{
    color: #1a202c;
    text-align: left;
    background-color: #e2e8f0; 
    padding-top: 120px; 
    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);
}
ul {
  list-style-type: none;
  float: left;
}

.href_link_button
{
  float: right;
}


.bookmark_box_background_color {
    background-color: #fff;
    border-style: inset;
    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:inline-block;
    vertical-align: middle;
    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: 3px solid gray;
}


</style>


<div class="mx-auto text-center">
<div class="container">
    <div class="row">
        {% for bg, bml in bdic.items(): %}
            <div class="col-md-4">
                <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>(ICON) {{ bm.name }}</li>
                            </div>
                            <div class="col.md-4" style="position:absolute; right:17px;">
                                <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>
                                <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>
{% endblock %}