<th:block th:fragment="items (items)">
  <th:block
    th:each="menuItem : ${items}"
    th:with="menuHref=${menuItem.status.href},
      menuTarget=${menuItem.spec.target?.value},
      menuExternal=${!#strings.isEmpty(menuHref) and (#strings.startsWith(menuHref, 'http://') or #strings.startsWith(menuHref, 'https://') or menuTarget == '_blank')}"
  >
    <details class="devcm-tree-folder" open th:if="${not #lists.isEmpty(menuItem.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="${menuItem.status.displayName}">Folder</span>
        <a
          class="devcm-tree__open devcm-tree__open--external"
          th:if="${menuExternal}"
          th:href="${menuHref}"
          th:target="${menuTarget}"
          rel="noopener noreferrer"
          th:title="#{devcm.action.open}"
          th:aria-label="#{devcm.action.openPage}"
        >
          <i class="i-pixelarticons-external-link"></i>
        </a>
        <a
          class="devcm-tree__open"
          th:unless="${menuExternal}"
          th:href="${menuHref}"
          th:target="${menuTarget}"
          th:title="#{devcm.action.open}"
          th:aria-label="#{devcm.action.openPage}"
        >
          <i class="i-pixelarticons-open"></i>
        </a>
      </summary>
      <div class="devcm-tree__nested">
        <th:block th:replace="~{modules/menu-tree :: items(items=${menuItem.children})}" />
      </div>
    </details>

    <a
      class="devcm-tree__item devcm-tree__item--external"
      th:if="${#lists.isEmpty(menuItem.children) and menuExternal}"
      th:href="${menuHref}"
      th:target="${menuTarget}"
      rel="noopener noreferrer"
    >
      <span class="devcm-tree__chev" aria-hidden="true"></span>
      <i class="devcm-tree__icon i-pixelarticons-external-link"></i>
      <span th:text="${menuItem.status.displayName}">Page</span>
    </a>

    <a
      class="devcm-tree__item"
      th:if="${#lists.isEmpty(menuItem.children) and !menuExternal}"
      th:href="${menuHref}"
      th:target="${menuTarget}"
    >
      <span class="devcm-tree__chev" aria-hidden="true"></span>
      <i class="devcm-tree__icon i-pixelarticons-file"></i>
      <span th:text="${menuItem.status.displayName}">Page</span>
    </a>
  </th:block>
</th:block>
