{% macro scrim(href, get="/overlay/close") -%}
    <a class="overlay__scrim"
       href="{{ href }}"
       {% if not standalone %}hx-get="{{ get }}" hx-target="#overlay"{% endif %}
       aria-label="Close"></a>
{%- endmacro %}
{% macro closer(href, get="/overlay/close", label="✕", klass="panel__close") -%}
    <a class="{{ klass }}"
       href="{{ href }}"
       {% if not standalone %}hx-get="{{ get }}" hx-target="#overlay"{% endif %}
       aria-label="Close">{{ label }}</a>
{%- endmacro %}
{% macro dot(tone="grey", small=false) -%}
    <span class="dot tone-{{ tone }}{{ " dot--sm" if small }}"></span>
{%- endmacro %}
{% macro chip(label, tone="grey", mono=false, dotted=false) -%}
    <span class="chip tone-{{ tone }}{{ " chip--mono" if mono }}">
        {% if dotted %}{{ dot(tone, small=true) }}{% endif %}{{ label }}
    </span>
{%- endmacro %}
{% macro pill(label, tone="grey") -%}
    <span class="pill tone-{{ tone }}">{{ label }}</span>
{%- endmacro %}
{% macro tag(label, tone="grey") -%}
    <span class="tag tone-{{ tone }}">{{ label }}</span>
{%- endmacro %}
{% macro count(label, tone="grey") -%}
    <span class="count tone-{{ tone }}">{{ label }}</span>
{%- endmacro %}
{% macro badge(label) -%}
    <span class="badge">{{ label }}</span>
{%- endmacro %}
{% macro button(label, href, overlay=false) -%}
    <a class="button"
       href="{{ href }}"
       {% if overlay %}hx-get="{{ href }}" hx-target="#overlay"{% endif %}>{{ label }}</a>
{%- endmacro %}
{% macro filter(label, href, active=false, target="#page") -%}
    <a class="filter{{ " filter--active" if active }}"
       href="{{ href }}"
       hx-get="{{ href }}"
       hx-target="{{ target }}"
       hx-push-url="true">{{ label }}</a>
{%- endmacro %}
{% macro search(placeholder, name, href, target="#page") -%}
    <input class="search"
           type="search"
           name="{{ name }}"
           placeholder="{{ placeholder }}"
           hx-get="{{ href }}"
           hx-target="{{ target }}"
           hx-trigger="input changed delay:300ms"
           hx-push-url="true">
{%- endmacro %}
{% macro tile(spec, value=none) -%}
    <div class="tile">
        <div class="tile__head">
            {{ dot(spec.tone) }}
            <span class="tile__label">{{ spec.label }}{% if spec.qualifier %} · {{ spec.qualifier }}{% endif %}</span>
        </div>
        <div class="tile__value">
            {% if value %}
                <span class="tile__number">{{ value.number }}</span>
                {% if value.note %}<span class="tile__note">{{ value.note }}</span>{% endif %}
            {% endif %}
        </div>
    </div>
{%- endmacro %}
{% macro tiles(specs, values) -%}
    <div class="tiles">{% for spec in specs %}{{ tile(spec, values.get(spec.key)) }}{% endfor %}</div>
{%- endmacro %}
{% macro page_header(page, subtitle="") -%}
    <header class="page-header">
        <div>
            <h1 class="page-header__title">{{ page.heading or page.title }}</h1>
            {% if subtitle %}<p class="page-header__subtitle">{{ subtitle }}</p>{% endif %}
        </div>
        {% if page.chip or page.action %}
            <div class="page-header__actions">
                {% if page.chip %}{{ chip(page.chip.label, page.chip.tone, dotted=true) }}{% endif %}
                {% if page.action %}{{ button(page.action.label, page.action.href, page.action.overlay) }}{% endif %}
            </div>
        {% endif %}
    </header>
{%- endmacro %}
{% macro footer_note(note) -%}
    <div class="card__footer">{{ note }}</div>
{%- endmacro %}
{% macro column_header(columns) -%}
    <thead>
        <tr>
            {% for column in columns %}<th>{{ column }}</th>{% endfor %}
        </tr>
    </thead>
{%- endmacro %}
{% macro icon_open() -%}
    <svg width="14"
         height="14"
         viewBox="0 0 16 16"
         fill="none"
         stroke="currentColor"
         stroke-width="1.5"
         aria-hidden="true">
        <path d="M9 2h5v5M14 2 7.5 8.5M12 9.5V13a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3.5" />
    </svg>
{%- endmacro %}
{% macro icon_info() -%}
    <svg width="14"
         height="14"
         viewBox="0 0 16 16"
         fill="none"
         stroke="currentColor"
         stroke-width="1.5"
         aria-hidden="true">
        <circle cx="8" cy="8" r="6.25" />
        <path d="M8 7.25V11M8 5v.01" />
    </svg>
{%- endmacro %}