{% extends "admin_base.html" %}
{% block extra_head %}
{{ super() }}
<link rel="stylesheet" href="{{ static_url('/static/css/moderation.css') }}">
{% endblock %}
{% block admin_content %}
<div class="admin-toolbar">
    <h2>Moderation</h2>
    <span class="sla-badge {% if sla.within_sla %}sla-ok{% else %}sla-breached{% endif %}" title="Oldest open report against the published response commitment">
        Oldest open {{ sla.oldest_open_hours }}h / {{ sla.sla_hours }}h
        {% if sla.breached %}&middot; {{ sla.breached }} over{% endif %}
    </span>
</div>

<nav class="admin-tabs" data-overflow-tabs aria-label="Report status">
    <div class="overflow-tabs-strip">
        {% for tab in statuses %}
        <a href="/admin/moderation?status={{ tab['key'] }}" class="admin-tab {% if tab['active'] %}active{% endif %}" data-menu-label="{{ tab['label'] }} ({{ tab['count'] }})">
            {{ tab['label'] }} <span class="admin-tab-count">{{ tab['count'] }}</span>
        </a>
        {% endfor %}
    </div>
    <button type="button" class="admin-tab overflow-tabs-more" aria-haspopup="menu" aria-label="More tabs" hidden><span class="icon">&#x22EF;</span> More</button>
</nav>

<table class="admin-table">
    <caption class="sr-only">Reported content awaiting a moderation decision</caption>
    <thead>
        <tr>
            <th scope="col">Target</th>
            <th scope="col">Reason</th>
            <th scope="col">Severity</th>
            <th scope="col">Reports</th>
            <th scope="col">Author</th>
            <th scope="col">Filed</th>
            <th scope="col" class="admin-table-actions">Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for report in reports %}
        <tr>
            <td><a href="{{ report['target_url'] }}">{{ report['target_type'] }}</a></td>
            <td>{{ report['reason_label'] }}</td>
            <td><span class="severity-badge severity-{{ report['severity'] }}">{{ report['severity'] }}</span></td>
            <td>{{ report['report_count'] }}</td>
            <td>{{ report['owner_name'] or '-' }}</td>
            <td>{{ dt_ago(report['created_at']) }}</td>
            <td class="admin-table-actions">
                <a href="/admin/moderation/{{ report['uid'] }}" class="admin-btn admin-btn-sm">Review</a>
            </td>
        </tr>
        {% else %}
        <tr>
            <td colspan="7" class="empty-state">No reports in this state.</td>
        </tr>
        {% endfor %}
    </tbody>
</table>

{% set pagination_query = 'status=' ~ status ~ '&' %}{% include "_pagination.html" %}
{% endblock %}