{% load wagtailadmin_tags i18n %}

{% if self.help_text %}
    {% help_block status="info" %}{{ self.help_text }}{% endhelp_block %}
{% endif %}

<div class="w-tabs" data-tabs {% include "wagtailadmin/shared/attrs.html" with attrs=self.attrs %}>
    <div class="w-tabs__wrapper">
        <div role="tablist" class="w-tabs__list">
            {% for child, identifier in self.visible_children_with_identifiers %}
                {% if child.show_panel_furniture %}
                    {# If there's at least one child that shows the panel furniture, render the tab navigation #}
                    {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id=identifier title=child.heading classname=child.classes|join:" " %}
                {% endif %}
            {% endfor %}
        </div>
    </div>

    <div class="tab-content">
        {% for child, identifier in self.visible_children_with_identifiers %}
            {% if child.show_panel_furniture %}
                <section
                    id="tab-{{ identifier }}"
                    class="{% classnames "w-tabs__panel" child.classes %}"
                    role="tabpanel"
                    aria-labelledby="tab-label-{{ identifier }}"
                    hidden
                >
                    {{ child.render_html }}
                </section>
            {% else %}
                {# If all of the children in the tab do not show the panel furniture, render them without the tab section #}
                {{ child.render_html }}
            {% endif %}
        {% endfor %}
    </div>
</div>