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

{%- macro button(content, href=None, type="button", style="primary") -%}
    {%- if href -%}
        <a {{ ui.util.attrs(kwargs, {"href": href, "class": "btn btn-" ~ (style or "primary")}) }}>{{ content }}</a>
    {%- else -%}
        <button {{ ui.util.attrs(kwargs, {"type": type, "class": "btn btn-" ~ (style or "primary")}) }}>{{ content }}</button>
    {%- endif %}
{%- endmacro %}

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

{%- macro empty(content) -%}
    <div {{ ui.util.attrs(kwargs, {"class": "empty-state"}) }}>
        <p class="empty-message">{{ content }}</p>
    </div>
{%- endmacro %}

{%- macro icon(name) -%}
    {%- set icon_char = ui.util.icon(name) -%}
    <i {{ ui.util.attrs(kwargs, {"class": "icon icon-" ~ name, "aria-hidden": "true"}) }}>{{ icon_char if icon_char != name else "" }}</i>
{%- endmacro %}

{%- macro tag(content, href=None) -%}
    {%- if href -%}
        <a {{ ui.util.attrs(kwargs, {"href": href, "class": "tag tag-link"}) }}>{{ content }}</a>
    {%- else -%}
        <span {{ ui.util.attrs(kwargs, {"class": "tag"}) }}>{{ content }}</span>
    {%- endif -%}
{%- endmacro %}

{%- macro tab(content, href=None, active=false, id=None) -%}
    <li class="tab-item {{ 'active' if active }}">
        {{ ui.link(content, href or "#" ~ (id or ""), attrs={"class": "tab-link", "role": "tab", "aria-selected": "true" if active else "false", "aria-controls": id}, **kwargs) }}
    </li>
{%- endmacro %}