{#- Shared dashboard components, ported 1:1 from the Dragon shell.dr so dash.js / dg.js work
    unchanged. Import with:  {% import 'ui/kit.html' as kit %}

    cols are lists of (key, label) pairs. Row templates must emit <td data-col="key"> cells and a
    leading <td class="cb-col"><input type="checkbox" class="cb" value="ID"></td> for bulk select. -#}

{% macro search_svg() %}<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>{% endmacro %}

{#- search (left) + filters + spacer + selection actions + Columns menu. Pass filters /
    selactions as already-rendered HTML strings (e.g. from a {% set x %}...{% endset %} block). -#}
{% macro toolbar(tkey, placeholder, cols, filters='', selactions='', q='') %}
<div class="toolbar" data-toolbar="{{ tkey }}">
  <div class="search-inline">{{ search_svg() }}<input class="q" type="search" placeholder="{{ placeholder }}" value="{{ q }}" oninput="dashList('{{ tkey }}')"></div>
  {{ filters|safe }}
  <div class="grow"></div>
  <div class="sel-actions" data-selbar="{{ tkey }}" hidden>
    <span class="sel-n">0 selected</span>
    {{ selactions|safe }}
    <button class="btn btn-sm btn-ghost" onclick="dashClear('{{ tkey }}')">Clear</button>
  </div>
  <div class="pos">
    <button class="btn" onclick="dashToggleCols(this)">Columns</button>
    <div class="pop" hidden><h4>Show columns</h4>
      {%- for key, label in cols %}
      <label class="col-item"><input type="checkbox" data-colkey="{{ key }}" data-tkey="{{ tkey }}" checked onchange="dashCol('{{ tkey }}','{{ key }}',this.checked)"><span>{{ label }}</span></label>
      {%- endfor %}
    </div>
  </div>
</div>
{% endmacro %}

{#- A <select data-filter> that dashList() picks up. options: list of (value, label). -#}
{% macro filter_select(tkey, name, options, selected='') %}
<select class="input sel" data-filter="{{ name }}" onchange="dashList('{{ tkey }}')">
  {%- for value, label in options %}<option value="{{ value }}"{{ ' selected' if value == selected else '' }}>{{ label }}</option>{% endfor %}
</select>
{% endmacro %}

{% macro pager(tkey, page, per, total) %}
{%- if total > 0 %}
{%- set pages = (total + per - 1) // per %}
{%- set frm = (page - 1) * per + 1 %}
{%- set to = [total, page * per]|min %}
{%- set lo = [1, page - 2]|max %}
{%- set hi = [pages, page + 2]|min %}
<div class="pagination">
  <div class="pg-info">Showing <b>{{ frm }}-{{ to }}</b> of <b>{{ total }}</b></div>
  <div class="pg-controls">
    <button {{ 'disabled' if page <= 1 else '' }} onclick="dashList('{{ tkey }}',{{ page - 1 }})">&lsaquo;</button>
    {%- if lo > 1 %}<button onclick="dashList('{{ tkey }}',1)">1</button>{% if lo > 2 %}<span class="pg-ellipsis">...</span>{% endif %}{% endif %}
    {%- for n in range(lo, hi + 1) %}<button class="{{ 'active' if n == page else '' }}" onclick="dashList('{{ tkey }}',{{ n }})">{{ n }}</button>{% endfor %}
    {%- if hi < pages %}{% if hi < pages - 1 %}<span class="pg-ellipsis">...</span>{% endif %}<button onclick="dashList('{{ tkey }}',{{ pages }})">{{ pages }}</button>{% endif %}
    <button {{ 'disabled' if page >= pages else '' }} onclick="dashList('{{ tkey }}',{{ page + 1 }})">&rsaquo;</button>
  </div>
</div>
{%- endif %}
{% endmacro %}

{#- table-wrap + rows + pager: the swap target #list-<tkey>. Rows come from caller(). -#}
{% macro list(tkey, cols, page, per, total, empty='Nothing here yet.') %}
<div class="table-wrap">
  <table class="data" data-tkey="{{ tkey }}">
    <thead><tr>
      <th class="cb-col"><input type="checkbox" class="cb-all"></th>
      {%- for key, label in cols %}<th data-col="{{ key }}">{{ label }}</th>{% endfor %}
    </tr></thead>
    <tbody>
      {%- if total == 0 %}<tr><td class="empty" colspan="{{ cols|length + 1 }}">{{ empty }}</td></tr>
      {%- else %}{{ caller() }}{% endif %}
    </tbody>
  </table>
</div>
{{ pager(tkey, page, per, total) }}
{% endmacro %}

{#- A full list section. `add` is the header's right-side HTML (e.g. a "New" button). -#}
{% macro list_page(tkey, title, sub, add='', toolbar_html='', list_html='') %}
<div class="list-page" data-tkey="{{ tkey }}" data-fill>
  <div class="section-head pin"><div><h2>{{ title }}</h2><p class="sub">{{ sub }}</p></div>{{ add|safe }}</div>
  {{ toolbar_html|safe }}
  <div id="list-{{ tkey }}">{{ list_html|safe }}</div>
</div>
{% endmacro %}

{% macro modal(title, eyebrow='') %}
<div class="scrim" onclick="document.getElementById('modal').innerHTML=''">
  <div class="modal" onclick="event.stopPropagation()">
    <div class="modal-head"><div><div class="eyebrow">{{ eyebrow }}</div><h3>{{ title }}</h3></div>
      <button class="icon-btn" onclick="document.getElementById('modal').innerHTML=''">&times;</button></div>
    {{ caller() }}
  </div>
</div>
{% endmacro %}

{% macro drawer(eyebrow, title) %}
<div class="drawer-scrim" onclick="document.getElementById('drawer').innerHTML=''"></div>
<aside class="drawer">
  <div class="drawer-head"><div><div class="eyebrow">{{ eyebrow }}</div><h3>{{ title }}</h3></div>
    <button class="icon-btn" onclick="document.getElementById('drawer').innerHTML=''">&times;</button></div>
  <div class="drawer-body">{{ caller() }}</div>
</aside>
{% endmacro %}

{#- Emit after a save/delete so dg.js closes the modal / drawer out of band. -#}
{% macro close_modal() %}<div id="modal" data-dj-oob></div>{% endmacro %}
{% macro close_drawer() %}<div id="drawer" data-dj-oob></div>{% endmacro %}

{% macro kv(pairs) %}
<div class="kv kv-detail">{% for k, v in pairs %}<div class="k">{{ k }}</div><div class="v">{{ v }}</div>{% endfor %}</div>
{% endmacro %}

{% macro stat(id, value, label, tone='') %}
<div class="card"><div class="stat-n {{ tone }}" id="{{ id }}">{{ value }}</div><div class="stat-l">{{ label }}</div></div>
{% endmacro %}

{% macro chart_panel(title, sub, cid) %}
<div class="panel"><h3>{{ title }} <span class="panel-sub">{{ sub }}</span></h3><div class="chart" id="{{ cid }}"></div></div>
{% endmacro %}

{#- inline notice; dash.css has no toast, so use the login-err look via a .pill-toned banner -#}
{% macro flash(message, tone='ok') %}<div class="flash {{ tone }}" style="padding:10px 12px;margin:0 0 14px;border:1px solid var(--border);background:var(--surface-2)"><span class="pill {{ tone }}">{{ tone }}</span> {{ message }}</div>{% endmacro %}

{% macro active_pill(active) %}{% if active %}<span class="pill ok">active</span>{% else %}<span class="pill mut">inactive</span>{% endif %}{% endmacro %}