{% load i18n wagtailadmin_tags %}
{% block result_template %}
    <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"
            >
                <span class="w-content-checker__selector-text" data-content-checker-selector-text></span>
                {% icon name="link-external" classname="w-content-checker__icon" %}
            </button>
        </div>
    </template>
{% endblock %}

{% block content %}
    <div class="w-divide-y w-divide-border-furniture w-py-6 w-pl-2 lg:w-pl-8 w-gap-3">
        {% block metrics_section %}
            <div>
                <h2 class="w-my-5 w-text-16 w-font-bold w-text-text-label">
                    {% trans 'Content metrics' %}
                </h2>
                {% block metrics %}
                    {% include "wagtailadmin/shared/content_checks/metrics.html" %}
                {% endblock %}
            </div>
        {% endblock %}
        {% block metadata_section %}
            {% include "wagtailadmin/shared/content_checks/metadata.html" %}
        {% endblock %}
        {% block issues_section %}
            <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>
                {% block issues %}
                    <div class="w-flex w-flex-col w-gap-2.5" data-checks-panel></div>
                {% endblock %}
            </div>
        {% endblock %}
    </div>
{% endblock %}

{% block axe_config %}
    {{ axe_configuration|json_script:"checker-axe-configuration" }}
{% endblock %}