{% macro onsTabs(params) %}
    {% set classes = 'ons-tabs' %}

    {% set variantClasses %}
        {% for variant in params.variants %}
            {% set classes = classes ~ ' ons-tabs--' ~ variant %}
        {% endfor %}
    {% endset %}

    <section class="{{ classes }}" {% if params.noInitialActiveTab %}data-no-initial-active-tab="true"{% endif %}>
        {% set titleTag = params.headingLevel | default(2) %}
        {% set openingTag = "<h" ~ titleTag %}
        {% set closingTag = "</h" ~ titleTag ~ ">" %}
        {{ openingTag | safe }}
        class="ons-tabs__title ons-u-fs-r--b
        ons-u-mt-no{{ ' ' + params.titleClasses if params.titleClasses else '' }}">{{ params.title }}{{ closingTag | safe }}
        <div>
            <ul class="ons-tabs__list">
                <!-- prettier-ignore-start -->
                {%- for tab in params.tabs -%}
                    <li class="ons-tab__list-item"><a href="#{{ tab.id if tab.id else tab.title|trim|replace(' ','-')|lower }}" class="ons-tab"{% if tab.attributes %}{% for attribute, value in (tab.attributes.items() if tab.attributes is mapping and tab.attributes.items else tab.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>{{ tab.title }}{% if tab.hiddenSpan %}<span class="ons-u-vh">{{ tab.hiddenSpan }}</span>{% endif %}</a></li>
                {%- endfor -%}
                <!-- prettier-ignore-end -->
            </ul>
        </div>
        {% for tab in params.tabs %}
            <section id="{{ tab.id if tab.id else tab.title|trim|replace(' ','-')|lower }}" class="ons-tabs__panel">
                {% if tab.showTitle %}
                    <h2 id="{{ tab.title|trim|replace(' ','-')|lower + '-content-title' }}" class="ons-u-vh">{{ tab.title }}</h2>
                {% endif %}
                {{ tab.content | safe }}
            </section>
        {% endfor %}
    </section>
{% endmacro %}