<#include "layout/_include/head.ftl">
<@head title="归档 - ${blog_title!}"></@head>
<#include "layout/_include/container_head.ftl">
<#include "layout/_include/single_column_head.ftl">
<#include "layout/_include/side_nav.ftl">
<div ref="extraContainer" class="extra-container">
    <div class="pagination">
        <a id="globalBackToTop" class="pagination-action animated-visibility" href="#top"
           :class="{ invisible: scrollY == 0 }">
            <i class="material-icons pagination-action-icon">
                keyboard_arrow_up
            </i>
        </a>
        <@paginationTag method="archives" page="${posts.number}" total="${posts.totalPages}" display="3">
            <div class="pagination-indicator">
                    <span style="text-align: center">
                        ${posts.number+1}<br><div
                                style="display: inline-block; transform: rotate(-28deg)">-</div><br>${posts.totalPages!}
                    </span>
            </div>

            <#if pagination.hasPrev>
                <a class="pagination-action" href="${pagination.prevPageFullPath!}">
                    <i class="material-icons pagination-action-icon">
                        chevron_left
                    </i>
                </a>
            </#if>

            <#if pagination.hasNext>
                <a class="pagination-action" href="${pagination.nextPageFullPath!}">
                    <i class="material-icons pagination-action-icon">
                        chevron_right
                    </i>
                </a>
            </#if>
        </@paginationTag>
    </div>
</div>
<div ref="streamContainer" class="stream-container">
    <div class="post-list-container post-list-container-shadow">
        <#list posts.content as post>
            <a href="${post.fullPath!}" class="a-block">
                <div class="post-item-wrapper">
                    <div class="post-item post-item-no-gaps">
                        <div class="post-item-info-wrapper">
                            <div class="post-item-title">
                                ${post.title!}
                            </div>
                            <div class="post-item-meta">
                                ${post.createTime?string('yyyy-MM-dd')}
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </#list>
    </div>
    <#if posts?? && posts.totalPages gt 1>
        <@paginationTag method="archives" page="${posts.number}" total="${posts.totalPages}" display="3">

            <div class="pagination index-page">
                <#if pagination.hasPrev>
                    <a class="pagination-action" href="${pagination.prevPageFullPath!}" style="opacity: 1;">
                        <i class="material-icons pagination-action-icon">
                            chevron_left
                        </i>
                    </a>
                </#if>
                <div class="pagination-indicator"><span>${posts.number+1}/${posts.totalPages!}</span></div>
                <#if pagination.hasNext>
                    <a href="${pagination.nextPageFullPath!}" class="pagination-action" style="opacity: 1;">
                        <i class="material-icons pagination-action-icon">
                            chevron_right
                        </i>
                    </a>
                </#if>
            </div>
        </@paginationTag>
    </#if>

    <#include "layout/_include/single_column_footer.ftl">
</div>


<#include "layout/_include/container_tail.ftl">
<#include "layout/_include/tail.ftl">