<div class="post-list" th:fragment="list(posts, caller)">
  <th:block th:replace="~{modules/order-toggle :: toolbar}" />

  <menu class="posts-container proper-height">
    <th:block th:each="post,iterStat : ${posts.items}">
      <article class="article-card card" th:style="'--delay: ' + ${iterStat.index * 0.05} + 's'">
        <a th:href="${post.status.permalink}">
          <img
            th:if="${not #strings.isEmpty(post.spec.cover)}"
            th:src="${post.spec.cover}"
            th:srcset="|${thumbnail.gen(post.spec.cover, 's')} 400w, ${thumbnail.gen(post.spec.cover, 'm')} 800w|"
            sizes="(max-width: 528px) 400px, 800px"
            class="article-cover"
            loading="lazy"
            th:alt="${post.spec.title}"
          />
          <!-- DEBUG: default_cover=[[${theme.config.post.default_cover}]], cover=[[${post.spec.cover}]], isEmpty=[[${#strings.isEmpty(post.spec.cover)}]] -->
          <div
            th:if="${#strings.isEmpty(post.spec.cover) and theme.config.post.default_cover}"
            class="article-cover default-cover"
          >
            <span class="default-cover-title" th:text="${post.spec.title}"></span>
          </div>
        </a>

        <div class="article-body">
          <h2 class="article-title text-creative">
            <a th:href="${post.status.permalink}" th:text="${post.spec.title}"></a>
            <th:block th:if="${post.spec.pinned}" th:insert="~{modules/common/pinned-icon :: pinned-icon}" />
          </h2>

          <p th:if="${post.status.excerpt}" class="article-description" th:text="${post.status.excerpt}"></p>

          <div class="article-info">
            <span class="info-item">
              <span class="icon-[ph--calendar-dots-bold]"></span>
              <time th:text="${#temporals.format(post.spec.publishTime, 'yyyy-MM-dd')}"></time>
            </span>

            <span
              th:if="${not #lists.isEmpty(post.categories)}"
              th:with="categoryData=${post.categories[0]}, categoryIcon=${categoryData.metadata?.annotations?.get('categoryIicon')}, categoryColor=${categoryData.metadata?.annotations?.get('color')}"
              class="info-item article-category"
              th:style="${#strings.isEmpty(categoryColor) ? null : '--category-color: ' + categoryColor}"
            >
              <img th:if="${not #strings.isEmpty(categoryIcon)}" th:src="${categoryIcon}" alt="" />
              <span th:if="${#strings.isEmpty(categoryIcon)}" class="icon-[ph--folder-bold]"></span>
              <a th:href="${categoryData.status.permalink}" th:text="${categoryData.spec.displayName}"></a>
            </span>

            <span class="info-item">
              <span class="icon-[ph--eye-bold]"></span>
              <span th:text="${post.stats.visit}">0</span>
            </span>

            <th:block th:if="${theme.config.style.show_post_author != false}">
              <th:block th:replace="~{modules/author-capsule :: capsule(author=${post.owner})}" />
            </th:block>
          </div>
        </div>
      </article>
    </th:block>
  </menu>

  <!-- 根据调用者选择不同的分页组件 -->
  <th:block th:if="${caller == 'category'}">
    <th:block th:replace="~{modules/pagination :: pagination(data=${posts})}" />
  </th:block>
  <th:block th:if="${caller == 'tag'}">
    <th:block th:replace="~{modules/pagination :: pagination(data=${posts})}" />
  </th:block>
  <th:block th:if="${caller == 'index'}">
    <th:block th:replace="~{modules/pagination :: pagination(data=${posts})}" />
  </th:block>
</div>
