<div class="form-header">
    <h2 id="formTitle">Nuevo Usuario</h2>
</div>

<form id="userForm">
    <input type="hidden" id="userId" name="id">
    
    <div class="form-group">
        <label for="username">Nombre de Usuario *</label>
        <input type="text" id="username" name="username" required class="form-control">
    </div>
    
    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" class="form-control">
    </div>
    
    <div class="form-group">
        <label for="password">Contraseña <span id="passReq">*</span></label>
        <input type="password" id="password" name="password" class="form-control">
        <small id="passHelp" style="color: #666; display: none;">Dejar en blanco para mantener la actual</small>
    </div>
    
    <div class="form-group">
        <label for="rol_id">Rol *</label>
        <select id="rol_id" name="rol_id" required class="form-control" onchange="updatePermissionsView()">
            <!-- Populated by JS -->
        </select>
    </div>
    
    <div class="form-group">
        <label>Permisos</label>
        <div id="permissionsList" class="permissions-grid">
            <!-- Populated by JS -->
        </div>
    </div>
    
    <div class="form-actions">
        <button type="submit" class="btn btn-primary">Guardar</button>
        <button type="button" onclick="closeModal()" class="btn btn-secondary">Cancelar</button>
    </div>
</form>

<style>
    .form-group { margin-bottom: 15px; }
    .form-group label { display: block; margin-bottom: 5px; font-weight: 600; }
    .form-control {
        width: 100%;
        padding: 8px 12px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 14px;
    }
    .permissions-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 10px;
        max-height: 200px;
        overflow-y: auto;
        border: 1px solid #eee;
        padding: 10px;
        border-radius: 5px;
    }
    .perm-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
    }
    .form-actions {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
    }
</style>


