---
import Layout from "../layouts/Layout.astro";
---

<Layout>
  <Fragment slot="head">
    <title th:text="|${category.spec.displayName} - ${site.title}|"></title>
  </Fragment>

  <div class="page-heading">
    <h1 th:text="${category.spec.displayName}"></h1>
    <p class="page-meta">
      <span th:text="|${posts.total} 篇文章|"></span>
    </p>
  </div>

  <ul class="post-feed__list" role="list">
    <li th:each="post : ${posts.items}" class="post-feed__item">
      <a class="post-feed__link" th:href="@{${post.status.permalink}}">
        <div class="post-feed__body">
          <p
            class="post-feed__date"
            th:text="${#dates.format(post.spec.publishTime, 'yyyy-MM-dd')}"
          >
          </p>
          <h2 class="post-feed__title" th:text="${post.spec.title}"></h2>
          <p class="post-feed__excerpt" th:text="${post.status.excerpt}"></p>
        </div>
        <img
          th:unless="${#strings.isEmpty(post.spec.cover)}"
          class="post-feed__image"
          th:src="${post.spec.cover}"
        />
      </a>
    </li>
  </ul>

  <div th:if="${posts.total == 0}" class="feed-empty">暂无文章。</div>

  <nav
    th:if="${posts.totalPages gt 1}"
    class="pagination"
    aria-label="Pagination"
  >
    <a
      th:if="${posts.hasPrevious()}"
      th:href="@{${posts.prevUrl}}"
      class="pagination__prev">&larr; 较新</a
    >
    <span
      class="pagination__info"
      th:text="|${posts.page} / ${posts.totalPages}|"></span>
    <a
      th:if="${posts.hasNext()}"
      th:href="@{${posts.nextUrl}}"
      class="pagination__next">较旧 &rarr;</a
    >
  </nav>
</Layout>