{% load i18n wagtailadmin_tags %}
{% include "wagtailadmin/shared/header.html" with title=page_title merged=1 subtitle=page_subtitle icon=header_icon %}

{% if creation_form %}
    {{ creation_form.media.js }}
    {{ creation_form.media.css }}
{% endif %}

{% comment %} Do not attach JavaScript behaviour (data-tabs) below if there are no actual tabs used {% endcomment %}
<div class="w-tabs" {% if creation_form %}data-tabs data-tabs-disable-url{% endif %}>
    {% if creation_form %}
        <div class="w-tabs__wrapper w-overflow-hidden">
            <div role="tablist" class="w-tabs__list w-w-full">
                {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='search' title=search_tab_label %}
                {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id=view.creation_tab_id title=creation_tab_label %}
            </div>
        </div>
    {% else %}
        {% comment %} Ensure layout still works as expected (gap under header from tabs wrapper) even if no tabs used {% endcomment %}
        <div class="w-tabs__wrapper"></div>
    {% endif %}

    <div class="tab-content">
        <section
            id="tab-search"
            class="w-tabs__panel"
            role="tabpanel"
            aria-labelledby="tab-label-search"
        >

            {% block filter_form %}
                {% if filter_form.fields %}
                    <form data-chooser-modal-search 
                          data-controller="classifier-chooser"
                          data-classifier-chooser-filter-url-value="/admin/classifier_chooser/filter_groups/"
                          {% if debug %}data-classifier-chooser-debug-value="true"{% endif %}
                          action="{{ results_url }}" method="GET" novalidate>
                        {% for field in filter_form.hidden_fields %}{{ field }}{% endfor %}
                        {% if filter_form.visible_fields %}
                            <ul class="fields">
                                {% for field in filter_form.visible_fields %}
                                    {% if field.name == 'group_type' %}
                                        <li class="w-field-row">
                                            <div class="">
                                                {% formattedfield field %}
                                            </div>
                                            {% for next_field in filter_form.visible_fields %}
                                                {% if next_field.name == 'group' %}
                                                    <div class="">
                                                        {% formattedfield next_field %}
                                                    </div>
                                                {% endif %}
                                            {% endfor %}
                                            {% for next_field in filter_form.visible_fields %}
                                                {% if next_field.name == 'locale' %}
                                                    <div class="">
                                                        {% formattedfield next_field %}
                                                    </div>
                                                {% endif %}
                                            {% endfor %}
                                        </li>
                                    {% elif field.name != 'group' and field.name != 'locale' %}
                                        <li>{% formattedfield field %}</li>
                                    {% endif %}
                                {% endfor %}
                            </ul>
                        {% endif %}
                    </form>
                {% endif %}
            {% endblock %}

            {% if is_multiple_choice %}
                <form action="{{ chosen_multiple_url }}" method="GET" data-multiple-choice-form>

                    <div id="search-results" class="listing">
                        {% include view.results_template_name %}
                    </div>

                    <input type="submit" data-multiple-choice-submit value="{% trans 'Confirm selection' %}" class="button" />
                </form>
            {% else %}
                <div id="search-results" class="listing">
                    {% include view.results_template_name %}
                </div>
            {% endif %}
        </section>

        {% if creation_form %}
            {% include view.creation_form_template_name %}
        {% endif %}
    </div>
</div>
