{%- macro avatar(content, username, size=22) -%}
    {%- do kwargs -%}
    {{ h.user_image(username, size) }}
{%- endmacro %}

{%- macro badge(content, style="default") -%}
    {%- set class = "badge bg-" ~ style ~ (' text-dark' if style in ['warning', 'info', 'light'] else "") -%}
    <span {{ ui.util.attrs(kwargs, {"class": class}) }}>
        {{- content -}}
    </span>
{%- endmacro %}

{%- macro breadcrumb_divider(content="/") -%}{%- do kwargs -%}{%- endmacro %}

{%- macro button(content, href, icon, size, type="button", style="primary") -%}
    {%- set prefix = ui.icon(icon) if icon else "" -%}
    {%- set class = "btn btn-" ~ style ~ ((' btn-' ~ size) if size else "") -%}
    {%- do kwargs.setdefault("attrs", {}).setdefault("class", class) -%}

    {%- if href -%}
        {{ ui.link(prefix ~ content, href=href, **kwargs) }}
    {%- else -%}
        <button {{ ui.util.attrs(kwargs) }} type="{{ type }}">
            {{- prefix ~ content -}}
        </button>
    {%- endif %}
{%- endmacro %}

{%- macro datetime(dt, date_format, with_hours, empty="") -%}
    <time {{ ui.util.attrs(kwargs) }} datetime="{{ h.render_datetime(dt, date_format='%Y-%m-%dT%H:%M:%S%z') }}">
        {{- h.render_datetime(dt, date_format=date_format, with_hours=with_hours) or empty -}}
    </time>
{%- endmacro %}

{%- macro divider(content) -%}
    {%- if content -%}
        <div {{ ui.util.attrs(kwargs, {"class": "divider divider-with-content"}) }}>
            <hr><span>{{ content }}</span><hr>
        </div>
    {%- else -%}
        <hr {{ ui.util.attrs(kwargs) }} class="divider">
    {%- endif %}
{%- endmacro %}

{%- macro heading(content, level) -%}
    {%- set tag =  "h" ~ level -%}
    <{{ tag }} {{ ui.util.attrs(kwargs) }}>{{ content }}</{{ tag }}>
{%- endmacro %}

{%- macro icon(name, style=none) -%}
    {%- set base_class = "fa-{}".format(style) if style else "fa" -%}
    <i {{ ui.util.attrs(kwargs) }} class="{{ base_class }} fa-{{ ui.util.icon(name) }}"></i>
{%- endmacro %}

{%- macro image(src, alt, height, width) -%}
    {%- if not alt -%}
        {%- do kwargs.setdefault("attrs", {}).setdefault("role", "presentation") -%}
    {%- endif -%}
    <img {{ ui.util.attrs(kwargs) }} src="{{ src }}" alt="{{ alt }}"
                                     {%- if height %} height="{{ height }}"{% endif %}
                                     {%- if width %} width="{{ width }}"{% endif %}
    >
{%- endmacro %}

{%- macro link(content, href, blank) -%}
    {%- if blank -%}
        {%- do kwargs.setdefault("attrs", {}).setdefault("target", "_blank") -%}
        {%- do kwargs.setdefault("attrs", {}).setdefault("rel", "noopener noreferrer") -%}
    {%- endif %}
    <a {{ ui.util.attrs(kwargs) }} href="{{ href or content }}">{{ content }}</a>
{%- endmacro %}

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

{%- macro tab(content, href, active) -%}
    <li class="nav-item">
        <a {{ ui.util.attrs(kwargs, {"class": "nav-link" ~ (" active" if active else "")}) }} href="{{ href }}">{{ content }}</a>
    </li>
{%- endmacro %}

{%- macro video(src, controls) -%}
    <video {{ ui.util.attrs(kwargs) }} src="{{ src }}" {{ "controls" if controls }}></video>
{%- endmacro %}

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