<th:block th:fragment="layout(title, posts, thumbnail, backUrl, backText, icon, emptyText)">
  <div class="archive proper-height">
    <header class="archive-simple-header">
      <a th:href="${backUrl}" class="archive-back" th:title="'返回' + ${backText}">
        <span class="icon-[ph--arrow-left-bold]"></span>
        <span th:text="${backText}"></span>
      </a>
      <div class="archive-simple-info">
        <h1 class="archive-name"><span th:class="${icon}"></span><span th:text="${title}"></span></h1>
        <p class="archive-meta">共 <strong th:text="${posts.total}">0</strong> 篇文章</p>
      </div>
    </header>

    <menu class="archive-list">
      <li
        th:each="post,postStat : ${posts.items}"
        class="article-item"
        th:style="'--delay: ' + ${postStat.index * 0.03} + 's'"
      >
        <time th:text="${#temporals.format(post.spec.publishTime, 'MM/dd')}"></time>
        <a th:href="${post.status.permalink}" class="article-link gradient-card" th:title="${post.status.excerpt}">
          <span class="article-title" th:text="${post.spec.title}"></span>
          <th:block th:if="${post.spec.pinned}" th:insert="~{modules/common/pinned-icon :: pinned-icon}" />
          <img
            th:if="${post.spec.cover}"
            th:src="${post.spec.cover}"
            th:srcset="|${thumbnail.gen(post.spec.cover, 's')} 400w|"
            sizes="100px"
            class="article-cover"
            loading="lazy"
            th:alt="${post.spec.title}"
          />
        </a>
      </li>
    </menu>

    <div th:if="${#lists.isEmpty(posts.items)}" class="empty-state">
      <span class="icon-[ph--article-bold]"></span>
      <p th:text="${emptyText}"></p>
    </div>

    <th:block th:replace="~{modules/pagination :: pagination(data=${posts})}" />
  </div>
</th:block>
