<ul th:fragment="next (categories)" class="devcm-tree__nested">
  <li th:fragment="single (categories)" th:each="category : ${categories}" class="devcm-tree__node">
    <details class="devcm-tree-folder" open th:if="${not #lists.isEmpty(category.children)}">
      <summary class="devcm-tree__item devcm-tree__item--folder">
        <span class="devcm-tree__chev" aria-hidden="true"></span>
        <i class="devcm-tree__icon i-pixelarticons-folder"></i>
        <span th:text="${category.spec.displayName}">Category</span>
        <a
          class="devcm-tree__open"
          th:href="@{${category.status.permalink}}"
          th:title="#{devcm.action.open}"
          th:aria-label="#{devcm.action.openCategory}"
          >↗</a
        >
      </summary>
      <th:block th:replace="~{modules/category-tree :: next (categories=${category.children})}"></th:block>
    </details>
    <a
      class="devcm-tree__item"
      th:unless="${not #lists.isEmpty(category.children)}"
      th:href="@{${category.status.permalink}}"
    >
      <span class="devcm-tree__chev" aria-hidden="true"></span>
      <i class="devcm-tree__icon i-pixelarticons-folder"></i>
      <span th:text="${category.spec.displayName}">Category</span>
      <span
        class="devcm-tree__count"
        th:text="${category.status.visiblePostCount != null ? category.status.visiblePostCount : 0}"
        >0</span
      >
    </a>
  </li>
</ul>
