<div class="divide-y divide-gray-200 dark:divide-gray-700">
    <% if (logs.length === 0) { %>
        <div class="p-8 text-center text-gray-500">No audit logs found for this criteria.</div>
    <% } %>

    <% logs.forEach(log => { 
        let icon = '📝';
        let colorClass = 'text-blue-500 bg-blue-100 dark:bg-blue-900/30';
        
        if (log.action_type.includes('grace') || log.action_type.includes('payment')) {
            icon = '💰'; colorClass = 'text-green-500 bg-green-100 dark:bg-green-900/30';
        } else if (log.action_type.includes('sync') || log.action_type.includes('whitelist')) {
            icon = '⚡'; colorClass = 'text-purple-500 bg-purple-100 dark:bg-purple-900/30';
        } else if (log.action_type.includes('ban') || log.action_type.includes('remove')) {
            icon = '🚨'; colorClass = 'text-red-500 bg-red-100 dark:bg-red-900/30';
        }
    %>
    <div class="p-4 flex gap-4 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
        <div class="mt-1">
            <div class="w-8 h-8 rounded-full flex items-center justify-center text-sm <%= colorClass %>">
                <%= icon %>
            </div>
        </div>
        <div class="flex-1">
            <div class="flex justify-between items-start">
                <div>
                    <span class="font-bold dark:text-white"><%= log.admin_username || 'Trinity Member' %></span>
                    <span class="text-gray-500 dark:text-gray-400 text-sm mx-1">performed</span>
                    <span class="font-mono text-xs bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded dark:text-gray-300"><%= log.action_type %></span>
                </div>
                <span class="text-xs text-gray-400"><%= new Date(log.performed_at).toLocaleString() %></span>
            </div>
            <div class="mt-2 text-sm text-gray-600 dark:text-gray-300">
                <strong>Target:</strong> <span class="font-mono text-xs"><%= log.target_identifier || 'Global' %></span>
            </div>
            <% if (log.details) { %>
            <div class="mt-2 text-xs font-mono bg-gray-50 dark:bg-gray-900 p-2 rounded text-gray-500 dark:text-gray-400 overflow-x-auto">
                <%= typeof log.details === 'object' ? JSON.stringify(log.details) : log.details %>
            </div>
            <% } %>
        </div>
    </div>
    <% }) %>
</div>

<div class="p-4 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-200 dark:border-gray-700 text-center">
    <button hx-get="/admin/audit/feed?page=<%= page + 1 %>&type=<%= filterType %>" 
            hx-target="#audit-feed" 
            hx-swap="outerHTML"
            class="text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400">
        Load Older Logs ↓
    </button>
</div>
