{% load wagtailadmin_tags i18n %}
{% comment "text/markdown" %}

    Variables accepted by this template:

    - `breadcrumbs_items` - breadcrumbs items to be rendered, in the format of [{"url": str, "label": str}]
    - `buttons` - buttons to be rendered beside the final breadcrumbs item
    - `side_panels` - list of side panels to be rendered
    - `history_url` - URL to the history view for the current object
    - `title` - title of the current page, to be displayed as a hidden h1 for screen readers
    - `search_url` - URL to the search view, should respond with a partial template for the results
    - `search_form` - form to be rendered for search
    - `filters` - filters to be rendered
    - `icon_name` - name of the icon to be used in the header

    When including this template, use the `only` parameter whenever possible to
    ensure that the above variables are indeed the only ones needed for this
    template to work.

{% endcomment %}
{% fragment as nav_icon_classes %}w-w-4 w-h-4 group-hover:w-transform group-hover:w-scale-110{% endfragment %}
{% fragment as nav_icon_button_classes %}w-w-slim-header w-h-slim-header w-bg-transparent w-border-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-text-meta w-transition w-group hover:w-text-text-label focus:w-text-text-label expanded:w-text-text-label expanded:w-border-y-2 expanded:w-border-b-current w-shrink-0 more-contrast:w-border more-contrast:w-border-border-interactive-more-contrast hover:more-contrast:w-border-border-interactive-more-contrast-hover{% endfragment %}
{% fragment as nav_icon_counter_classes %}-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] rtl:w-translate-x-[4px] w-translate-x-[-4px] w-text-[0.5625rem] w-font-bold w-text-text-button w-border w-border-surface-page w-rounded-[1rem]{% endfragment %}
{# Z index 99 to ensure header is always above  #}
<div class="w-sticky w-top-0 w-z-header">
    <header class="w-slim-header w-bg-surface-header w-border-b w-border-border-furniture w-px-0 w-py-0 w-mb-0 w-relative w-top-0 w-z-header sm:w-sticky w-min-h-slim-header">
        <div class="w-flex w-flex-col sm:w-flex-row w-items-center w-justify-between">
            {# Padding left on mobile to give space for navigation toggle, #}
            <div class="w-pl-slim-header sm:w-pl-5 w-min-h-slim-header sm:w-pr-2 w-w-full w-flex-1 w-overflow-x-auto w-box-border">
                <div class="w-flex w-flex-1 w-items-center w-overflow-hidden">
                    {% block header_content %}
                        {% block title %}
                            {% if title %}
                                {# Accessible page title as the h1 because we do not want #}
                                {# to put the h1 inside the breadcrumbs #}
                                <h1 class="w-sr-only">
                                    {{ title }}
                                </h1>
                            {% endif %}
                        {% endblock %}

                        {% block breadcrumbs %}
                            {% if breadcrumbs_items %}
                                {% breadcrumbs breadcrumbs_items icon_name=icon_name %}
                            {% endif %}
                        {% endblock %}

                        {# Allow actions to be passed as a prerendered variable or defined by extending the template via block_actions #}
                        {% fragment stripped as actions %}
                            {% block actions %}
                                {% for button in buttons %}
                                    {% component button %}
                                {% endfor %}
                            {% endblock %}
                        {% endfragment %}
                        {% if actions %}
                            {# Actions divider #}
                            <div class="w-w-px w-h-[30px] w-ml-auto sm:w-ml-0 w-bg-border-furniture"></div>
                            <div id="w-slim-header-buttons" class="w-flex w-items-center w-ml-2.5 w-gap-1">
                                {{ actions }}
                            </div>
                        {% endif %}
                    {% endblock %}
                </div>
            </div>

            {% block search_form %}
                {% if not search_url %}
                {% elif search_form or filters %}
                    <form
                        action="{{ search_url }}"
                        method="get"
                        class="w-slim-header__search-form"
                        novalidate
                        role="search"
                        data-search-form
                        data-controller="w-swap"
                        data-action="change->w-swap#submitLazy input->w-swap#submitLazy"
                        data-w-swap-src-value="{{ search_url }}"
                        data-w-swap-target-value="#listing-results"
                        data-w-swap-reflect-value="true"
                    >
                        {% if search_form %}
                            {% for field in search_form %}
                                {% formattedfield field=field sr_only_label=True icon="search" %}
                            {% endfor %}
                        {% endif %}

                        {% if filters %}
                            <div
                                id="filters-drilldown"
                                class="w-drilldown"
                                data-controller="w-drilldown"
                                data-action="w-swap:success@document->w-drilldown#updateCount w-dropdown:hide->w-drilldown#delayedClose w-dropdown:clickaway->w-drilldown#preventOutletClickaway"
                                data-w-drilldown-count-attr-value="data-w-active-filter-id"
                                data-w-drilldown-w-action-outlet="[data-w-active-filter-id][data-controller='w-action']"
                                data-w-drilldown-w-dropdown-outlet="#filters-drilldown [data-controller='w-dropdown']"
                            >
                                {% include "wagtailadmin/shared/headers/_filters.html" with filters=filters only %}
                            </div>
                        {% endif %}

                        {% block extra_form_fields %}
                            {# Add any extra form fields here #}
                        {% endblock %}

                        {% comment %}
                            Add an initial disabled & hidden submit button so that
                            pressing 'Enter' will not submit form. Reload is not
                            required as the content is dynamically loaded.
                        {% endcomment %}
                        <input hidden disabled type="submit" />
                    </form>
                {% endif %}
            {% endblock %}

            <div class="w-w-full w-overflow-auto sm:w-w-min w-flex sm:w-flex-nowrap sm:w-flex-row w-items-center w-p-0 sm:w-py-0 w-px-2 sm:w-pr-4 sm:w-justify-end">
                {% block editing_sessions %}
                    {% if editing_sessions %}
                        {% component editing_sessions %}
                    {% endif %}
                {% endblock %}

                {% block toggles %}
                    {% if side_panels %}
                        {% include "wagtailadmin/shared/side_panel_toggles.html" %}
                    {% endif %}
                    {% if history_url %}
                        {% include "wagtailadmin/shared/headers/_history_icon_link.html" with history_url=history_url nav_icon_button_classes=nav_icon_button_classes nav_icon_classes=nav_icon_classes only %}
                    {% endif %}
                {% endblock %}
            </div>
        </div>
    </header>

    {% block side_panels %}
        {% if side_panels %}
            {% include "wagtailadmin/shared/side_panels.html" %}
        {% endif %}
    {% endblock %}
</div>