@include(snippets/header)

<div class="pagewrapper">
<div id="main">
    <style>
        .rp-page { max-width: 900px; margin: 0 auto; padding: 30px 15px 60px; }
        .rp-header { margin-bottom: 28px; }
        .rp-header h2 { margin: 0; font-weight: 800; letter-spacing: -0.5px; }
        .rp-header p { color: #888; margin: 5px 0 0 0; font-size: 0.9em; }

        .rp-filter-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; }
        .rp-filter-bar select {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 6px;
            color: #fff;
            padding: 7px 12px;
            outline: none;
            cursor: pointer;
            font-size: 0.88em;
        }
        .rp-filter-bar button {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 6px;
            color: #fff;
            padding: 7px 14px;
            cursor: pointer;
            font-size: 0.85em;
            font-weight: 600;
            transition: background 0.15s;
        }
        .rp-filter-bar button:hover { background: rgba(255,255,255,0.1); }

        .rp-feed { display: flex; flex-direction: column; gap: 14px; }
        .rp-state-msg { color: #666; font-style: italic; text-align: center; padding: 40px 0; }

        /* Card */
        .rp-card {
            background: rgba(255,255,255,0.025);
            border: 1px solid rgba(255,255,255,0.07);
            border-radius: 10px;
            overflow: hidden;
            transition: border-color 0.2s;
        }
        .rp-card:hover { border-color: rgba(255,255,255,0.14); }
        .rp-card.illegal-flag { border-left: 3px solid #dc3545; }

        /* Card top bar */
        .rp-card-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 16px;
            background: rgba(0,0,0,0.2);
            border-bottom: 1px solid rgba(255,255,255,0.05);
            gap: 12px;
            flex-wrap: wrap;
        }
        .rp-card-bar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        .rp-card-id {
            font-family: monospace;
            font-size: 0.78em;
            color: #666;
            background: rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 4px;
            padding: 1px 7px;
        }
        .rp-card-time { font-size: 0.78em; color: #666; }
        .rp-status-badge {
            font-size: 0.7em;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 2px 8px;
            border-radius: 10px;
        }
        .rp-status-pending  { background: rgba(255,193,7,0.15);  color: #ffc107; border: 1px solid rgba(255,193,7,0.3); }
        .rp-status-resolved { background: rgba(40,167,69,0.15);  color: #28a745; border: 1px solid rgba(40,167,69,0.3); }
        .rp-status-rejected { background: rgba(108,117,125,0.2); color: #aaa;    border: 1px solid rgba(108,117,125,0.3); }

        /* Card body */
        .rp-card-body {
            display: flex;
            gap: 0;
        }

        /* Media preview column */
        .rp-preview {
            width: 180px;
            min-width: 180px;
            background: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        .rp-preview img,
        .rp-preview video {
            width: 180px;
            height: 140px;
            object-fit: cover;
            display: block;
        }
        .rp-preview-link {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.55);
            opacity: 0;
            transition: opacity 0.2s;
            color: #fff;
            font-size: 1.4em;
            text-decoration: none;
        }
        .rp-preview:hover .rp-preview-link { opacity: 1; }
        .rp-no-preview {
            width: 180px;
            height: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #444;
            font-size: 2em;
        }

        /* Info column */
        .rp-info {
            flex: 1;
            padding: 14px 16px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 0;
        }
        .rp-meta-row {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            font-size: 0.83em;
            align-items: center;
        }
        .rp-meta-label { color: #555; text-transform: uppercase; font-size: 0.75em; font-weight: 700; letter-spacing: 0.5px; }
        .rp-reporter-link { color: var(--accent); font-weight: 600; text-decoration: none; }
        .rp-reporter-link:hover { text-decoration: underline; }
        .rp-reporter-ip { color: #555; font-size: 0.88em; }
        .rp-target-link { color: #ddd; font-weight: 500; text-decoration: none; }
        .rp-target-link:hover { color: #fff; }
        .rp-open-link { color: var(--accent); margin-left: 4px; font-size: 0.85em; }

        /* Category badges */
        .rp-cats { display: flex; flex-wrap: wrap; gap: 5px; }
        .rp-cat {
            display: inline-flex;
            align-items: center;
            padding: 2px 9px;
            border-radius: 10px;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }

        /* Reason */
        .rp-reason {
            font-size: 0.85em;
            color: #bbb;
            line-height: 1.5;
            word-break: break-word;
            background: rgba(0,0,0,0.2);
            border-left: 2px solid rgba(255,255,255,0.08);
            padding: 6px 10px;
            border-radius: 0 4px 4px 0;
            max-height: 80px;
            overflow-y: auto;
        }

        /* Actions footer */
        .rp-card-actions {
            display: flex;
            gap: 7px;
            flex-wrap: wrap;
            align-items: center;
            padding: 10px 16px;
            border-top: 1px solid rgba(255,255,255,0.05);
            background: rgba(0,0,0,0.1);
        }
        .rp-btn {
            border: none;
            border-radius: 5px;
            padding: 5px 13px;
            font-size: 0.78em;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            cursor: pointer;
            transition: opacity 0.15s, transform 0.1s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            line-height: 1.5;
        }
        .rp-btn:hover { opacity: 0.85; transform: translateY(-1px); }
        .rp-btn-resolve  { background: #28a745; color: #fff; }
        .rp-btn-reject   { background: #495057; color: #fff; }
        .rp-btn-delete   { background: #dc3545; color: #fff; }
        .rp-btn-warn     { background: #ffc107; color: #000; }
        .rp-btn-ban      { background: #b71c1c; color: #fff; }
        .rp-btn-unavail  { background: #6f42c1; color: #fff; }
        .rp-btn-avail    { background: #28a745; color: #fff; }
        .rp-btn-view     { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.12); }
        .rp-btn-secondary { background: #6c757d; color: #fff; }
        .rp-sep { width: 1px; height: 20px; background: rgba(255,255,255,0.08); margin: 0 2px; }
        .rp-anon-note { color: #555; font-size: 0.78em; font-style: italic; }

        /* Pagination */
        .rp-pagination { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 24px; }
        .rp-pagination button {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 6px;
            color: #fff;
            padding: 6px 16px;
            cursor: pointer;
            font-size: 0.85em;
            transition: background 0.15s;
        }
        .rp-pagination button:hover { background: rgba(255,255,255,0.1); }
        .rp-pagination .rp-page-info { color: #666; font-size: 0.85em; }

        @media (max-width: 600px) {
            .rp-preview { width: 120px; min-width: 120px; }
            .rp-preview img, .rp-preview video, .rp-no-preview { width: 120px; }
        }
    </style>

    <div class="container rp-page">
        <div class="rp-header">
            <h2>User Reports</h2>
            <p>Review and resolve content flags from the community.</p>
        </div>
        <div class="rp-filter-bar">
            <select id="report-status-filter">
                <option value="pending">Pending</option>
                <option value="resolved">Resolved</option>
                <option value="rejected">Rejected</option>
            </select>
            <button onclick="loadReports(1)"><i class="fa-solid fa-rotate-right"></i> Refresh</button>
        </div>

        <div id="reports-feed" class="rp-feed">
            <div class="rp-state-msg">Loading reports…</div>
        </div>
        <div id="reports-pagination" class="rp-pagination"></div>
    </div>

<script src="/s/js/mod-reports.js?v=1789785562"></script>
</div>
</div>
</div>
@include(snippets/footer)