function createPermissionRow(type, value, description) {
    const idx = permIndex++;
    const container = document.getElementById('permissions-container');
    const div = document.createElement('div');
    div.className = 'permission-row';
    div.dataset.index = idx;
    div.innerHTML = `
        <select name="permissions[${idx}][type]" class="form-input permission-type">
            <option value="sudo" ${type === 'sudo' ? 'selected' : ''}>Sudo (passwordless)</option>
            <option value="command" ${type === 'command' ? 'selected' : ''}>Command</option>
            <option value="file_read" ${type === 'file_read' ? 'selected' : ''}>File Read</option>
            <option value="file_write" ${type === 'file_write' ? 'selected' : ''}>File Write</option>
            <option value="custom" ${type === 'custom' ? 'selected' : ''}>Custom Command</option>
        </select>
        <input type="text" name="permissions[${idx}][value]" class="form-input permission-value"
               placeholder="e.g., systemctl" value="${escapeHtml(value || '')}">
        <input type="text" name="permissions[${idx}][description]" class="form-input permission-desc"
               placeholder="Description (optional)" value="${escapeHtml(description || '')}">
        <button type="button" class="btn btn-danger btn-sm" onclick="removePermissionRow(this)"><i class="fas fa-times"></i></button>
    `;
    container.appendChild(div);
}

function removePermissionRow(btn) {
    btn.closest('.permission-row').remove();
}

function addPresetPermission(type, value, description) {
    createPermissionRow(type, value, description);
}

document.getElementById('addPermissionBtn').addEventListener('click', function() {
    createPermissionRow('command', '', '');
});

function escapeHtml(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}