{%- macro alert(content, style, compact, icon) -%}
    {%- set _icon_map = {"danger": "cancel", "warning": "error", "success": "check_circle", "info": "info"} -%}
    {%- if not icon -%}
        {%- set icon = _icon_map[style] -%}
    {%- endif %}
    {%- set _style_map = {"danger": "error"} -%}
    {%- set class = "nsw-in-page-alert" -%}
    {%- if style -%}
        {%- set class = class ~ " nsw-in-page-alert--" ~ _style_map.get(style, style) -%}
    {%- endif %}
    {%- if compact -%}
        {%- set class = class ~ " nsw-in-page-alert--compact" -%}
    {%- endif %}
    <div {{ ui.util.attrs(kwargs, {"class": class}) }}>
        {%- if icon -%}
            <span class="material-icons nsw-material-icons nsw-in-page-alert__icon" focusable="false" aria-hidden="true">{{ icon }}</span>
        {%- endif %}
        <div class="nsw-in-page-alert__content">
            {{- content -}}
        </div>
    </div>
{%- endmacro %}

{%- macro modal(content, title, footer, id, dismissible=true) -%}
    {%- set class = "nsw-dialog js-dialog" -%}
    {%- if dismissible -%}
        {%- set class = class ~ " js-dialog-dismiss" -%}
    {%- endif %}
    <div {{ ui.util.attrs(kwargs, {"role": "dialog", "class": class, "id": id}) }}>
        <div class="nsw-dialog__wrapper">
            <div class="nsw-dialog__container">
                {%- if title or dismissible -%}
                    <div class="nsw-dialog__top">
                        <div class="nsw-dialog__title">
                            {%- if title -%}
                                <h2>{{ title }}</h2>
                            {%- endif %}
                        </div>
                        {%- if dismissible -%}
                            <div class="nsw-dialog__close">
                                <button class="nsw-icon-button js-close-dialog">
                                    <span class="material-icons nsw-material-icons" focusable="false" aria-hidden="true">close</span>
                                    <span class="sr-only">Close</span>
                                </button>
                            </div>
                        {%- endif %}
                    </div>
                {%- endif %}

                <div class="nsw-dialog__content">
                    {{ content }}
                </div>
            </div>
            {%- if footer -%}
                <div class="nsw-dialog__bottom">
                    {{ footer }}
                </div>
            {%- endif %}
        </div>
    </div>
{%- endmacro %}

{%- macro popover(content, title, id) -%}
    <div {{ ui.util.attrs(kwargs, {"id": id, "class": "nsw-popover"}) }}>
        <div class="nsw-p-sm">
            {{ ui.heading(title, level=4) if title }}
            {{ content }}
        </div>
    </div>
{%- endmacro %}

{%- macro tooltip(content, tooltip, toggle, theme="dark") -%}
    <span {{ ui.util.attrs(kwargs, {"class": "nsw-tooltip js-tooltip", "title": tooltip, "data-theme": theme}) }}>
        {{- content -}}
    </span>
{%- endmacro %}

{%- macro spinner(content, style, size) -%}
    <div {{ ui.util.attrs(kwargs, {"class": "nsw-loader"}) }}>
        <span aria-hidden="true" class="nsw-loader__circle {{ 'nsw-loader__circle--' ~ size if size }}"></span>
        <span role="status" class="nsw-loader__label">{{ content or _("Loading") }}</span>
    </div>
{%- endmacro %}

{%- macro progress(content, value=0, max=100) -%}
    {%- set pct = ((value / max) * 100) | round(1) if max > 0 else 0 -%}
    {%- set class = "nsw-progress-bar" ~ (" nsw-progress-bar--" ~ color if color else "")-%}
    <div {{ ui.util.attrs(kwargs, {"class": class}) }}>
        {%- if content is not none -%}
            <label class="nsw-progress-bar__label">
                {{- content -}}
                <progress value="{{ value }}" max="{{ max }}">{{ pct }}%</progress>
            </label>
        {%- endif -%}
        <div class="nsw-progress-bar__track" role="presentation" aria-hidden="true" >
            <div class="nsw-progress-bar__track_progress" style="width: {{ pct }}%;">
            </div>
        </div>
    </div>
{%- endmacro %}

{%- macro toast(content, title, style="info", dismissible=true, position="static", duration_ms=0) -%}
    {# postion: {top,bottom}-{left,center,right} #}
    {%- set _live = {
        "info":    {"role": "status", "live": "polite"},
        "success": {"role": "status", "live": "polite"},
        "warning": {"role": "alert",  "live": "assertive"},
        "danger":   {"role": "alert",  "live": "assertive"}
    } -%}
    {%- set _icon = {
        "info":    "info",
        "success": "check_circle",
        "warning": "warning",
        "danger":   "cancel"
    } -%}
    {%- set aria = _live.get(style, _live["info"]) -%}
    {%- set icon_name = _icon.get(style, "info") -%}
    {%- set class = "js-toast nsw-toast nsw-toast--" ~ style -%}
    {%- set defaults = {
        "class": class,
        "role": aria.role,
        "aria-live": aria.live,
        "aria-atomic": "true",
        "data-toast-position": position,
        "data-toast-duration": duration_ms,
        "data-toast-dismissible": "true" if dismissible else "false",
    } -%}

    <div {{ ui.util.attrs(kwargs, defaults) }}>
        {{ ui.icon(icon_name, _extra_class="nsw-toast__icon") }}
        <div class="nsw-toast__content">
            {%- if title %}
                <p class="nsw-toast__title">{{ title }}</p>
            {%- endif %}
            <p class="nsw-toast__message">{{ content }}</p>
        </div>

        {%- if dismissible %}
            <button class="nsw-icon-button nsw-toast__close js-toast-close" aria-label="Close notification">
                {{ ui.icon("close") }}
            </button>
        {%- endif %}
    </div>
{%- endmacro %}

{%- macro toast_stack(content, position="bottom-right") -%}
    {%- set class = "nsw-toast-stack" -%}
    {%- set vertical, horizontal = position.split("-") -%}
    {%- set class = class ~ " nsw-toast-stack--" ~ vertical -%}
    {%- set class = class ~ " nsw-toast-stack--" ~ horizontal -%}

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