{{- $name := .Get "name" -}}
{{- $state := .Get "state" | default "open" }}

<li class="hx-group hx-flex hx-list-none hx-flex-col">
  <button class="hextra-filetree-folder hx-inline-flex hx-cursor-pointer hx-items-center hx-py-1 hover:hx-opacity-60">
    <span data-state="{{ $state }}" class="data-[state=open]:hx-hidden">
    </span>
    <span data-state="{{ $state }}" class="data-[state=closed]:hx-hidden">
    </span>
    <span class="ltr:hx-ml-1 rtl:hx-mr-1">{{ $name }}</span>
  </button>
  <ul data-state="{{ $state }}" class="ltr:hx-pl-5 rtl:hx-pr-5 data-[state=closed]:hx-hidden">
    {{- .Inner -}}
  </ul>
</li>