{% extends "base.html" %}

{% block content %}
<style>
body{
    color: #1a202c;
    text-align: left;
    background-color: #e2e8f0; 
    padding-top: 80px; 
    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-radius: .5rem;
    background-image: url("static/logo/home_bookmark_logo.png");
    background-repeat: repeat;
    background-size: 100% auto;
}

.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: 4px solid gray;
    padding: 3px 0px 5px 0px;
}

.alert-banner-row {
	background-color: #6699CC;
    background-image: linear-gradient(to bottom right, #6699CC, #13274F);
	border-radius: 1rem;
	color: #fff;
	overflow: hidden;
}

.body-column {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-family: 'Roboto', sans-serif;
}

.icon-column,
.button-column {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}

</style>

<div class="mx-auto text-center">
    <div class="container">
        <div class="row">
            <div class="container mt-3">
                <div class="row alert-banner-row">
                    <div class="col-sm-2" id="grad1">
                        <img
                        src="/static/logo/shared_bookmark_logo.png"
                        alt="bookmark_logo"
                        width="120px"
                      />
                    </div>
                    <div class="col-sm-8 body-column">
                        <br>
                        <h3>Public Bookmarks</h3>
                        <h6><b>Choose Any Bookmark You Like!</b></h6>
                    </div>
                </div>
                <br>
            </div>
            {% 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>
                                    <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 }}">
                                    <img src="static/logo/link_logo.png"width="30" height="30">
                                </a>
                                </li>
                                </ul>
                            </div>
                        </div>
                        {% endfor %}
                    <!-- (End) Code: Each Link in the Box (End)-->
                    </div>
                </div>
                <br>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}