{% load i18n wagtailadmin_tags %}
{# Shared between the checks side panel and the userbar's checks dialog. #}
{# Rendered by contentMetrics.ts into the [data-metric-value] slots. #}
<div class="w-flex w-flex-wrap w-gap-x-5 w-gap-y-4" data-metric-list>
    <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-metric-value="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-metric-value="reading-time">-</p>
    </div>
    <div>
        <h3 class="w-my-2 w-text-14 w-text-text-placeholder">{% trans 'Readability' %}</h3>
        <p class="w-font-semibold w-text-text-label" data-metric-value="readability-score">-</p>
    </div>
</div>
<details class="w-content-checks-disclosure w-mb-5" data-content-metrics-explainer>
    <summary>
        {% icon name="help" classname="w-w-4 w-h-4 w-mr-1" %}
        {% trans 'This data explained' %}
    </summary>
    <div class="w-content-checks-disclosure__content">
        <h3 class="w-h3">{% trans 'Words' %}</h3>
        <p>{% trans 'We extract the main content from the page preview, remove all formatting, and calculate the number of words.' %}</p>
        <h3 class="w-h3">{% trans 'Reading time' %}</h3>
        <p>{% trans 'We calculate reading time from word count, using different reading speeds for different languages.' %}</p>
        <h3 class="w-h3">{% trans 'Readability' %}</h3>
        <p>{% trans 'We use a readability formula based on length of words and sentences. Long sentences and words result in a worse readability score.' %}</p>
        <hr>
        {% help_block status="info" %}
            {% fragment as guide_link %}https://guide.wagtail.org/content-checks/{% endfragment %}
            {% blocktrans trimmed %}
                See our <a href="{{ guide_link }}" target="_blank">content checks guide</a> for more information on how content metrics are calculated.
            {% endblocktrans %}
        {% endhelp_block %}
    </div>
</details>