{# =============================================================================
   Plan 60/61 — Apple HIG component macros. Phase 2 agents compose pages from
   these primitives. Visual tokens live in static/css/tailwind.input.css;
   this file just stamps consistent markup.

   Quick reference:
     button(text, kind='primary', size='md', icon='', type='button', attrs='', extra_class='')
     badge(text, kind='neutral', icon='')
     input(name, label='', type='text', value='', placeholder='', required=False, attrs='')
     select(name, label='', options=[], value='', required=False, attrs='')
     textarea(name, label='', value='', placeholder='', rows=3, required=False, attrs='')
     card(title='', subtitle='', kind='default', extra_class='', footer='')
     page_header(title, subtitle='', actions=None, eyebrow='',
                 help_anchor='', help_label='',
                 kebab_items=None, step=None, step_total=None)
     section_header(title, action_label='', action_href='', help='')
     stat(label, value, hint='', delta='', delta_kind='neutral')
     empty_state(title, description, icon='', icon_path='', action_label='', action_href='')
     pagination(state, per_page_options=[25, 50, 100], extra_class='')
     modal(show, close, width='max-w-md', padding='p-6')
     drawer(show, close, width='max-w-2xl')
     tooltip(label, position='top', icon='circle-help', extra_class='')      ← Plan 61/2a
     help_popover(title, body_html, position='bottom')                       ← Plan 61/2a

   Backwards-compatible aliases retained on `button` and `badge` so the
   pre-Plan-60 (variant=…) callers keep working. Don't remove until Phase 2
   has rewritten every page that still uses the legacy spelling.

   Plan 61/2a additions:
     - `tooltip()` — inline hover/focus help icon for jargon (≤120 chars).
     - `help_popover()` — click-triggered popover for longer copy.
     - `page_header()` — `help_anchor` adds a `?` icon next to the H1 that
       links to `/admin/help/<anchor>`; `kebab_items` adds a "…" menu for
       secondary actions; `step`/`step_total` render a "Step N of M" eyebrow
       (wizard chrome — used by Wave 2b add-machine/setup wizards).
============================================================================= #}

{# ─────────────────────── button ───────────────────────
   kinds: primary / secondary / ghost / danger
   sizes: sm (28px) / md (36px) / lg (40px)
   Legacy alias: variant=… still accepted (mapped to kind). #}
{% macro button(text, kind='primary', size='md', icon='', type='button', attrs='', extra_class='', variant=None) %}
{% set _kind = variant if variant else kind %}
{% set _kind = {'default': 'secondary'}.get(_kind, _kind) %}
<button type="{{ type }}" class="btn btn-{{ _kind }} btn-{{ size }} {{ extra_class }}" {{ attrs|safe }}>
  {% if icon %}<i data-lucide="{{ icon }}" class="w-3.5 h-3.5"></i>{% endif %}
  {{ text }}
</button>
{% endmacro %}

{# ─────────────────────── badge ───────────────────────
   kinds: success / warning / danger / info / neutral
   Legacy variants (default/green/blue/yellow/red) map onto the new kinds
   so existing call sites keep rendering. #}
{% macro badge(text, kind='neutral', icon='', variant=None) %}
{% set _alias = {
  'default': 'neutral',
  'green':   'success',
  'blue':    'info',
  'yellow':  'warning',
  'amber':   'warning',
  'red':     'danger',
} %}
{% set _kind = _alias.get(variant or kind, variant or kind) %}
<span class="badge badge-{{ _kind }}">
  {% if icon %}<i data-lucide="{{ icon }}" class="w-3 h-3"></i>{% endif %}
  {{ text }}
</span>
{% endmacro %}

{# ─────────────────────── input ─────────────────────── #}
{% macro input(name, label='', type='text', value='', placeholder='', required=False, attrs='', help='') %}
<div class="space-y-1.5">
  {% if label %}
  <label for="{{ name }}" class="block text-caption text-ink-500">
    {{ label }}{% if required %}<span class="text-red-400 ml-0.5">*</span>{% endif %}
  </label>
  {% endif %}
  <input
    id="{{ name }}"
    name="{{ name }}"
    type="{{ type }}"
    value="{{ value }}"
    placeholder="{{ placeholder }}"
    {% if required %}required{% endif %}
    class="input"
    {{ attrs|safe }}
  >
  {% if help %}<p class="text-footnote">{{ help }}</p>{% endif %}
</div>
{% endmacro %}

{# ─────────────────────── select ─────────────────────── #}
{% macro select(name, label='', options=[], value='', required=False, attrs='') %}
<div class="space-y-1.5">
  {% if label %}
  <label for="{{ name }}" class="block text-caption text-ink-500">
    {{ label }}{% if required %}<span class="text-red-400 ml-0.5">*</span>{% endif %}
  </label>
  {% endif %}
  <select
    id="{{ name }}"
    name="{{ name }}"
    {% if required %}required{% endif %}
    class="input"
    {{ attrs|safe }}
  >
    {% for opt in options %}
    <option value="{{ opt.value }}" {% if opt.value == value %}selected{% endif %} {% if opt.disabled %}disabled{% endif %}>
      {{ opt.label }}
    </option>
    {% endfor %}
  </select>
</div>
{% endmacro %}

{# ─────────────────────── textarea ─────────────────────── #}
{% macro textarea(name, label='', value='', placeholder='', rows=3, required=False, attrs='') %}
<div class="space-y-1.5">
  {% if label %}
  <label for="{{ name }}" class="block text-caption text-ink-500">
    {{ label }}{% if required %}<span class="text-red-400 ml-0.5">*</span>{% endif %}
  </label>
  {% endif %}
  <textarea
    id="{{ name }}"
    name="{{ name }}"
    rows="{{ rows }}"
    placeholder="{{ placeholder }}"
    {% if required %}required{% endif %}
    class="input font-mono"
    {{ attrs|safe }}
  >{{ value }}</textarea>
</div>
{% endmacro %}

{# ─────────────────────── card ───────────────────────
   kinds: default / elevated / compact / roomy
   - default: padded with section header + body
   - compact: tighter padding (12px) for dense lists / side panels
   - roomy:   page-level container (24px) — wraps tables, hero content
   - elevated: adds soft mac-style shadow on top of default sizing #}
{% macro card(title='', subtitle='', kind='default', extra_class='', footer='') %}
{% set _is_compact = kind == 'compact' %}
{% set _is_roomy   = kind == 'roomy' %}
{% set _is_elev    = kind == 'elevated' %}
{% set _body_pad = 'px-3 py-3' if _is_compact else ('px-6 py-5' if _is_roomy else 'px-5 py-4') %}
{% set _head_pad = 'px-3 py-2.5' if _is_compact else ('px-6 py-4' if _is_roomy else 'px-5 py-4') %}
<div class="card {% if _is_elev %}card-elevated{% endif %} overflow-hidden {{ extra_class }}">
  {% if title %}
  <div class="{{ _head_pad }} border-b border-white/[0.06]">
    <h3 class="text-headline text-ink-100">{{ title }}</h3>
    {% if subtitle %}<p class="text-footnote mt-1">{{ subtitle }}</p>{% endif %}
  </div>
  {% endif %}
  <div class="{{ _body_pad }}">
    {{ caller() }}
  </div>
  {% if footer %}
  <div class="{{ _head_pad }} border-t border-white/[0.06]">
    {{ footer|safe }}
  </div>
  {% endif %}
</div>
{% endmacro %}

{# ─────────────────────── page_header ───────────────────────
   Top-of-page title + subtitle + right-aligned action buttons.
   `actions` is a list of dicts:
     [{'label': 'Refresh', 'kind': 'secondary', 'icon': 'refresh-cw', 'attrs': '@click="load()"'},
      {'label': '+ New fleet', 'kind': 'primary', 'attrs': '@click="open=true"'}]
   `eyebrow` is the tiny label above the title (e.g. "Workspace").

   Plan 61/2a extensions:
   - `help_anchor` (str) — slug under `/admin/help/<slug>`. Renders a
     small `circle-help` icon next to the H1; click opens the doc in a
     new tab. Empty string = no icon.
   - `help_label` (str) — aria-label override; defaults to "Help for
     this page".
   - `kebab_items` (list[dict]) — secondary actions hidden under a
     "more-horizontal" menu. Each item: `{'label', 'href', 'icon'}`.
   - `step`, `step_total` (int) — when both set, render a "Step N of M"
     eyebrow line. Wave 2b wizards (add-machine / setup) use this. #}
{% macro page_header(title, subtitle='', actions=None, eyebrow='',
                    help_anchor='', help_label='',
                    kebab_items=None, step=None, step_total=None) %}
<div class="flex items-end justify-between gap-4 flex-wrap mb-6">
  <div class="min-w-0">
    {% if step is not none and step_total is not none %}
      <p class="text-caption text-ink-500 mb-1">
        Step <span class="text-ink-300 font-mono">{{ step }}</span>
        of <span class="text-ink-300 font-mono">{{ step_total }}</span>
        {% if eyebrow %} · {{ eyebrow }}{% endif %}
      </p>
    {% elif eyebrow %}
      <p class="text-caption text-ink-500 mb-1">{{ eyebrow }}</p>
    {% endif %}
    <div class="flex items-center gap-2">
      <h1 class="text-display text-ink-100">{{ title }}</h1>
      {% if help_anchor %}
      <a href="/admin/help/{{ help_anchor }}" target="_blank" rel="noopener"
         class="inline-flex items-center justify-center w-6 h-6 rounded-md text-ink-500 hover:text-ink-200 hover:bg-white/[0.04] transition-colors"
         aria-label="{{ help_label or 'Help for this page' }}"
         title="{{ help_label or 'Open help for this page' }}">
        <i data-lucide="circle-help" class="w-4 h-4"></i>
      </a>
      {% endif %}
    </div>
    {% if subtitle %}<p class="text-body text-ink-400 mt-2">{{ subtitle }}</p>{% endif %}
  </div>
  {% if actions or kebab_items %}
  <div class="flex items-center gap-2 flex-shrink-0">
    {% if actions %}
      {% for a in actions %}
        {% if a.href %}
          <a href="{{ a.href }}" class="btn btn-{{ a.kind|default('secondary') }} btn-{{ a.size|default('md') }}" {{ a.attrs|default('')|safe }}>
            {% if a.icon %}<i data-lucide="{{ a.icon }}" class="w-3.5 h-3.5"></i>{% endif %}
            {{ a.label }}
          </a>
        {% else %}
          <button type="{{ a.type|default('button') }}" class="btn btn-{{ a.kind|default('secondary') }} btn-{{ a.size|default('md') }}" {{ a.attrs|default('')|safe }}>
            {% if a.icon %}<i data-lucide="{{ a.icon }}" class="w-3.5 h-3.5"></i>{% endif %}
            {{ a.label }}
          </button>
        {% endif %}
      {% endfor %}
    {% endif %}
    {% if kebab_items %}
    <div x-data="{ open: false }" class="relative">
      <button type="button" @click="open = !open"
              class="btn btn-secondary btn-md"
              :aria-expanded="open.toString()"
              aria-label="More actions"
              aria-haspopup="menu">
        <i data-lucide="more-horizontal" class="w-3.5 h-3.5"></i>
      </button>
      <div x-show="open" x-cloak x-transition.opacity
           @click.outside="open = false"
           @keydown.escape.window="open = false"
           role="menu"
           class="absolute right-0 mt-1.5 min-w-[180px] rounded-lg bg-ink-950 border border-white/[0.08] shadow-2xl py-1 z-40">
        {% for item in kebab_items %}
        <a href="{{ item.href }}" role="menuitem"
           {% if item.target %}target="{{ item.target }}"{% endif %}
           class="flex items-center gap-2 px-3 py-1.5 text-[13px] text-ink-300 hover:text-ink-100 hover:bg-white/[0.04] transition-colors">
          {% if item.icon %}<i data-lucide="{{ item.icon }}" class="w-3.5 h-3.5"></i>{% endif %}
          {{ item.label }}
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}
  </div>
  {% endif %}
</div>
{% endmacro %}

{# ─────────────────────── section_header ───────────────────────
   Smaller header for sub-sections inside a page (e.g. "Recent activity").
   Optional inline action (text link with right-chevron). #}
{% macro section_header(title, action_label='', action_href='', help='') %}
<div class="flex items-center justify-between gap-3 mb-3">
  <div class="min-w-0">
    <h2 class="text-headline text-ink-100">{{ title }}</h2>
    {% if help %}<p class="text-footnote mt-0.5">{{ help }}</p>{% endif %}
  </div>
  {% if action_label %}
  <a href="{{ action_href }}" class="inline-flex items-center gap-1 text-footnote text-ink-300 hover:text-ink-100 transition-colors">
    {{ action_label }}
    <i data-lucide="chevron-right" class="w-3 h-3"></i>
  </a>
  {% endif %}
</div>
{% endmacro %}

{# ─────────────────────── stat ───────────────────────
   KPI tile: label + big tabular-number value + optional hint + delta chip.
   delta_kind: neutral / success / warning / danger. #}
{% macro stat(label, value, hint='', delta='', delta_kind='neutral') %}
<div class="card card-elevated p-5">
  <p class="text-caption text-ink-500">{{ label }}</p>
  <div class="flex items-baseline gap-2 mt-2">
    <span class="text-title text-ink-100 font-mono">{{ value }}</span>
    {% if delta %}
    <span class="badge badge-{{ delta_kind }}">{{ delta }}</span>
    {% endif %}
  </div>
  {% if hint %}<p class="text-footnote mt-2">{{ hint }}</p>{% endif %}
</div>
{% endmacro %}

{# ─────────────────────── empty_state ───────────────────────
   Centered illustration for empty tables / lists. Either `icon` (lucide
   name) or `icon_path` (raw SVG path). Optional CTA. #}
{% macro empty_state(title, description, icon='', icon_path='', action_label='', action_href='') %}
<div class="text-center py-12 px-6">
  {% if icon %}
  <i data-lucide="{{ icon }}" class="w-10 h-10 mx-auto text-ink-600 mb-4"></i>
  {% elif icon_path %}
  <svg class="w-10 h-10 mx-auto text-ink-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="{{ icon_path }}"></path>
  </svg>
  {% endif %}
  <h3 class="text-headline text-ink-200">{{ title }}</h3>
  <p class="text-footnote mt-1 max-w-md mx-auto">{{ description }}</p>
  {% if action_label %}
  <a href="{{ action_href }}" class="btn btn-secondary btn-md mt-4 inline-flex">
    {{ action_label }}
  </a>
  {% endif %}
</div>
{% endmacro %}

{# ─────────────────────── drawer ───────────────────────
   Plan 50 — right-side drawer chrome. Teleports to <body> so `fixed inset-0`
   is anchored to the viewport, not to a transformed ancestor.
   `show` is the Alpine expression that controls visibility (e.g. `drawer.open`);
   `close` is the JS run on backdrop click + ESC. #}
{% macro drawer(show, close, width='max-w-2xl') %}
<template x-teleport="body">
<div x-show="{{ show }}" x-cloak class="fixed inset-0 z-50">
  <div class="modal-backdrop" @click="{{ close }}"></div>
  <div class="absolute right-0 top-0 bottom-0 w-full {{ width }} bg-ink-950 border-l border-white/[0.08] shadow-2xl flex flex-col">
    {{ caller() }}
  </div>
</div>
</template>
{% endmacro %}

{# ─────────────────────── pagination ───────────────────────
   Plan 60 Phase 1.5 — universal pagination control.

   Renders an offset-mode bar (Prev | Page X of N | Next + per-page
   selector + "Items 51-100 of 829") OR a cursor-mode "Load more"
   button depending on `state.mode`.

   `state` is an Alpine reactive object built by `paginationState({...})`
   in `static/admin/shared/pagination-state.js`. Page-level components
   instantiate it, the macro just stamps the controls.

   When `state.total === 0` the macro renders nothing — the parent is
   expected to show an `empty_state` instead.

   Args:
     state            — Alpine expression naming the pagination state
                        object (e.g. "pagination" if the component holds
                        it as `this.pagination`).
     per_page_options — [25, 50, 100] by default.
     extra_class      — extra Tailwind classes on the outer container. #}
{% macro pagination(state, per_page_options=[25, 50, 100], extra_class='') %}
<div
  x-show="{{ state }}.total > 0 || {{ state }}.mode === 'cursor'"
  x-cloak
  class="border-t border-white/[0.06] px-4 py-3 flex items-center justify-between gap-3 flex-wrap {{ extra_class }}"
  @keydown.page-down.window="if (({{ state }}.mode === 'offset') && {{ state }}.hasNext) {{ state }}.nextPage()"
  @keydown.page-up.window="if (({{ state }}.mode === 'offset') && {{ state }}.hasPrev) {{ state }}.prevPage()"
>
  {# ── Offset mode ── #}
  <template x-if="{{ state }}.mode === 'offset'">
    <div class="flex items-center justify-between gap-3 flex-wrap w-full">
      <div class="flex items-center gap-3 text-footnote text-ink-400">
        <span x-show="!{{ state }}.loading" x-cloak>
          Items <span class="text-ink-200 font-mono" x-text="{{ state }}.rangeStart"></span>–<span class="text-ink-200 font-mono" x-text="{{ state }}.rangeEnd"></span>
          of <span class="text-ink-200 font-mono" x-text="{{ state }}.total"></span>
        </span>
        <span x-show="{{ state }}.loading" x-cloak class="inline-flex items-center gap-1.5">
          <i data-lucide="loader-2" class="w-3 h-3 animate-spin"></i>
          Loading…
        </span>
        <label class="inline-flex items-center gap-1.5">
          <span class="text-ink-500">Per page</span>
          <select
            class="input !py-1 !px-2 !text-footnote"
            aria-label="Rows per page"
            :value="{{ state }}.perPage"
            @change="{{ state }}.setPerPage($event.target.value)"
            @keydown.enter.prevent="{{ state }}.setPerPage($event.target.value)"
          >
            {% for n in per_page_options %}
            <option value="{{ n }}">{{ n }}</option>
            {% endfor %}
          </select>
        </label>
      </div>
      <div class="flex items-center gap-1.5">
        <button
          type="button"
          class="btn btn-secondary btn-sm"
          :disabled="!{{ state }}.hasPrev || {{ state }}.loading"
          @click="{{ state }}.prevPage()"
          aria-label="Previous page"
        >
          <i data-lucide="chevron-left" class="w-3 h-3"></i>
          Prev
        </button>
        <span class="text-footnote text-ink-400 px-2" aria-current="page">
          Page <span class="text-ink-200 font-mono" x-text="{{ state }}.page"></span>
          of <span class="text-ink-200 font-mono" x-text="{{ state }}.totalPages"></span>
        </span>
        <button
          type="button"
          class="btn btn-secondary btn-sm"
          :disabled="!{{ state }}.hasNext || {{ state }}.loading"
          @click="{{ state }}.nextPage()"
          aria-label="Next page"
        >
          Next
          <i data-lucide="chevron-right" class="w-3 h-3"></i>
        </button>
      </div>
    </div>
  </template>

  {# ── Cursor mode ── #}
  <template x-if="{{ state }}.mode === 'cursor'">
    <div class="flex items-center justify-center w-full">
      <button
        type="button"
        x-show="{{ state }}.hasMore"
        x-cloak
        class="btn btn-secondary btn-md"
        :disabled="{{ state }}.loading"
        @click="{{ state }}.loadMore()"
        aria-label="Load more rows"
      >
        <i x-show="{{ state }}.loading" x-cloak data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i>
        <span x-text="{{ state }}.loading ? 'Loading…' : 'Load more'"></span>
      </button>
      <span
        x-show="!{{ state }}.hasMore && {{ state }}.items.length > 0"
        x-cloak
        class="text-footnote text-ink-500"
      >End of list</span>
    </div>
  </template>
</div>
{% endmacro %}

{# ─────────────────────── modal ───────────────────────
   Plan 50/60 — centered modal chrome. Same teleport+backdrop pattern as
   `drawer()`. The inner card uses .modal-card for the lifted shadow +
   pop-in animation. #}
{% macro modal(show, close, width='max-w-md', padding='p-6') %}
<template x-teleport="body">
<div x-show="{{ show }}" x-cloak class="fixed inset-0 z-50 flex items-center justify-center p-4">
  <div class="modal-backdrop" @click="{{ close }}"></div>
  <div class="modal-card relative w-full {{ width }} {{ padding }}">
    {{ caller() }}
  </div>
</div>
</template>
{% endmacro %}

{# ─────────────────────── tooltip ───────────────────────
   Plan 61/2a — inline help affordance for jargon labels.
   `label` is plain text (cap at ~120 chars; use help_popover() for
   anything longer). Renders a small lucide icon; hover/focus shows a
   non-portal popover via .cmdop-tooltip CSS (tailwind.input.css).
   `position` is informational only (the CSS positions above; we leave
   the data attribute in case a future Alpine handler portals it).
   `icon` lets a caller swap "circle-help" for "info" when the affordance
   is informational rather than a question. #}
{% macro tooltip(label, position='top', icon='circle-help', extra_class='') %}
<span class="cmdop-tooltip {{ extra_class }}"
      tabindex="0"
      data-pos="{{ position }}"
      role="img"
      aria-label="{{ label|e }}">
  <i data-lucide="{{ icon }}" class="w-3.5 h-3.5 text-ink-500 hover:text-ink-300"></i>
  <span class="cmdop-tooltip-content" role="tooltip">{{ label }}</span>
</span>
{% endmacro %}

{# ─────────────────────── info_row ───────────────────────
   Plan 61/2b/W1 — single label-value line for the Machine Info tab.
   Renders a small staleness dot (green/amber/gray) when `stale` is
   one of those keys; `hint` is an optional tooltip-style suffix. #}
{% macro info_row(label, value, hint='', stale='') %}
<div class="flex items-baseline justify-between gap-3 py-1.5 border-b border-white/[0.04] last:border-b-0">
  <div class="flex items-center gap-2 min-w-0">
    {% if stale %}
      {% set _dot = 'bg-emerald-400' if stale == 'fresh'
                    else ('bg-amber-300' if stale == 'stale'
                          else 'bg-ink-500') %}
      <span class="w-1.5 h-1.5 rounded-full flex-shrink-0 {{ _dot }}" aria-hidden="true"></span>
    {% endif %}
    <span class="text-caption text-ink-500 truncate">{{ label }}</span>
  </div>
  <div class="text-footnote text-ink-200 font-mono text-right truncate max-w-[60%]">
    {{ value|safe }}{% if hint %} <span class="text-ink-500">· {{ hint }}</span>{% endif %}
  </div>
</div>
{% endmacro %}

{# ─────────────────────── help_popover ───────────────────────
   Plan 61/2a — click-triggered popover for longer help copy.
   `title` is the popover heading; `body_html` is rendered as raw HTML
   (Wave 2b passes pre-rendered markdown or includes a Jinja partial).
   `position` controls placement on screen ("bottom" | "top" | "right").
   Use this when tooltip() would exceed ~120 chars or when the help needs
   links / paragraphs. #}
{% macro help_popover(title, body_html, position='bottom') %}
<span x-data="{ open: false }" class="relative inline-flex">
  <button type="button"
          @click="open = !open"
          @click.outside="open = false"
          @keydown.escape.window="open = false"
          class="inline-flex items-center justify-center w-5 h-5 rounded-md text-ink-500 hover:text-ink-200 hover:bg-white/[0.04] transition-colors"
          aria-label="{{ title|e }}"
          :aria-expanded="open.toString()">
    <i data-lucide="circle-help" class="w-3.5 h-3.5"></i>
  </button>
  <div x-show="open" x-cloak x-transition.opacity
       role="dialog"
       aria-labelledby="help-popover-title"
       data-pos="{{ position }}"
       class="absolute z-40 mt-1.5 w-72 rounded-lg bg-ink-950/95 border border-white/[0.08] shadow-2xl p-3 text-footnote text-ink-200 backdrop-blur"
       :class="$el.dataset.pos === 'top' ? 'bottom-full mb-1.5 left-0'
            : ($el.dataset.pos === 'right' ? 'left-full ml-1.5 top-0'
            : 'top-full left-0')">
    <p id="help-popover-title" class="text-caption text-ink-100 mb-1">{{ title }}</p>
    <div class="text-ink-300 leading-snug">{{ body_html|safe }}</div>
  </div>
</span>
{% endmacro %}

{# ─────────────────────── collapsible_section ───────────────────────
   A card whose body collapses behind a clickable header — for secondary
   blocks that shouldn't dominate the page but must stay reachable.

   Usage:
     {% call collapsible_section('Recent activity', key='overview.activity',
                                 subtitle='last 15 events', open=False,
                                 right_html='<a …>View all</a>') %}
        …body…
     {% endcall %}

   - `key` (required) — localStorage slug so the open/closed choice sticks
     across loads (`cmdop:collapse:<key>`).
   - `open` — default state on first visit (before any saved choice).
   - `right_html` — optional markup pinned to the right of the header
     (e.g. a "View all" link or a count badge); clicks there don't toggle.
   - `icon` — optional lucide icon name shown before the title.
   Uses @alpinejs/collapse (loaded in base.html) for the height animation. #}
{% macro collapsible_section(title, key='', subtitle='', open=False, right_html='', icon='', extra_class='') %}
<div class="card overflow-hidden {{ extra_class }}"
     x-data="{ open: (localStorage.getItem('cmdop:collapse:{{ key }}') ?? '{{ 'open' if open else 'closed' }}') === 'open' }"
     x-init="$watch('open', v => localStorage.setItem('cmdop:collapse:{{ key }}', v ? 'open' : 'closed'))">
  <div class="px-5 py-4 flex items-center gap-3">
    <button type="button" @click="open = !open"
            class="flex items-center gap-2 flex-1 min-w-0 text-left group"
            :aria-expanded="open">
      <i data-lucide="chevron-right" class="w-3.5 h-3.5 text-ink-500 group-hover:text-ink-300 transition-transform duration-150 shrink-0"
         :class="open && 'rotate-90'"></i>
      {% if icon %}<i data-lucide="{{ icon }}" class="w-4 h-4 text-cmdop-400 shrink-0"></i>{% endif %}
      <span class="text-headline text-ink-100 truncate">{{ title }}</span>
      {% if subtitle %}<span class="text-footnote text-ink-500 truncate">{{ subtitle }}</span>{% endif %}
    </button>
    {% if right_html %}<div class="shrink-0">{{ right_html|safe }}</div>{% endif %}
  </div>
  <div x-show="open" x-collapse>
    <div class="px-5 pb-4 border-t border-white/[0.06] pt-4">
      {{ caller() }}
    </div>
  </div>
</div>
{% endmacro %}