{% 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">
      {# Start a chat already filed here, and already carrying whatever the
         folder seeds. Without this the only way into a folder is to make the
         chat somewhere else and move it. #}
      <a class="btn btn--icon btn--sm" href="/chat?folder={{ folder.id }}"
         aria-label="New chat in this folder" title="New chat here">
        {{ icon("plus", "icon--sm") }}
      </a>
      <button class="btn btn--icon btn--sm" type="button"
              hx-patch="/api/folders/{{ folder.id }}" hx-swap="none"
              data-prompt="What should this folder be called?"
              data-prompt-title="Rename folder" data-prompt-field="name"
              data-prompt-value="{{ folder.name }}"
              aria-label="Rename folder" title="Rename folder">
        {{ icon("pencil", "icon--sm") }}
      </button>
      <a class="btn btn--icon btn--sm" href="/folders/{{ folder.id }}"
         aria-label="Folder settings" title="Folder settings">
        {{ icon("sliders", "icon--sm") }}
      </a>
      <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>
    {# Bound once: the loop and the "Empty" check must be looking at the same
       list, or a folder holding only archived chats claims to be empty while
       showing them. Narrowed by the sidebar's switch, so a folder shows one
       kind at a time -- a folder is free to hold both. #}
    {% set listed = folder.visible_chats(sidebar_kind | default("")) %}
    {% set shown = folder.visible_children(sidebar_kind | default("")) %}

    {% for child in shown %}
      {% with folder = child %}
        {% include "partials/_folder.html" %}
      {% endwith %}
    {% endfor %}

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

    {% if not shown and not listed %}
    <p class="nav-empty">Empty</p>
    {% endif %}
  </div>
</div>