{%- macro alert(content, dismissible=false, style=None) -%}
    <div {{ ui.util.attrs(kwargs, {"class": "alert alert-" ~ (style or "info")}) }}>
        <div class="alert-content">{{ content }}</div>
        {% if dismissible %}
            <button type="button" class="alert-dismiss" onclick="this.parentNode.remove()">&times;</button>
        {% endif %}
    </div>
{%- endmacro %}

{%- macro modal(content, title=None, footer=None, dismissible=true, id=None) -%}
    <dialog {{ ui.util.attrs(kwargs, {"id": id, "class": "modal"}) }}>
        <div class="modal-content">
            {%- if title %}
            <div class="modal-header">
                {{ ui.heading(title, level=2) }}
                {{ ui.modal_close_handle(id=id) if dismissible }}
            </div>
            {%- endif %}

            <div class="modal-body">
                {{ content }}
            </div>

            {%- if footer -%}
            <div class="modal-footer">
                {{ footer }}
            </div>
            {%- endif %}
        </div>
    </dialog>
{%- endmacro %}

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

{%- macro progress(content, value=0, max=100) -%}
    <div {{ ui.util.attrs(kwargs, {"class": "progress"}) }}>
        <div class="progress-bar" style="width: {{ (value / max) * 100 }}%" role="progressbar" aria-valuenow="{{ value }}" aria-valuemin="0" aria-valuemax="{{ max }}">
            {%- if content %}{{ content }}{% else %}{{ value }} / {{ max }}{% endif %}
        </div>
    </div>
{%- endmacro %}

{%- macro spinner(content, style=None, size=None) -%}
    <span {{ ui.util.attrs(kwargs, {"class": "spinner spinner-" ~ (size or "md") ~ " spinner-" ~ (style or "primary")}) }}>{{ content }}</span>
{%- endmacro %}

{%- macro toast(content, title=None, style=None, dismissible=false) -%}
    <div {{ ui.util.attrs(kwargs, {"class": "toast toast-" ~ (style or "info")}) }}>
        {%- if title -%}
            <div class="toast-header">{{ title }}</div>
        {%- endif -%}
        <div class="toast-body">{{ content }}</div>
    </div>
{%- endmacro %}

{%- macro toast_stack(content, position="top-right") -%}
    <div {{ ui.util.attrs(kwargs, {"class": "toast-stack toast-stack-" ~ position}) }}>
        {{ content }}
    </div>
{%- endmacro %}

{%- macro tooltip(content, tooltip=None, position="bottom") -%}
    <span {{ ui.util.attrs(kwargs, {"class": "tooltip-wrapper", "data-tooltip": tooltip, "data-tooltip-position": position}) }}>{{ content }}</span>
{%- endmacro %}

{%- macro popover_handle(content, id=None) -%}
    <span {{ ui.util.attrs(kwargs) }} onclick="document.getElementById('{{ id }}').togglePopover()" style="cursor: pointer;">
        {{ content }}
    </span>
{%- endmacro %}

{%- macro modal_handle(content, id=None) -%}
    {%- do kwargs.setdefault("attrs", {}).setdefault("onclick", "ckan.sandbox().ui.getModal('{id}').show()".format(id=id)) -%}
    {{ ui.button(content, **kwargs) }}
{%- endmacro %}

{%- macro modal_close_handle(content=None, id=None) -%}
    {%- set content = content or "&times;"|safe -%}
    {%- do kwargs.setdefault("attrs", {}).setdefault("onclick", "ckan.sandbox().ui.getModal('{id}').close()".format(id=id)) -%}
    {%- do kwargs.setdefault("class", "modal-close-btn") -%}
    {{ ui.button(content, **kwargs) }}
{%- endmacro %}