{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/admin.css') }}">
<link rel="stylesheet" href="{{ static_url('/static/css/moderation.css') }}">
{% endblock %}
{% block content %}
<div class="page-narrow">
    <h1>Your reports</h1>
    <p class="report-intro">Every report you file is acknowledged here, together with the outcome once a moderator decides. Reports are private to you.</p>

    <table class="admin-table">
        <caption class="sr-only">Reports you filed and their outcome</caption>
        <thead>
            <tr>
                <th scope="col">Target</th>
                <th scope="col">Reason</th>
                <th scope="col">Status</th>
                <th scope="col">Filed</th>
                <th scope="col">Resolved</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="status-badge status-{{ report['status'] }}">{{ report['status'] }}</span></td>
                <td>{{ dt_ago(report['created_at']) }}</td>
                <td>{% if report['resolved_at'] %}{{ dt_ago(report['resolved_at']) }}{% else %}-{% endif %}</td>
            </tr>
            {% else %}
            <tr><td colspan="5" class="empty-state">You have not filed any reports.</td></tr>
            {% endfor %}
        </tbody>
    </table>

    {% include "_pagination.html" %}
</div>
{% endblock %}