<!DOCTYPE html>
<html
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{modules/layout :: html(title = |#{page.category.title(${category.spec.displayName})} - ${site.title}|, pageType = 'category', terminalUserName = ${posts != null and posts.items != null and !#lists.isEmpty(posts.items) and posts.items[0].owner != null and !#strings.isEmpty(posts.items[0].owner.name) ? posts.items[0].owner.name : 'admin'}, content = ~{::content})}"
>
  <th:block th:fragment="content">
    <section class="devcm-editor-window">
      <div class="devcm-editor-tabs">
        <div class="devcm-editor-tab devcm-editor-tab--active">
          <span th:text="${category.spec.displayName} + '.md'">category.md</span>
          <a
            class="devcm-editor-tab__close"
            href="#"
            th:href="${!#strings.isEmpty(site.routes.categoriesUri) ? site.routes.categoriesUri : '/categories'}"
            th:aria-label="#{devcm.action.closeCategoryTab}"
            th:title="#{devcm.action.closeCategoryTab}"
            >×</a
          >
        </div>
      </div>
      <div class="devcm-editor-body">
        <h1 class="devcm-page-title">
          <span th:text="#{devcm.taxonomy.categoryTitle(${category.spec.displayName})}">Category</span>
          <small
            th:text="#{devcm.taxonomy.postCount(${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0})}"
            >(0 posts)</small
          >
        </h1>
        <div class="devcm-post-stack">
          <th:block th:each="post,iterStat : ${posts.items}">
            <th:block th:replace="~{modules/post-card :: post-card(post=${post}, featured=${iterStat.index == 0})}" />
          </th:block>
        </div>
      </div>
    </section>

    <div class="pagination" th:if="${posts.hasPrevious() || posts.hasNext()}">
      <div class="pagination__buttons">
        <span class="button previous" th:if="${posts.hasPrevious()}">
          <a th:href="@{${posts.prevUrl}}">
            <span class="button__icon"><</span>
            <span class="button__text" th:text="#{devcm.pagination.previous}">Previous</span>
          </a>
        </span>
        <span class="button next" th:if="${posts.hasNext()}">
          <a th:href="@{${posts.nextUrl}}">
            <span class="button__text" th:text="#{devcm.pagination.next}">Next</span>
            <span class="button__icon">></span>
          </a>
        </span>
      </div>
    </div>
  </th:block>
</html>
