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

{% block item_content %}
    <button type="button" id="checker-trigger" role="menuitem">
        <span class="w-content-checker__count" data-content-checker-count></span>
        {% trans 'Checks' %}
    </button>
    {{ axe_configuration|json_script:"checker-axe-configuration" }}
    {% trans 'Checks' as dialog_title %}
    {% fragment as dialog_classname %}w-dialog--userbar {% admin_theme_classname %}{% endfragment %}
    {% dialog id="checker-results" theme="floating" classname=dialog_classname title=dialog_title dialog_root_selector="[data-wagtail-userbar]" %}
        {% include "wagtailadmin/shared/content_checks/metrics.html" %}
        {% include "wagtailadmin/shared/content_checks/metadata.html" %}
        <div>
            <h2 class="w-flex w-items-center w-gap-2 w-my-5 w-text-16 w-font-bold">
                <span>{% trans 'Issues found' %}</span><span class="w-content-checker__count" data-content-checker-count>0</span>
            </h2>
            <div class="w-flex w-flex-col w-gap-2.5" data-checks-panel></div>
        </div>
    {% enddialog %}
    {# Contents of the dialog created in JS based on these templates. #}
    <template id="w-content-checker-row-template">
        <div class="w-content-checker__row" data-content-checker-row>
            <div>
                <h3 class="w-content-checker__header">
                    <span class="w-content-checker__name" data-content-checker-name></span>
                </h3>
                <div class="w-content-checker__help" data-content-checker-help></div>
            </div>
            <button class="w-content-checker__selector" data-content-checker-selector aria-label="{% trans 'Show issue' %}" type="button">
                {% icon name="crosshairs" classname="w-content-checker__icon" %}
            </button>
        </div>
    </template>
    {# Content template for inline-userbar checker annotations. #}
    {# Appended into the generic [data-inline-userbar-content] slot by JS. #}
    <template id="w-inline-userbar-content-checker-template">
        <div class="w-content-checker__row">
            <div>
                <h3 class="w-content-checker__header">
                    <span class="w-content-checker__name" data-content-checker-name></span>
                </h3>
                <div class="w-content-checker__help" data-content-checker-help></div>
            </div>
        </div>
    </template>
{% endblock %}