{%- macro alert(content, dismissible, style="info") -%}
    {%- set style_class = style if style.startswith("alert-") else "alert-" ~ style -%}
    {%- set class = "alert fade show " ~  ("alert-dismissible " if dismissible else "") ~ style_class -%}
    <div {{ ui.util.attrs(kwargs, {"class": class, "role": "alert"}) }}>
        {{ content }}
        {%- if dismissible -%}
            <button type="button" class="btn-close close" data-bs-dismiss="alert" aria-label="Close"></button>
        {%- endif %}
    </div>
{%- endmacro %}

{%- macro modal(content, title, footer, id, size, dismissible=true) -%}
    {%- set class = "modal fade" -%}
    {%- if size -%}
        {%- set class = class ~ " modal-" ~ size -%}
    {%- endif %}
    {%- set default_attrs = {"class": class, "id": id, "tabindex": "-1"} -%}
    {%- if not dismissible -%}
        {%- do default_attrs.update({"data-bs-backdrop": "static", "data-bs-keyboard": "false"}) -%}
    {%- endif %}
    <div {{ ui.util.attrs(kwargs, default_attrs) }}>
        <div class="modal-dialog">
            <div class="modal-content">
                {%- if title or dismissible -%}
                    <div class="modal-header">
                        {%- if title -%}<h5 class="modal-title">{{ title }}</h5>{%- endif %}
                        {%- if dismissible -%}
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        {%- endif %}
                    </div>
                {%- endif %}
                <div class="modal-body">
                    {{ content }}
                </div>
                {%- if footer -%}
                    <div class="modal-footer">
                        {{ footer }}
                    </div>
                {%- endif %}
            </div>
        </div>
    </div>
{%- endmacro %}


{%- macro popover(content, title, id) -%}
    <div {{ ui.util.attrs(kwargs) }} popover id="{{ id }}" data-popover-title="{{ title }}">
        {{ content }}
    </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, size, variant="border") -%}
    {%- set class = "spinner-" ~ variant -%}
    {%- if size -%}
        {%- set class = "{} {}-{}".format(class, class, size) -%}
    {%- endif %}

    {%- if style -%}
        {%- set class = class ~ " text-" ~style -%}
    {%- endif %}
    <span {{ ui.util.attrs(kwargs, {"class": class, "role": "status"}) }}>
        <span class="visually-hidden">{{ content or _("Loading...") }}</span>
    </span>
{%- endmacro %}

{%- macro toast(content, title, style, dismissible) -%}
    {%- set class = "toast fade show" -%}
    {%- if style -%}
        {%- set class = class ~ " text-bg-" ~ style -%}

    {%- endif %}
    <div {{ ui.util.attrs(kwargs, {"class": class, "role": "alert", "aria-live": "assertive", "aria-atomic": "true"}) }} >
        {%- if title or dismissible -%}
            <div class="toast-header">
                {{ title }}
                {%- if dismissible -%}
                    <button type="button" class="ms-auto btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                {%- endif %}
            </div>

        {%- endif %}
        <div class="toast-body">
            {{ content }}
        </div>
    </div>
{%- endmacro %}

{%- macro toast_stack(content, position="bottom-right") -%}
    {%- set class = "toast-container position-fixed m-2" -%}
    {%- set class = class ~ (" top-0" if position.startswith("top") else " bottom-0") -%}
    {%- set class = class ~ (" start-0" if position.startswith("left") else " end-0") -%}
    <div {{ ui.util.attrs(kwargs, {"class": class}) }}>
        {{- content -}}
    </div>
{%- endmacro %}

{%- macro tooltip(content, tooltip, position) -%}
    <span {{ ui.util.attrs(kwargs, {"data-bs-title": tooltip, "data-bs-toggle": "tooltip", "data-bs-placement": position or "auto"}) }}>
        {{- content -}}
    </span>
{%- endmacro %}