{#- chirp-ui: App shell layout — extends chirp shell with ChirpUI structure

    Use this for persistent app shells (topbar, sidebar). Extends chirp/layouts/shell.html
    and fills in ChirpUI CSS, toast, and app shell structure.

    Usage:
        {% extends "chirpui/app_shell_layout.html" %}
        {% block brand %}My App{% end %}
        {% block sidebar %}
          {% from "chirpui/sidebar.html" import sidebar, sidebar_link, sidebar_section, shell_brand_link %}
          {% call sidebar() %}
            {% call sidebar_section("Main") %}
              {{ sidebar_link("/", "Home") }}
              {{ sidebar_link("/dashboard", "Dashboard") }}
            {% end %}
          {% end %}
        {% end %}
        {% block content %}
          Page content here
        {% end %}

    Collapsible sidebar (override block with "true"):
        {% block sidebar_collapsible %}{% end %}

    Custom brand (override brand_link for non-/ href or custom markup):
        {% block brand_link %}{% call shell_brand_link(href="/projects") %}My App{% end %}{% end %}

    Alpine: Chirp injects Alpine.js via AppConfig(alpine=True) or automatically
    when use_chirp_ui() is called.  This layout does NOT load Alpine itself —
    Chirp is the single authority for Alpine injection.

    Full-height main (chat, maps): override {% block main_shell_class %} with
    chirpui-app-shell__main--fill so #page-content receives flex:1 and inner
    panels handle scroll. See docs/LAYOUT-VERTICAL.md.

    HTMX: primary #main swap runs before out-of-band fragments; a beforeSwap
    handler clears #chirp-shell-actions when the response includes shell-actions
    OOB (see docs/UI-LAYERS.md).
-#}
{# target: body #}
{% extends "chirp/layouts/shell.html" %}

{% block head %}
{% if csrf_token is defined %}
<meta name="csrf-token" content="{{ csrf_token() }}">
{% end %}
<link rel="stylesheet" href="/static/chirpui.css">
<link rel="stylesheet" href="/static/chirpui-transitions.css">
<script>
(function(){var t=localStorage.getItem("chirpui-theme")||"system";var s=localStorage.getItem("chirpui-style")||"default";document.documentElement.setAttribute("data-theme",t);document.documentElement.setAttribute("data-style",s);})();
</script>
{% block head_extra %}{% end %}
{% end %}

{% block shell %}
{% from "chirpui/sidebar.html" import sidebar, sidebar_toggle, shell_brand_link %}
{% from "chirpui/shell_actions.html" import shell_actions_bar %}
{% from "chirpui/toast.html" import toast_container %}
{% set _sidebar_collapsible = "false" %}
{% set _collapsible = _sidebar_collapsible and _sidebar_collapsible != "false" %}
{% set _shell_actions = shell_actions | default(none) %}
{% set _shell_actions_target = _shell_actions.target if _shell_actions else "chirp-shell-actions" %}
<div class="chirpui-app-shell{{ " chirpui-app-shell--sidebar-collapsible" if _collapsible else "" }}"
     x-data="{ collapsible: {{ 'true' if _collapsible else 'false' }}, collapsed: localStorage.getItem('chirpui-sidebar-collapsed') === 'true', toggle() { this.collapsed = !this.collapsed; localStorage.setItem('chirpui-sidebar-collapsed', this.collapsed); } }"
     :class="{ 'chirpui-app-shell--sidebar-collapsed': collapsible && collapsed }">
  <header class="chirpui-app-shell__topbar">
    {% if _collapsible %}<div class="chirpui-app-shell__topbar-start">{{ sidebar_toggle() }}</div>{% endif %}
    {% block brand_link %}
    {% call shell_brand_link() %}
      {% block brand %}{% end %}
    {% end %}
    {% end %}
    <div class="chirpui-app-shell__topbar-center">{% block topbar_center %}{% end %}</div>
    <div class="chirpui-app-shell__topbar-end">
      <div id="{{ _shell_actions_target }}" class="chirpui-app-shell__shell-actions">
        {% if _shell_actions %}
        {{ shell_actions_bar(_shell_actions) }}
        {% end %}
      </div>
      {% block topbar_end %}{% end %}
    </div>
  </header>
  <aside class="chirpui-app-shell__sidebar">{% block sidebar %}{% end %}</aside>
  <main id="main" class="chirpui-app-shell__main{% block main_shell_class %}{% end %}" tabindex="-1"
        hx-boost="true" hx-target="#main" hx-swap="innerHTML" hx-select="#page-content">
    <div id="page-content">
      {% block content %}{% end %}
    </div>
  </main>
</div>
<script>
document.body.addEventListener("htmx:configRequest", function(event) {
  var meta = document.querySelector('meta[name="csrf-token"]');
  if (meta) { event.detail.headers["X-CSRF-Token"] = meta.content; }
});
(function() {
  var S = "chirpui-sidebar__link--active";
  var N = "chirpui-navbar__link--active";
  function syncNav() {
    var p = location.pathname;
    document.querySelectorAll(".chirpui-sidebar__link, .chirpui-navbar__link").forEach(function(a) {
      var h = a.getAttribute("href");
      if (!h || h.startsWith("http")) return;
      var m = h === "/" ? p === "/" : (p === h || p.startsWith(h + "/"));
      var c = a.classList.contains("chirpui-sidebar__link") ? S : N;
      a.classList.toggle(c, m);
      if (m) { a.setAttribute("aria-current", "page"); }
      else { a.removeAttribute("aria-current"); }
    });
  }
  document.body.addEventListener("htmx:pushedIntoHistory", syncNav);
  document.body.addEventListener("htmx:replacedInHistory", syncNav);
})();
(function () {
  function responseUpdatesShellActionsOob(xhr) {
    if (!xhr || !xhr.responseText) return false;
    var body = xhr.responseText;
    return body.indexOf("chirp-shell-actions") !== -1 && body.indexOf("hx-swap-oob") !== -1;
  }
  document.body.addEventListener("htmx:beforeSwap", function (e) {
    var t = e.detail && e.detail.target;
    if (!t || t.id !== "main") return;
    if (!responseUpdatesShellActionsOob(e.detail.xhr)) return;
    var shell = document.getElementById("chirp-shell-actions");
    if (shell) shell.replaceChildren();
  });
})();
document.body.addEventListener("htmx:afterSwap", function(e) {
  var t = e.detail && e.detail.target;
  if (t && t.id === "main") { t.scrollTo({top: 0}); }
});
document.body.addEventListener("htmx:afterSettle", function(e) {
  var t = e.detail && e.detail.target;
  if (!t || t.id !== "main") return;
  t.focus({preventScroll: true});
  var pc = document.getElementById("page-content");
  if (pc) { t.classList.toggle("chirpui-app-shell__main--fill", !!pc.querySelector(":scope > .chirpui-page-fill")); }
});
</script>
{{ toast_container() }}
{% block page_scripts %}{% end %}
{% end %}