<div id="tab-users" class="tab-content">
    <div class="card">
        <h2>👥 Usuarios del Dashboard</h2>
        <p style="color: #888;">Gestiona quién tiene acceso al panel web y qué permisos tiene.</p>
        
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; margin-top: 1rem;">
                <thead>
                    <tr style="border-bottom: 1px solid #333; text-align: left;">
                        <th style="padding: 10px;">Email</th>
                        <th style="padding: 10px;">Estado</th>
                        <th style="padding: 10px;">Permisos</th>
                        <th style="padding: 10px;">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    <% (locals.allDashboardUsers || []).forEach(function(u) { %>
                        <tr style="border-bottom: 1px solid #222;">
                            <td style="padding: 10px;"><%= u.email %></td>
                            <td style="padding: 10px;">
                                <% if(u.approved) { %>
                                    <span style="color: #0f0;">Aprobado</span>
                                <% } else { %>
                                    <span style="color: #ff4444;">Pendiente</span>
                                <% } %>
                            </td>
                            <td style="padding: 10px;">
                                <form action="/admin/dashboard-users/update" method="POST" id="form-perms-<%= u.id %>">
                                    <input type="hidden" name="user_id" value="<%= u.id %>">
                                    <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                                        <label style="font-size: 0.85rem; cursor: pointer;"><input type="checkbox" name="permissions" value="manage_config" <%= u.permissions?.manage_config ? 'checked' : '' %>> Config</label>
                                        <label style="font-size: 0.85rem; cursor: pointer;"><input type="checkbox" name="permissions" value="manage_users" <%= u.permissions?.manage_users ? 'checked' : '' %>> Usuarios</label>
                                        <label style="font-size: 0.85rem; cursor: pointer;"><input type="checkbox" name="permissions" value="manage_whitelist" <%= u.permissions?.manage_whitelist ? 'checked' : '' %>> Whitelist</label>
                                        <label style="font-size: 0.85rem; cursor: pointer;"><input type="checkbox" name="permissions" value="admin" <%= u.permissions?.admin ? 'checked' : '' %>> Admin Total</label>
                                    </div>
                                </form>
                            </td>
                            <td style="padding: 10px;">
                                <div style="display: flex; gap: 5px;">
                                    <button type="submit" form="form-perms-<%= u.id %>" class="btn-save" style="padding: 5px 10px; font-size: 0.8rem; width: auto;" title="Guardar Cambios">💾</button>
                                    <form action="/admin/dashboard-users/delete" method="POST" onsubmit="return confirm('¿Eliminar usuario permanentemente?');">
                                        <input type="hidden" name="user_id" value="<%= u.id %>">
                                        <button type="submit" class="btn-remove" style="padding: 5px 10px;" title="Eliminar Usuario">🗑️</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    <% }); %>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Solicitudes Pendientes (Gestión Rápida) -->
    <% if (pendingUsers && pendingUsers.length > 0) { %>
    <div class="card" style="margin-top: 2rem; border-left-color: #ff4444;">
        <h2 style="color: #ff4444;">🔔 Solicitudes de Acceso Pendientes</h2>
        <p style="color: #888;">Usuarios registrados esperando aprobación.</p>
        <ul class="user-list">
            <% pendingUsers.forEach(function(pUser) { %>
                <li class="user-item">
                    <span><strong><%= pUser.email %></strong> <small>(<%= new Date(pUser.created_at).toLocaleDateString() %>)</small></span>
                    <form action="/admin/approve" method="POST" style="display:inline;">
                        <input type="hidden" name="user_id" value="<%= pUser.id %>">
                        <button type="submit" name="action" value="approve" class="btn-approve">✅ Aprobar</button>
                        <button type="submit" name="action" value="reject" class="btn-remove">❌ Rechazar</button>
                    </form>
                </li>
            <% }); %>
        </ul>
    </div>
    <% } %>
</div>