{% extends "styled.html" %}

{% block style %}
{{super()}}
body {
    max-width: 1440px;
}

td.title {
    word-break: break-all;
}

td.time {
    color: #555;
    text-align: right;
    white-space: nowrap;
}

table {
    margin-bottom: 30px;
}

.date {
    color: #555;
    font-size: 12pt;
    padding-bottom: 15px;
    font-weight: bold;
    text-align: left;
}

.pagination-link {
    color: #555;
    font-weight: bold;
    margn-bottom: 15px;
    text-decoration: none;
}
{% endblock %}
{% block content %}

<h1>Browsing history</h1>

<table>
    <caption class="date">{{curr_date.strftime("%a, %d %B %Y")}}</caption>
    <tbody>
    {% for url, title, time, host in history %}
        <tr>
            <td class="title">
                <a href="{{url}}">{{title}}</a>
                <span class="hostname">{{host}}</span>
            </td>
            <td class="time">{{time.strftime("%X")}}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>

<span class="pagination-link"><a href="qute://history/?date={{prev_date.strftime("%Y-%m-%d")}}" rel="prev">Previous</a></span>
{% if today >= next_date %}
<span class="pagination-link"><a href="qute://history/?date={{next_date.strftime("%Y-%m-%d")}}" rel="next">Next</a></span>
{% endif %}
{% endblock %}