<div id="tab-commands" class="tab-content">
    <div class="card">
        <h2>🕹️ Gestión de Comandos</h2>
        <p style="color: #888;">Activa, desactiva y define el permiso mínimo requerido para cada comando del bot.</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;">Comando</th>
                        <th style="padding: 10px;">Descripción</th>
                        <th style="padding: 10px;">Permiso Mínimo</th>
                        <th style="padding: 10px;">Estado</th>
                        <th style="padding: 10px;">Guardar</th>
                    </tr>
                </thead>
                <tbody>
                    <% (locals.commandPermissions || []).forEach(function(cmd) { %>
                        <tr style="border-bottom: 1px solid #222;">
                            <form action="/config/commands" method="POST">
                                <input type="hidden" name="command_name" value="<%= cmd.command_name %>">
                                <td style="padding: 10px; font-family: monospace; color: #D4AF37;">!<%= cmd.command_name %></td>
                                <td style="padding: 10px; font-size: 0.85rem; color: #aaa;"><%= cmd.description %></td>
                                <td style="padding: 10px;">
                                    <select name="role_id" style="margin: 0;">
                                        <option value="4" <%= cmd.role_id == 4 ? 'selected' : '' %>>👁️ Viewer</option>
                                        <option value="3" <%= cmd.role_id == 3 ? 'selected' : '' %>>💎 VIP</option>
                                        <option value="2" <%= cmd.role_id == 2 ? 'selected' : '' %>>⚔️ Moderador</option>
                                        <option value="1" <%= cmd.role_id == 1 ? 'selected' : '' %>>👑 Streamer</option>
                                    </select>
                                </td>
                                <td style="padding: 10px;"><input type="checkbox" name="is_active" <%= cmd.is_active ? 'checked' : '' %>></td>
                                <td style="padding: 10px;"><button type="submit" class="btn-save" style="width: auto; padding: 5px 15px;">💾</button></td>
                            </form>
                        </tr>
                    <% }); %>
                </tbody>
            </table>
        </div>
    </div>
</div>