{% load i18n wagtailadmin_tags %}
{% block result_template %}
    <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"
            >
                <span class="w-a11y-result__selector-text" data-a11y-result-selector-text></span>
                {% icon name="link-external" classname="w-a11y-result__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>
                <div class="w-flex w-flex-wrap w-gap-x-10 w-gap-y-4">
                    {% block metrics %}
                        <div>
                            <h3 class="w-my-2 w-text-14 w-text-text-placeholder">{% trans 'Words' %}</h3>
                            <p class="w-font-semibold w-text-text-label" data-content-word-count>-</p>
                        </div>
                        <div>
                            <h3 class="w-my-2 w-text-14 w-text-text-placeholder">{% trans 'Reading time' %}</h3>
                            <p class="w-font-semibold w-text-text-label" data-content-reading-time>-</p>
                        </div>
                    {% endblock %}
                </div>
            </div>
        {% 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-a11y-result__count" data-a11y-result-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:"accessibility-axe-configuration" }}
{% endblock %}