<!DOCTYPE html>
<html
  xmlns:th="https://www.thymeleaf.org"
  th:replace="~{modules/layout :: html(title = |#{page.categories.title} - ${site.title}|, pageType = 'categories', terminalUserName = 'admin', content = ~{::content})}"
>
  <th:block th:fragment="content">
    <section class="devcm-terminal-window devcm-archive-hero">
      <div class="devcm-window-titlebar">
        <span class="devcm-window-dot"></span>
        <span class="devcm-window-dot"></span>
        <span class="devcm-window-dot"></span>
      </div>
      <div class="devcm-hero">
        <div class="devcm-hero__copy">
          <div class="devcm-prompt-line">
            <span th:text="|${terminalUser}@devcm:~$|">admin@devcm:~$</span>
            <span th:text="#{devcm.categories.command}">archive --view categories</span>
          </div>
          <h1 class="devcm-hero__title" th:text="#{devcm.categories.title}">Categories</h1>
          <p class="devcm-hero__desc" th:text="#{devcm.categories.description}">
            Browse posts by category and explore the site structure.
          </p>
        </div>
      </div>
    </section>

    <section class="devcm-category-grid">
      <a class="devcm-category-card" th:each="category : ${categories}" th:href="${category.status.permalink}">
        <h2>
          <i class="i-pixelarticons-folder"></i>
          <span th:text="${category.spec.displayName}">Category</span>
        </h2>
        <strong
          th:text="#{devcm.categories.articleCount(${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0})}"
          >0 articles</strong
        >
        <p th:if="${not #strings.isEmpty(category.spec.description)}" th:text="${category.spec.description}">
          Category description
        </p>
      </a>
    </section>
  </th:block>
</html>
