{% extends "wagtailadmin/generic/form.html" %}
{% load i18n wagtailadmin_tags %}

{% block form_content %}
    <div class="w-tabs" data-tabs>
        <div class="w-tabs__wrapper">
            <div role="tablist" class="w-tabs__list">
                {% for tab in panels_by_tab.keys %}
                    {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id=tab.name title=tab.title %}
                {% endfor %}

                {% if menu_items %}
                    {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='actions' title=_("More actions") %}
                {% endif %}
            </div>
        </div>

        <div class="tab-content">
            {% csrf_token %}

            {% for tab, panels in panels_by_tab.items %}
                <section
                    id="tab-{{ tab.name|cautious_slugify }}"
                    class="w-tabs__panel"
                    role="tabpanel"
                    hidden
                    aria-labelledby="tab-label-{{ tab.name|cautious_slugify }}"
                >
                    {% for panel in panels %}
                        {% panel id=panel.name heading=panel.title heading_size="label" %}
                            <div class="w-account-settings-panel w-mt-5">
                                {{ panel.render }}
                            </div>
                        {% endpanel %}
                    {% endfor %}
                </section>
            {% endfor %}

            {% if menu_items %}
                <section
                    id="tab-actions"
                    class="w-tabs__panel"
                    role="tabpanel"
                    hidden
                    aria-labelledby="tab-label-actions"
                >
                    <ul class="listing">
                        {% for item in menu_items %}
                            <li class="row row-flush">
                                <div class="col6">
                                    <a href="{{ item.url }}" class="button button-primary">{{ item.label }}</a>
                                </div>
                                <small class="col6">{{ item.help_text }}</small>
                            </li>
                        {% endfor %}
                    </ul>
                </section>
            {% endif %}
        </div>
    </div>
{% endblock %}