<!DOCTYPE html5>
<html>
<head>
    {% import "header.html" as header %}
    <title>Bookmarks</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/common.css">
    <script src="/static/common.js"></script>

<style>
#bookmarks
{
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
}
.bookmark_card
{
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: baseline;

    padding: 8px;
    margin: 8px;

    border-radius: 8px;
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);

    background-color: #ffffd4;
}
.bookmark_card .bookmark_url
{
    color: #aaa;
}
</style>
</head>


<body>
    {{header.make_header(session=session)}}
    <div id="content_body">
        <div id="bookmarks">
            {% for bookmark in bookmarks %}
            <div class="bookmark_card">
                <a href="{{bookmark.url}}" class="bookmark_title">
                {% if bookmark.title %}
                    {{bookmark.title}}
                {% else %}
                    {{bookmark.id}}
                {% endif %}
                </a>
                <a href="{{bookmark.url}}" class="bookmark_url">{{bookmark.url}}</a>
            </div>
            {% endfor %}
        </div>
    </div>
</body>


<script type="text/javascript">
</script>
</html>