<ul id="filters" class="flex flex-wrap gap-2">
  <li>
    <a
      href="/"
      class="inline-flex h-9 cursor-pointer items-center rounded px-3 font-medium text-gray-500 transition-all hover:bg-gray-100 hover:text-gray-900 hover:shadow-sm dark:text-slate-200 dark:hover:bg-slate-700 dark:hover:text-slate-50"
      th:classappend="${_templateId == 'index'} ? '!text-gray-900 !bg-gray-100 dark:!bg-slate-700 dark:!text-slate-50'"
    >
      <span class="truncate text-base" th:text="#{common.all}"> </span>
    </a>
  </li>
  <th:block th:with="categories = ${categoryFinder.listAsTree()}">
    <li
      x-data="dropdown"
      @mouseenter="open()"
      @mouseleave="close()"
      class="relative cursor-pointer transition-all"
      th:each="categoryItem,categoryStat : ${categories}"
    >
      <div
        class="group inline-flex h-9 cursor-pointer items-center gap-1 overflow-hidden rounded font-medium text-gray-500 transition-all hover:bg-gray-100 hover:text-gray-900 hover:shadow-sm dark:text-slate-200 dark:hover:bg-slate-700 dark:hover:text-slate-50"
        th:classappend="(${category} and ${category.metadata.name == categoryItem.metadata.name}) or (not ${category} and ${categoryStat.index == 0} and ${_templateId == 'categories'}) ? '!text-gray-900 !bg-gray-100 dark:!bg-slate-700 dark:!text-slate-50'"
      >
        <a
          class="truncate px-3 text-base"
          th:href="@{${categoryItem.status.permalink}}"
          th:text="${categoryItem.spec.displayName}"
          th:classappend="${#lists.isEmpty(categoryItem.children) ? '' : '!pr-1'}"
        >
        </a>
        <button
          th:if="${not #lists.isEmpty(categoryItem.children)}"
          @click="open()"
          class="h-full px-2 text-lg group-hover:bg-gray-200 dark:group-hover:bg-slate-600"
        >
          <span
            class="i-tabler-chevron-right block transition-all duration-300"
            x-bind:class="show ? 'rotate-90' : ''"
          ></span>
        </button>
      </div>

      <ul
        th:if="${not #lists.isEmpty(categoryItem.children)}"
        @mouseenter="open()"
        @mouseleave="close()"
        x-show="show"
        x-cloak
        x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="transform opacity-0 scale-95"
        x-transition:enter-end="transform opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75"
        x-transition:leave-start="transform opacity-100 scale-100"
        x-transition:leave-end="transform opacity-0 scale-95"
        class="absolute left-0 z-10 mt-2 w-60 overflow-hidden rounded bg-white p-2 shadow dark:bg-slate-800"
      >
        <li th:replace="~{modules/category-tree :: single(categories=${categoryItem.children})}" />
      </ul>
    </li>
  </th:block>
</ul>
