{% load wagtailadmin_tags i18n %}

<div class="w-tabs" data-tabs>
    <div class="w-tabs__wrapper">
        <div role="tablist" class="w-tabs__list">
            {% for child in self.visible_children %}
                {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id=child.heading title=child.heading classes=child.classes|join:" " %}
            {% endfor %}
        </div>

        {# Comment Notifications Toggle  #}
        {% if self.form.show_comments_toggle %}
            <div class="w-relative w-flex w-justify-end w-pl-5 sm:w-px-2" data-comment-notifications hidden>
                <label class="switch switch--teal-background w-p-0 w-m-0 w-font-normal w-flex w-justify-between w-text-14 w-space-x-2">
                    {% trans "Comment notifications" %}
                    {{ self.form.comment_notifications }}
                    <span class="switch__toggle"></span>
                </label>
            </div>
        {% endif %}
    </div>

    <div class="tab-content">
        {% for child in self.visible_children %}
            <section
                id="tab-{{ child.heading|cautious_slugify }}"
                class="w-tabs__panel {{ child.classes|join:" " }}"
                role="tabpanel"
                aria-labelledby="tab-label-{{ child.heading|cautious_slugify }}"
                hidden
            >
                {{ child.render_as_object }}
            </section>
        {% endfor %}
    </div>
</div>
