{% macro page_shell(title, subtitle='', actions='') -%}
<div class="flex flex-col gap-4 rounded-3xl bg-white p-6 shadow-soft sm:flex-row sm:items-center sm:justify-between">
  <div>
    <h2 class="text-xl font-semibold">{{ title }}</h2>
    {% if subtitle %}<p class="mt-1 text-sm text-slate-500">{{ subtitle }}</p>{% endif %}
  </div>
  {% if actions %}<div>{{ actions | safe }}</div>{% endif %}
</div>
{%- endmacro %}

{% macro alert(message, tone='amber') -%}
<div class="rounded-2xl border px-4 py-3 text-sm shadow-soft {% if tone == 'rose' %}border-rose-200 bg-rose-50 text-rose-900{% elif tone == 'emerald' %}border-emerald-200 bg-emerald-50 text-emerald-900{% else %}border-amber-200 bg-amber-50 text-amber-900{% endif %}">
  {{ message }}
</div>
{%- endmacro %}

{% macro badge(text, tone='slate') -%}
<span class="rounded-full px-2.5 py-1 text-xs font-medium {% if tone == 'emerald' %}bg-emerald-50 text-emerald-700{% elif tone == 'rose' %}bg-rose-50 text-rose-700{% elif tone == 'amber' %}bg-amber-50 text-amber-700{% elif tone == 'sky' %}bg-sky-50 text-sky-700{% elif tone == 'brand' %}bg-brand-50 text-brand-700{% else %}bg-slate-100 text-slate-700{% endif %}">{{ text }}</span>
{%- endmacro %}

{% macro search_bar(action, q='', per_page=10, extra='') -%}
<form method="get" action="{{ action }}" class="flex flex-col gap-3 border-b border-slate-200 bg-slate-50/80 px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
  <div class="flex flex-1 gap-3">
    <input type="text" name="q" value="{{ q }}" placeholder="Search" class="w-full rounded-2xl border border-slate-300 bg-white px-4 py-2.5 text-sm" />
    <select name="per_page" class="rounded-2xl border border-slate-300 bg-white px-3 py-2.5 text-sm">
      {% for size in [10,15,25,50] %}
      <option value="{{ size }}" {% if per_page == size %}selected{% endif %}>{{ size }}/page</option>
      {% endfor %}
    </select>
    {% if extra %}{{ extra | safe }}{% endif %}
  </div>
  <div class="flex gap-2">
    <button type="submit" class="rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-700">Apply</button>
  </div>
</form>
{%- endmacro %}

{% macro empty_state(title, subtitle='') -%}
<div class="rounded-3xl border border-dashed border-slate-300 bg-white px-6 py-10 text-center text-slate-500 shadow-soft">
  <div class="text-sm font-semibold text-slate-700">{{ title }}</div>
  {% if subtitle %}<div class="mt-1 text-sm">{{ subtitle }}</div>{% endif %}
</div>
{%- endmacro %}

{% macro pagination(page_obj, base_url, query='') -%}
{% if page_obj and page_obj.pages > 1 %}
<div class="flex items-center justify-between border-t border-slate-200 bg-white px-4 py-3 text-sm text-slate-600">
  <div>Page {{ page_obj.page }} of {{ page_obj.pages }} • {{ page_obj.total }} records</div>
  <div class="flex items-center gap-2">
    {% if page_obj.has_prev %}
      <a href="{{ build_page_url(base_url, page_obj.page - 1, query) }}" class="rounded-xl border border-slate-300 px-3 py-2 hover:bg-slate-50">Previous</a>
    {% else %}
      <span class="rounded-xl border border-slate-200 px-3 py-2 text-slate-300">Previous</span>
    {% endif %}
    {% if page_obj.has_next %}
      <a href="{{ build_page_url(base_url, page_obj.page + 1, query) }}" class="rounded-xl border border-slate-300 px-3 py-2 hover:bg-slate-50">Next</a>
    {% else %}
      <span class="rounded-xl border border-slate-200 px-3 py-2 text-slate-300">Next</span>
    {% endif %}
  </div>
</div>
{% endif %}
{%- endmacro %}