{%- macro chart(content, type, data, labels) -%}
    {# Documentation: https://chartist.dev/ #}
    {%- if data -%}
        {%- set id = ui.util.id() -%}
        {%- set payload = {"series": data or [], "labels": labels or []} -%}


        <link href="https://cdn.jsdelivr.net/npm/chartist@1.5.0/dist/index.min.css" rel="stylesheet">
        <script type="module">
            import { BarChart, LineChart, PieChart }  from 'https://cdn.jsdelivr.net/npm/chartist@1.5.0/+esm'
            new {{ type | capitalize }}Chart("#{{ id }}", {{ payload | tojson }})
        </script>

        <div>
            <div {{ ui.util.attrs(kwargs) }} id="{{ id }}"></div>
            <div>{{ content }}</div>
        </div>
    {%- else -%}
        <div>{{ _("No data provided") }}</div>
    {%- endif %}
{%- endmacro %}

{%- macro code(content, language, dedent) -%}
    <pre {{ ui.util.attrs(kwargs)}} class="code"><code class="language-{{ language or 'text' }}">
        {%- if dedent -%}
            {%- set ns = namespace(skip=none) -%}
            {%- for line in content.splitlines() -%}
                {%- if ns.skip is none and loop.index < 3 and line -%}
                    {%- set ns.skip = line|length - line.lstrip(" ")|length -%}
                {%- endif -%}
                {{ line[ns.skip or 0:] ~ "\n" if line or not loop.first}}
            {%- endfor -%}
        {%- else -%}
            {{ content }}
        {%- endif -%}

    </code></pre>
{%- endmacro %}

{%- macro definition_list(items) -%}
    <dl {{ ui.util.attrs(kwargs) }}>
        {%- for term, definition in items %}
            <dt>{{ term }}</dt>
            <dd>{{ definition }}</dd>
        {%- endfor %}
    </dl>
{%- endmacro %}

{%- macro table(content, striped=false, bordered=false, condensed=false, hover=false) -%}
    <table {{ ui.util.attrs(kwargs) }}
        class="table {{ 'table-bordered' if bordered }} {{ 'table-striped' if striped }} {{ 'table-sm' if condensed }} {{ 'table-hover' if hover }}"
    >
        {{ content }}
    </table>
{%- endmacro %}

{%- macro table_head(content) -%}
    <thead {{ ui.util.attrs(kwargs) }}>{{ content }}</thead>
{%- endmacro %}

{%- macro table_body(content) -%}
    <tbody {{ ui.util.attrs(kwargs) }}>{{ content }}</tbody>
{%- endmacro %}

{%- macro table_row(content) -%}
    <tr {{ ui.util.attrs(kwargs) }}>
        {{ content }}
    </tr>
{%- endmacro %}

{%- macro table_cell(content, scope, header=false) -%}
    {% set tag = "th" if header else "td" %}
    <{{ tag }} {{ ui.util.attrs(kwargs) }}>
    {{ content }}
    </{{ tag }}>
{%- endmacro %}