{%- macro accordion(content, title, open) -%}
    <details {{ ui.util.attrs(kwargs, {"class": "nsw-accordion__item"}) }} {{ "open" if open}}>
        <summary class="nsw-accordion__title">
            {{- title -}}
        </summary>
        <div class="nsw-accordion__content-wrap">
            <div class="nsw-accordion__content">
                {{- content -}}
            </div>
        </div>
    </details>
{%- endmacro %}

{%- macro button_group(content, direction="row") -%}
    <div {{ ui.util.attrs(kwargs, {"class": "nsw-button-group nsw-flex-" ~ direction}) }}>
        {{- content -}}
    </div>
{%- endmacro %}

{%- macro card(content) -%}
    {{ ui.nds_card(content, **kwargs) }}
{%- endmacro %}

{%- macro filters(content, form_id, instant, js=true, collapse_direction="down", title=_("Filters")) -%}
    {%- set class = "nsw-filters" -%}
    {%- if instant -%}
        {%- set class = class ~ " nsw-filters--instant" -%}
    {%- endif %}
    {%- if collapse_direction == "right" -%}
        {%- set class = class ~ " nsw-filters--right" -%}
    {%- endif %}
    {%- if collapse_direction == "down" -%}
        {%- set class = class ~ " nsw-filters--down" -%}
    {%- endif %}
    {%- if js -%}
        {%- set class = class ~ " js-filters" -%}
    {%- endif %}
    {%- set item_kwargs = kwargs -%}

    {%- call ui.util.call(ui.util.tag, "div" if form_id else "form", **ui.util.augment_attrs(item_kwargs, {"class": class})) -%}
        {%- if collapse_direction -%}
            <div class="nsw-filters__controls">
                <button>
                    <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">tune</span>
                    <span>{{ title }}</span>
                    <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">keyboard_arrow_{{ collapse_direction }}</span>
                </button>
            </div>
        {%- endif %}
        <div class="nsw-filters__wrapper">
            {%- if collapse_direction == "right" -%}
                <div class="nsw-filters__back">
                    <button class="nsw-icon-button nsw-icon-button--flex js-close-sub-nav" type="button">
                        <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</span>
                        <span class="sr-only">{{ _("Close filters") }}</span>
                    </button>
                </div>
            {%- endif %}
            <div class="nsw-filters__title">{{ title }}</div>
            <div class="nsw-filters__list">
                {{ content }}
            </div>
            <div class="nsw-filters__accept">
                <button type="submit" class="nsw-button nsw-button--dark nsw-button--full-width"
                        {%- if form_id -%}form="{{ form_id }}"{%- endif %}
                >Apply filters</button>
            </div>
            <div class="nsw-filters__cancel">
                <button onclick="window.location.href = '{{ h.url_for_static(request.path) }}'" type="reset">Clear all filters</button>
            </div>
        </div>
    {%- endcall %}
{%- endmacro %}

{%- macro tabbed_content(content) -%}
    <div {{ ui.util.attrs(kwargs, {"class": "nsw-tabs js-tabs"}) }}>
        {{ content }}
    </div>
{%- endmacro %}

{%- macro tab_pane(content, active, id) -%}
    <section {{ ui.util.attrs(kwargs, {"class": "nsw-tabs__content", "id": id}) }}>
        {{- content -}}
    </section>
{%- endmacro %}

{%- macro container(content, fluid) -%}
    <div {{ ui.util.attrs(kwargs, {"class": "" if fluid else "nsw-container"}) }}>{{ content }}</div>
{%- endmacro %}

{%- macro dropdown(content, title, disabled, position="bottom-start", style="secondary", color="dark") -%}
    {%- set _style_map = {
        "primary": color,
        "secondary": color ~ "-outline",
        "warning": "danger",
        "danger": "danger",
    } -%}


    {%- set trigger_id = ui.util.id(prefix="trigger-") -%}
    {%- set panel_id   = ui.util.id(prefix="panel-") -%}

    <div {{ ui.util.attrs(kwargs, {"class": "nsw-dropdown"}) }}>
        <button
            id="{{ trigger_id }}"
            type="button"
            class="nsw-button nsw-button--{{ _style_map.get(style, style) }} js-dropdown"
            aria-controls="{{ panel_id }}"
            aria-expanded="false"
            aria-haspopup="menu"
            data-dropdown-position="{{ position }}"
            {%- if disabled %} disabled aria-disabled="true"{% endif %}>
            {{- title -}}
            {{ ui.icon("expand_more") }}
        </button>

        <div id="{{ panel_id }}" class="nsw-dropdown__panel" role="menu" aria-labelledby="{{ trigger_id }}" tabindex="-1" hidden>
            <ul class="nsw-dropdown__menu" role="presentation">
                {{- content -}}
            </ul>
        </div>
    </div>
{%- endmacro %}

{#
NSW Design System v3 implementation
===========================================================
Requires NSW Design System v3.x CSS.
CDN: https://cdn.jsdelivr.net/npm/nsw-design-system@3/dist/css/main.css

── CLASS REFERENCE (sourced from v3.24.9 SCSS) ──────────────────────────

Container:
.nsw-container              max-width constrained, auto-centred, 16px side padding
.nsw-container--flush       removes left/right padding

Grid (the flex wrapper around rows):
.nsw-grid                   display:flex, flex-wrap:wrap, negative gutters
.nsw-grid--spaced           adds top/bottom padding on .nsw-col children
.nsw-grid--flush            removes top/bottom negative margins

Row (a full-width flex line inside a grid):
.nsw-row                    width:100%, display:flex, flex-wrap:wrap
.nsw-row--reverse           reverses column order at lg+ breakpoint

Column:
.nsw-col                    100% width default + gutter padding
.nsw-col-{N}                percentage width for N/12 (no breakpoint, any viewport)
.nsw-col-{bp}-{N}           responsive: bp = xs|sm|md|lg|xl, N = 1–12

Offset (shifts column right via margin-left):
.nsw-offset-{N}             offset N/12 at all viewports
.nsw-offset-{bp}-{N}        responsive offset

Alignment utility classes (from _utilities.scss):
.nsw-align-items-{v}        v = start|end|center|baseline|stretch
.nsw-justify-content-{v}    v = start|end|center|between|around|evenly
(both are responsive: nsw-align-items-{bp}-{v} also valid)

Flex wrap utility classes:
.nsw-flex-nowrap             flex-wrap: nowrap
.nsw-flex-wrap               flex-wrap: wrap
.nsw-flex-wrap-reverse       flex-wrap: wrap-reverse

Order utility classes:
.nsw-order-{v}              v = first|-1, 0, 1, 2, 3, 4, 5, last|6
(also responsive: nsw-order-{bp}-{v})

── CANONICAL → NSW BREAKPOINT MAPPING ───────────────────────────────────
canonical xs → nsw xs   (0px)
canonical sm → nsw sm   (576px)
canonical md → nsw md   (768px)
canonical lg → nsw lg   (992px)
canonical xl → nsw xl   (1200px)

Perfect 1:1 mapping — no approximation needed.

── GAP MAPPING ──────────────────────────────────────────────────────────
NSW DS does not expose gap utility classes on .nsw-row.
Gap is controlled by the built-in gutter system (8px mobile, 16px md+).
The --spaced modifier doubles top/bottom padding on column children.

We map our canonical gap tokens to the modifiers that exist:
none → nsw-grid--flush      (removes top/bottom negative margin)
xs   → nsw-grid             (bare grid, default gutters)
sm   → nsw-grid             (bare grid, default gutters)
md   → nsw-grid             (bare grid, default gutters — this IS the default)
lg   → nsw-grid nsw-grid--spaced
xl   → nsw-grid nsw-grid--spaced

Note: NSW DS does not have arbitrary column-gap control beyond this.
Left/right gutters are always the built-in 8px/16px. If you need
custom gaps, add inline style="column-gap: Xrem" on the .nsw-row,
but this is outside the design system's token contract.

── ORDER MAPPING ────────────────────────────────────────────────────────
NSW DS order utilities support values: first(-1), 0, 1, 2, 3, 4, 5, last(6).
We clamp to this range. Numeric orders > 5 fall back to "last".
For responsive order, we use nsw-order-{bp}-{v}.
#}


{%- macro grid(content, fluid) -%}
    {#
    NSW DS uses .nsw-container for max-width constraint.
    fluid=true → adds .nsw-container--flush to remove side padding,
    and wraps in an additional full-width div so content bleeds edge-to-edge.
    Most NSW DS pages wrap in nsw-container at the page layout level and
    use nsw-grid inside it, so fluid is a less common choice.
    #}
    {%- set class = "nsw-container" -%}
    {%- if fluid -%}
        {%- set class = class ~ " nsw-container--flush" -%}
    {%- endif -%}
    <div {{ ui.util.attrs(kwargs, {"class": class}) }}>
        {{- content -}}
    </div>
{%- endmacro %}


{%- macro row(content, align, justify, gap, wrap=true) -%}
    {#—
    NSW DS align-items utility classes (from _utilities.scss responsive utility generator):
    nsw-align-items-start | end | center | baseline | stretch
    —#}
    {%- set _align_map = {
        "start":    "nsw-align-items-start",
        "center":   "nsw-align-items-center",
        "end":      "nsw-align-items-end",
        "stretch":  "nsw-align-items-stretch",
        "baseline": "nsw-align-items-baseline"
    } -%}

    {#—
    NSW DS justify-content utility classes:
    nsw-justify-content-start | end | center | between | around | evenly
    —#}
    {%- set _justify_map = {
        "start":   "nsw-justify-content-start",
        "center":  "nsw-justify-content-center",
        "end":     "nsw-justify-content-end",
        "between": "nsw-justify-content-between",
        "around":  "nsw-justify-content-around",
        "evenly":  "nsw-justify-content-evenly"
    } -%}

    {#—
    Gap mapping → nsw-grid modifier on the .nsw-row wrapper.
    NSW DS has no column-gap utility classes; gap is structural via grid modifiers.
    We signal gap intent via data-gap for companion CSS if needed.
    —#}
    {%- set _gap_spaced = gap in ["lg", "xl"] -%}
    {%- set _gap_flush  = not gap -%}

    {%- set class = "nsw-row" -%}

    {#— alignment —#}
    {%- if align -%}
        {%- set class = class ~ " " ~ _align_map.get(align, "nsw-align-items-start") -%}
    {%- endif -%}
    {%- if justify -%}
        {%- set class = class ~ " " ~ _justify_map.get(justify, "nsw-justify-content-start") -%}
    {%- endif -%}

    {#— wrap —#}
    {%- if not wrap -%}
        {%- set class = class ~ " nsw-flex-nowrap" -%}
    {%- endif -%}

    {%- set default_attrs = {"class": class} -%}

    {#— emit data-gap for companion CSS —#}
    {%- if gap -%}
        {%- do default_attrs.update({"data-gap": gap}) -%}
    {%- endif %}

    <div {{ ui.util.attrs(kwargs, default_attrs) }}>
        {{- content -}}
    </div>
{%- endmacro %}


{%- macro column(content, span, offset, order) -%}
    {#—
    Canonical breakpoint = NSW DS breakpoint (perfect 1:1 match):
    xs → xs   (0px)
    sm → sm   (576px)
    md → md   (768px)
    lg → lg   (992px)
    xl → xl   (1200px)

    Column class patterns:
    .nsw-col                    → auto (100% default)
    .nsw-col-{N}                → applies at all viewports
    .nsw-col-{bp}-{N}           → responsive
    —#}

    {%- set ns = namespace(class="nsw-col") -%}

    {#— span —#}
    {%- if span  -%}
        {%- if span is integer -%}
            {%- set ns.class = ns.class ~ " nsw-col-" ~ span -%}
        {%- else -%}
            {#—
            Multi-breakpoint: emit one nsw-col-{bp}-{N} class per entry.
            First entry replaces the base "nsw-col"; subsequent entries append.
            —#}
            {%- for bp, size in span.items() -%}
                {%- set ns.class = ns.class ~ " nsw-col-" ~ bp ~ "-" ~ size -%}
            {%- endfor -%}
        {%- endif -%}
    {%- endif -%}

    {#—
    Offset class patterns:
    .nsw-offset-{N}             → all viewports
    .nsw-offset-{bp}-{N}        → responsive
    —#}
    {%- if offset -%}
        {%- if offset is integer -%}
            {%- set ns.class = ns.class ~ " nsw-offset-" ~ offset -%}
        {%- else -%}
            {%- for bp, size in offset.items() -%}
                {%- set ns.class = ns.class ~ " nsw-offset-" ~ bp ~ "-" ~ size -%}
            {%- endfor -%}
        {%- endif -%}
    {%- endif -%}

    {#—
    Order class patterns (NSW DS utility classes):
    .nsw-order-{v}              v = first, 0, 1, 2, 3, 4, 5, last
    .nsw-order-{bp}-{v}         responsive
    Values > 5 map to "last". Negative values map to "first".
    —#}
    {%- if order is defined -%}
        {%- if order is integer -%}
            {%- if order < 0 -%}
                {%- set ns.class = ns.class ~ " nsw-order-first" -%}
            {%- elif order > 5 -%}
                {%- set ns.class = ns.class ~ " nsw-order-last" -%}
            {%- else -%}
                {%- set ns.class = ns.class ~ " nsw-order-" ~ order -%}
            {%- endif -%}
        {%- else -%}
            {%- for bp, val in order.items() -%}
                {%- if val < 0 -%}
                    {%- set ns.class = ns.class ~ " nsw-order-" ~ bp ~ "-first" -%}
                {%- elif val > 5 -%}
                    {%- set ns.class = ns.class ~ " nsw-order-" ~ bp ~ "-last" -%}
                {%- else -%}
                    {%- set ns.class = ns.class ~ " nsw-order-" ~ bp ~ "-" ~ val -%}
                {%- endif -%}
            {%- endfor -%}
        {%- endif -%}
    {%- endif -%}

    {%- set extra = kwargs.pop("class", "") -%}
    {%- if extra -%}{%- set ns.class = ns.class ~ " " ~ extra -%}{%- endif -%}

    <div {{ ui.util.attrs(kwargs, {"class": ns.class}) }}>
        {{- content -}}
    </div>
{%- endmacro %}

{%- macro facet_list(content) -%}
    <div {{ ui.util.attrs(kwargs) }}>{{ content }}</div>
{%- endmacro %}

{%- macro group_list(content) -%}
    {{ ui.list(content, **kwargs) }}
{%- endmacro %}

{%- macro organization_list(content) -%}
    {{ ui.list(content, **kwargs) }}
{%- endmacro %}

{%- macro package_list(content) -%}
    {{ ui.list(content, **kwargs) }}
{%- endmacro %}

{%- macro resource_list(content) -%}
    {{ ui.list(content, **kwargs) }}
{%- endmacro %}

{%- macro user_list(content) -%}
    {{ ui.list(content, **kwargs) }}
{%- endmacro %}

{%- macro list(content) -%}
    <div {{ ui.util.attrs(kwargs) }}>
        {{- content -}}
    </div>
{%- endmacro %}

{%- macro list_item(content, title, block_link, label, info, subtitle, tags, img, reversed) -%}
    {%- set class = "nsw-list-item" -%}
    {%- if block -%}
        {%- set class = class ~ " nsw-list-item--block" -%}
    {%- endif %}
    {%- if reversed -%}
        {%- set class = class ~ " nsw-list-item--reversed" -%}
    {%- endif %}
    <div {{ ui.util.attrs(kwargs, {"class": class}) }}>
        <div class="nsw-list-item__content">
            {%- if label -%}
                <div class="nsw-list-item__label">{{ label }}</div>
            {%- endif %}
            {%- if info -%}
                <div class="nsw-list-item__info">{{ info }}</div>
            {%- endif %}

            {%- if title -%}
                <div class="nsw-list-item__title">{{ title }}</div>
            {%- endif %}
            {%- if subtitle -%}
                <div class="nsw-list-item__info">{{ subtitle }}</div>
            {%- endif %}

            <div class="nsw-list-item__copy">
                {{- content -}}
            </div>
            {%- if tags -%}
                <div class="nsw-list-item__tags">{{ tags }}</div>
            {%- endif %}
        </div>
        {%- if img -%}
            <div class="nsw-list-item__image">
                <img src="{{ img }}" alt="">
            </div>
        {%- endif %}
    </div>
{%- endmacro %}