{% set containerAttributes = {
    class: ['pane-tabs']|merge((class ?? [])|explodeClass),
}|merge(containerAttributes ?? [], recursive=true) %}

{% set selectedTab = selectedTab ?? tabs|keys|first %}
{% set tabs = tabs|map((tab, tabId) => tab|merge({
    selected: tabId == selectedTab,
    class: (tab.class ?? [])|explodeClass,
})) %}

{% tag 'nav' with containerAttributes %}
    <ul class="scrollable">
        {% for tabId, tab in tabs %}
            <li data-id="{{ tabId }}">
                {% tag 'a' with {
                    id: "tab-#{tabId}",
                    class: (tab.selected ? ['sel'] : [])|merge(tab.class),
                    tabindex: tab.selected ? '0' : '-1',
                    href: tab.url,
                    data: {
                        id: tabId,
                    },
                } %}
                    {{ tab.label }}
                    {% if 'error' in tab.class %}
                        {{ tag('span', {
                            aria: {
                                label: 'This tab contains errors'|t('app'),
                            },
                            data: {
                                icon: 'alert',
                            }
                        }) }}
                    {% endif %}
                {% endtag %}
            </li>
        {% endfor %}
    </ul>
    {{ tag('button', {
        type: 'button',
        class: 'btn menubtn hidden',
        title: 'List all tabs'|t('app'),
        aria: {
            label: 'List all tabs'|t('app'),
        },
    }) }}
    <div class="menu">
        <ul class="padded" role="listbox">
            {% for tabId, tab in tabs %}
                <li>
                    {% tag 'a' with {
                        class: tab.selected ? 'sel' : null,
                        href: tab.url,
                        data: {
                            id: tabId,
                        },
                    } %}
                        {{ tab.label }}
                        {% if 'error' in tab.class %}
                            {{ tag('span', {
                                aria: {
                                    label: 'This tab contains errors'|t('app'),
                                },
                                data: {
                                    icon: 'alert',
                                }
                            }) }}
                        {% endif %}
                    {% endtag %}
                </li>
            {% endfor %}
        </ul>
    </div>
{% endtag %}
