{%- macro table(content, striped, bordered, caption, adaptive) -%}
    {%- set class = "nsw-table" ~ (" nsw-table--striped" if striped else "") ~ (" nsw-table--bordered" if bordered else "") ~ (" nsw-table--adaptive" if adaptive else "") -%}
    <div {{ ui.util.attrs(kwargs, {"class": class, "tabindex": 0}) }}>
        <table>
            {%- if caption -%}
                <caption>{{ caption }}</caption>
            {%- endif %}
            {{ content }}
        </table>
    </div>
{%- endmacro %}

{%- 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 %}