{# Reusable list-page chrome (header, segments, search + filters + per-page + pagination).
   Consumed by every dashboard list page. Keeps markup + query-param
   wiring in ONE place so the look/behaviour stays consistent.

   Macros:
     list_header(title, eyebrow, total, total_label, subtitle, actions)
     segments(base_url, items, active_key, search_value, filters, extra_params)
     list_controls(base_url, search_value, ..., filters, per_page, ...)
     list_pagination(base_url, page, per_page, total, ...)

   `filters` is a list of:
     {name, label, value, options: [(value, label), ...]}

   `extra_params` is a flat dict of additional query params to preserve
   on pagination links (e.g. ?status= on Patterns).
#}

{% macro list_header(title, eyebrow=None, total=None, total_label='total', subtitle=None, actions=[]) %}
<div class="page-header">
  <div>
    {% if eyebrow %}<div class="page-header__eyebrow">{{ eyebrow }}</div>{% endif %}
    <h1 class="page-header__title">
      {{ title }}
      {% if total is not none %}
        <span class="muted tabular" style="font-size: var(--fs-lg); font-weight: 500;">· {{ total }} {{ total_label }}</span>
      {% endif %}
    </h1>
    {% if subtitle %}<p class="page-header__subtitle">{{ subtitle }}</p>{% endif %}
  </div>
  {% if actions %}
  <div class="row" style="gap: var(--space-2); flex-shrink: 0;">
    {% for action in actions %}
      {% if action.method == 'post' %}
        <form method="post" action="{{ action.href }}" style="margin:0;">
          <button type="submit" class="btn {{ action.tone or 'is-ghost' }} is-sm">
            {% if action.icon %}{{ icon(action.icon) }}{% endif %}<span>{{ action.label }}</span>
          </button>
        </form>
      {% else %}
        <a href="{{ action.href }}" class="btn {{ action.tone or 'is-ghost' }} is-sm">
          {% if action.icon %}{{ icon(action.icon) }}{% endif %}<span>{{ action.label }}</span>
        </a>
      {% endif %}
    {% endfor %}
  </div>
  {% endif %}
</div>
{% endmacro %}

{% macro segments(base_url, items, active_key, search_value='', filters=[], extra_params={}) %}
{# Tab-style segmented control. items = [(key, label, count_or_none)]. #}
{% set base_qs = [] %}
{% if search_value %}{% set _ = base_qs.append('q=' ~ search_value) %}{% endif %}
{% for flt in filters %}{% if flt.value %}{% set _ = base_qs.append(flt.name ~ '=' ~ flt.value) %}{% endif %}{% endfor %}
{% for k, v in extra_params.items() %}{% if v %}{% set _ = base_qs.append(k ~ '=' ~ v) %}{% endif %}{% endfor %}
{% set base_qs_str = '&'.join(base_qs) %}
<div class="segments" role="tablist" aria-label="Status segments">
  {% for key, label, count in items %}
    {% set href = base_url ~ '?' ~ (('status=' ~ key) if key else 'status=all') %}
    {% if base_qs_str %}{% set href = href ~ '&' ~ base_qs_str %}{% endif %}
    <a href="{{ href }}"
       role="tab"
       aria-selected="{{ 'true' if key == active_key else 'false' }}"
       class="segments__item {{ 'is-active' if key == active_key else '' }}">
      <span>{{ label }}</span>
      {% if count is not none %}<span class="segments__count tabular">{{ count }}</span>{% endif %}
    </a>
  {% endfor %}
</div>
{% endmacro %}

{% macro list_controls(base_url, search_value='', search_placeholder='Search…', filters=[], per_page=50, per_page_options=[25, 50, 100, 200], reset_label='Reset', show_per_page=True) %}
<form class="panel list-chrome" method="get" action="{{ base_url }}" role="search"
      data-live-filter
      style="margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4);">
  <div class="row is-wrap" style="gap: var(--space-3);">
    <label class="stack is-tight" style="flex: 1 1 280px;">
      <span class="muted" style="font-size: var(--fs-sm);">Search</span>
      <input type="search" name="q" value="{{ search_value }}"
             placeholder="{{ search_placeholder }}" autocomplete="off"
             style="width: 100%;" />
    </label>
    {% for flt in filters %}
    <label class="stack is-tight">
      <span class="muted" style="font-size: var(--fs-sm);">{{ flt.label }}</span>
      <select name="{{ flt.name }}">
        {% for opt_value, opt_label in flt.options %}
        <option value="{{ opt_value }}" {% if (flt.value or '')|string == opt_value|string %}selected{% endif %}>{{ opt_label }}</option>
        {% endfor %}
      </select>
    </label>
    {% endfor %}
    {% if show_per_page %}
    <label class="stack is-tight">
      <span class="muted" style="font-size: var(--fs-sm);">Per page</span>
      <select name="per_page">
        {% for opt in per_page_options %}
        <option value="{{ opt }}" {% if per_page == opt %}selected{% endif %}>{{ opt }}</option>
        {% endfor %}
      </select>
    </label>
    {% endif %}
    <div class="row list-chrome__actions" style="align-self: end; gap: var(--space-2);">
      <button type="submit" class="btn is-primary is-sm list-chrome__apply">
        {{ icon('arrow-right') }}<span>Apply</span>
      </button>
      <a href="{{ base_url }}" class="btn is-ghost is-sm">
        {{ icon('refresh-cw') }}<span>{{ reset_label }}</span>
      </a>
    </div>
  </div>
</form>
{% endmacro %}

{% macro list_pagination(base_url, page, per_page, total, search_value='', filters=[], extra_params={}, shown=None) %}
{% if total > per_page %}
{% set last_page = ((total - 1) // per_page) + 1 %}
{% set prev_page = page - 1 if page > 1 else 0 %}
{% set next_page = page + 1 if page < last_page else 0 %}
{% set base_qs = [] %}
{% if search_value %}{% set _ = base_qs.append('q=' ~ search_value) %}{% endif %}
{% if per_page %}{% set _ = base_qs.append('per_page=' ~ per_page) %}{% endif %}
{% for flt in filters %}{% if flt.value %}{% set _ = base_qs.append(flt.name ~ '=' ~ flt.value) %}{% endif %}{% endfor %}
{% for k, v in extra_params.items() %}{% if v %}{% set _ = base_qs.append(k ~ '=' ~ v) %}{% endif %}{% endfor %}
{% set base_qs_str = '&'.join(base_qs) %}
<div class="row is-between" style="margin-top: var(--space-4);">
  <div class="muted" style="font-size: var(--fs-sm);">
    Page {{ page }} of {{ last_page }}
    {% if shown is not none %}· showing {{ shown }} of {{ total }}{% else %}· {{ total }} total{% endif %}
  </div>
  <div class="row" style="gap: var(--space-2);">
    {% if prev_page %}
    <a class="btn is-ghost is-sm" href="{{ base_url }}?{{ base_qs_str }}&page={{ prev_page }}">← Prev</a>
    {% endif %}
    {% if next_page %}
    <a class="btn is-ghost is-sm" href="{{ base_url }}?{{ base_qs_str }}&page={{ next_page }}">Next →</a>
    {% endif %}
  </div>
</div>
{% elif total %}
<p class="muted" style="margin-top: var(--space-3); font-size: var(--fs-sm);">
  Showing {{ total }} row(s).
</p>
{% endif %}
{% endmacro %}