<style>
    .md-typeset .post:first-of-type h3 {
        margin-top: 0;
    }
    .md-typeset .post-title {
        margin-bottom: 0;
    }
    .md-typeset .post-extra {
        color: #777777aa;
    }
    .md-typeset .post-tags {
        float: right;
    }
    .md-typeset .pages > * {
        display: none;
    }
    .md-typeset .pages > :target,
    .md-typeset .pages {
        display: block;
    }
    .md-typeset .center {
        text-align: center;
    }
    .md-typeset .pagination {
        display: inline-block;
    }
    .md-typeset .pagination a {
        color: var(--md-typeset-color);
        float: left;
        padding: .25em 1em;
        text-decoration: none;
        border-radius: 1em;
        margin-left: .25em;
        margin-right: .25em;
        transition: all .15s ease-in-out;
    }
    .md-typeset .pagination a.active {
        background-color: var(--md-typeset-a-color);
        color: white;
        font-weight: bold;
    }
    .md-typeset .pagination a:hover:not(.active) {
        background-color: #dddddda1;
    }
    .md-typeset .nopaging {
        display: none;
    }
</style>


{% for p in pages %}
    {% set pg = p.page %}
{% endfor %}
{% set page_num = (pages|count / page_size)|round(method='ceil')|int %}
{% if page_num == 0 or not paging %}
    {% set page_num = 1 %}
    {% if not paging %}
        {% set page_size = 10000 %}
    {% endif %}
{% endif %}


<div class="pages">
{% for page_idx in range(0, page_num) %}
    {% set pg_group = pages[page_idx*page_size:(page_idx + 1)*page_size] %}
    <div class="page" id="page{{ page_idx + 1 }}">
    {% for pg in pg_group %}
    <div class="post">
    {% set title = pg.title %}
    {% if pg.meta and pg.meta.title_full %}
    {% set title = pg.meta.title_full %}
    {% endif %}
    <h3 class="post-title">
        <a class="link" href="{{ pg.canonical_url }}">{{ title }}</a>
    </h3>
    <p class="post-description">
        {% if pg.meta.description %}
        {{ pg.meta.description | truncate }}
        {% endif %}
    </p>
    <div class="post-extra">
        <span class="post-timestamp">
            {% if pg.meta and pg.meta["localized-time"] %}
            <span class="post-timestamp-update">
                Updated at: {{ pg.meta["localized-time"] -}}
            </span>
            {% endif %}
        </span>
    </div>
    <hr />
    </div>
    {% endfor %}
    </div>
{% endfor %}
</div>

<div class="center {{'nopaging' if page_num == 1 else '' }}">
    <div class="pagination " id="pagination">
    {% for num in range(page_num) %}
        <a class="page-number"
            href="#page{{ num + 1 }}">{{ num + 1 }}</a>
    {% endfor %}
    </div>
    <div>Total <b>{{ pages|count }}</b> posts.</div>
</div>
