<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<div th:fragment="post-list">
    <main>
        <th:block th:if="${null != pageQuery}">
            <th:block th:each="post, iterStat : ${pageQuery.records}">
                <th:block th:with="postHasPassword=${!#strings.isEmpty(post.password)}">
                    <article th:class="${!postHasPassword}?'post index-page':'post index-page post-lock'">
                    <date class="post-date" 
                    th:text="${
                        #temporals.format(
                            T(java.time.LocalDate)
                                .of(
                                    #dates.year(post.createTime), 
                                    #dates.month(post.createTime), 
                                    #dates.day(post.createTime)), 
                            'MMMM d, yyyy',  
                            new java.util.Locale('en', 'US'))}"></date>
                        <header th:with="postStatistic=${@statisticsService.getPostStatistic(post, '###,###')}">
                            <th:block 
                                th:if="${!postHasPassword}">
                                <h2 class="post-title">
                                    <a th:href="@{${post.link}}" th:text="${post.postTitle}"></a>
                                </h2>
                                <div class="post-content"
                                th:utext="${@markdownService.renderPostPreface(post)}">
                                </div>
                                <div class="statistic">
                                    <p>
                                    <span title="阅读量" th:utext="${'&lt;i class=&quot;post-icon icon-eyes&quot;>&lt;/i> ' + postStatistic.viewCount}"></span>
                                    <a th:href="@{${post.link} + '#comment-page'}" title="评论数" th:utext="${'&lt;i class=&quot;post-icon icon-comment&quot;>&lt;/i> ' + postStatistic.commentCount}"></a>
                                    <span title="字数约" th:utext="${'&lt;i class=&quot;post-icon icon-character&quot;>&lt;/i> ' + postStatistic.wordCount}"></span>
                                    <span title="预计阅读时长" th:utext="${'&lt;i class=&quot;post-icon icon-time&quot;>&lt;/i> ' + postStatistic.readingTime}"></span>
                                    <span th:title="${postStatistic.remains == '0' ? '阅读全部' : ('阅读剩余 ' + postStatistic.remains + ' 字') }">
                                        <th:block th:if="${postStatistic.remains == '0'}">
                                            <i class="post-icon icon-read"></i>
                                            <a th:href="@{${post.link}}"> Read All</a>
                                        </th:block>
                                        <th:block th:if="${postStatistic.remains != '0'}">
                                            <i class="post-icon icon-remains"></i>
                                            <a th:href="@{${post.link}}" th:text="${' ' + postStatistic.remains + ' Words Remain'}"></a>
                                        </th:block>
                                    </span>
                                    </p>
                                </div>
                            </th:block>
                            <th:block th:if="${postHasPassword}">
                                <h2 class="post-title">
                                    <a th:href="@{${post.link}}" th:text="${'加密文章 ' + post.postId}"></a>
                                </h2>
                                <div class="post-content">
                                    这是一篇加密文章，请输入密码后查看
                                </div>
                                <div class="statistic">
                                    <p>
                                    <span title="阅读量" th:utext="${'&lt;i class=&quot;post-icon icon-eyes&quot;>&lt;/i> ' + postStatistic.viewCount}"></span>
                                    <span title="评论数" th:utext="${'&lt;i class=&quot;post-icon icon-comment&quot;>&lt;/i> ' + postStatistic.commentCount}"></span>
                                    <span title="字数约" th:utext="${'&lt;i class=&quot;post-icon icon-character&quot;>&lt;/i> ' + postStatistic.wordCount}"></span>
                                    <span title="预计阅读时长" th:utext="${'&lt;i class=&quot;post-icon icon-time&quot;>&lt;/i> ' + postStatistic.readingTime}"></span>
                                    <span title="阅读全部"><i class="post-icon icon-read"></i><a th:href="@{${post.link}}"> Read All</a></span>
                                    </p>
                                </div>
                            </th:block>
                        </header>
                    </article>
                </th:block>
            </th:block>
        </th:block>
        <th:block th:if="${null == pageQuery or pageQuery.total == 0}">
            <article class="post index-page">
                <header>
                    <div class="post-content">没有找到内容<br/>No result found.
                    </div>
                </header>
            </article>
        </th:block>
        <ol class="page-navigator">
            <th:block th:if="${pageQuery.pages >= 1}">
                <th:block th:if="${pageQuery.current > 2}">
                    <li>
                        <a th:href="@{${pageQuery.paginationPrefix} + 1}">1</a>
                    </li>
                    <li th:if="${pageQuery.current > 3}">
                        <span>...</span>
                    </li>
                </th:block>
                <th:block th:if="${pageQuery.pages > 1}" 
                    th:each="page : 
                        ${#numbers.sequence(
                            T(java.lang.Math).max(pageQuery.current - 1, 1L), 
                            T(java.lang.Math).min(pageQuery.current + 1, pageQuery.pages))}" >
                    <li th:class="${pageQuery.current == page}?current">
                        <a th:href="@{${pageQuery.paginationPrefix} + ${page}}" th:text="${page}"></a>
                    </li>
                </th:block>
                <th:block th:if="${pageQuery.current < pageQuery.pages - 1}">
                    <li th:if="${pageQuery.current < pageQuery.pages - 2}">
                        <span>...</span>
                    </li>
                    <li>
                        <a th:href="@{${pageQuery.paginationPrefix} + ${pageQuery.pages}}" th:text="${pageQuery.pages}"></a>
                    </li>
                </th:block>
            </th:block>
        </ol>
    </main>
</div>
</html>