{% load i18n %}
{% if global_usage_detail.rollup_pending_user_count %}
<div class="alert alert-info py-2 mb-3" role="status">
    <div class="d-flex align-items-start gap-2">
        <i class="fas fa-clock mt-1" aria-hidden="true"></i>
        <span>
            {% blocktrans count counter=global_usage_detail.rollup_pending_user_count %}
            Usage data is still being prepared for {{ counter }} user. The 30-day values below are partial.
            {% plural %}
            Usage data is still being prepared for {{ counter }} users. The 30-day values below are partial.
            {% endblocktrans %}
        </span>
    </div>
</div>
{% endif %}

<div class="admin-users-metrics">
    <div class="admin-users-metric">
        <div class="admin-users-metric-label">{% trans "Users in results" %}</div>
        <div class="admin-users-metric-value">{{ global_usage_detail.visible_user_count }}</div>
        <div class="admin-users-metric-note">{% trans "Same population as the filtered table" %}</div>
    </div>
    <div class="admin-users-metric">
        <div class="admin-users-metric-label">{% trans "Active users / 30d" %}</div>
        <div class="admin-users-metric-value">{{ global_usage_detail.active_user_count_30d }}</div>
        <div class="admin-users-metric-note">{% trans "At least one recorded visit" %}</div>
    </div>
    <div class="admin-users-metric">
        <div class="admin-users-metric-label">{% trans "Visits / 30d" %}</div>
        <div class="admin-users-metric-value">{{ global_usage_detail.activity_30d_count }}</div>
        <div class="admin-users-metric-note">
            {% if global_usage_detail.timeline_30d_peak_day_label %}
            {% trans "Peak" %}: {{ global_usage_detail.timeline_30d_peak_day_label }} · {{ global_usage_detail.timeline_30d_peak_day_count }}
            {% else %}
            {% trans "No recent usage" %}
            {% endif %}
        </div>
    </div>
</div>

<div class="mt-4">
    <div class="d-flex flex-wrap align-items-baseline justify-content-between gap-2 mb-3">
        <h3 class="h6 mb-0">{% trans "Top pages" %}</h3>
        <span class="text-body-secondary small">{% trans "Recorded page visits · 30 days" %}</span>
    </div>
    {% if not global_usage_detail.rollup_pending_user_count and not global_usage_detail.page_breakdown_matches_activity_30d %}
    <div class="alert alert-warning py-2 small" role="status">
        {% blocktrans with categorized=global_usage_detail.page_total_30d overall=global_usage_detail.activity_30d_count %}
        The page breakdown contains {{ categorized }} categorized visits, while overall activity contains {{ overall }}. Treat the breakdown as approximate.
        {% endblocktrans %}
    </div>
    {% endif %}
    {% if global_usage_detail.page_bars %}
    <div class="admin-users-page-list">
        {% for page in global_usage_detail.page_bars %}
        <div class="admin-users-page-row">
            <div class="admin-users-page-row-header">
                <span class="admin-users-page-label" title="{{ page.label }}">{{ page.label }}</span>
                <span class="text-body-secondary text-nowrap">
                    {{ page.recent_30d_count }} · {{ page.page_share_percent }}%
                </span>
            </div>
            <div class="progress admin-users-page-progress" role="progressbar" aria-label="{% blocktrans with page_label=page.label %}Share of visits for {{ page_label }}{% endblocktrans %}" aria-valuenow="{{ page.page_share_percent }}" aria-valuemin="0" aria-valuemax="100">
                <div class="progress-bar" style="width: {{ page.page_share_percent }}%"></div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-body-secondary small">{% trans "No page usage has been recorded for this period." %}</div>
    {% endif %}
</div>