{% load wagtailadmin_tags i18n %}
<!-- Wagtail user bar embed code -->
<template id="wagtail-userbar-template">
    {# In preview panels, we still render the userbar UI, but hidden by default. #}
    <aside {% if request.in_preview_panel %}hidden{% endif %} aria-labelledby="wagtail-userbar-trigger">
        <div class="w-userbar w-userbar--{{ position|default:'bottom-right' }} {% admin_theme_classname %}" data-wagtail-userbar data-wagtail-userbar-origin="{{ origin|default:"" }}" part="userbar">
            {% block css %}
                {% versioned_static 'wagtailadmin/css/core.css' as core_css_url %}
                <link rel="stylesheet" href="{% build_absolute_url core_css_url %}">
                {# For headless userbar: the contents of the hook also need absolute URLs #}
                {% hook_output 'insert_global_admin_css' %}
                {{ media.css }}
            {% endblock %}
            <div class="w-userbar-nav">

                <svg class="w-hidden">
                    <defs>
                        {% block icons %}
                            {% include "wagtailadmin/icons/wagtail.svg" %}
                            {% include "wagtailadmin/icons/key.svg" %}
                            {% include "wagtailadmin/icons/folder-open-inverse.svg" %}
                            {% include "wagtailadmin/icons/edit.svg" %}
                            {% include "wagtailadmin/icons/plus.svg" %}
                            {% include "wagtailadmin/icons/check.svg" %}
                            {% include "wagtailadmin/icons/cross.svg" %}
                            {% include "wagtailadmin/icons/crosshairs.svg" %}
                        {% endblock %}
                    </defs>
                </svg>

                <button aria-controls="wagtail-userbar-items" aria-haspopup="true" class="w-userbar-trigger" id="wagtail-userbar-trigger" data-wagtail-userbar-trigger>
                    {% block branding_logo %}{% include "wagtailadmin/logo.html" with classname="w-userbar-icon" %}{% endblock %}
                    <span class="w-sr-only">{% trans 'View Wagtail quick actions' %}</span>
                </button>
                <ul aria-labelledby="wagtail-userbar-trigger" class="w-userbar-items" id="wagtail-userbar-items" role="menu">
                    {% block items %}
                        {% for item in items %}
                            {{ item|safe }}
                        {% endfor %}
                    {% endblock %}
                </ul>
            </div>
        </div>
        <div data-a11y-result-outline-container></div>
    </aside>
</template>
<wagtail-userbar></wagtail-userbar>
{% block js %}
    {% versioned_static 'wagtailadmin/js/vendor.js' as vendor_js_url %}
    {% versioned_static 'wagtailadmin/js/userbar.js' as userbar_js_url %}
    <script src="{% build_absolute_url vendor_js_url %}"></script>
    <script src="{% build_absolute_url userbar_js_url %}"></script>
    {{ media.js }}
{% endblock %}
<!-- end Wagtail user bar embed code -->