{% extends "wagtailadmin/userbar/item_base.html" %}
{% load i18n wagtailadmin_tags %}

{% block item_content %}
    <button type="button" id="accessibility-trigger" role="menuitem">
        <span class="w-sr-only">{% trans 'Issues found' %}</span><span class="w-a11y-result__count" data-a11y-result-count></span>
        {% trans 'Accessibility' %}
    </button>
    {{ axe_configuration|json_script:"accessibility-axe-configuration" }}
    {% trans 'Warnings' as dialog_title %}
    {% fragment as issues_found %}
        {% trans 'Issues found' %}
        <span class="w-a11y-result__count" data-a11y-result-count></span>
    {% endfragment %}
    {% fragment as dialog_classname %}w-dialog--userbar {% admin_theme_classname %}{% endfragment %}
    {% dialog id="accessibility-results" theme="floating" classname=dialog_classname title=dialog_title subtitle=issues_found a11y_count="a11y_count" dialog_root_selector="[data-wagtail-userbar]" %}
    {% enddialog %}
    {# Contents of the dialog created in JS based on these templates. #}
    <template id="w-a11y-result-row-template">
        <div class="w-a11y-result__row" data-a11y-result-row>
            <div>
                <h3 class="w-a11y-result__header">
                    <span class="w-a11y-result__name" data-a11y-result-name></span>
                </h3>
                <div class="w-a11y-result__help" data-a11y-result-help></div>
            </div>
            <button class="w-a11y-result__selector" data-a11y-result-selector aria-label="{% trans 'Show issue' %}" type="button">
                {% icon name="crosshairs" classname="w-a11y-result__icon" %}
            </button>
        </div>
    </template>
    <template id="w-a11y-result-outline-template">
        <div class="w-a11y-result__outline" data-a11y-result-outline></div>
    </template>
{% endblock %}
