{# Invisible timed poller. Lives INSIDE the swapped fragment so its `url` is regenerated
   on every swap — that preserves the current sort/page/filters across live refreshes.
   CSP-safe (a plain `every Ns` trigger needs no eval; no `[expr]` filter is used). #}
{% macro live_poll(url, target, secs=10) -%}
<div class="live-poll" hx-get="{{ url }}" hx-target="{{ target }}" hx-swap="innerHTML"
     hx-trigger="every {{ secs }}s" hx-sync="this:replace" aria-hidden="true"></div>
{%- endmacro %}

{# Dashboard stat tile: a coloured icon square + number/label, optionally a link. #}
{% macro _stat_icon(name) -%}
{%- if name == 'targets' %}<rect x="2.5" y="3" width="11" height="4.2" rx="1"/><rect x="2.5" y="8.8" width="11" height="4.2" rx="1"/><line x1="5" y1="5.1" x2="5" y2="5.1"/><line x1="5" y1="10.9" x2="5" y2="10.9"/>
{%- elif name == 'enabled' %}<circle cx="8" cy="8" r="6.2"/><path d="M5.2 8.2 7.1 10 10.9 5.9"/>
{%- elif name == 'groups' %}<path d="M8 2.5 14 5.5 8 8.5 2 5.5z"/><path d="M2.5 8.6 8 11.3 13.5 8.6"/>
{%- elif name == 'tags' %}<path d="M2.6 2.6h5.1l5.7 5.7-5.1 5.1-5.7-5.7z"/><line x1="5.3" y1="5.3" x2="5.3" y2="5.3"/>
{%- elif name == 'schedules' %}<circle cx="8" cy="8" r="6.2"/><path d="M8 4.6V8l2.4 1.6"/>
{%- elif name == 'sets' %}<path d="M2.6 5.4h10.8v6.9a1 1 0 0 1-1 1H3.6a1 1 0 0 1-1-1z"/><path d="M2.2 4.1 3.4 2.6h9.2l1.2 1.5z"/><line x1="6.3" y1="8.4" x2="9.7" y2="8.4"/>
{%- elif name == 'files' %}<path d="M4.6 2.6h4.2L12 5.8V13a.5.5 0 0 1-.5.5H4.6a.5.5 0 0 1-.5-.5V3.1a.5.5 0 0 1 .5-.5z"/><path d="M8.8 2.7V6h3"/>
{%- elif name == 'size' %}<ellipse cx="8" cy="4.2" rx="5" ry="2"/><path d="M3 4.2v7.6c0 1.1 2.24 2 5 2s5-.9 5-2V4.2"/><path d="M3 8c0 1.1 2.24 2 5 2s5-.9 5-2"/>
{%- endif -%}
{%- endmacro %}

{% macro dstat(href, variant, num, label, icon) -%}
{% if href %}<a class="card stat stat-{{ variant }}" href="{{ href }}">{% else %}<div class="card stat stat-{{ variant }}">{% endif %}
  <span class="stat-ico"><svg viewBox="0 0 16 16" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{{ _stat_icon(icon) }}</svg></span>
  <span class="stat-body"><span class="num">{{ num }}</span><span class="lbl">{{ label }}</span></span>
{% if href %}</a>{% else %}</div>{% endif %}
{%- endmacro %}

{# Small coloured icon for a card heading (colour baked per name). #}
{% macro hicon(name) -%}
{%- set color = {'reach': 'info', 'system': 'accent', 'health': 'ok', 'latency': 'warn', 'runs': 'accent'}.get(name, 'muted') -%}
<svg class="hico hico-{{ color }}" viewBox="0 0 16 16" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
{%- if name == 'reach' %}<path d="M3.6 5.4a6 6 0 0 0 0 5.2"/><path d="M12.4 5.4a6 6 0 0 1 0 5.2"/><path d="M5.7 7a3 3 0 0 0 0 2"/><path d="M10.3 7a3 3 0 0 1 0 2"/><circle cx="8" cy="8" r="1"/>
{%- elif name == 'system' %}<path d="M1.5 8h2.8l1.8-4 3 8 1.8-4h3.6"/>
{%- elif name == 'health' %}<path d="M8 1.7 13 3.4V8c0 3.2-2.2 5-5 6.3C5.8 13 3.6 11.2 3.6 8V3.4z"/><path d="M5.9 8 7.4 9.5 10.3 6.2"/>
{%- elif name == 'latency' %}<path d="M2.5 12a6 6 0 1 1 11 0"/><path d="M8 9.6 11 6.6"/><circle cx="8" cy="11.2" r="0.8"/>
{%- elif name == 'runs' %}<line x1="5" y1="4.5" x2="13.5" y2="4.5"/><line x1="5" y1="8" x2="13.5" y2="8"/><line x1="5" y1="11.5" x2="13.5" y2="11.5"/><line x1="2.7" y1="4.5" x2="2.7" y2="4.5"/><line x1="2.7" y1="8" x2="2.7" y2="8"/><line x1="2.7" y1="11.5" x2="2.7" y2="11.5"/>
{%- endif -%}
</svg>
{%- endmacro %}

{# Render up to `limit` chips as links to the targets view filtered by that tag/group;
   collapse the remainder into a "+N" chip whose tooltip lists the overflow. #}
{% macro chips(items, limit=6, cls='') %}
{%- set kind = 'group' if 'group' in cls else 'tag' -%}
{%- for it in items[:limit] %}<a class="chip {{ cls }}" href="/targets?{{ kind }}={{ it|urlencode }}" title="Filter by {{ kind }} {{ it }}">{{ it }}</a>{% endfor -%}
{%- if items|length > limit %}<span class="chip more" title="{{ items[limit:]|join(', ') }}">+{{ items|length - limit }}</span>{%- endif -%}
{% endmacro %}

{# Capability chip for a group's allow_download / allow_restore tri-state. #}
{% macro cap_chip(val) -%}
{%- if val is none %}<span class="chip muted">inherit</span>
{%- elif val %}<span class="chip ok">allow</span>
{%- else %}<span class="chip bad">deny</span>{% endif -%}
{%- endmacro %}

{# Tag/member pill input. Renders a plain text input (works without JS); app.js enhances
   it into removable pills with autocomplete + create-on-the-spot from `suggest`. #}
{% macro tag_input(name, value, suggest, placeholder='add…') -%}
<div class="tag-input" data-suggest='{{ suggest|tojson }}' data-placeholder="{{ placeholder }}">
  <input class="tag-real" type="text" id="{{ name }}" name="{{ name }}" value="{{ value }}" autocomplete="off">
</div>
{%- endmacro %}

{% macro latency_cell(lat, hist=none) %}
{%- if lat is none %}<span class="muted">—</span>
{%- elif not lat.reachable %}<span class="bad">down</span>
{%- elif hist and (hist|reject('none')|list|length >= 2) %}<span class="lat-cell"><span class="spark" data-spark="{{ hist|tojson }}" title="{{ '%.1f ms'|format(lat.rtt_ms) if lat.rtt_ms is not none else 'up' }}"></span><span class="spark-val mono">{{ '%.1f'|format(lat.rtt_ms) if lat.rtt_ms is not none else '' }}</span></span>
{%- elif lat.rtt_ms is not none %}<span class="ok">{{ "%.1f"|format(lat.rtt_ms) }} ms</span>
{%- else %}<span class="ok">up</span>{% endif -%}
{% endmacro %}

{# Green check / red cross for an included-or-not state (e.g. a backup type in a run). #}
{% macro check_cross(val, yes='included', no='not included') -%}
{%- if val %}<span class="ok" title="{{ yes }}" aria-label="{{ yes }}">{{ _svg('<path d="M13.485 1.929a.75.75 0 0 1 0 1.06l-7.07 7.072a.75.75 0 0 1-1.061 0L1.515 6.222a.75.75 0 1 1 1.06-1.06l2.829 2.828 6.54-6.54a.75.75 0 0 1 1.06 0z"/>'|safe) }}</span>
{%- else %}<span class="bad" title="{{ no }}" aria-label="{{ no }}">{{ _svg('<path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06"/>'|safe) }}</span>{% endif -%}
{%- endmacro %}

{# Boolean state as an icon (styleguide: never render booleans as yes/no text). #}
{% macro bool_check(val, yes='Enabled', no='Disabled') -%}
{%- if val %}<span class="ok" title="{{ yes }}" aria-label="{{ yes }}">{{ _svg('<path d="M13.485 1.929a.75.75 0 0 1 0 1.06l-7.07 7.072a.75.75 0 0 1-1.061 0L1.515 6.222a.75.75 0 1 1 1.06-1.06l2.829 2.828 6.54-6.54a.75.75 0 0 1 1.06 0z"/>'|safe) }}</span>
{%- else %}<span class="muted" title="{{ no }}" aria-label="{{ no }}">{{ _svg('<path d="M3.5 7.25a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5z"/>'|safe) }}</span>{% endif -%}
{%- endmacro %}

{# A single tri-state status orb: blue (in a running job, takes precedence) overrides
   green (enabled) / red (disabled). Never more than one orb. #}
{% macro status_orb(enabled, active) -%}
{%- if active %}<span class="status-orb run" title="In a running job" aria-label="In a running job"></span>
{%- elif enabled %}<span class="status-orb on" title="Enabled" aria-label="Enabled"></span>
{%- else %}<span class="status-orb off" title="Disabled" aria-label="Disabled"></span>{% endif -%}
{%- endmacro %}

{# A unique device identifier (IP/host, RouterOS, firmware, serial, SSH fingerprint, token):
   a fixed-width value in a rounded, click-to-copy box (see .copyval / style-guide rule 15).
   `copy` overrides what's copied when it differs from what's shown (e.g. show fingerprint,
   copy the full public key). #}
{% macro copyval(value, label, copy=none) -%}
<button type="button" class="copyval" data-copy="{{ copy if copy is not none else value }}" data-copy-label="{{ label }}" title="Click to copy {{ label }}">{{ value }}</button>
{%- endmacro %}

{# A flat count rendered as a pill (grey rounded badge) for easier visual scanning; an
   optional href makes the pill itself the link. #}
{% macro count_pill(value, href=none, title=none) -%}
{%- if href %}<a class="count-pill" href="{{ href }}"{% if title %} title="{{ title }}"{% endif %}>{{ value }}</a>
{%- else %}<span class="count-pill"{% if title %} title="{{ title }}"{% endif %}>{{ value }}</span>{% endif -%}
{%- endmacro %}

{% macro backups_cell(r) %}
{%- if r.backups %}{{ count_pill(r.backups, '/backups/' ~ (r.name|urlencode)) }}
{%- else %}{{ count_pill(0) }}{% endif -%}
{% endmacro %}

{# ---- Row actions: compact TEXT buttons (styleguide rule 2). Colour-coded with the
   existing palette only — green = run/positive, red = edit/delete/restore (destructive
   or caution), neutral = benign (download/preview/browse). The element type + htmx/data
   attributes are preserved so behaviour (modal preview, confirm-delete) is unchanged. #}
{% macro _svg(paths) -%}
<svg viewBox="0 0 16 16" width="15" height="15" fill="currentColor" aria-hidden="true">{{ paths }}</svg>
{%- endmacro %}

{% macro icon_edit(href, label='Edit') -%}
<a class="btn sm act-edit" href="{{ href }}">{{ label }}</a>
{%- endmacro %}

{# Preview opens in the modal (app.js intercepts data-preview); href is the no-JS fallback. #}
{% macro icon_preview(href, label='Preview') -%}
<a class="btn sm" href="{{ href }}" data-preview="{{ href }}">{{ label }}</a>
{%- endmacro %}

{% macro icon_download(href, label='Download') -%}
<a class="btn sm" href="{{ href }}">{{ label }}</a>
{%- endmacro %}

{% macro icon_restore(href, label='Restore') -%}
<a class="btn sm act-danger" href="{{ href }}">{{ label }}</a>
{%- endmacro %}

{# Render a run/schedule scope as links: target -> its detail, group/tag -> filtered list. #}
{% macro scope_link(kind, value) -%}
{%- if not value %}<span class="muted">{{ kind }}</span>
{%- elif kind == 'target' %}{{ kind }}: <a class="mono" href="/targets/{{ value|urlencode }}">{{ value }}</a>
{%- elif kind == 'group' %}{{ kind }}: <a class="chip group" href="/targets?group={{ value|urlencode }}">{{ value }}</a>
{%- elif kind == 'tag' %}{{ kind }}: <a class="chip" href="/targets?tag={{ value|urlencode }}">{{ value }}</a>
{%- else %}{{ kind }}: <span class="mono">{{ value }}</span>{% endif -%}
{%- endmacro %}

{% macro icon_browse(href, label='Browse') -%}
<a class="btn sm" href="{{ href }}">{{ label }}</a>
{%- endmacro %}

{# Destructive delete: an htmx text button (hx-confirm shows a native confirm dialog; the
   CSRF token rides the body's hx-headers). The route returns an HX-Redirect. #}
{% macro icon_delete(action, confirm='Delete this? This cannot be undone.', label='Delete') -%}
<button type="button" class="btn sm act-danger" hx-post="{{ action }}" hx-confirm="{{ confirm }}">{{ label }}</button>
{%- endmacro %}

{# ---- Pagination (web spec: page-size selector + pager on every list) ----
   The page-size <select> lives in the page's filters form so its value persists
   across fragment swaps; the pager (prev/next) sits at the bottom of the rows
   fragment and hx-includes that same form so it carries every active filter. #}
{% macro pagesize(per) -%}
<select name="per" class="pagesize" aria-label="Rows per page" title="Rows per page">
  {% for s in [10, 25, 50, 100, 150, 200, 500] %}<option value="{{ s }}"{{ ' selected' if per == s }}>{{ s }} / page</option>{% endfor %}
</select>
{%- endmacro %}

{% macro pager(pg, base, target, pagebase, include='', extra='') -%}
{% if pg and pg.total %}
<nav class="pager" aria-label="Pagination">
  <span class="pager-info muted">{{ pg.start }}–{{ pg.end }} of {{ pg.total }}</span>
  {% if pg.pages > 1 %}
  <span class="pager-nav">
    {% if pg.page > 1 %}<a class="pager-btn" hx-get="{{ base }}?page={{ pg.page - 1 }}{{ extra }}" hx-include="{{ include }}" hx-target="{{ target }}" hx-swap="innerHTML" href="{{ pagebase }}?page={{ pg.page - 1 }}{{ extra }}" aria-label="Previous page">‹ Prev</a>{% else %}<span class="pager-btn disabled" aria-disabled="true">‹ Prev</span>{% endif %}
    <span class="pager-page mono">{{ pg.page }} / {{ pg.pages }}</span>
    {% if pg.page < pg.pages %}<a class="pager-btn" hx-get="{{ base }}?page={{ pg.page + 1 }}{{ extra }}" hx-include="{{ include }}" hx-target="{{ target }}" hx-swap="innerHTML" href="{{ pagebase }}?page={{ pg.page + 1 }}{{ extra }}" aria-label="Next page">Next ›</a>{% else %}<span class="pager-btn disabled" aria-disabled="true">Next ›</span>{% endif %}
  </span>
  {% endif %}
</nav>
{% endif %}
{%- endmacro %}