{# User Reports Modal - Admin content moderation #}
<div id="user-reports-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-50 p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition" id="user-reports-backdrop"></div>
    <div class="modal-content glass-modal modal-radius-xl shadow-3xl w-full max-w-4xl max-h-[85vh] border border-white/10 modal-content-transition relative flex flex-col overflow-hidden">
        <div class="p-8 pb-4 flex-shrink-0 bg-white/[0.02] border-b border-white/5">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <div class="p-2.5 bg-orange-500/10 rounded-xl border border-orange-500/20 mr-4">
                        <i data-lucide="flag" class="h-6 w-6 text-orange-400"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-bold text-white">User Reports</h3>
                        <p class="text-xs text-zinc-500 mt-1 uppercase tracking-widest font-black">Content moderation</p>
                    </div>
                </div>
                <button type="button" class="close-modal-btn p-3 bg-white/[0.02] hover:bg-red-500/20 border border-white/5 hover:border-red-500/30 rounded-2xl text-zinc-500 hover:text-red-400">
                    <i data-lucide="x" class="h-5 w-5"></i>
                </button>
            </div>
            <div class="flex gap-2">
                <button type="button" class="reports-tab px-4 py-2 rounded-xl text-sm font-bold transition-all border bg-blue-500/20 text-blue-400 border-blue-500/30" data-status="pending">Pending</button>
                <button type="button" class="reports-tab px-4 py-2 rounded-xl text-sm font-bold transition-all border border-transparent text-zinc-500 hover:bg-white/5" data-status="dismissed">Dismissed</button>
                <button type="button" class="reports-tab px-4 py-2 rounded-xl text-sm font-bold transition-all border border-transparent text-zinc-500 hover:bg-white/5" data-status="resolved">Resolved</button>
            </div>
        </div>
        <div id="user-reports-body" class="flex-1 overflow-y-auto p-6 custom-scrollbar">
            <div id="reports-loading" class="text-center py-12 text-zinc-500 hidden">
                <i data-lucide="loader-2" class="h-12 w-12 mx-auto animate-spin"></i>
            </div>
            <div id="reports-list" class="space-y-4">
                {# Populated by JS #}
            </div>
            <div id="reports-empty" class="text-center py-12 text-zinc-600 hidden">
                <i data-lucide="inbox" class="h-16 w-16 mx-auto"></i>
                <p class="mt-4">No reports in this category</p>
            </div>
        </div>
    </div>
</div>

{# View Reported Post Modal #}
<div id="view-reported-post-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[60] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition" id="view-reported-post-backdrop"></div>
    <div class="modal-content glass-modal modal-radius-xl shadow-3xl w-full max-w-lg max-h-[85vh] border border-white/10 modal-content-transition relative flex flex-col overflow-hidden">
        <div class="p-6 pb-4 flex-shrink-0 border-b border-white/5">
            <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-white">Reported Post</h3>
                <button type="button" class="close-modal-btn view-post-close-btn p-2.5 rounded-xl bg-white/5 hover:bg-white/10 text-zinc-500 hover:text-white">
                    <i data-lucide="x" class="h-5 w-5"></i>
                </button>
            </div>
        </div>
        <div class="flex-1 overflow-y-auto p-6 custom-scrollbar">
            <h4 id="view-post-title" class="text-lg font-bold text-white mb-3"></h4>
            <p id="view-post-description" class="text-zinc-300 text-sm whitespace-pre-wrap"></p>
        </div>
    </div>
</div>

{# Report Action Confirm Modal - with admin reason input #}
<div id="report-action-confirm-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[110] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition z-[109]"></div>
    <div class="modal-content glass-modal modal-radius-lg shadow-3xl p-8 w-full max-w-md border border-white/10 modal-content-transition relative z-[110]">
        <div class="flex flex-col">
            <div class="p-4 bg-yellow-500/10 rounded-2xl border border-yellow-500/20 mb-6 w-fit">
                <i id="report-action-confirm-icon" data-lucide="alert-triangle" class="h-8 w-8 text-yellow-500"></i>
            </div>
            <h3 id="report-action-confirm-title" class="text-xl font-bold mb-2 text-white"></h3>
            <p id="report-action-confirm-message" class="text-sm text-zinc-500 leading-relaxed mb-4"></p>
            <div id="report-action-reason-wrap" class="mb-6">
                <label class="block text-xs font-bold text-zinc-500 uppercase mb-2">Reason for content owner (this will be shown to them)</label>
                <textarea id="report-action-admin-reason" rows="3" maxlength="500"
                    class="w-full bg-zinc-950/50 border border-white/10 rounded-xl py-3 px-4 text-zinc-200 placeholder-zinc-500 focus:border-blue-500/50 outline-none resize-none"
                    placeholder="Explain why this action was taken..."></textarea>
            </div>
        </div>
        <div class="flex gap-3">
            <button id="report-action-confirm-cancel" class="flex-1 glass-button py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-zinc-400">Cancel</button>
            <button id="report-action-confirm-btn" class="flex-1 bg-yellow-600 hover:bg-yellow-500 text-white py-3 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all">Confirm</button>
        </div>
    </div>
</div>