<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border-l-4 border-yellow-500">
        <div class="text-xs uppercase text-gray-500">Pending</div>
        <div class="text-2xl font-bold dark:text-white"><%= counts.pending %></div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border-l-4 border-blue-500">
        <div class="text-xs uppercase text-gray-500">Needs Info</div>
        <div class="text-2xl font-bold dark:text-white"><%= counts.needs_info %></div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border-l-4 border-green-500">
        <div class="text-xs uppercase text-gray-500">Approved</div>
        <div class="text-2xl font-bold dark:text-white"><%= counts.approved %></div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border-l-4 border-red-500">
        <div class="text-xs uppercase text-gray-500">Denied</div>
        <div class="text-2xl font-bold dark:text-white"><%= counts.denied %></div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 border-l-4 border-gray-500">
        <div class="text-xs uppercase text-gray-500">Total</div>
        <div class="text-2xl font-bold dark:text-white"><%= counts.total %></div>
    </div>
</div>

<div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead class="bg-gray-50 dark:bg-gray-900">
            <tr>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">ID</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Submitted</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Submitter</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Appeal</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
            <% if (appeals.length === 0) { %>
                <tr><td colspan="6" class="px-4 py-8 text-center text-gray-500">No appeals yet. The wall holds.</td></tr>
            <% } %>
            <% appeals.forEach(function(a) { %>
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                    <td class="px-4 py-3 text-sm font-mono dark:text-gray-300">#<%= a.id %></td>
                    <td class="px-4 py-3 text-xs text-gray-500 whitespace-nowrap"><%= new Date(a.created_at).toLocaleString() %></td>
                    <td class="px-4 py-3 text-sm dark:text-gray-200">
                        <div class="font-medium"><%= a.discord_username %></div>
                        <div class="text-xs text-gray-500"><%= a.email %></div>
                    </td>
                    <td class="px-4 py-3 text-xs dark:text-gray-300 max-w-md">
                        <details>
                            <summary class="cursor-pointer text-blue-500 hover:underline">View details</summary>
                            <div class="mt-2 space-y-2">
                                <div><span class="font-semibold">Circumstances:</span><p class="whitespace-pre-wrap"><%= a.circumstances %></p></div>
                                <div><span class="font-semibold">Requested outcome:</span><p class="whitespace-pre-wrap"><%= a.requested_outcome %></p></div>
                                <% if (a.trinity_notes) { %>
                                    <div class="pt-2 border-t border-gray-200 dark:border-gray-600">
                                        <span class="font-semibold">Trinity notes:</span>
                                        <p class="whitespace-pre-wrap text-gray-600 dark:text-gray-400"><%= a.trinity_notes %></p>
                                        <% if (a.actioned_by) { %>
                                            <p class="text-gray-500 italic">— <%= a.actioned_by %>, <%= new Date(a.actioned_at).toLocaleString() %></p>
                                        <% } %>
                                    </div>
                                <% } %>
                            </div>
                        </details>
                    </td>
                    <td class="px-4 py-3">
                        <% var badge = { pending:'bg-yellow-100 text-yellow-800', needs_info:'bg-blue-100 text-blue-800', approved:'bg-green-100 text-green-800', denied:'bg-red-100 text-red-800' }[a.status]; %>
                        <span class="px-2 py-1 rounded text-xs font-semibold <%= badge %>"><%= a.status %></span>
                    </td>
                    <td class="px-4 py-3 text-xs">
                        <div class="flex flex-col gap-1 min-w-[160px]">
                            <input type="text" id="notes-<%= a.id %>" name="notes" placeholder="Notes (optional)" class="px-2 py-1 text-xs border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white" />
                            <div class="flex gap-1 flex-wrap">
                                <button hx-post="/admin/appeals/<%= a.id %>/approve" hx-include="#notes-<%= a.id %>" hx-swap="outerHTML" class="bg-green-600 hover:bg-green-700 text-white px-2 py-1 rounded">Approve</button>
                                <button hx-post="/admin/appeals/<%= a.id %>/deny" hx-include="#notes-<%= a.id %>" hx-swap="outerHTML" class="bg-red-600 hover:bg-red-700 text-white px-2 py-1 rounded">Deny</button>
                                <button hx-post="/admin/appeals/<%= a.id %>/info" hx-include="#notes-<%= a.id %>" hx-swap="outerHTML" class="bg-blue-600 hover:bg-blue-700 text-white px-2 py-1 rounded">Info</button>
                                <% if (a.status !== 'pending') { %>
                                    <button hx-post="/admin/appeals/<%= a.id %>/reopen" hx-include="#notes-<%= a.id %>" hx-swap="outerHTML" class="bg-gray-600 hover:bg-gray-700 text-white px-2 py-1 rounded">Reopen</button>
                                <% } %>
                            </div>
                        </div>
                    </td>
                    </td>
                </tr>
            <% }); %>
        </tbody>
    </table>
</div>
