<% if (mismatches.length === 0) { %>
    <div class="p-8 text-center text-green-500 font-bold text-lg">
        🎉 Perfect Sync! No role mismatches found.
    </div>
<% } else { %>
    <table class="w-full text-sm text-left">
        <thead class="bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-b border-gray-200 dark:border-gray-700">
            <tr>
                <th class="px-6 py-3 font-medium">Player</th>
                <th class="px-6 py-3 font-medium">Expected Tier</th>
                <th class="px-6 py-3 font-medium">Missing Role ID</th>
                <th class="px-6 py-3 font-medium text-right">Action</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
            <% mismatches.forEach(m => { %>
            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50">
                <td class="px-6 py-4">
                    <div class="font-bold dark:text-white"><%= m.username %></div>
                    <div class="text-xs text-gray-500 font-mono"><%= m.discord_id %></div>
                </td>
                <td class="px-6 py-4 dark:text-gray-300 font-medium"><%= m.tier_name %></td>
                <td class="px-6 py-4 font-mono text-xs text-red-500"><%= m.expected_role %></td>
                <td class="px-6 py-4 text-right" id="action-<%= m.discord_id %>">
                    <% if (m.expected_role.includes('left')) { %>
                        <span class="text-gray-500 text-xs italic">User left server</span>
                    <% } else { %>
                        <button hx-post="/admin/roles/resync/<%= m.discord_id %>"
                                hx-vals='{"expected_role": "<%= m.expected_role %>"}'
                                hx-target="#action-<%= m.discord_id %>"
                                class="px-3 py-1.5 bg-blue-100 text-blue-700 hover:bg-blue-200 dark:bg-blue-900/30 dark:text-blue-400 rounded text-xs font-medium transition-colors">
                            Fix Role
                        </button>
                    <% } %>
                </td>
            </tr>
            <% }) %>
        </tbody>
    </table>
<% } %>
