{% from "_macros.html" import icon %}
{#
  The Chat/Agent switch, the folder tree and the unfiled chats.

  Its own partial because it is rendered from two places: the sidebar on every
  page, and `POST /api/preferences/sidebar-kind` when the switch is flicked.
  Pinned models stay above it in `sidebar.html` -- they start a chat of either
  kind and are not part of what is being switched.

  The switch is INSIDE the swapped fragment on purpose. Targeting only the tree
  would leave the two buttons showing the side you just left, which is the same
  class of failure as a control whose verb goes somewhere the event does not:
  the request works and the interface says otherwise. Each button keeps a stable
  id so htmx puts focus back on the one that was pressed.

  `sidebar_kind` is narrowed already: `sidebar_context` drops a folder holding
  nothing of this kind at any depth, so the heading below cannot appear above
  nothing. It is still passed down to `_folder.html`, which needs it for its own
  contents and for the children it recurses into.
#}
<div id="sidebar-tree">
  {% if sidebar_split %}
  {#
    The same component the new-chat screen uses to pick a kind, which is the
    same choice in a different place. The verb goes on the input, not on the
    wrapper: `change` fires on the control and bubbles through its DOM
    ancestors, and htmx binds its listener to the annotated element itself.

    `hx-vals` rather than relying on the input's own value being collected --
    the two radios are not inside a form, so what htmx would gather is worth
    not depending on.
  #}
  <div class="segmented segmented--grow" role="group" aria-label="Which chats to show">
    {% for option, label, glyph in [("chat", "Chats", "chat"), ("agent", "Agents", "terminal")] %}
    <label class="segmented__option">
      <input type="radio" name="sidebar_kind" value="{{ option }}"
             id="sidebar-kind-{{ option }}"
             {{ 'checked' if sidebar_kind == option }}
             hx-post="/api/preferences/sidebar-kind"
             hx-vals='{"kind": "{{ option }}"}'
             hx-trigger="change"
             hx-target="#sidebar-tree" hx-swap="outerHTML">
      <span>{{ icon(glyph, "icon--sm") }} {{ label }}</span>
    </label>
    {% endfor %}
  </div>
  {% endif %}

  {#
    "New chat" becomes "New agent chat" with the switch, and it lives above the
    scroll area rather than inside this fragment -- so it comes along out of
    band. Only when this is the fragment response: on a full page load the row
    is already rendered in its own place, and a second copy marked
    `hx-swap-oob` would be a stray element sitting in the tree.
  #}
  {% if oob %}
    {% with oob = true %}
      {% include "partials/_sidebar_actions.html" %}
      {% include "partials/_sidebar_pinned.html" %}
    {% endwith %}
  {% endif %}

  {% if folders %}
  <div class="nav-group">
    <div class="nav-group__label">Folders</div>
    {% for folder in folders %}
      {% include "partials/_folder.html" %}
    {% endfor %}
  </div>
  {% endif %}

  <div class="nav-group">
    <div class="nav-group__label">
      {{ "Agent chats" if sidebar_kind == "agent" else "Chats" }}
    </div>
    {% if unfiled_chats %}
      {% for chat_item in unfiled_chats %}
        {% include "partials/_chat_link.html" %}
      {% endfor %}
    {% else %}
      <p class="nav-empty">
        {%- if sidebar_kind == "agent" -%}
          No agent chats yet. Nothing is stirring out there.
        {%- else -%}
          No chats yet. The road begins here.
        {%- endif -%}
      </p>
    {% endif %}
  </div>
</div>