{% load i18n %}
{% if usage_detail.has_usage %}
<div class="admin-users-metrics">
    <div class="admin-users-metric">
        <div class="admin-users-metric-label">{% trans "Visits / 30d" %}</div>
        <div class="admin-users-metric-value">{{ usage_detail.activity_30d_count }}</div>
        <div class="admin-users-metric-note">{% trans "Recent recorded activity" %}</div>
    </div>
    <div class="admin-users-metric">
        <div class="admin-users-metric-label">{% trans "All-time visits" %}</div>
        <div class="admin-users-metric-value">{{ usage_detail.total_usage_count }}</div>
        <div class="admin-users-metric-note">{% trans "Since usage tracking began" %}</div>
    </div>
    <div class="admin-users-metric">
        <div class="admin-users-metric-label">{% trans "Last visit" %}</div>
        <div class="admin-users-metric-value fs-6">{{ usage_detail.last_used_at|date:"Y-m-d H:i" }}</div>
        <div class="admin-users-metric-note">
            {% if usage_detail.first_used_at %}{% trans "First" %}: {{ usage_detail.first_used_at|date:"Y-m-d" }}{% 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 usage_detail.page_breakdown_matches_activity_30d %}
    <div class="alert alert-warning py-2 small" role="status">
        {% blocktrans with categorized=usage_detail.page_total_30d overall=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 usage_detail.page_bars %}
    <div class="admin-users-page-list">
        {% for page in 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>
{% else %}
<div class="alert alert-secondary mb-0">{% trans "Usage detail will appear after the user opens an Indy Hub page." %}</div>
{% endif %}