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

<th:block th:fragment="post-list"
          th:with='postItems=${posts.items},
          postRandomImg=${#strings.contains(theme.config.layout.postRandomImg,"?") ? theme.config.layout.postRandomImg : theme.config.layout.postRandomImg+"?"}'>

    <!-- card，需要添加在没有图片时使用随机图片 -->
    <div class="recent-post-item"
         th:classappend="${theme.config.layout.post.cols} + ' ' +
         ${theme.config.layout.post.postLocation} + ' ' +
         (${iStat.even} ? 'even' : 'odd') +
         (${post.spec.pinned} ? 'pinned-post-item' : '')"
         th:each="post,iStat : ${postItems}">

        <div class="post_cover left_radius">
            <a th:attr="title=${post.spec.title}" th:href="@{${post.status.permalink}}">
                <img class="post_bg entered loaded" loading="lazy"
                     th:alt="${post.spec.title}"
                     th:src='${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'>
            </a>
        </div>
        <!-- 类别非空时 -->
        <th:block th:if="${not #lists.isEmpty(post.categories)}">
            <span class="article-meta__categories">
                <a class="article-meta__category"
                   th:each="category : ${post.categories}"
                   th:href="@{${category.status.permalink}}"
                   th:text="${category.spec.displayName}"
                   th:title="${category.spec.displayName}">
                </a>
            </span>
        </th:block>
        <div class="recent-post-info">
            <div class="recent-post-info-top">
                <span class="pinned-post" th:if="${post.spec.pinned}">置顶</span>
                <a class="article-title"
                   th:attr="title=${post.spec.title}"
                   th:href="@{${post.status.permalink}}"
                   th:text="${post.spec.title}">
                </a>
                <div class="content" th:if="${theme.config.post.summarize}" th:text="${post.status.excerpt}"></div>
            </div>


            <div class="article-meta-wrap">
                <!-- tag -->
                <th:block th:if="${not #lists.isEmpty(post.tags)}">
                    <span class="article-meta tags">
                        <a class="article-meta__tags" event.cancelbubble
                           onclick="window.event.cancelBubble=!0"
                           th:each="tag : ${post.tags}"
                           th:href="@{${tag.status.permalink}}"
                           th:title="${tag.spec.displayName}">
                            <span class="tags-punctuation">[[${#strings.trim(tag.spec.displayName)}]]</span>
                        </a>
                    </span>
                </th:block>
                <!-- 创建时间 -->
                <span class="post-meta-date" th:with="days=${(new java.util.Date().getTime()-post.spec.publishTime.toEpochMilli())/86400000}">
                    <i class="far fa-calendar-alt"></i>
                    <time style="display: inline;"
                          th:datetime="${post.spec.publishTime}"
                          th:if="${days > 30}"
                          th:text="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}"
                          th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
                    </time>
                    <time style="display: inline;"
                          th:datetime="${post.spec.publishTime}"
                          th:if="${days <= 30 && days > 0}"
                          th:text="${days}+天前"
                          th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
                    </time>
                    <time style="display: inline;"
                          th:datetime="${post.spec.publishTime}"
                          th:if="${days == 0}"
                          th:text="最近"
                          th:title="${#dates.format(post.spec.publishTime,'yyyy-MM-dd')}+创建">
                    </time>
                </span>
            </div>
        </div>

        <!-- 文章卡片擦亮效果 -->
        <style th:if="${theme.config.layout.articleCardPolish}">
            #recent-posts > .recent-post-item:not(a)::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 200%;
                background: linear-gradient(to right, transparent, white, transparent);
                transform: translateX(-200%);
                transition: transform 0.5s linear;
                z-index: 1;
            }
            #recent-posts > .recent-post-item:not(a):hover::before {
                transform: translateX(100%) skewX(-60deg);
            }
        </style>
    </div>

    <!-- 分页 -->
    <div th:replace="~{modules/widgets/page :: page('',${posts})}"></div>

</th:block>

</html>
