{% from "_macros.html" import icon %}
{#
  A folder and everything under it. Recursive: a folder includes this same
  template for each of its children, so nesting has no fixed depth limit.

  Open/closed state is local to the browser (Alpine), not persisted per
  request -- collapsing a folder should not cost a round trip.
#}
<div class="folder" x-data="{ open: {{ 'false' if folder.collapsed else 'true' }} }">
  <div class="nav-item folder__row">
    <button class="folder__toggle" type="button" @click="open = !open"
            :aria-expanded="open ? 'true' : 'false'">
      <span class="folder__chevron" :class="open && 'is-open'">
        {{ icon("chevron-right", "icon--sm") }}
      </span>
      <span x-show="open">{{ icon("folder-open", "icon--sm") }}</span>
      <span x-show="!open" x-cloak>{{ icon("folder", "icon--sm") }}</span>
      <span class="nav-item__label">{{ folder.name }}</span>
    </button>
    <span class="nav-item__actions">
      <button class="btn btn--icon btn--sm" type="button"
              hx-delete="/api/folders/{{ folder.id }}"
              hx-confirm="Delete the folder “{{ folder.name }}”? Chats inside it are kept."
              data-confirm-title="Delete folder"
              hx-swap="none"
              aria-label="Delete folder">
        {{ icon("trash", "icon--sm") }}
      </button>
    </span>
  </div>

  <div class="folder__contents" x-show="open" x-cloak>
    {% for child in folder.children %}
      {% with folder = child %}
        {% include "partials/_folder.html" %}
      {% endwith %}
    {% endfor %}

    {% for chat_item in folder.chats %}
      {% include "partials/_chat_link.html" %}
    {% endfor %}

    {% if not folder.children and not folder.chats %}
    <p class="nav-empty">Empty</p>
    {% endif %}
  </div>
</div>