{% extends "styled.html" %}

{% block style %}
{{super()}}
h1 {
    margin-bottom: 10px;
}

.url a {
    color: #444;
}

th {
    text-align: left;
}

.qmarks .name {
    padding-left: 5px;
}

.empty-msg {
    background-color: #f8f8f8;
    color: #444;
    display: inline-block;
    text-align: center;
    width: 100%;
}
{% endblock %}

{% block content %}

<h1>Quickmarks</h1>

{% if quickmarks|length %}
<table class="qmarks">
    <tbody>
    {% for name, url in quickmarks %}
    <tr>
        <td class="name"><a href="{{url}}">{{name}}</a></td>
        <td class="url"><a href="{{url}}">{{url}}</a></td>
    </tr>
    {% endfor %}
    </tbody>
</table>
{% else %}
<span class="empty-msg">You have no quickmarks</span>
{% endif %}

<h1 id="bookmarks">Bookmarks</h1>

{% if bookmarks|length %}
<table class="bmarks">
    <tbody>
    {% for url, title in bookmarks %}
    <tr>
        <td class="name"><a href="{{url}}">{{title | default(url, true)}}</a></td>
        <td class="url"><a href="{{url}}">{{url}}</a></td>
    </tr>
    {% endfor %}
    </tbody>
</table>
{% else %}
<span class="empty-msg">You have no bookmarks</span>
{% endif %}

{% endblock %}