{% extends "base.html" %}

{% block content %}
<style>
    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">
<h1>Shared Hometab</h1>
<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>
{% endblock %}
</div>