// v4.3.6-t1740503330
Ext.ns('Proxmox');
Ext.ns('Proxmox.Setup');

if (!Ext.isDefined(Proxmox.Setup.auth_cookie_name)) {
    throw "Proxmox library not initialized";
}

// avoid errors when running without development tools
if (!Ext.isDefined(Ext.global.console)) {
    let console = {
	dir: function() {
	    // do nothing
	},
	log: function() {
	    // do nothing
	},
	warn: function() {
	    // do nothing
	},
    };
    Ext.global.console = console;
}

Ext.Ajax.defaultHeaders = {
    'Accept': 'application/json',
};

Ext.Ajax.on('beforerequest', function(conn, options) {
    if (Proxmox.CSRFPreventionToken) {
	if (!options.headers) {
	    options.headers = {};
	}
	options.headers.CSRFPreventionToken = Proxmox.CSRFPreventionToken;
    }
    let storedAuth = Proxmox.Utils.getStoredAuth();
    if (storedAuth.token) {
	options.headers.Authorization = storedAuth.token;
    }
});

Ext.define('Proxmox.Utils', { // a singleton
utilities: {

    yesText: gettext('Yes'),
    noText: gettext('No'),
    enabledText: gettext('Enabled'),
    disabledText: gettext('Disabled'),
    noneText: gettext('none'),
    NoneText: gettext('None'),
    errorText: gettext('Error'),
    warningsText: gettext('Warnings'),
    unknownText: gettext('Unknown'),
    defaultText: gettext('Default'),
    daysText: gettext('days'),
    dayText: gettext('day'),
    runningText: gettext('running'),
    stoppedText: gettext('stopped'),
    neverText: gettext('never'),
    totalText: gettext('Total'),
    usedText: gettext('Used'),
    directoryText: gettext('Directory'),
    stateText: gettext('State'),
    groupText: gettext('Group'),

    language_map: { //language map is sorted alphabetically by iso 639-1
	ar: `العربية - ${gettext("Arabic")}`,
	bg: `Български - ${gettext("Bulgarian")}`,
	ca: `Català - ${gettext("Catalan")}`,
	da: `Dansk - ${gettext("Danish")}`,
	de: `Deutsch - ${gettext("German")}`,
	en: `English - ${gettext("English")}`,
	es: `Español - ${gettext("Spanish")}`,
	eu: `Euskera (Basque) - ${gettext("Euskera (Basque)")}`,
	fa: `فارسی - ${gettext("Persian (Farsi)")}`,
	fr: `Français - ${gettext("French")}`,
	hr: `Hrvatski - ${gettext("Croatian")}`,
	he: `עברית - ${gettext("Hebrew")}`,
	it: `Italiano - ${gettext("Italian")}`,
	ja: `日本語 - ${gettext("Japanese")}`,
	ka: `ქართული - ${gettext("Georgian")}`,
	ko: `한국어 - ${gettext("Korean")}`,
	nb: `Bokmål - ${gettext("Norwegian (Bokmal)")}`,
	nl: `Nederlands - ${gettext("Dutch")}`,
	nn: `Nynorsk - ${gettext("Norwegian (Nynorsk)")}`,
	pl: `Polski - ${gettext("Polish")}`,
	pt_BR: `Português Brasileiro - ${gettext("Portuguese (Brazil)")}`,
	ru: `Русский - ${gettext("Russian")}`,
	sl: `Slovenščina - ${gettext("Slovenian")}`,
	sv: `Svenska - ${gettext("Swedish")}`,
	tr: `Türkçe - ${gettext("Turkish")}`,
	ukr: `Українська - ${gettext("Ukrainian")}`,
	zh_CN: `中文（简体）- ${gettext("Chinese (Simplified)")}`,
	zh_TW: `中文（繁體）- ${gettext("Chinese (Traditional)")}`,
    },

    render_language: function(value) {
	if (!value || value === '__default__') {
	    return Proxmox.Utils.defaultText + ' (English)';
	}
	if (value === 'kr') {
	    value = 'ko'; // fix-up wrongly used Korean code. FIXME: remove with trixie releases
	}
	let text = Proxmox.Utils.language_map[value];
	if (text) {
	    return text + ' (' + value + ')';
	}
	return value;
    },

    renderEnabledIcon: enabled => `<i class="fa fa-${enabled ? 'check' : 'minus'}"></i>`,

    language_array: function() {
	let data = [['__default__', Proxmox.Utils.render_language('')]];
	Ext.Object.each(Proxmox.Utils.language_map, function(key, value) {
	    data.push([key, Proxmox.Utils.render_language(value)]);
	});

	return data;
    },

    theme_map: {
	crisp: 'Light theme',
	"proxmox-dark": 'Proxmox Dark',
    },

    render_theme: function(value) {
	if (!value || value === '__default__') {
	    return Proxmox.Utils.defaultText + ' (auto)';
	}
	let text = Proxmox.Utils.theme_map[value];
	if (text) {
	    return text;
	}
	return value;
    },

    theme_array: function() {
	let data = [['__default__', Proxmox.Utils.render_theme('')]];
	Ext.Object.each(Proxmox.Utils.theme_map, function(key, value) {
	    data.push([key, Proxmox.Utils.render_theme(value)]);
	});

	return data;
    },

    bond_mode_gettext_map: {
	'802.3ad': 'LACP (802.3ad)',
	'lacp-balance-slb': 'LACP (balance-slb)',
	'lacp-balance-tcp': 'LACP (balance-tcp)',
    },

    render_bond_mode: value => Proxmox.Utils.bond_mode_gettext_map[value] || value || '',

    bond_mode_array: function(modes) {
	return modes.map(mode => [mode, Proxmox.Utils.render_bond_mode(mode)]);
    },

    getNoSubKeyHtml: function(url) {
	let html_url = Ext.String.format('<a target="_blank" href="{0}">www.proxmox.com</a>', url || 'https://www.proxmox.com');
	return Ext.String.format(
	    gettext('You do not have a valid subscription for this server. Please visit {0} to get a list of available options.'),
	    html_url,
	);
    },

    format_boolean_with_default: function(value) {
	if (Ext.isDefined(value) && value !== '__default__') {
	    return value ? Proxmox.Utils.yesText : Proxmox.Utils.noText;
	}
	return Proxmox.Utils.defaultText;
    },

    format_boolean: function(value) {
	return value ? Proxmox.Utils.yesText : Proxmox.Utils.noText;
    },

    format_neg_boolean: function(value) {
	return !value ? Proxmox.Utils.yesText : Proxmox.Utils.noText;
    },

    format_enabled_toggle: function(value) {
	return value ? Proxmox.Utils.enabledText : Proxmox.Utils.disabledText;
    },

    format_expire: function(date) {
	if (!date) {
	    return Proxmox.Utils.neverText;
	}
	return Ext.Date.format(date, "Y-m-d");
    },

    // somewhat like a human would tell durations, omit zero values and do not
    // give seconds precision if we talk days already
    format_duration_human: function(ut) {
	let seconds = 0, minutes = 0, hours = 0, days = 0, years = 0;

	if (ut <= 0.1) {
	    return '<0.1s';
	}

	let remaining = ut;
	seconds = Number((remaining % 60).toFixed(1));
	remaining = Math.trunc(remaining / 60);
	if (remaining > 0) {
	    minutes = remaining % 60;
	    remaining = Math.trunc(remaining / 60);
	    if (remaining > 0) {
		hours = remaining % 24;
		remaining = Math.trunc(remaining / 24);
		if (remaining > 0) {
		    days = remaining % 365;
		    remaining = Math.trunc(remaining / 365); // yea, just lets ignore leap years...
		    if (remaining > 0) {
			years = remaining;
		    }
		}
	    }
	}

	let res = [];
	let add = (t, unit) => {
	    if (t > 0) res.push(t + unit);
	    return t > 0;
	};

	let addMinutes = !add(years, 'y');
	let addSeconds = !add(days, 'd');
	add(hours, 'h');
	if (addMinutes) {
	    add(minutes, 'm');
	    if (addSeconds) {
		add(seconds, 's');
	    }
	}
	return res.join(' ');
    },

    format_duration_long: function(ut) {
	let days = Math.floor(ut / 86400);
	ut -= days*86400;
	let hours = Math.floor(ut / 3600);
	ut -= hours*3600;
	let mins = Math.floor(ut / 60);
	ut -= mins*60;

	let hours_str = '00' + hours.toString();
	hours_str = hours_str.substr(hours_str.length - 2);
	let mins_str = "00" + mins.toString();
	mins_str = mins_str.substr(mins_str.length - 2);
	let ut_str = "00" + ut.toString();
	ut_str = ut_str.substr(ut_str.length - 2);

	if (days) {
	    let ds = days > 1 ? Proxmox.Utils.daysText : Proxmox.Utils.dayText;
	    return days.toString() + ' ' + ds + ' ' +
		hours_str + ':' + mins_str + ':' + ut_str;
	} else {
	    return hours_str + ':' + mins_str + ':' + ut_str;
	}
    },

    format_subscription_level: function(level) {
	if (level === 'c') {
	    return 'Community';
	} else if (level === 'b') {
	    return 'Basic';
	} else if (level === 's') {
	    return 'Standard';
	} else if (level === 'p') {
	    return 'Premium';
	} else {
	    return Proxmox.Utils.noneText;
	}
    },

    compute_min_label_width: function(text, width) {
	if (width === undefined) { width = 100; }

	let tm = new Ext.util.TextMetrics();
	let min = tm.getWidth(text + ':');

	return min < width ? width : min;
    },

    // returns username + realm
    parse_userid: function(userid) {
	if (!Ext.isString(userid)) {
	    return [undefined, undefined];
	}

	let match = userid.match(/^(.+)@([^@]+)$/);
	if (match !== null) {
	    return [match[1], match[2]];
	}

	return [undefined, undefined];
    },

    render_username: function(userid) {
	let username = Proxmox.Utils.parse_userid(userid)[0] || "";
	return Ext.htmlEncode(username);
    },

    render_realm: function(userid) {
	let username = Proxmox.Utils.parse_userid(userid)[1] || "";
	return Ext.htmlEncode(username);
    },

    getStoredAuth: function() {
	let storedAuth = JSON.parse(window.localStorage.getItem('ProxmoxUser'));
	return storedAuth || {};
    },

    setAuthData: function(data) {
	Proxmox.UserName = data.username;
	Proxmox.LoggedOut = data.LoggedOut;
	// creates a session cookie (expire = null)
	// that way the cookie gets deleted after the browser window is closed
	if (data.ticket) {
	    Proxmox.CSRFPreventionToken = data.CSRFPreventionToken;
	    Ext.util.Cookies.set(Proxmox.Setup.auth_cookie_name, data.ticket, null, '/', null, true, "lax");
	}

	if (data.token) {
	    window.localStorage.setItem('ProxmoxUser', JSON.stringify(data));
	}
    },

    authOK: function() {
	if (Proxmox.LoggedOut) {
	    return undefined;
	}
	let storedAuth = Proxmox.Utils.getStoredAuth();
	let cookie = Ext.util.Cookies.get(Proxmox.Setup.auth_cookie_name);
	if ((Proxmox.UserName !== '' && cookie && !cookie.startsWith("PVE:tfa!")) || storedAuth.token) {
	    return cookie || storedAuth.token;
	} else {
	    return false;
	}
    },

    authClear: function() {
	if (Proxmox.LoggedOut) {
	    return;
	}
	// ExtJS clear is basically the same, but browser may complain if any cookie isn't "secure"
	Ext.util.Cookies.set(Proxmox.Setup.auth_cookie_name, "", new Date(0), null, null, true, "lax");
	window.localStorage.removeItem("ProxmoxUser");
    },

    // The End-User gets redirected back here after login on the OpenID auth. portal, and in the
    // redirection URL the state and auth.code are passed as URL GET params, this helper parses those
    getOpenIDRedirectionAuthorization: function() {
	const auth = Ext.Object.fromQueryString(window.location.search);
	if (auth.state !== undefined && auth.code !== undefined) {
	    return auth;
	}
	return undefined;
    },

    // comp.setLoading() is buggy in ExtJS 4.0.7, so we
    // use el.mask() instead
    setErrorMask: function(comp, msg) {
	let el = comp.el;
	if (!el) {
	    return;
	}
	if (!msg) {
	    el.unmask();
	} else if (msg === true) {
	    el.mask(gettext("Loading..."));
	} else {
	    el.mask(msg);
	}
    },

    getResponseErrorMessage: (err) => {
	if (!err.statusText) {
	    return gettext('Connection error');
	}
	let msg = [`${err.statusText} (${err.status})`];
	if (err.response && err.response.responseText) {
	    let txt = err.response.responseText;
	    try {
		let res = JSON.parse(txt);
		if (res.errors && typeof res.errors === 'object') {
		    for (let [key, value] of Object.entries(res.errors)) {
			msg.push(Ext.String.htmlEncode(`${key}: ${value}`));
		    }
		}
	    } catch (e) {
		// fallback to string
		msg.push(Ext.String.htmlEncode(txt));
	    }
	}
	return msg.join('<br>');
    },

    monStoreErrors: function(component, store, clearMaskBeforeLoad, errorCallback) {
	if (clearMaskBeforeLoad) {
	    component.mon(store, 'beforeload', function(s, operation, eOpts) {
		Proxmox.Utils.setErrorMask(component, false);
	    });
	} else {
	    component.mon(store, 'beforeload', function(s, operation, eOpts) {
		if (!component.loadCount) {
		    component.loadCount = 0; // make sure it is nucomponent.ic
		    Proxmox.Utils.setErrorMask(component, true);
		}
	    });
	}

	// only works with 'proxmox' proxy
	component.mon(store.proxy, 'afterload', function(proxy, request, success) {
	    component.loadCount++;

	    if (success) {
		Proxmox.Utils.setErrorMask(component, false);
		return;
	    }

	    let error = request._operation.getError();
	    let msg = Proxmox.Utils.getResponseErrorMessage(error);
	    if (!errorCallback || !errorCallback(error, msg)) {
		Proxmox.Utils.setErrorMask(component, msg);
	    }
	});
    },

    extractRequestError: function(result, verbose) {
	let msg = gettext('Successful');

	if (!result.success) {
	    msg = gettext("Unknown error");
	    if (result.message) {
		msg = Ext.htmlEncode(result.message);
		if (result.status) {
		    msg += ` (${result.status})`;
		}
	    }
	    if (verbose && Ext.isObject(result.errors)) {
		msg += "<br>";
		Ext.Object.each(result.errors, (prop, desc) => {
		    msg += `<br><b>${Ext.htmlEncode(prop)}</b>: ${Ext.htmlEncode(desc)}`;
		});
	    }
	}

	return msg;
    },

    // Ext.Ajax.request
    API2Request: function(reqOpts) {
	let newopts = Ext.apply({
	    waitMsg: gettext('Please wait...'),
	}, reqOpts);

	// default to enable if user isn't handling the failure already explicitly
	let autoErrorAlert = reqOpts.autoErrorAlert ??
	    (typeof reqOpts.failure !== 'function' && typeof reqOpts.callback !== 'function');

	if (!newopts.url.match(/^\/api2/)) {
	    newopts.url = '/api2/extjs' + newopts.url;
	}
	delete newopts.callback;
	let unmask = (target) => {
	    if (target.waitMsgTargetCount === undefined || --target.waitMsgTargetCount <= 0) {
		target.setLoading(false);
		delete target.waitMsgTargetCount;
	    }
	};

	let createWrapper = function(successFn, callbackFn, failureFn) {
	    Ext.apply(newopts, {
		success: function(response, options) {
		    if (options.waitMsgTarget) {
			if (Proxmox.Utils.toolkit === 'touch') {
			    options.waitMsgTarget.setMasked(false);
			} else {
			    unmask(options.waitMsgTarget);
			}
		    }
		    let result = Ext.decode(response.responseText);
		    response.result = result;
		    if (!result.success) {
			response.htmlStatus = Proxmox.Utils.extractRequestError(result, true);
			Ext.callback(callbackFn, options.scope, [options, false, response]);
			Ext.callback(failureFn, options.scope, [response, options]);
			if (autoErrorAlert) {
			    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
			}
			return;
		    }
		    Ext.callback(callbackFn, options.scope, [options, true, response]);
		    Ext.callback(successFn, options.scope, [response, options]);
		},
		failure: function(response, options) {
		    if (options.waitMsgTarget) {
			if (Proxmox.Utils.toolkit === 'touch') {
			    options.waitMsgTarget.setMasked(false);
			} else {
			    unmask(options.waitMsgTarget);
			}
		    }
		    response.result = {};
		    try {
			response.result = Ext.decode(response.responseText);
		    } catch (e) {
			// ignore
		    }
		    let msg = gettext('Connection error') + ' - server offline?';
		    if (response.aborted) {
			msg = gettext('Connection error') + ' - aborted.';
		    } else if (response.timedout) {
			msg = gettext('Connection error') + ' - Timeout.';
		    } else if (response.status && response.statusText) {
			msg = gettext('Connection error') + ' ' + response.status + ': ' + response.statusText;
		    }
		    response.htmlStatus = msg;
		    Ext.callback(callbackFn, options.scope, [options, false, response]);
		    Ext.callback(failureFn, options.scope, [response, options]);
		},
	    });
	};

	createWrapper(reqOpts.success, reqOpts.callback, reqOpts.failure);

	let target = newopts.waitMsgTarget;
	if (target) {
	    if (Proxmox.Utils.toolkit === 'touch') {
		target.setMasked({ xtype: 'loadmask', message: newopts.waitMsg });
	    } else if (target.rendered) {
		target.waitMsgTargetCount = (target.waitMsgTargetCount ?? 0) + 1;
		target.setLoading(newopts.waitMsg);
	    } else {
		target.waitMsgTargetCount = (target.waitMsgTargetCount ?? 0) + 1;
		target.on('afterlayout', function() {
		    if ((target.waitMsgTargetCount ?? 0) > 0) {
			target.setLoading(newopts.waitMsg);
		    }
		}, target, { single: true });
	    }
	}
	Ext.Ajax.request(newopts);
    },

    // can be useful for catching displaying errors from the API, e.g.:
    // Proxmox.Async.api2({
    //     ...
    // }).catch(Proxmox.Utils.alertResponseFailure);
    alertResponseFailure: res => Ext.Msg.alert(gettext('Error'), res.htmlStatus || res.result.message),

    checked_command: function(orig_cmd) {
	Proxmox.Utils.API2Request(
	    {
		url: '/nodes/localhost/subscription',
		method: 'GET',
		failure: function(response, opts) {
		    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
		},
		success: function(response, opts) {
		    let res = response.result;
		    if (res === null || res === undefined || !res || res
			.data.status.toLowerCase() !== 'active') {
			Ext.Msg.show({
			    title: gettext('No valid subscription'),
			    icon: Ext.Msg.WARNING,
			    message: Proxmox.Utils.getNoSubKeyHtml(res.data.url),
			    buttons: Ext.Msg.OK,
			    callback: function(btn) {
				if (btn !== 'ok') {
				    return;
				}
				orig_cmd();
			    },
			});
		    } else {
			orig_cmd();
		    }
		},
	    },
	);
    },

    assemble_field_data: function(values, data) {
	if (!Ext.isObject(data)) {
	    return;
	}
	Ext.Object.each(data, function(name, val) {
	    if (Object.prototype.hasOwnProperty.call(values, name)) {
		let bucket = values[name];
		if (!Ext.isArray(bucket)) {
		    bucket = values[name] = [bucket];
		}
		if (Ext.isArray(val)) {
		    values[name] = bucket.concat(val);
		} else {
		    bucket.push(val);
		}
	    } else {
		values[name] = val;
	    }
	});
    },

    updateColumnWidth: function(container, thresholdWidth) {
	let mode = Ext.state.Manager.get('summarycolumns') || 'auto';
	let factor;
	if (mode !== 'auto') {
	    factor = parseInt(mode, 10);
	    if (Number.isNaN(factor)) {
		factor = 1;
	    }
	} else {
	    thresholdWidth = (thresholdWidth || 1400) + 1;
	    factor = Math.ceil(container.getSize().width / thresholdWidth);
	}

	if (container.oldFactor === factor) {
	    return;
	}

	let items = container.query('>'); // direct children
	factor = Math.min(factor, items.length);
	container.oldFactor = factor;

	items.forEach((item) => {
	    item.columnWidth = 1 / factor;
	});

	// we have to update the layout twice, since the first layout change
	// can trigger the scrollbar which reduces the amount of space left
	container.updateLayout();
	container.updateLayout();
    },

    // NOTE: depreacated, use updateColumnWidth
    updateColumns: container => Proxmox.Utils.updateColumnWidth(container),

    dialog_title: function(subject, create, isAdd) {
	if (create) {
	    if (isAdd) {
		return gettext('Add') + ': ' + subject;
	    } else {
		return gettext('Create') + ': ' + subject;
	    }
	} else {
	    return gettext('Edit') + ': ' + subject;
	}
    },

    network_iface_types: {
	eth: gettext("Network Device"),
	bridge: 'Linux Bridge',
	bond: 'Linux Bond',
	vlan: 'Linux VLAN',
	OVSBridge: 'OVS Bridge',
	OVSBond: 'OVS Bond',
	OVSPort: 'OVS Port',
	OVSIntPort: 'OVS IntPort',
    },

    render_network_iface_type: function(value) {
	return Proxmox.Utils.network_iface_types[value] ||
	    Proxmox.Utils.unknownText;
    },

    // Only add product-agnostic fields here!
    notificationFieldName: {
	'type': gettext('Notification type'),
	'hostname': gettext('Hostname'),
    },

    formatNotificationFieldName: (value) =>
	Proxmox.Utils.notificationFieldName[value] || value,

    // to add or change existing for product specific ones
    overrideNotificationFieldName: function(extra) {
	for (const [key, value] of Object.entries(extra)) {
	    Proxmox.Utils.notificationFieldName[key] = value;
	}
    },

    // Only add product-agnostic fields here!
    notificationFieldValue: {
	'system-mail': gettext('Forwarded mails to the local root user'),
    },

    formatNotificationFieldValue: (value) =>
	Proxmox.Utils.notificationFieldValue[value] || value,

    // to add or change existing for product specific ones
    overrideNotificationFieldValue: function(extra) {
	for (const [key, value] of Object.entries(extra)) {
	    Proxmox.Utils.notificationFieldValue[key] = value;
	}
    },

    // NOTE: only add general, product agnostic, ones here! Else use override helper in product repos
    task_desc_table: {
	aptupdate: ['', gettext('Update package database')],
	diskinit: ['Disk', gettext('Initialize Disk with GPT')],
	spiceshell: ['', gettext('Shell') + ' (Spice)'],
	srvreload: ['SRV', gettext('Reload')],
	srvrestart: ['SRV', gettext('Restart')],
	srvstart: ['SRV', gettext('Start')],
	srvstop: ['SRV', gettext('Stop')],
	termproxy: ['', gettext('Console') + ' (xterm.js)'],
	vncshell: ['', gettext('Shell')],
    },

    // to add or change existing for product specific ones
    override_task_descriptions: function(extra) {
	for (const [key, value] of Object.entries(extra)) {
	    Proxmox.Utils.task_desc_table[key] = value;
	}
    },

    format_task_description: function(type, id) {
	let farray = Proxmox.Utils.task_desc_table[type];
	let text;
	if (!farray) {
	    text = type;
	    if (id) {
		type += ' ' + id;
	    }
	    return text;
	} else if (Ext.isFunction(farray)) {
	    return farray(type, id);
	}
	let prefix = farray[0];
	text = farray[1];
	if (prefix && id !== undefined) {
	    return prefix + ' ' + id + ' - ' + text;
	}
	return text;
    },

    format_size: function(size, useSI) {
	let unitsSI = [gettext('B'), gettext('KB'), gettext('MB'), gettext('GB'),
	    gettext('TB'), gettext('PB'), gettext('EB'), gettext('ZB'), gettext('YB')];
	let unitsIEC = [gettext('B'), gettext('KiB'), gettext('MiB'), gettext('GiB'),
	    gettext('TiB'), gettext('PiB'), gettext('EiB'), gettext('ZiB'), gettext('YiB')];
	let order = 0;
	let commaDigits = 2;
	const baseValue = useSI ? 1000 : 1024;
	while (size >= baseValue && order < unitsSI.length) {
	    size = size / baseValue;
	    order++;
	}

	let unit = useSI ? unitsSI[order] : unitsIEC[order];
	if (order === 0) {
	    commaDigits = 0;
	}
	return `${size.toFixed(commaDigits)} ${unit}`;
    },

    SizeUnits: {
	'B': 1,

	'KiB': 1024,
	'MiB': 1024*1024,
	'GiB': 1024*1024*1024,
	'TiB': 1024*1024*1024*1024,
	'PiB': 1024*1024*1024*1024*1024,

	'KB': 1000,
	'MB': 1000*1000,
	'GB': 1000*1000*1000,
	'TB': 1000*1000*1000*1000,
	'PB': 1000*1000*1000*1000*1000,
    },

    parse_size_unit: function(val) {
	//let m = val.match(/([.\d])+\s?([KMGTP]?)(i?)B?\s*$/i);
	let m = val.match(/(\d+(?:\.\d+)?)\s?([KMGTP]?)(i?)B?\s*$/i);
	let size = parseFloat(m[1]);
	let scale = m[2].toUpperCase();
	let binary = m[3].toLowerCase();

	let unit = `${scale}${binary}B`;
	let factor = Proxmox.Utils.SizeUnits[unit];

	return { size, factor, unit, binary }; // for convenience return all we got
    },

    size_unit_to_bytes: function(val) {
	let { size, factor } = Proxmox.Utils.parse_size_unit(val);
	return size * factor;
    },

    autoscale_size_unit: function(val) {
	let { size, factor, binary } = Proxmox.Utils.parse_size_unit(val);
	return Proxmox.Utils.format_size(size * factor, binary !== "i");
    },

    size_unit_ratios: function(a, b) {
	a = typeof a !== "undefined" ? a : 0;
	b = typeof b !== "undefined" ? b : Infinity;
	let aBytes = typeof a === "number" ? a : Proxmox.Utils.size_unit_to_bytes(a);
	let bBytes = typeof b === "number" ? b : Proxmox.Utils.size_unit_to_bytes(b);
	return aBytes / (bBytes || Infinity); // avoid division by zero
    },

    render_upid: function(value, metaData, record) {
	let task = record.data;
	let type = task.type || task.worker_type;
	let id = task.id || task.worker_id;

	return Proxmox.Utils.format_task_description(type, id);
    },

    render_uptime: function(value) {
	let uptime = value;

	if (uptime === undefined) {
	    return '';
	}

	if (uptime <= 0) {
	    return '-';
	}

	return Proxmox.Utils.format_duration_long(uptime);
    },

    systemd_unescape: function(string_value) {
	const charcode_0 = '0'.charCodeAt(0);
	const charcode_9 = '9'.charCodeAt(0);
	const charcode_A = 'A'.charCodeAt(0);
	const charcode_F = 'F'.charCodeAt(0);
	const charcode_a = 'a'.charCodeAt(0);
	const charcode_f = 'f'.charCodeAt(0);
	const charcode_x = 'x'.charCodeAt(0);
	const charcode_minus = '-'.charCodeAt(0);
	const charcode_slash = '/'.charCodeAt(0);
	const charcode_backslash = '\\'.charCodeAt(0);

	let parse_hex_digit = function(d) {
	    if (d >= charcode_0 && d <= charcode_9) {
		return d - charcode_0;
	    }
	    if (d >= charcode_A && d <= charcode_F) {
		return d - charcode_A + 10;
	    }
	    if (d >= charcode_a && d <= charcode_f) {
		return d - charcode_a + 10;
	    }
	    throw "got invalid hex digit";
	};

	let value = new TextEncoder().encode(string_value);
	let result = new Uint8Array(value.length);

	let i = 0;
	let result_len = 0;

	while (i < value.length) {
	    let c0 = value[i];
	    if (c0 === charcode_minus) {
		result.set([charcode_slash], result_len);
		result_len += 1;
		i += 1;
		continue;
	    }
	    if ((i + 4) < value.length) {
		let c1 = value[i+1];
		if (c0 === charcode_backslash && c1 === charcode_x) {
		    let h1 = parse_hex_digit(value[i+2]);
		    let h0 = parse_hex_digit(value[i+3]);
		    let ord = h1*16+h0;
		    result.set([ord], result_len);
		    result_len += 1;
		    i += 4;
		    continue;
		}
	    }
	    result.set([c0], result_len);
	    result_len += 1;
	    i += 1;
	}

	return new TextDecoder().decode(result.slice(0, result.len));
    },

    parse_task_upid: function(upid) {
	let task = {};

	let res = upid.match(/^UPID:([^\s:]+):([0-9A-Fa-f]{8}):([0-9A-Fa-f]{8,9}):(([0-9A-Fa-f]{8,16}):)?([0-9A-Fa-f]{8}):([^:\s]+):([^:\s]*):([^:\s]+):$/);
	if (!res) {
	    throw "unable to parse upid '" + upid + "'";
	}
	task.node = res[1];
	task.pid = parseInt(res[2], 16);
	task.pstart = parseInt(res[3], 16);
	if (res[5] !== undefined) {
	    task.task_id = parseInt(res[5], 16);
	}
	task.starttime = parseInt(res[6], 16);
	task.type = res[7];
	task.id = Proxmox.Utils.systemd_unescape(res[8]);
	task.user = res[9];

	task.desc = Proxmox.Utils.format_task_description(task.type, task.id);

	return task;
    },

    parse_task_status: function(status) {
	if (status === 'OK') {
	    return 'ok';
	}

	if (status === 'unknown') {
	    return 'unknown';
	}

	let match = status.match(/^WARNINGS: (.*)$/);
	if (match) {
	    return 'warning';
	}

	return 'error';
    },

    format_task_status: function(status) {
	let parsed = Proxmox.Utils.parse_task_status(status);
	switch (parsed) {
	    case 'unknown': return Proxmox.Utils.unknownText;
	    case 'error': return Proxmox.Utils.errorText + ': ' + Ext.htmlEncode(status);
	    case 'warning': return status.replace('WARNINGS', Proxmox.Utils.warningsText);
	    case 'ok': // fall-through
	    default: return status;
	}
    },

    render_duration: function(value) {
	if (value === undefined) {
	    return '-';
	}
	return Proxmox.Utils.format_duration_human(value);
    },

    render_timestamp: function(value, metaData, record, rowIndex, colIndex, store) {
	let servertime = new Date(value * 1000);
	return Ext.Date.format(servertime, 'Y-m-d H:i:s');
    },

    render_zfs_health: function(value) {
	if (typeof value === 'undefined') {
	    return "";
	}
	var iconCls = 'question-circle';
	switch (value) {
	    case 'AVAIL':
	    case 'ONLINE':
		iconCls = 'check-circle good';
		break;
	    case 'REMOVED':
	    case 'DEGRADED':
		iconCls = 'exclamation-circle warning';
		break;
	    case 'UNAVAIL':
	    case 'FAULTED':
	    case 'OFFLINE':
		iconCls = 'times-circle critical';
		break;
	    default: //unknown
	}

	return '<i class="fa fa-' + iconCls + '"></i> ' + value;
    },

    get_help_info: function(section) {
	let helpMap;
	if (typeof proxmoxOnlineHelpInfo !== 'undefined') {
	    helpMap = proxmoxOnlineHelpInfo; // eslint-disable-line no-undef
	} else if (typeof pveOnlineHelpInfo !== 'undefined') {
	    // be backward compatible with older pve-doc-generators
	    helpMap = pveOnlineHelpInfo; // eslint-disable-line no-undef
	} else {
	    throw "no global OnlineHelpInfo map declared";
	}

	if (helpMap[section]) {
	    return helpMap[section];
	}
	// try to normalize - and _ separators, to support asciidoc and sphinx
	// references at the same time.
	let section_minus_normalized = section.replace(/_/g, '-');
	if (helpMap[section_minus_normalized]) {
	    return helpMap[section_minus_normalized];
	}
	let section_underscore_normalized = section.replace(/-/g, '_');
	return helpMap[section_underscore_normalized];
    },

    get_help_link: function(section) {
	let info = Proxmox.Utils.get_help_info(section);
	if (!info) {
	    return undefined;
	}
	return window.location.origin + info.link;
    },

    openXtermJsViewer: function(vmtype, vmid, nodename, vmname, cmd) {
	let url = Ext.Object.toQueryString({
	    console: vmtype, // kvm, lxc, upgrade or shell
	    xtermjs: 1,
	    vmid: vmid,
	    vmname: vmname,
	    node: nodename,
	    cmd: cmd,

	});
	let nw = window.open("?" + url, '_blank', 'toolbar=no,location=no,status=no,menubar=no,resizable=yes,width=800,height=420');
	if (nw) {
	    nw.focus();
	}
    },

    render_optional_url: function(value) {
	if (value && value.match(/^https?:\/\//) !== null) {
	    return '<a target="_blank" href="' + value + '">' + value + '</a>';
	}
	return value;
    },

    render_san: function(value) {
	var names = [];
	if (Ext.isArray(value)) {
	    value.forEach(function(val) {
		if (!Ext.isNumber(val)) {
		    names.push(val);
		}
	    });
	    return names.join('<br>');
	}
	return value;
    },

    render_usage: val => (val * 100).toFixed(2) + '%',

    render_cpu_usage: function(val, max) {
	return Ext.String.format(
	    `${gettext('{0}% of {1}')} ${gettext('CPU(s)')}`,
	    (val*100).toFixed(2),
	    max,
	);
    },

    render_size_usage: function(val, max, useSI) {
	if (max === 0) {
	    return gettext('N/A');
	}
	let fmt = v => Proxmox.Utils.format_size(v, useSI);
	let ratio = (val * 100 / max).toFixed(2);
	return ratio + '% (' + Ext.String.format(gettext('{0} of {1}'), fmt(val), fmt(max)) + ')';
    },

    render_cpu: function(value, metaData, record, rowIndex, colIndex, store) {
	if (!(record.data.uptime && Ext.isNumeric(value))) {
	    return '';
	}

	let maxcpu = record.data.maxcpu || 1;
	if (!Ext.isNumeric(maxcpu) || maxcpu < 1) {
	    return '';
	}
	let cpuText = maxcpu > 1 ? 'CPUs' : 'CPU';
	let ratio = (value * 100).toFixed(1);
	return `${ratio}% of ${maxcpu.toString()} ${cpuText}`;
    },

    render_size: function(value, metaData, record, rowIndex, colIndex, store) {
	if (!Ext.isNumeric(value)) {
	    return '';
	}
	return Proxmox.Utils.format_size(value);
    },

    render_cpu_model: function(cpu) {
	let socketText = cpu.sockets > 1 ? gettext('Sockets') : gettext('Socket');
	return `${cpu.cpus} x ${cpu.model} (${cpu.sockets.toString()} ${socketText})`;
    },

    /* this is different for nodes */
    render_node_cpu_usage: function(value, record) {
	return Proxmox.Utils.render_cpu_usage(value, record.cpus);
    },

    render_node_size_usage: function(record) {
	return Proxmox.Utils.render_size_usage(record.used, record.total);
    },

    loadTextFromFile: function(file, callback, maxBytes) {
	let maxSize = maxBytes || 8192;
	if (file.size > maxSize) {
	    Ext.Msg.alert(gettext('Error'), gettext("Invalid file size: ") + file.size);
	    return;
	}
	let reader = new FileReader();
	reader.onload = evt => callback(evt.target.result);
	reader.readAsText(file);
    },

    parsePropertyString: function(value, defaultKey) {
	var res = {},
	    error;

	if (typeof value !== 'string' || value === '') {
	    return res;
	}

	Ext.Array.each(value.split(','), function(p) {
	    var kv = p.split('=', 2);
	    if (Ext.isDefined(kv[1])) {
		res[kv[0]] = kv[1];
	    } else if (Ext.isDefined(defaultKey)) {
		if (Ext.isDefined(res[defaultKey])) {
		    error = 'defaultKey may be only defined once in propertyString';
		    return false; // break
		}
		res[defaultKey] = kv[0];
	    } else {
		error = 'invalid propertyString, not a key=value pair and no defaultKey defined';
		return false; // break
	    }
	    return true;
	});

	if (error !== undefined) {
	    console.error(error);
	    return undefined;
	}

	return res;
    },

    printPropertyString: function(data, defaultKey) {
	var stringparts = [],
	    gotDefaultKeyVal = false,
	    defaultKeyVal;

	Ext.Object.each(data, function(key, value) {
	    if (defaultKey !== undefined && key === defaultKey) {
		gotDefaultKeyVal = true;
		defaultKeyVal = value;
	    } else if (Ext.isArray(value)) {
		stringparts.push(key + '=' + value.join(';'));
	    } else if (value !== '') {
		stringparts.push(key + '=' + value);
	    }
	});

	stringparts = stringparts.sort();
	if (gotDefaultKeyVal) {
	    stringparts.unshift(defaultKeyVal);
	}

	return stringparts.join(',');
    },

    acmedomain_count: 5,

    parseACMEPluginData: function(data) {
	let res = {};
	let extradata = [];
	data.split('\n').forEach((line) => {
	    // capture everything after the first = as value
	    let [key, value] = line.split('=');
	    if (value !== undefined) {
		res[key] = value;
	    } else {
		extradata.push(line);
	    }
	});
	return [res, extradata];
    },

    delete_if_default: function(values, fieldname, default_val, create) {
	if (values[fieldname] === '' || values[fieldname] === default_val) {
	    if (!create) {
		if (values.delete) {
		    if (Ext.isArray(values.delete)) {
			values.delete.push(fieldname);
		    } else {
			values.delete += ',' + fieldname;
		    }
		} else {
		    values.delete = fieldname;
		}
	    }

	    delete values[fieldname];
	}
    },

    printACME: function(value) {
	if (Ext.isArray(value.domains)) {
	    value.domains = value.domains.join(';');
	}
	return Proxmox.Utils.printPropertyString(value);
    },

    parseACME: function(value) {
	if (!value) {
	    return {};
	}

	var res = {};
	var error;

	Ext.Array.each(value.split(','), function(p) {
	    var kv = p.split('=', 2);
	    if (Ext.isDefined(kv[1])) {
		res[kv[0]] = kv[1];
	    } else {
		error = 'Failed to parse key-value pair: '+p;
		return false;
	    }
	    return true;
	});

	if (error !== undefined) {
	    console.error(error);
	    return undefined;
	}

	if (res.domains !== undefined) {
	    res.domains = res.domains.split(/;/);
	}

	return res;
    },

    add_domain_to_acme: function(acme, domain) {
	if (acme.domains === undefined) {
	    acme.domains = [domain];
	} else {
	    acme.domains.push(domain);
	    acme.domains = acme.domains.filter((value, index, self) => self.indexOf(value) === index);
	}
	return acme;
    },

    remove_domain_from_acme: function(acme, domain) {
	if (acme.domains !== undefined) {
	    acme.domains = acme.domains.filter(
		(value, index, self) => self.indexOf(value) === index && value !== domain,
	    );
	}
	return acme;
    },

    get_health_icon: function(state, circle) {
	if (circle === undefined) {
	    circle = false;
	}

	if (state === undefined) {
	    state = 'uknown';
	}

	var icon = 'faded fa-question';
	switch (state) {
	    case 'good':
		icon = 'good fa-check';
		break;
	    case 'upgrade':
		icon = 'warning fa-upload';
		break;
	    case 'old':
		icon = 'warning fa-refresh';
		break;
	    case 'warning':
		icon = 'warning fa-exclamation';
		break;
	    case 'critical':
		icon = 'critical fa-times';
		break;
	    default: break;
	}

	if (circle) {
	    icon += '-circle';
	}

	return icon;
    },

    formatNodeRepoStatus: function(status, product) {
	let fmt = (txt, cls) => `<i class="fa fa-fw fa-lg fa-${cls}"></i>${txt}`;

	let getUpdates = Ext.String.format(gettext('{0} updates'), product);
	let noRepo = Ext.String.format(gettext('No {0} repository enabled!'), product);

	if (status === 'ok') {
	    return fmt(getUpdates, 'check-circle good') + ' ' +
		fmt(gettext('Production-ready Enterprise repository enabled'), 'check-circle good');
	} else if (status === 'no-sub') {
	    return fmt(gettext('Production-ready Enterprise repository enabled'), 'check-circle good') + ' ' +
		    fmt(gettext('Enterprise repository needs valid subscription'), 'exclamation-circle warning');
	} else if (status === 'non-production') {
	    return fmt(getUpdates, 'check-circle good') + ' ' +
		   fmt(gettext('Non production-ready repository enabled!'), 'exclamation-circle warning');
	} else if (status === 'no-repo') {
	    return fmt(noRepo, 'exclamation-circle critical');
	}

	return Proxmox.Utils.unknownText;
    },

    render_u2f_error: function(error) {
	var ErrorNames = {
	    '1': gettext('Other Error'),
	    '2': gettext('Bad Request'),
	    '3': gettext('Configuration Unsupported'),
	    '4': gettext('Device Ineligible'),
	    '5': gettext('Timeout'),
	};
	return "U2F Error: " + ErrorNames[error] || Proxmox.Utils.unknownText;
    },

    // Convert an ArrayBuffer to a base64url encoded string.
    // A `null` value will be preserved for convenience.
    bytes_to_base64url: function(bytes) {
	if (bytes === null) {
	    return null;
	}

	return btoa(Array
	    .from(new Uint8Array(bytes))
	    .map(val => String.fromCharCode(val))
	    .join(''),
	)
	.replace(/\+/g, '-')
	.replace(/\//g, '_')
	.replace(/[=]/g, '');
    },

    // Convert an a base64url string to an ArrayBuffer.
    // A `null` value will be preserved for convenience.
    base64url_to_bytes: function(b64u) {
	if (b64u === null) {
	    return null;
	}

	return new Uint8Array(
	    atob(b64u
		.replace(/-/g, '+')
		.replace(/_/g, '/'),
	    )
	    .split('')
	    .map(val => val.charCodeAt(0)),
	);
    },

    // Convert utf-8 string to base64.
    // This also escapes unicode characters such as emojis.
    utf8ToBase64: function(string) {
	let bytes = new TextEncoder().encode(string);
	const escapedString = Array.from(bytes, (byte) =>
	    String.fromCodePoint(byte),
	).join("");
	return btoa(escapedString);
    },

    // Converts a base64 string into a utf8 string.
    // Decodes escaped unicode characters correctly.
    base64ToUtf8: function(b64_string) {
	let string = atob(b64_string);
	let bytes = Uint8Array.from(string, (m) => m.codePointAt(0));
	return new TextDecoder().decode(bytes);
    },

    stringToRGB: function(string) {
	let hash = 0;
	if (!string) {
	    return hash;
	}
	string += 'prox'; // give short strings more variance
	for (let i = 0; i < string.length; i++) {
	    hash = string.charCodeAt(i) + ((hash << 5) - hash);
	    hash = hash & hash; // to int
	}

	let alpha = 0.7; // make the color a bit brighter
	let bg = 255; // assume white background

	return [
	    (hash & 255) * alpha + bg * (1 - alpha),
	    ((hash >> 8) & 255) * alpha + bg * (1 - alpha),
	    ((hash >> 16) & 255) * alpha + bg * (1 - alpha),
	];
    },

    rgbToCss: function(rgb) {
	return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
    },

    rgbToHex: function(rgb) {
	let r = Math.round(rgb[0]).toString(16);
	let g = Math.round(rgb[1]).toString(16);
	let b = Math.round(rgb[2]).toString(16);
	return `${r}${g}${b}`;
    },

    hexToRGB: function(hex) {
	if (!hex) {
	    return undefined;
	}
	if (hex.length === 7) {
	    hex = hex.slice(1);
	}
	let r = parseInt(hex.slice(0, 2), 16);
	let g = parseInt(hex.slice(2, 4), 16);
	let b = parseInt(hex.slice(4, 6), 16);
	return [r, g, b];
    },

    // optimized & simplified SAPC function
    // https://github.com/Myndex/SAPC-APCA
    getTextContrastClass: function(rgb) {
	    const blkThrs = 0.022;
	    const blkClmp = 1.414;

	    // linearize & gamma correction
	    let r = (rgb[0] / 255) ** 2.4;
	    let g = (rgb[1] / 255) ** 2.4;
	    let b = (rgb[2] / 255) ** 2.4;

	    // relative luminance sRGB
	    let bg = r * 0.2126729 + g * 0.7151522 + b * 0.0721750;

	    // black clamp
	    bg = bg > blkThrs ? bg : bg + (blkThrs - bg) ** blkClmp;

	    // SAPC with white text
	    let contrastLight = bg ** 0.65 - 1;
	    // SAPC with black text
	    let contrastDark = bg ** 0.56 - 0.046134502;

	    if (Math.abs(contrastLight) >= Math.abs(contrastDark)) {
		return 'light';
	    } else {
		return 'dark';
	    }
    },

    getTagElement: function(string, color_overrides) {
	let rgb = color_overrides?.[string] || Proxmox.Utils.stringToRGB(string);
	let style = `background-color: ${Proxmox.Utils.rgbToCss(rgb)};`;
	let cls;
	if (rgb.length > 3) {
	    style += `color: ${Proxmox.Utils.rgbToCss([rgb[3], rgb[4], rgb[5]])}`;
	    cls = "proxmox-tag-dark";
	} else {
	    let txtCls = Proxmox.Utils.getTextContrastClass(rgb);
	    cls = `proxmox-tag-${txtCls}`;
	}
	return `<span class="${cls}" style="${style}">${string}</span>`;
    },

    // Setting filename here when downloading from a remote url sometimes fails in chromium browsers
    // because of a bug when using attribute download in conjunction with a self signed certificate.
    // For more info see https://bugs.chromium.org/p/chromium/issues/detail?id=993362
    downloadAsFile: function(source, fileName) {
	let hiddenElement = document.createElement('a');
	hiddenElement.href = source;
	hiddenElement.target = '_blank';
	if (fileName) {
	    hiddenElement.download = fileName;
	}
	hiddenElement.click();
    },
},

    singleton: true,
    constructor: function() {
	let me = this;
	Ext.apply(me, me.utilities);

	let IPV4_OCTET = "(?:25[0-5]|(?:[1-9]|1[0-9]|2[0-4])?[0-9])";
	let IPV4_REGEXP = "(?:(?:" + IPV4_OCTET + "\\.){3}" + IPV4_OCTET + ")";
	let IPV6_H16 = "(?:[0-9a-fA-F]{1,4})";
	let IPV6_LS32 = "(?:(?:" + IPV6_H16 + ":" + IPV6_H16 + ")|" + IPV4_REGEXP + ")";
	let IPV4_CIDR_MASK = "([0-9]{1,2})";
	let IPV6_CIDR_MASK = "([0-9]{1,3})";


	me.IP4_match = new RegExp("^(?:" + IPV4_REGEXP + ")$");
	me.IP4_cidr_match = new RegExp("^(?:" + IPV4_REGEXP + ")/" + IPV4_CIDR_MASK + "$");

	/* eslint-disable no-useless-concat,no-multi-spaces */
	let IPV6_REGEXP = "(?:" +
	    "(?:(?:"                                                  + "(?:" + IPV6_H16 + ":){6})" + IPV6_LS32 + ")|" +
	    "(?:(?:"                                         +   "::" + "(?:" + IPV6_H16 + ":){5})" + IPV6_LS32 + ")|" +
	    "(?:(?:(?:"                           + IPV6_H16 + ")?::" + "(?:" + IPV6_H16 + ":){4})" + IPV6_LS32 + ")|" +
	    "(?:(?:(?:(?:" + IPV6_H16 + ":){0,1}" + IPV6_H16 + ")?::" + "(?:" + IPV6_H16 + ":){3})" + IPV6_LS32 + ")|" +
	    "(?:(?:(?:(?:" + IPV6_H16 + ":){0,2}" + IPV6_H16 + ")?::" + "(?:" + IPV6_H16 + ":){2})" + IPV6_LS32 + ")|" +
	    "(?:(?:(?:(?:" + IPV6_H16 + ":){0,3}" + IPV6_H16 + ")?::" + "(?:" + IPV6_H16 + ":){1})" + IPV6_LS32 + ")|" +
	    "(?:(?:(?:(?:" + IPV6_H16 + ":){0,4}" + IPV6_H16 + ")?::" +                         ")" + IPV6_LS32 + ")|" +
	    "(?:(?:(?:(?:" + IPV6_H16 + ":){0,5}" + IPV6_H16 + ")?::" +                         ")" + IPV6_H16  + ")|" +
	    "(?:(?:(?:(?:" + IPV6_H16 + ":){0,7}" + IPV6_H16 + ")?::" +                         ")"             + ")"  +
	    ")";
	/* eslint-enable no-useless-concat,no-multi-spaces */

	me.IP6_match = new RegExp("^(?:" + IPV6_REGEXP + ")$");
	me.IP6_cidr_match = new RegExp("^(?:" + IPV6_REGEXP + ")/" + IPV6_CIDR_MASK + "$");
	me.IP6_bracket_match = new RegExp("^\\[(" + IPV6_REGEXP + ")\\]");

	me.IP64_match = new RegExp("^(?:" + IPV6_REGEXP + "|" + IPV4_REGEXP + ")$");
	me.IP64_cidr_match = new RegExp("^(?:" + IPV6_REGEXP + "/" + IPV6_CIDR_MASK + ")|(?:" + IPV4_REGEXP + "/" + IPV4_CIDR_MASK + ")$");

	let DnsName_REGEXP = "(?:(?:(?:[a-zA-Z0-9](?:[a-zA-Z0-9\\-]*[a-zA-Z0-9])?)\\.)*(?:[A-Za-z0-9](?:[A-Za-z0-9\\-]*[A-Za-z0-9])?))";
	me.DnsName_match = new RegExp("^" + DnsName_REGEXP + "$");
	me.DnsName_or_Wildcard_match = new RegExp("^(?:\\*\\.)?" + DnsName_REGEXP + "$");

	me.CpuSet_match = /^[0-9]+(?:-[0-9]+)?(?:,[0-9]+(?:-[0-9]+)?)*$/;

	me.HostPort_match = new RegExp("^(" + IPV4_REGEXP + "|" + DnsName_REGEXP + ")(?::(\\d+))?$");
	me.HostPortBrackets_match = new RegExp("^\\[(" + IPV6_REGEXP + "|" + IPV4_REGEXP + "|" + DnsName_REGEXP + ")\\](?::(\\d+))?$");
	me.IP6_dotnotation_match = new RegExp("^(" + IPV6_REGEXP + ")(?:\\.(\\d+))?$");
	me.Vlan_match = /^vlan(\d+)/;
	me.VlanInterface_match = /(\w+)\.(\d+)/;


	// Taken from proxmox-schema and ported to JS
	let PORT_REGEX_STR = "(?:[0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])";
	let IPRE_BRACKET_STR = "(?:" + IPV4_REGEXP + "|\\[(?:" + IPV6_REGEXP + ")\\])";
	let DNS_NAME_STR = "(?:(?:" + DnsName_REGEXP + "\\.)*" + DnsName_REGEXP + ")";
	let HTTP_URL_REGEX = "^https?://(?:(?:(?:"
	    + DNS_NAME_STR
	    + "|"
	    + IPRE_BRACKET_STR
	    + ")(?::"
	    + PORT_REGEX_STR
	    + ")?)|"
	    + IPV6_REGEXP
	    + ")(?:/[^\x00-\x1F\x7F]*)?$";

	me.httpUrlRegex = new RegExp(HTTP_URL_REGEX);

	// Same as SAFE_ID_REGEX in proxmox-schema
	me.safeIdRegex = /^(?:[A-Za-z0-9_][A-Za-z0-9._\\-]*)$/;
    },
});

Ext.define('Proxmox.Async', {
    singleton: true,

    // Returns a Promise resolving to the result of an `API2Request` or rejecting to the error
    // response on failure
    api2: function(reqOpts) {
	return new Promise((resolve, reject) => {
	    delete reqOpts.callback; // not allowed in this api
	    reqOpts.success = response => resolve(response);
	    reqOpts.failure = response => reject(response);
	    Proxmox.Utils.API2Request(reqOpts);
	});
    },

    // Delay for a number of milliseconds.
    sleep: function(millis) {
	return new Promise((resolve, _reject) => setTimeout(resolve, millis));
    },
});

Ext.override(Ext.data.Store, {
    // If the store's proxy is changed while it is waiting for an AJAX
    // response, `onProxyLoad` will still be called for the outdated response.
    // To avoid displaying inconsistent information, only process responses
    // belonging to the current proxy. However, do not apply this workaround
    // to the mobile UI, as Sencha Touch has an incompatible internal API.
    onProxyLoad: function(operation) {
	let me = this;
	if (Proxmox.Utils.toolkit === 'touch' || operation.getProxy() === me.getProxy()) {
	    me.callParent(arguments);
	} else {
	    console.log(`ignored outdated response: ${operation.getRequest().getUrl()}`);
	}
    },
});
Ext.define('Proxmox.Schema', { // a singleton
    singleton: true,

    authDomains: {
	pam: {
	    name: 'Linux PAM',
	    ipanel: 'pmxAuthSimplePanel',
	    onlineHelp: 'user-realms-pam',
	    add: false,
	    edit: true,
	    pwchange: true,
	    sync: false,
	    useTypeInUrl: false,
	},
	openid: {
	    name: gettext('OpenID Connect Server'),
	    ipanel: 'pmxAuthOpenIDPanel',
	    add: true,
	    edit: true,
	    tfa: false,
	    pwchange: false,
	    sync: false,
	    iconCls: 'pmx-itype-icon-openid-logo',
	    useTypeInUrl: true,
	},
	ldap: {
	    name: gettext('LDAP Server'),
	    ipanel: 'pmxAuthLDAPPanel',
	    syncipanel: 'pmxAuthLDAPSyncPanel',
	    add: true,
	    edit: true,
	    tfa: true,
	    pwchange: false,
	    sync: true,
	    useTypeInUrl: true,
	},
	ad: {
	    name: gettext('Active Directory Server'),
	    ipanel: 'pmxAuthADPanel',
	    syncipanel: 'pmxAuthADSyncPanel',
	    add: true,
	    edit: true,
	    tfa: true,
	    pwchange: false,
	    sync: true,
	    useTypeInUrl: true,
	},
    },
    // to add or change existing for product specific ones
    overrideAuthDomains: function(extra) {
	for (const [key, value] of Object.entries(extra)) {
	    Proxmox.Schema.authDomains[key] = value;
	}
    },

    notificationEndpointTypes: {
	sendmail: {
	    name: 'Sendmail',
	    ipanel: 'pmxSendmailEditPanel',
	    iconCls: 'fa-envelope-o',
	    defaultMailAuthor: 'Proxmox VE',
	},
	smtp: {
	    name: 'SMTP',
	    ipanel: 'pmxSmtpEditPanel',
	    iconCls: 'fa-envelope-o',
	    defaultMailAuthor: 'Proxmox VE',
	},
	gotify: {
	    name: 'Gotify',
	    ipanel: 'pmxGotifyEditPanel',
	    iconCls: 'fa-bell-o',
	},
	webhook: {
	    name: 'Webhook',
	    ipanel: 'pmxWebhookEditPanel',
	    iconCls: 'fa-bell-o',
	},
    },

    // to add or change existing for product specific ones
    overrideEndpointTypes: function(extra) {
	for (const [key, value] of Object.entries(extra)) {
	    Proxmox.Schema.notificationEndpointTypes[key] = value;
	}
    },

    pxarFileTypes: {
	b: { icon: 'cube', label: gettext('Block Device') },
	c: { icon: 'tty', label: gettext('Character Device') },
	d: { icon: 'folder-o', label: gettext('Directory') },
	f: { icon: 'file-text-o', label: gettext('File') },
	h: { icon: 'file-o', label: gettext('Hardlink') },
	l: { icon: 'link', label: gettext('Softlink') },
	p: { icon: 'exchange', label: gettext('Pipe/Fifo') },
	s: { icon: 'plug', label: gettext('Socket') },
	v: { icon: 'cube', label: gettext('Virtual') },
    },
});
// ExtJS related things

 // do not send '_dc' parameter
Ext.Ajax.disableCaching = false;

// custom Vtypes
Ext.apply(Ext.form.field.VTypes, {
    IPAddress: function(v) {
	return Proxmox.Utils.IP4_match.test(v);
    },
    IPAddressText: gettext('Example') + ': 192.168.1.1',
    IPAddressMask: /[\d.]/i,

    IPCIDRAddress: function(v) {
	let result = Proxmox.Utils.IP4_cidr_match.exec(v);
	// limits according to JSON Schema see
	// pve-common/src/PVE/JSONSchema.pm
	return result !== null && result[1] >= 8 && result[1] <= 32;
    },
    IPCIDRAddressText: gettext('Example') + ': 192.168.1.1/24<br>' + gettext('Valid CIDR Range') + ': 8-32',
    IPCIDRAddressMask: /[\d./]/i,

    IP6Address: function(v) {
	return Proxmox.Utils.IP6_match.test(v);
    },
    IP6AddressText: gettext('Example') + ': 2001:DB8::42',
    IP6AddressMask: /[A-Fa-f0-9:]/,

    IP6CIDRAddress: function(v) {
	let result = Proxmox.Utils.IP6_cidr_match.exec(v);
	// limits according to JSON Schema see
	// pve-common/src/PVE/JSONSchema.pm
	return result !== null && result[1] >= 8 && result[1] <= 128;
    },
    IP6CIDRAddressText: gettext('Example') + ': 2001:DB8::42/64<br>' + gettext('Valid CIDR Range') + ': 8-128',
    IP6CIDRAddressMask: /[A-Fa-f0-9:/]/,

    IP6PrefixLength: function(v) {
	return v >= 0 && v <= 128;
    },
    IP6PrefixLengthText: gettext('Example') + ': X, where 0 <= X <= 128',
    IP6PrefixLengthMask: /[0-9]/,

    IP64Address: function(v) {
	return Proxmox.Utils.IP64_match.test(v);
    },
    IP64AddressText: gettext('Example') + ': 192.168.1.1 2001:DB8::42',
    IP64AddressMask: /[A-Fa-f0-9.:]/,

    IP64CIDRAddress: function(v) {
	let result = Proxmox.Utils.IP64_cidr_match.exec(v);
	if (result === null) {
	    return false;
	}
	if (result[1] !== undefined) {
	    return result[1] >= 8 && result[1] <= 128;
	} else if (result[2] !== undefined) {
	    return result[2] >= 8 && result[2] <= 32;
	} else {
	    return false;
	}
    },
    IP64CIDRAddressText: gettext('Example') + ': 192.168.1.1/24 2001:DB8::42/64',
    IP64CIDRAddressMask: /[A-Fa-f0-9.:/]/,

    MacAddress: function(v) {
	return (/^([a-fA-F0-9]{2}:){5}[a-fA-F0-9]{2}$/).test(v);
    },
    MacAddressMask: /[a-fA-F0-9:]/,
    MacAddressText: gettext('Example') + ': 01:23:45:67:89:ab',

    MacPrefix: function(v) {
	return (/^[a-f0-9][02468ace](?::[a-f0-9]{2}){0,2}:?$/i).test(v);
    },
    MacPrefixMask: /[a-fA-F0-9:]/,
    MacPrefixText: gettext('Example') + ': 02:8f - ' + gettext('only unicast addresses are allowed'),

    BridgeName: function(v) {
	return (/^[a-zA-Z][a-zA-Z0-9_]{0,9}$/).test(v);
    },
    VlanName: function(v) {
       if (Proxmox.Utils.VlanInterface_match.test(v)) {
	 return true;
       } else if (Proxmox.Utils.Vlan_match.test(v)) {
	 return true;
       }
       return true;
    },
    BridgeNameText: gettext('Format') + ': alphanumeric string starting with a character',

    BondName: function(v) {
	return (/^bond\d{1,4}$/).test(v);
    },
    BondNameText: gettext('Format') + ': bond<b>N</b>, where 0 <= <b>N</b> <= 9999',

    InterfaceName: function(v) {
	return (/^[a-z][a-z0-9_]{1,20}$/).test(v);
    },
    InterfaceNameText: gettext("Allowed characters") + ": 'a-z', '0-9', '_'<br />" +
		       gettext("Minimum characters") + ": 2<br />" +
		       gettext("Maximum characters") + ": 21<br />" +
		       gettext("Must start with") + ": 'a-z'",

    StorageId: function(v) {
	return (/^[a-z][a-z0-9\-_.]*[a-z0-9]$/i).test(v);
    },
    StorageIdText: gettext("Allowed characters") + ":  'A-Z', 'a-z', '0-9', '-', '_', '.'<br />" +
		   gettext("Minimum characters") + ": 2<br />" +
		   gettext("Must start with") + ": 'A-Z', 'a-z'<br />" +
		   gettext("Must end with") + ": 'A-Z', 'a-z', '0-9'<br />",

    ConfigId: function(v) {
	return (/^[a-z][a-z0-9_-]+$/i).test(v);
    },
    ConfigIdText: gettext("Allowed characters") + ": 'A-Z', 'a-z', '0-9', '_'<br />" +
		  gettext("Minimum characters") + ": 2<br />" +
		  gettext("Must start with") + ": " + gettext("letter"),

    HttpProxy: function(v) {
	return (/^http:\/\/.*$/).test(v);
    },
    HttpProxyText: gettext('Example') + ": http://username:password&#64;host:port/",

    CpuSet: function(v) {
	return Proxmox.Utils.CpuSet_match.test(v);
    },
    CpuSetText: gettext('This is not a valid CpuSet'),

    DnsName: function(v) {
	return Proxmox.Utils.DnsName_match.test(v);
    },
    DnsNameText: gettext('This is not a valid hostname'),

    DnsNameOrWildcard: function(v) {
	return Proxmox.Utils.DnsName_or_Wildcard_match.test(v);
    },
    DnsNameOrWildcardText: gettext('This is not a valid hostname'),

    // email regex used by pve-common
    proxmoxMail: function(v) {
	return (/^[\w+-~]+(\.[\w+-~]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*$/).test(v);
    },
    proxmoxMailText: gettext('Example') + ": user@example.com",

    DnsOrIp: function(v) {
	if (!Proxmox.Utils.DnsName_match.test(v) &&
	    !Proxmox.Utils.IP64_match.test(v)) {
	    return false;
	}

	return true;
    },
    DnsOrIpText: gettext('Not a valid DNS name or IP address.'),

    HostPort: function(v) {
	return Proxmox.Utils.HostPort_match.test(v) ||
		Proxmox.Utils.HostPortBrackets_match.test(v) ||
		Proxmox.Utils.IP6_dotnotation_match.test(v);
    },
    HostPortText: gettext('Host/IP address or optional port is invalid'),

    HostList: function(v) {
	let list = v.split(/[ ,;]+/);
	let i;
	for (i = 0; i < list.length; i++) {
	    if (list[i] === '') {
		continue;
	    }

	    if (!Proxmox.Utils.HostPort_match.test(list[i]) &&
		!Proxmox.Utils.HostPortBrackets_match.test(list[i]) &&
		!Proxmox.Utils.IP6_dotnotation_match.test(list[i])) {
		return false;
	    }
	}

	return true;
    },
    HostListText: gettext('Not a valid list of hosts'),

    password: function(val, field) {
	if (field.initialPassField) {
	    let pwd = field.up('form').down(`[name=${field.initialPassField}]`);
	    return val === pwd.getValue();
	}
	return true;
    },

    passwordText: gettext('Passwords do not match'),

    email: function(value) {
	let emailre = /^[\w+~-]+(\.[\w+~-]+)*@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*$/;
	return emailre.test(value);
    },
});

// we always want the number in x.y format and never in, e.g., x,y
Ext.define('PVE.form.field.Number', {
    override: 'Ext.form.field.Number',
    submitLocaleSeparator: false,
});

// avois spamming the console and if we ever use this avoid a CORS block error too
Ext.define('PVE.draw.Container', {
    override: 'Ext.draw.Container',
    defaultDownloadServerUrl: document.location.origin, // avoid that pointing to http://svg.sencha.io
    applyDownloadServerUrl: function(url) { // avoid noisy warning, we don't really use that anyway
	url = url || this.defaultDownloadServerUrl;
	return url;
    },
});

// ExtJs 5-6 has an issue with caching
// see https://www.sencha.com/forum/showthread.php?308989
Ext.define('Proxmox.UnderlayPool', {
    override: 'Ext.dom.UnderlayPool',

    checkOut: function() {
	let cache = this.cache,
	    len = cache.length,
	    el;

	// do cleanup because some of the objects might have been destroyed
	while (len--) {
	    if (cache[len].destroyed) {
		cache.splice(len, 1);
	    }
	}
	// end do cleanup

	el = cache.shift();

	if (!el) {
	    el = Ext.Element.create(this.elementConfig);
	    el.setVisibilityMode(2);
	    //<debug>
	    // tell the spec runner to ignore this element when checking if the dom is clean
	    el.dom.setAttribute('data-sticky', true);
	    //</debug>
	}

	return el;
    },
});

// if the order of the values are not the same in originalValue and value
// extjs will not overwrite value, but marks the field dirty and thus
// the reset button will be enabled (but clicking it changes nothing)
// so if the arrays are not the same after resetting, we
// clear and set it
Ext.define('Proxmox.form.ComboBox', {
    override: 'Ext.form.field.ComboBox',

    reset: function() {
	// copied from combobox
	let me = this;
	me.callParent();

	// clear and set when not the same
	let value = me.getValue();
	if (Ext.isArray(me.originalValue) && Ext.isArray(value) &&
	    !Ext.Array.equals(value, me.originalValue)) {
	    me.clearValue();
	    me.setValue(me.originalValue);
	}
    },

    // we also want to open the trigger on editable comboboxes by default
    initComponent: function() {
	let me = this;
	me.callParent();

	if (me.editable) {
	    // The trigger.picker causes first a focus event on the field then
	    // toggles the selection picker. Thus skip expanding in this case,
	    // else our focus listener expands and the picker.trigger then
	    // collapses it directly afterwards.
	    Ext.override(me.triggers.picker, {
		onMouseDown: function(e) {
		    // copied "should we focus" check from Ext.form.trigger.Trigger
		    if (e.pointerType !== 'touch' && !this.field.owns(Ext.Element.getActiveElement())) {
			me.skip_expand_on_focus = true;
		    }
		    this.callParent(arguments);
		},
	    });

	    me.on("focus", function(combobox) {
		if (!combobox.isExpanded && !combobox.skip_expand_on_focus) {
		    combobox.expand();
		}
		combobox.skip_expand_on_focus = false;
	    });
	}
    },
});

// when refreshing a grid/tree view, restoring the focus moves the view back to
// the previously focused item. Save scroll position before refocusing.
Ext.define(null, {
    override: 'Ext.view.Table',

    jumpToFocus: false,

    saveFocusState: function() {
	var me = this,
	    store = me.dataSource,
	    actionableMode = me.actionableMode,
	    navModel = me.getNavigationModel(),
	    focusPosition = actionableMode ? me.actionPosition : navModel.getPosition(true),
	    activeElement = Ext.fly(Ext.Element.getActiveElement()),
	    focusCell = focusPosition && focusPosition.view === me &&
	    Ext.fly(focusPosition.getCell(true)),
	    refocusRow, refocusCol, record;

	// The navModel may return a position that is in a locked partner, so check that
	// the focusPosition's cell contains the focus before going forward.
	// The skipSaveFocusState is set by Actionables which actively control
	// focus destination. See CellEditing#activateCell.
	if (!me.skipSaveFocusState && focusCell && focusCell.contains(activeElement)) {
	    // Separate this from the instance that the nav model is using.
	    focusPosition = focusPosition.clone();

	    // While we deactivate the focused element, suspend focus processing on it.
	    activeElement.suspendFocusEvents();

	    // Suspend actionable mode.
	    // Each Actionable must silently save its state ready to resume when focus
	    // can be restored but should only do that if the activeElement is not the cell itself,
	    // this happens when the grid is refreshed while one of the actionables is being
	    // deactivated (e.g. Calling  view refresh inside CellEditor 'edit' event listener).
	    if (actionableMode && focusCell.dom !== activeElement.dom) {
		me.suspendActionableMode();
	    } else {
		// Clear position, otherwise the setPosition on the other side
		// will be rejected as a no-op if the resumption position is logically
		// equivalent.
		actionableMode = false;
		navModel.setPosition();
	    }

	    // Do not leave the element in that state in case refresh fails, and restoration
	    // closure not called.
	    activeElement.resumeFocusEvents();

	    // if the store is expanding or collapsing, we should never scroll the view.
	    if (store.isExpandingOrCollapsing) {
		return Ext.emptyFn;
	    }

	    // The following function will attempt to refocus back in the same mode to the same cell
	    // as it was at before based upon the previous record (if it's still in the store),
	    // or the row index.
	    return function() {
		var all;

		// May have changed due to reconfigure
		store = me.dataSource;

		// If we still have data, attempt to refocus in the same mode.
		if (store.getCount()) {
		    all = me.all;

		    // Adjust expectations of where we are able to refocus according to
		    // what kind of destruction might have been wrought on this view's DOM
		    // during focus save.
		    refocusRow =
			Math.min(Math.max(focusPosition.rowIdx, all.startIndex), all.endIndex);

		    refocusCol = Math.min(
			focusPosition.colIdx,
			me.getVisibleColumnManager().getColumns().length - 1,
		    );

		    record = focusPosition.record;

		    focusPosition = new Ext.grid.CellContext(me).setPosition(
			record && store.contains(record) && !record.isCollapsedPlaceholder
			? record
			: refocusRow,
			refocusCol,
		    );

		    // Maybe there are no cells. eg: all groups collapsed.
		    if (focusPosition.getCell(true)) {
			if (actionableMode) {
			    me.resumeActionableMode(focusPosition);
			} else {
			    // we sometimes want to scroll back to where we are

			    let x = me.getScrollX();
			    let y = me.getScrollY();

			    // Pass "preventNavigation" as true
			    // so that that does not cause selection.
			    navModel.setPosition(focusPosition, null, null, null, true);

			    if (!navModel.getPosition()) {
				focusPosition.column.focus();
			    }

			    if (!me.jumpToFocus) {
				me.scrollTo(x, y);
			    }
			}
		    }
		} else { // No rows - focus associated column header
		    focusPosition.column.focus();
		}
	    };
	}
	return Ext.emptyFn;
    },
});

// ExtJS 6.0.1 has no setSubmitValue() (although you find it in the docs).
// Note: this.submitValue is a boolean flag, whereas getSubmitValue() returns
// data to be submitted.
Ext.define('Proxmox.form.field.Text', {
    override: 'Ext.form.field.Text',

    setSubmitValue: function(v) {
	this.submitValue = v;
    },
});

// make mousescrolling work in firefox in the containers overflowhandler,
// by using only the 'wheel' event not 'mousewheel'(fixed in 7.3)
// also reverse the scrolldirection (fixed in 7.3)
// and reduce the default increment
Ext.define(null, {
    override: 'Ext.layout.container.boxOverflow.Scroller',

    wheelIncrement: 1,

    getWheelDelta: function(e) {
	return -e.getWheelDelta(e);
    },

    onOwnerRender: function(owner) {
	var me = this,
	    scrollable = {
		isBoxOverflowScroller: true,
		x: false,
		y: false,
		listeners: {
		    scrollend: this.onScrollEnd,
		    scope: this,
		},
	    };

	// If no obstrusive scrollbars, allow natural scrolling on mobile touch devices
	if (!Ext.scrollbar.width() && !Ext.platformTags.desktop) {
	    scrollable[owner.layout.horizontal ? 'x' : 'y'] = true;
	} else {
	    me.wheelListener = me.layout.innerCt.on(
		'wheel', me.onMouseWheel, me, { destroyable: true },
	    );
	}

	owner.setScrollable(scrollable);
    },
});

// extj 6.7 reversed mousewheel direction... (fixed in 7.3)
// https://forum.sencha.com/forum/showthread.php?472517-Mousewheel-scroll-direction-in-numberfield-with-spinners
// also use the 'wheel' event instead of 'mousewheel' (fixed in 7.3)
Ext.define('Proxmox.form.field.Spinner', {
    override: 'Ext.form.field.Spinner',

    onRender: function() {
	let me = this;

	me.callParent();

	// Init mouse wheel
	if (me.mouseWheelEnabled) {
	    // Unlisten Ext generated listener ('mousewheel' is deprecated anyway)
	    me.mun(me.bodyEl, 'mousewheel', me.onMouseWheel, me);

	    me.mon(me.bodyEl, 'wheel', me.onMouseWheel, me);
	}
    },

    onMouseWheel: function(e) {
	var me = this,
	    delta;
	if (me.hasFocus) {
	    delta = e.getWheelDelta();
	    if (delta > 0) {
		me.spinDown();
	    } else if (delta < 0) {
		me.spinUp();
	    }
	    e.stopEvent();
	    me.onSpinEnd();
	}
    },
});

// add '@' to the valid id
Ext.define('Proxmox.validIdReOverride', {
    override: 'Ext.Component',
    validIdRe: /^[a-z_][a-z0-9\-_@]*$/i,
});

Ext.define('Proxmox.selection.CheckboxModel', {
    override: 'Ext.selection.CheckboxModel',

    // [P] use whole checkbox cell to multiselect, not only the checkbox
    checkSelector: '.x-grid-cell-row-checker',

    // TODO: remove all optimizations below to an override for parent 'Ext.selection.Model' ??

    // [ P: optimized to remove all records at once as single remove is O(n^3) slow ]
    // records can be an index, a record or an array of records
    doDeselect: function(records, suppressEvent) {
	var me = this,
	    selected = me.selected,
	    i = 0,
	    len, record,
	    commit;
	if (me.locked || !me.store) {
	    return false;
	}
	if (typeof records === "number") {
	    // No matching record, jump out
	    record = me.store.getAt(records);
	    if (!record) {
		return false;
	    }
	    records = [
		record,
	    ];
	} else if (!Ext.isArray(records)) {
	    records = [
		records,
	    ];
	}
	// [P] a beforedeselection, triggered by me.onSelectChange below, can block removal by
	// returning false, thus the original implementation removed only here in the commit fn,
	// which has an abysmal performance O(n^3). As blocking removal is not the norm, go do the
	// reverse, record blocked records and remove them from the to-be-removed array before
	// applying it. A FF86 i9-9900K on 10k records goes from >40s to ~33ms for >90% deselection
	let committed = false;
	commit = function() {
	    committed = true;
	    if (record === me.selectionStart) {
		me.selectionStart = null;
	    }
	};
	let removalBlocked = [];
	len = records.length;
	me.suspendChanges();
	for (; i < len; i++) {
	    record = records[i];
	    if (me.isSelected(record)) {
		committed = false;
		me.onSelectChange(record, false, suppressEvent, commit);
		if (!committed) {
		    removalBlocked.push(record);
		}
		if (me.destroyed) {
		    return false;
		}
	    }
	}
	if (removalBlocked.length > 0) {
	    records.remove(removalBlocked);
	}
	selected.remove(records); // [P] FAST(er)
	me.lastSelected = selected.last();
	me.resumeChanges();
	// fire selchange if there was a change and there is no suppressEvent flag
	me.maybeFireSelectionChange(records.length > 0 && !suppressEvent);
	return records.length;
    },


    doMultiSelect: function(records, keepExisting, suppressEvent) {
	var me = this,
	    selected = me.selected,
	    change = false,
	    result, i, len, record, commit;

	if (me.locked) {
	    return;
	}

	records = !Ext.isArray(records) ? [records] : records;
	len = records.length;
	if (!keepExisting && selected.getCount() > 0) {
	    result = me.deselectDuringSelect(records, suppressEvent);
	    if (me.destroyed) {
		return;
	    }
	    if (result[0]) {
		// We had a failure during selection, so jump out
		// Fire selection change if we did deselect anything
		me.maybeFireSelectionChange(result[1] > 0 && !suppressEvent);
		return;
	    } else {
		// Means something has been deselected, so we've had a change
		change = result[1] > 0;
	    }
	}

	let gotBlocked, blockedRecords = [];
	commit = function() {
	    if (!selected.getCount()) {
		me.selectionStart = record;
	    }
	    gotBlocked = false;
	    change = true;
	};

	for (i = 0; i < len; i++) {
	    record = records[i];
	    if (me.isSelected(record)) {
		continue;
	    }

	    gotBlocked = true;
	    me.onSelectChange(record, true, suppressEvent, commit);
	    if (me.destroyed) {
		return;
	    }
	    if (gotBlocked) {
		blockedRecords.push(record);
	    }
	}
	if (blockedRecords.length > 0) {
	    records.remove(blockedRecords);
	}
	selected.add(records);
	me.lastSelected = record;

	// fire selchange if there was a change and there is no suppressEvent flag
	me.maybeFireSelectionChange(change && !suppressEvent);
    },
    deselectDuringSelect: function(toSelect, suppressEvent) {
	var me = this,
	    selected = me.selected.getRange(),
	    changed = 0,
	    failed = false;
	// Prevent selection change events from firing, will happen during select
	me.suspendChanges();
	me.deselectingDuringSelect = true;
	let toDeselect = selected.filter(item => !Ext.Array.contains(toSelect, item));
	if (toDeselect.length > 0) {
	    changed = me.doDeselect(toDeselect, suppressEvent);
	    if (!changed) {
		failed = true;
	    }
	    if (me.destroyed) {
		failed = true;
		changed = 0;
	    }
	}
	me.deselectingDuringSelect = false;
	me.resumeChanges();
	return [
	    failed,
	    changed,
	];
    },
});

// stop nulling of properties
Ext.define('Proxmox.Component', {
    override: 'Ext.Component',
    clearPropertiesOnDestroy: false,
});

// Fix drag&drop for vms and desktops that detect 'pen' pointerType
// NOTE: this part has been rewritten in ExtJS 7.4, so re-check once we can upgrade
Ext.define('Proxmox.view.DragZone', {
    override: 'Ext.view.DragZone',

    onItemMouseDown: function(view, record, item, index, e) {
	// Ignore touchstart.
	// For touch events, we use longpress.
	if (e.pointerType !== 'touch') {
	    this.onTriggerGesture(view, record, item, index, e);
	}
    },
});

// Fix text selection on drag when using DragZone,
// see https://forum.sencha.com/forum/showthread.php?335100
Ext.define('Proxmox.dd.DragDropManager', {
    override: 'Ext.dd.DragDropManager',

    stopEvent: function(e) {
	if (this.stopPropagation) {
	    e.stopPropagation();
	}

	if (this.preventDefault) {
	    e.preventDefault();
	}
    },
});

// make it possible to set the SameSite attribute on cookies
Ext.define('Proxmox.Cookies', {
    override: 'Ext.util.Cookies',

    set: function(name, value, expires, path, domain, secure, samesite) {
	let attrs = [];

	if (expires) {
	    attrs.push("expires=" + expires.toUTCString());
	}

	if (path === undefined) { // mimic original function's behaviour
	    attrs.push("path=/");
	} else if (path) {
	    attrs.push("path=" + path);
	}

	if (domain) {
	    attrs.push("domain=" + domain);
	}

	if (secure === true) {
	    attrs.push("secure");
	}

	if (samesite && ["lax", "none", "strict"].includes(samesite.toLowerCase())) {
	    attrs.push("samesite=" + samesite);
	}

	document.cookie = name + "=" + escape(value) + "; " + attrs.join("; ");
    },
});

// force alert boxes to be rendered with an Error Icon
// since Ext.Msg is an object and not a prototype, we need to override it
// after the framework has been initiated
Ext.onReady(function() {
    Ext.override(Ext.Msg, {
	alert: function(title, message, fn, scope) { // eslint-disable-line consistent-return
	    if (Ext.isString(title)) {
		let config = {
		    title: title,
		    message: message,
		    icon: this.ERROR,
		    buttons: this.OK,
		    fn: fn,
		    scope: scope,
		    minWidth: this.minWidth,
		};
	    return this.show(config);
	    }
	},
    });
});

// add allowfullscreen to render template to allow the noVNC/xterm.js embedded UIs to go fullscreen
//
// The rest is the same as in the separate ux package (extjs/build/packages/ux/classic/ux-debug.js),
// which we do not load as it's rather big and most of the widgets there are not useful for our UIs
Ext.define('Ext.ux.IFrame', {
    extend: 'Ext.Component',

    alias: 'widget.uxiframe',

    loadMask: 'Loading...',

    src: 'about:blank',

    renderTpl: [
	// eslint-disable-next-line max-len
	'<iframe src="{src}" id="{id}-iframeEl" data-ref="iframeEl" name="{frameName}" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>',
    ],

    childEls: ['iframeEl'],

    initComponent: function() {
	this.callParent();

	this.frameName = this.frameName || this.id + '-frame';
    },

    initEvents: function() {
	let me = this;

	me.callParent();
	me.iframeEl.on('load', me.onLoad, me);
    },

    initRenderData: function() {
	return Ext.apply(this.callParent(), {
	    src: this.src,
	    frameName: this.frameName,
	});
    },

    getBody: function() {
	let doc = this.getDoc();

	return doc.body || doc.documentElement;
    },

    getDoc: function() {
	try {
	    return this.getWin().document;
	} catch (ex) {
	    return null;
	}
    },

    getWin: function() {
	let me = this,
	    name = me.frameName,
	    win = Ext.isIE ? me.iframeEl.dom.contentWindow : window.frames[name];

	return win;
    },

    getFrame: function() {
	let me = this;

	return me.iframeEl.dom;
    },

    onLoad: function() {
	let me = this,
	    doc = me.getDoc();

	if (doc) {
	    this.el.unmask();
	    this.fireEvent('load', this);
	} else if (me.src) {
	    this.el.unmask();
	    this.fireEvent('error', this);
	}
    },

    load: function(src) {
	let me = this,
	    text = me.loadMask,
	    frame = me.getFrame();

	if (me.fireEvent('beforeload', me, src) !== false) {
	    if (text && me.el) {
		me.el.mask(text);
	    }

	    frame.src = me.src = src || me.src;
	}
    },
});
Ext.define('PMX.image.Logo', {
    extend: 'Ext.Img',
    xtype: 'proxmoxlogo',

    height: 30,
    width: 172,
    src: '/images/proxmox_logo.png',
    alt: 'Proxmox',
    autoEl: {
	tag: 'a',
	href: 'https://www.proxmox.com',
	target: '_blank',
    },

    initComponent: function() {
	let me = this;
	let prefix = me.prefix !== undefined ? me.prefix : '/pve2';
	me.src = prefix + me.src;
	me.callParent();
    },
});
// NOTE: just relays parsing to markedjs parser
Ext.define('Proxmox.Markdown', {
    alternateClassName: 'Px.Markdown', // just trying out something, do NOT copy this line
    singleton: true,

    // transforms HTML to a DOM tree and recursively descends and HTML-encodes every branch with a
    // "bad" node.type and drops "bad" attributes from the remaining nodes.
    // "bad" means anything which can do XSS or break the layout of the outer page
    sanitizeHTML: function(input) {
	if (!input) {
	    return input;
	}
	let _isHTTPLike = value => value.match(/^\s*https?:/i); // URL's protocol ends with :
	let _sanitize;
	_sanitize = (node) => {
	    if (node.nodeType === 3) return;
	    if (node.nodeType !== 1 ||
		/^(script|style|form|select|option|optgroup|map|area|canvas|textarea|applet|font|iframe|audio|video|object|embed|svg)$/i.test(node.tagName)
	    ) {
		// could do node.remove() instead, but it's nicer UX if we keep the (encoded!) html
		node.outerHTML = Ext.String.htmlEncode(node.outerHTML);
		return;
	    }
	    for (let i=node.attributes.length; i--;) {
		const name = node.attributes[i].name;
		const value = node.attributes[i].value;
		const canonicalTagName = node.tagName.toLowerCase();
		// TODO: we may want to also disallow class and id attrs
		if (
		    !/^(class|id|name|href|src|alt|align|valign|disabled|checked|start|type|target)$/i.test(name)
		) {
		    node.attributes.removeNamedItem(name);
		} else if ((name === 'href' || name === 'src') && !_isHTTPLike(value)) {
		    let safeURL = false;
		    try {
			let url = new URL(value, window.location.origin);
			safeURL = _isHTTPLike(url.protocol);
			if (canonicalTagName === 'img' && url.protocol.toLowerCase() === 'data:') {
			    safeURL = true;
			} else if (canonicalTagName === 'a') {
			    // allow most link protocols so admins can use short-cuts to, e.g., RDP
			    safeURL = url.protocol.toLowerCase() !== 'javascript:'; // eslint-disable-line no-script-url
			}
			if (safeURL) {
			    node.attributes[i].value = url.href;
			} else {
			    node.attributes.removeNamedItem(name);
			}
		    } catch (e) {
			node.attributes.removeNamedItem(name);
		    }
		} else if (name === 'target' && canonicalTagName !== 'a') {
		    node.attributes.removeNamedItem(name);
		}
	    }
	    for (let i=node.childNodes.length; i--;) _sanitize(node.childNodes[i]);
	};

	const doc = new DOMParser().parseFromString(`<!DOCTYPE html><html><body>${input}`, 'text/html');
	doc.normalize();

	_sanitize(doc.body);

	return doc.body.innerHTML;
    },

    parse: function(markdown) {
	/*global marked*/
	let unsafeHTML = marked.parse(markdown);

	return `<div class="pmx-md">${this.sanitizeHTML(unsafeHTML)}</div>`;
    },

});
/*
 * The Proxmox CBind mixin is intended to supplement the 'bind' mechanism
 * of ExtJS. In contrast to the 'bind', 'cbind' only acts during the creation
 * of the component, not during its lifetime. It's only applied once before
 * the 'initComponent' method is executed, and thus you have only access
 * to the basic initial configuration of it.
 *
 * You can use it to get a 'declarative' approach to component declaration,
 * even when you need to set some properties of sub-components dynamically
 * (e.g., the 'nodename'). It overwrites the given properties of the 'cbind'
 * object in the component with their computed values of the computed
 * cbind configuration object of the 'cbindData' function (or object).
 *
 * The cbind syntax is inspired by ExtJS' bind syntax ('{property}'), where
 * it is possible to negate values ('{!negated}'), access sub-properties of
 * objects ('{object.property}') and even use a getter function,
 * akin to viewModel formulas ('(get) => get("prop")') to execute more
 * complicated dependencies (e.g., urls).
 *
 * The 'cbind' will be recursively applied to all properties (objects/arrays)
 * that contain an 'xtype' or 'cbind' property, but stops for a subtree if the
 * object in question does not have either (if you have one or more levels that
 * have no cbind/xtype property, you can insert empty cbind objects there to
 * reach deeper nested objects).
 *
 * This reduces the code in the 'initComponent' and instead we can statically
 * declare items, buttons, tbars, etc. while the dynamic parts are contained
 * in the 'cbind'.
 *
 * It is used like in the following example:
 *
 * Ext.define('Some.Component', {
 *     extend: 'Some.other.Component',
 *
 *     // first it has to be enabled
 *     mixins: ['Proxmox.Mixin.CBind'],
 *
 *     // then a base config has to be defined. this can be a function,
 *     // which has access to the initial config and can store persistent
 *     // properties, as well as return temporary ones (which only exist during
 *     // the cbind process)
 *     // this function will be called before 'initComponent'
 *     cbindData: function(initialconfig) {
 *         // 'this' here is the same as in 'initComponent'
 *         let me = this;
 *         me.persistentProperty = false;
 *         return {
 *             temporaryProperty: true,
 *         };
 *     },
 *
 *     // if there is no need for persistent properties, it can also simply be an object
 *     cbindData: {
 *         temporaryProperty: true,
 *         // properties itself can also be functions that will be evaluated before
 *         // replacing the values
 *         dynamicProperty: (cfg) => !cfg.temporaryProperty,
 *         numericProp: 0,
 *         objectProp: {
 *             foo: 'bar',
 *             bar: 'baz',
 *         }
 *     },
 *
 *     // you can 'cbind' the component itself, here the 'target' property
 *     // will be replaced with the content of 'temporaryProperty' (true)
 *     // before the components initComponent
 *     cbind: {
 *          target: '{temporaryProperty}',
 *     },
 *
 *     items: [
 *         {
 *             xtype: 'checkbox',
 *             cbind: {
 *                 value: '{!persistentProperty}',
 *                 object: '{objectProp.foo}'
 *                 dynamic: (get) => get('numericProp') + 1,
 *             },
 *         },
 *         {
 *             // empty cbind so that subitems are reached
 *             cbind: {},
 *             items: [
 *                 {
 *                     xtype: 'textfield',
 *                     cbind: {
 *                         value: '{objectProp.bar}',
 *                     },
 *                 },
 *             ],
 *         },
 *     ],
 * });
 */

Ext.define('Proxmox.Mixin.CBind', {
    extend: 'Ext.Mixin',

    mixinConfig: {
        before: {
            initComponent: 'cloneTemplates',
        },
    },

    cloneTemplates: function() {
	let me = this;

	if (typeof me.cbindData === "function") {
	    me.cbindData = me.cbindData(me.initialConfig);
	}
	me.cbindData = me.cbindData || {};

	let getConfigValue = function(cname) {
	    if (cname in me.initialConfig) {
		return me.initialConfig[cname];
	    }
	    if (cname in me.cbindData) {
		let res = me.cbindData[cname];
		if (typeof res === "function") {
		    return res(me.initialConfig);
		} else {
		    return res;
		}
	    }
	    if (cname in me) {
		return me[cname];
	    }
	    throw "unable to get cbind data for '" + cname + "'";
	};

	let applyCBind = function(obj) {
	    let cbind = obj.cbind, cdata;
	    if (!cbind) return;

	    for (const prop in cbind) { // eslint-disable-line guard-for-in
		let match, found;
		cdata = cbind[prop];

		found = false;
		if (typeof cdata === 'function') {
		    obj[prop] = cdata(getConfigValue, prop);
		    found = true;
		} else if ((match = /^\{(!)?([a-z_][a-z0-9_]*)\}$/i.exec(cdata))) {
		    let cvalue = getConfigValue(match[2]);
		    if (match[1]) cvalue = !cvalue;
		    obj[prop] = cvalue;
		    found = true;
		} else if ((match = /^\{(!)?([a-z_][a-z0-9_]*(\.[a-z_][a-z0-9_]*)+)\}$/i.exec(cdata))) {
		    let keys = match[2].split('.');
		    let cvalue = getConfigValue(keys.shift());
		    keys.forEach(function(k) {
			if (k in cvalue) {
			    cvalue = cvalue[k];
			} else {
			    throw "unable to get cbind data for '" + match[2] + "'";
			}
		    });
		    if (match[1]) cvalue = !cvalue;
		    obj[prop] = cvalue;
		    found = true;
		} else {
		    obj[prop] = cdata.replace(/{([a-z_][a-z0-9_]*)\}/ig, (_match, cname) => {
			let cvalue = getConfigValue(cname);
			found = true;
			return cvalue;
		    });
		}
		if (!found) {
		    throw "unable to parse cbind template '" + cdata + "'";
		}
	    }
	};

	if (me.cbind) {
	    applyCBind(me);
	}

	let cloneTemplateObject;
	let cloneTemplateArray = function(org) {
	    let copy, i, found, el, elcopy, arrayLength;

	    arrayLength = org.length;
	    found = false;
	    for (i = 0; i < arrayLength; i++) {
		el = org[i];
		if (el.constructor === Object && (el.xtype || el.cbind)) {
		    found = true;
		    break;
		}
	    }

	    if (!found) return org; // no need to copy

	    copy = [];
	    for (i = 0; i < arrayLength; i++) {
		el = org[i];
		if (el.constructor === Object && (el.xtype || el.cbind)) {
		    elcopy = cloneTemplateObject(el);
		    if (elcopy.cbind) {
			applyCBind(elcopy);
		    }
		    copy.push(elcopy);
		} else if (el.constructor === Array) {
		    elcopy = cloneTemplateArray(el);
		    copy.push(elcopy);
		} else {
		    copy.push(el);
		}
	    }
	    return copy;
	};

	cloneTemplateObject = function(org) {
	    let res = {}, prop, el, copy;
	    for (prop in org) { // eslint-disable-line guard-for-in
		el = org[prop];
		if (el === undefined || el === null) {
		    res[prop] = el;
		    continue;
		}
		if (el.constructor === Object && (el.xtype || el.cbind)) {
		    copy = cloneTemplateObject(el);
		    if (copy.cbind) {
			applyCBind(copy);
		    }
		    res[prop] = copy;
		} else if (el.constructor === Array) {
		    copy = cloneTemplateArray(el);
		    res[prop] = copy;
		} else {
		    res[prop] = el;
		}
	    }
	    return res;
	};

	let condCloneProperties = function() {
	    let prop, el, tmp;

	    for (prop in me) { // eslint-disable-line guard-for-in
		el = me[prop];
		if (el === undefined || el === null) continue;
		if (typeof el === 'object' && el.constructor === Object) {
		    if ((el.xtype || el.cbind) && prop !== 'config') {
			me[prop] = cloneTemplateObject(el);
		    }
		} else if (el.constructor === Array) {
		    tmp = cloneTemplateArray(el);
		    me[prop] = tmp;
		}
	    }
	};

	condCloneProperties();
    },
});
/* A reader to store a single JSON Object (hash) into a storage.
 * Also accepts an array containing a single hash.
 *
 * So it can read:
 *
 * example1: {data1: "xyz", data2: "abc"}
 * returns [{key: "data1", value: "xyz"}, {key: "data2", value: "abc"}]
 *
 * example2: [ {data1: "xyz", data2: "abc"} ]
 * returns [{key: "data1", value: "xyz"}, {key: "data2", value: "abc"}]
 *
 * If you set 'readArray', the reader expects the object as array:
 *
 * example3: [ { key: "data1", value: "xyz", p2: "cde" },  { key: "data2", value: "abc", p2: "efg" }]
 * returns [{key: "data1", value: "xyz", p2: "cde}, {key: "data2", value: "abc", p2: "efg"}]
 *
 * Note: The records can contain additional properties (like 'p2' above) when you use 'readArray'
 *
 * Additional feature: specify allowed properties with default values with 'rows' object
 *
 * let rows = {
 *   memory: {
 *     required: true,
 *     defaultValue: 512
 *   }
 * }
 *
 */

Ext.define('Proxmox.data.reader.JsonObject', {
    extend: 'Ext.data.reader.Json',
    alias: 'reader.jsonobject',

    readArray: false,
    responseType: undefined,

    rows: undefined,

    constructor: function(config) {
        let me = this;

        Ext.apply(me, config || {});

	me.callParent([config]);
    },

    getResponseData: function(response) {
	let me = this;

	let data = [];
        try {
	    let result = Ext.decode(response.responseText);
	    // get our data items inside the server response
	    let root = result[me.getRootProperty()];

	    if (me.readArray) {
		// it can be more convenient for the backend to return null instead of an empty array
		if (root === null) {
		    root = [];
		}
		let rec_hash = {};
		Ext.Array.each(root, function(rec) {
		    if (Ext.isDefined(rec.key)) {
			rec_hash[rec.key] = rec;
		    }
		});

		if (me.rows) {
		    Ext.Object.each(me.rows, function(key, rowdef) {
			let rec = rec_hash[key];
			if (Ext.isDefined(rec)) {
			    if (!Ext.isDefined(rec.value)) {
				rec.value = rowdef.defaultValue;
			    }
			    data.push(rec);
			} else if (Ext.isDefined(rowdef.defaultValue)) {
			    data.push({ key: key, value: rowdef.defaultValue });
			} else if (rowdef.required) {
			    data.push({ key: key, value: undefined });
			}
		    });
		} else {
		    Ext.Array.each(root, function(rec) {
			if (Ext.isDefined(rec.key)) {
			    data.push(rec);
			}
		    });
		}
	    } else {
		// it can be more convenient for the backend to return null instead of an empty object
		if (root === null) {
		    root = {};
		} else if (Ext.isArray(root)) {
		    if (root.length === 1) {
			root = root[0];
		    } else {
			root = {};
		    }
		}

		if (me.rows) {
		    Ext.Object.each(me.rows, function(key, rowdef) {
			if (Ext.isDefined(root[key])) {
			    data.push({ key: key, value: root[key] });
			} else if (Ext.isDefined(rowdef.defaultValue)) {
			    data.push({ key: key, value: rowdef.defaultValue });
			} else if (rowdef.required) {
			    data.push({ key: key, value: undefined });
			}
		    });
		} else {
		    Ext.Object.each(root, function(key, value) {
			data.push({ key: key, value: value });
		    });
		}
	    }
	} catch (ex) {
	    Ext.Error.raise({
		response: response,
		json: response.responseText,
		parseError: ex,
		msg: 'Unable to parse the JSON returned by the server: ' + ex.toString(),
	    });
	}

	return data;
    },
});
Ext.define('Proxmox.RestProxy', {
    extend: 'Ext.data.RestProxy',
    alias: 'proxy.proxmox',

    pageParam: null,
    startParam: null,
    limitParam: null,
    groupParam: null,
    sortParam: null,
    filterParam: null,
    noCache: false,

    afterRequest: function(request, success) {
	this.fireEvent('afterload', this, request, success);
    },

    constructor: function(config) {
	Ext.applyIf(config, {
	    reader: {
		responseType: undefined,
		type: 'json',
		rootProperty: config.root || 'data',
	    },
	});

	this.callParent([config]);
    },
}, function() {
    Ext.define('KeyValue', {
	extend: "Ext.data.Model",
	fields: ['key', 'value'],
	idProperty: 'key',
    });

    Ext.define('KeyValuePendingDelete', {
	extend: "Ext.data.Model",
	fields: ['key', 'value', 'pending', 'delete'],
	idProperty: 'key',
    });

    Ext.define('proxmox-tasks', {
	extend: 'Ext.data.Model',
	fields: [
	    { name: 'starttime', type: 'date', dateFormat: 'timestamp' },
	    { name: 'endtime', type: 'date', dateFormat: 'timestamp' },
	    { name: 'pid', type: 'int' },
	    {
		name: 'duration',
		sortType: 'asInt',
		calculate: function(data) {
		    let endtime = data.endtime;
		    let starttime = data.starttime;
		    if (endtime !== undefined) {
			return (endtime - starttime)/1000;
		    }
		    return 0;
		},
	    },
	    'node', 'upid', 'user', 'tokenid', 'status', 'type', 'id',
	],
	idProperty: 'upid',
    });

    Ext.define('proxmox-cluster-log', {
	extend: 'Ext.data.Model',
	fields: [
	    { name: 'uid', type: 'int' },
	    { name: 'time', type: 'date', dateFormat: 'timestamp' },
	    { name: 'pri', type: 'int' },
	    { name: 'pid', type: 'int' },
	    'node', 'user', 'tag', 'msg',
	    {
		name: 'id',
		convert: function(value, record) {
		    let info = record.data;

		    if (value) {
			return value;
		    }
		    // compute unique ID
		    return info.uid + ':' + info.node;
		},
	    },
	],
	idProperty: 'id',
    });
});
/*
 * Extends the Ext.data.Store type with  startUpdate() and stopUpdate() methods
 * to refresh the store data in the background.
 * Components using this store directly will flicker due to the redisplay of
 * the element ater 'config.interval' ms.
 *
 * Note that you have to set 'autoStart' or call startUpdate() once yourself
 * for the background load to begin.
 */
Ext.define('Proxmox.data.UpdateStore', {
    extend: 'Ext.data.Store',
    alias: 'store.update',

    config: {
	interval: 3000,

	isStopped: true,

	autoStart: false,
    },

    destroy: function() {
	let me = this;
	me.stopUpdate();
	me.callParent();
    },

    constructor: function(config) {
	let me = this;

	config = config || {};
	if (config.interval === undefined) {
	    delete config.interval;
	}


	let load_task = new Ext.util.DelayedTask();

	let run_load_task = function() {
	    if (me.getIsStopped()) {
		return;
	    }

	    if (Proxmox.Utils.authOK()) {
		let start = new Date();
		me.load(function() {
		    let runtime = new Date() - start;
		    let interval = me.getInterval() + runtime*2;
		    load_task.delay(interval, run_load_task);
		});
	    } else {
		load_task.delay(200, run_load_task);
	    }
	};

	Ext.apply(config, {
	    startUpdate: function() {
		me.setIsStopped(false);
		// run_load_task(); this makes problems with chrome
		load_task.delay(1, run_load_task);
	    },
	    stopUpdate: function() {
		me.setIsStopped(true);
		load_task.cancel();
	    },
	});

	me.callParent([config]);

	me.load_task = load_task;

	if (me.getAutoStart()) {
	    me.startUpdate();
	}
    },
});
/*
 * The DiffStore is a in-memory store acting as proxy between a real store
 * instance and a component.
 * Its purpose is to redisplay the component *only* if the data has been changed
 * inside the real store, to avoid the annoying visual flickering of using
 * the real store directly.
 *
 * Implementation:
 * The DiffStore monitors via mon() the 'load' events sent by the real store.
 * On each 'load' event, the DiffStore compares its own content with the target
 * store (call to cond_add_item()) and then fires a 'refresh' event.
 * The 'refresh' event will automatically trigger a view refresh on the component
 * who binds to this store.
 */

/* Config properties:
 * rstore: the realstore which will autorefresh its content from the API
 * Only works if rstore has a model and use 'idProperty'
 * sortAfterUpdate: sort the diffstore before rendering the view
 */
Ext.define('Proxmox.data.DiffStore', {
    extend: 'Ext.data.Store',
    alias: 'store.diff',

    sortAfterUpdate: false,

    // if true, destroy rstore on destruction. Defaults to true if a rstore
    // config is passed instead of an existing rstore instance
    autoDestroyRstore: false,

    doDestroy: function() {
	let me = this;
	if (me.autoDestroyRstore) {
	    if (Ext.isFunction(me.rstore.destroy)) {
		me.rstore.destroy();
	    }
	    delete me.rstore;
	}
	me.callParent();
    },

    constructor: function(config) {
	let me = this;

	config = config || {};

	if (!config.rstore) {
	    throw "no rstore specified";
	}

	if (!config.rstore.model) {
	    throw "no rstore model specified";
	}

	let rstore;
	if (config.rstore.isInstance) {
	    rstore = config.rstore;
	} else if (config.rstore.type) {
	    Ext.applyIf(config.rstore, {
		autoDestroyRstore: true,
	    });
	    rstore = Ext.create(`store.${config.rstore.type}`, config.rstore);
	} else {
	    throw 'rstore is not an instance, and cannot autocreate without "type"';
	}

	Ext.apply(config, {
	    model: rstore.model,
	    proxy: { type: 'memory' },
	});

	me.callParent([config]);

	me.rstore = rstore;

	let first_load = true;

	let cond_add_item = function(data, id) {
	    let olditem = me.getById(id);
	    if (olditem) {
		olditem.beginEdit();
		Ext.Array.each(me.model.prototype.fields, function(field) {
		    if (olditem.data[field.name] !== data[field.name]) {
			olditem.set(field.name, data[field.name]);
		    }
		});
		olditem.endEdit(true);
		olditem.commit();
	    } else {
		let newrec = Ext.create(me.model, data);
		let pos = me.appendAtStart && !first_load ? 0 : me.data.length;
		me.insert(pos, newrec);
	    }
	};

	let loadFn = function(s, records, success) {
	    if (!success) {
		return;
	    }

	    me.suspendEvents();

	    // getSource returns null if data is not filtered
	    // if it is filtered it returns all records
	    let allItems = me.getData().getSource() || me.getData();

	    // remove vanished items
	    allItems.each(function(olditem) {
		let item = me.rstore.getById(olditem.getId());
		if (!item) {
		    me.remove(olditem);
		}
	    });

	    me.rstore.each(function(item) {
		cond_add_item(item.data, item.getId());
	    });

	    me.filter();

	    if (me.sortAfterUpdate) {
		me.sort();
	    }

	    first_load = false;

	    me.resumeEvents();
	    me.fireEvent('refresh', me);
	    me.fireEvent('datachanged', me);
	};

	if (me.rstore.isLoaded()) {
	    // if store is already loaded,
	    // insert items instantly
	    loadFn(me.rstore, [], true);
	}

	me.mon(me.rstore, 'load', loadFn);
    },
});
/* This store encapsulates data items which are organized as an Array of key-values Objects
 * ie data[0] contains something like {key: "keyboard", value: "da"}
*
* Designed to work with the KeyValue model and the JsonObject data reader
*/
Ext.define('Proxmox.data.ObjectStore', {
    extend: 'Proxmox.data.UpdateStore',

    getRecord: function() {
	let me = this;
	let record = Ext.create('Ext.data.Model');
	me.getData().each(function(item) {
	    record.set(item.data.key, item.data.value);
	});
	record.commit(true);
	return record;
    },

    constructor: function(config) {
	let me = this;

        config = config || {};

        Ext.applyIf(config, {
	    model: 'KeyValue',
            proxy: {
                type: 'proxmox',
		url: config.url,
		extraParams: config.extraParams,
                reader: {
		    type: 'jsonobject',
		    rows: config.rows,
		    readArray: config.readArray,
		    rootProperty: config.root || 'data',
		},
            },
        });

        me.callParent([config]);
    },
});
/* Extends the Proxmox.data.UpdateStore type
 *
 *
 */
Ext.define('Proxmox.data.RRDStore', {
    extend: 'Proxmox.data.UpdateStore',
    alias: 'store.proxmoxRRDStore',

    setRRDUrl: function(timeframe, cf) {
	let me = this;
	if (!timeframe) {
	    timeframe = me.timeframe;
	}

	if (!cf) {
	    cf = me.cf;
	}

	me.proxy.url = me.rrdurl + "?timeframe=" + timeframe + "&cf=" + cf;
    },

    proxy: {
	type: 'proxmox',
    },

    timeframe: 'hour',

    cf: 'AVERAGE',

    constructor: function(config) {
	let me = this;

	config = config || {};

	// set default interval to 30seconds
	if (!config.interval) {
	    config.interval = 30000;
	}

	// rrdurl is required
	if (!config.rrdurl) {
	    throw "no rrdurl specified";
	}

	let stateid = 'proxmoxRRDTypeSelection';
	let sp = Ext.state.Manager.getProvider();
	let stateinit = sp.get(stateid);

        if (stateinit) {
	    if (stateinit.timeframe !== me.timeframe || stateinit.cf !== me.rrdcffn) {
		me.timeframe = stateinit.timeframe;
		me.rrdcffn = stateinit.cf;
	    }
	}

	me.callParent([config]);

	me.setRRDUrl();
	me.mon(sp, 'statechange', function(prov, key, state) {
	    if (key === stateid) {
		if (state && state.id) {
		    if (state.timeframe !== me.timeframe || state.cf !== me.cf) {
		        me.timeframe = state.timeframe;
		        me.cf = state.cf;
			me.setRRDUrl();
			me.reload();
		    }
		}
	    }
	});
    },
});
Ext.define('Timezone', {
    extend: 'Ext.data.Model',
    fields: ['zone'],
});

Ext.define('Proxmox.data.TimezoneStore', {
    extend: 'Ext.data.Store',
    model: 'Timezone',
    data: [
	    ['Africa/Abidjan'],
	    ['Africa/Accra'],
	    ['Africa/Addis_Ababa'],
	    ['Africa/Algiers'],
	    ['Africa/Asmara'],
	    ['Africa/Bamako'],
	    ['Africa/Bangui'],
	    ['Africa/Banjul'],
	    ['Africa/Bissau'],
	    ['Africa/Blantyre'],
	    ['Africa/Brazzaville'],
	    ['Africa/Bujumbura'],
	    ['Africa/Cairo'],
	    ['Africa/Casablanca'],
	    ['Africa/Ceuta'],
	    ['Africa/Conakry'],
	    ['Africa/Dakar'],
	    ['Africa/Dar_es_Salaam'],
	    ['Africa/Djibouti'],
	    ['Africa/Douala'],
	    ['Africa/El_Aaiun'],
	    ['Africa/Freetown'],
	    ['Africa/Gaborone'],
	    ['Africa/Harare'],
	    ['Africa/Johannesburg'],
	    ['Africa/Kampala'],
	    ['Africa/Khartoum'],
	    ['Africa/Kigali'],
	    ['Africa/Kinshasa'],
	    ['Africa/Lagos'],
	    ['Africa/Libreville'],
	    ['Africa/Lome'],
	    ['Africa/Luanda'],
	    ['Africa/Lubumbashi'],
	    ['Africa/Lusaka'],
	    ['Africa/Malabo'],
	    ['Africa/Maputo'],
	    ['Africa/Maseru'],
	    ['Africa/Mbabane'],
	    ['Africa/Mogadishu'],
	    ['Africa/Monrovia'],
	    ['Africa/Nairobi'],
	    ['Africa/Ndjamena'],
	    ['Africa/Niamey'],
	    ['Africa/Nouakchott'],
	    ['Africa/Ouagadougou'],
	    ['Africa/Porto-Novo'],
	    ['Africa/Sao_Tome'],
	    ['Africa/Tripoli'],
	    ['Africa/Tunis'],
	    ['Africa/Windhoek'],
	    ['America/Adak'],
	    ['America/Anchorage'],
	    ['America/Anguilla'],
	    ['America/Antigua'],
	    ['America/Araguaina'],
	    ['America/Argentina/Buenos_Aires'],
	    ['America/Argentina/Catamarca'],
	    ['America/Argentina/Cordoba'],
	    ['America/Argentina/Jujuy'],
	    ['America/Argentina/La_Rioja'],
	    ['America/Argentina/Mendoza'],
	    ['America/Argentina/Rio_Gallegos'],
	    ['America/Argentina/Salta'],
	    ['America/Argentina/San_Juan'],
	    ['America/Argentina/San_Luis'],
	    ['America/Argentina/Tucuman'],
	    ['America/Argentina/Ushuaia'],
	    ['America/Aruba'],
	    ['America/Asuncion'],
	    ['America/Atikokan'],
	    ['America/Bahia'],
	    ['America/Bahia_Banderas'],
	    ['America/Barbados'],
	    ['America/Belem'],
	    ['America/Belize'],
	    ['America/Blanc-Sablon'],
	    ['America/Boa_Vista'],
	    ['America/Bogota'],
	    ['America/Boise'],
	    ['America/Cambridge_Bay'],
	    ['America/Campo_Grande'],
	    ['America/Cancun'],
	    ['America/Caracas'],
	    ['America/Cayenne'],
	    ['America/Cayman'],
	    ['America/Chicago'],
	    ['America/Chihuahua'],
	    ['America/Costa_Rica'],
	    ['America/Cuiaba'],
	    ['America/Curacao'],
	    ['America/Danmarkshavn'],
	    ['America/Dawson'],
	    ['America/Dawson_Creek'],
	    ['America/Denver'],
	    ['America/Detroit'],
	    ['America/Dominica'],
	    ['America/Edmonton'],
	    ['America/Eirunepe'],
	    ['America/El_Salvador'],
	    ['America/Fortaleza'],
	    ['America/Glace_Bay'],
	    ['America/Godthab'],
	    ['America/Goose_Bay'],
	    ['America/Grand_Turk'],
	    ['America/Grenada'],
	    ['America/Guadeloupe'],
	    ['America/Guatemala'],
	    ['America/Guayaquil'],
	    ['America/Guyana'],
	    ['America/Halifax'],
	    ['America/Havana'],
	    ['America/Hermosillo'],
	    ['America/Indiana/Indianapolis'],
	    ['America/Indiana/Knox'],
	    ['America/Indiana/Marengo'],
	    ['America/Indiana/Petersburg'],
	    ['America/Indiana/Tell_City'],
	    ['America/Indiana/Vevay'],
	    ['America/Indiana/Vincennes'],
	    ['America/Indiana/Winamac'],
	    ['America/Inuvik'],
	    ['America/Iqaluit'],
	    ['America/Jamaica'],
	    ['America/Juneau'],
	    ['America/Kentucky/Louisville'],
	    ['America/Kentucky/Monticello'],
	    ['America/La_Paz'],
	    ['America/Lima'],
	    ['America/Los_Angeles'],
	    ['America/Maceio'],
	    ['America/Managua'],
	    ['America/Manaus'],
	    ['America/Marigot'],
	    ['America/Martinique'],
	    ['America/Matamoros'],
	    ['America/Mazatlan'],
	    ['America/Menominee'],
	    ['America/Merida'],
	    ['America/Mexico_City'],
	    ['America/Miquelon'],
	    ['America/Moncton'],
	    ['America/Monterrey'],
	    ['America/Montevideo'],
	    ['America/Montreal'],
	    ['America/Montserrat'],
	    ['America/Nassau'],
	    ['America/New_York'],
	    ['America/Nipigon'],
	    ['America/Nome'],
	    ['America/Noronha'],
	    ['America/North_Dakota/Center'],
	    ['America/North_Dakota/New_Salem'],
	    ['America/Ojinaga'],
	    ['America/Panama'],
	    ['America/Pangnirtung'],
	    ['America/Paramaribo'],
	    ['America/Phoenix'],
	    ['America/Port-au-Prince'],
	    ['America/Port_of_Spain'],
	    ['America/Porto_Velho'],
	    ['America/Puerto_Rico'],
	    ['America/Rainy_River'],
	    ['America/Rankin_Inlet'],
	    ['America/Recife'],
	    ['America/Regina'],
	    ['America/Resolute'],
	    ['America/Rio_Branco'],
	    ['America/Santa_Isabel'],
	    ['America/Santarem'],
	    ['America/Santiago'],
	    ['America/Santo_Domingo'],
	    ['America/Sao_Paulo'],
	    ['America/Scoresbysund'],
	    ['America/Shiprock'],
	    ['America/St_Barthelemy'],
	    ['America/St_Johns'],
	    ['America/St_Kitts'],
	    ['America/St_Lucia'],
	    ['America/St_Thomas'],
	    ['America/St_Vincent'],
	    ['America/Swift_Current'],
	    ['America/Tegucigalpa'],
	    ['America/Thule'],
	    ['America/Thunder_Bay'],
	    ['America/Tijuana'],
	    ['America/Toronto'],
	    ['America/Tortola'],
	    ['America/Vancouver'],
	    ['America/Whitehorse'],
	    ['America/Winnipeg'],
	    ['America/Yakutat'],
	    ['America/Yellowknife'],
	    ['Antarctica/Casey'],
	    ['Antarctica/Davis'],
	    ['Antarctica/DumontDUrville'],
	    ['Antarctica/Macquarie'],
	    ['Antarctica/Mawson'],
	    ['Antarctica/McMurdo'],
	    ['Antarctica/Palmer'],
	    ['Antarctica/Rothera'],
	    ['Antarctica/South_Pole'],
	    ['Antarctica/Syowa'],
	    ['Antarctica/Vostok'],
	    ['Arctic/Longyearbyen'],
	    ['Asia/Aden'],
	    ['Asia/Almaty'],
	    ['Asia/Amman'],
	    ['Asia/Anadyr'],
	    ['Asia/Aqtau'],
	    ['Asia/Aqtobe'],
	    ['Asia/Ashgabat'],
	    ['Asia/Baghdad'],
	    ['Asia/Bahrain'],
	    ['Asia/Baku'],
	    ['Asia/Bangkok'],
	    ['Asia/Beirut'],
	    ['Asia/Bishkek'],
	    ['Asia/Brunei'],
	    ['Asia/Choibalsan'],
	    ['Asia/Chongqing'],
	    ['Asia/Colombo'],
	    ['Asia/Damascus'],
	    ['Asia/Dhaka'],
	    ['Asia/Dili'],
	    ['Asia/Dubai'],
	    ['Asia/Dushanbe'],
	    ['Asia/Gaza'],
	    ['Asia/Harbin'],
	    ['Asia/Ho_Chi_Minh'],
	    ['Asia/Hong_Kong'],
	    ['Asia/Hovd'],
	    ['Asia/Irkutsk'],
	    ['Asia/Jakarta'],
	    ['Asia/Jayapura'],
	    ['Asia/Jerusalem'],
	    ['Asia/Kabul'],
	    ['Asia/Kamchatka'],
	    ['Asia/Karachi'],
	    ['Asia/Kashgar'],
	    ['Asia/Kathmandu'],
	    ['Asia/Kolkata'],
	    ['Asia/Krasnoyarsk'],
	    ['Asia/Kuala_Lumpur'],
	    ['Asia/Kuching'],
	    ['Asia/Kuwait'],
	    ['Asia/Macau'],
	    ['Asia/Magadan'],
	    ['Asia/Makassar'],
	    ['Asia/Manila'],
	    ['Asia/Muscat'],
	    ['Asia/Nicosia'],
	    ['Asia/Novokuznetsk'],
	    ['Asia/Novosibirsk'],
	    ['Asia/Omsk'],
	    ['Asia/Oral'],
	    ['Asia/Phnom_Penh'],
	    ['Asia/Pontianak'],
	    ['Asia/Pyongyang'],
	    ['Asia/Qatar'],
	    ['Asia/Qyzylorda'],
	    ['Asia/Rangoon'],
	    ['Asia/Riyadh'],
	    ['Asia/Sakhalin'],
	    ['Asia/Samarkand'],
	    ['Asia/Seoul'],
	    ['Asia/Shanghai'],
	    ['Asia/Singapore'],
	    ['Asia/Taipei'],
	    ['Asia/Tashkent'],
	    ['Asia/Tbilisi'],
	    ['Asia/Tehran'],
	    ['Asia/Thimphu'],
	    ['Asia/Tokyo'],
	    ['Asia/Ulaanbaatar'],
	    ['Asia/Urumqi'],
	    ['Asia/Vientiane'],
	    ['Asia/Vladivostok'],
	    ['Asia/Yakutsk'],
	    ['Asia/Yekaterinburg'],
	    ['Asia/Yerevan'],
	    ['Atlantic/Azores'],
	    ['Atlantic/Bermuda'],
	    ['Atlantic/Canary'],
	    ['Atlantic/Cape_Verde'],
	    ['Atlantic/Faroe'],
	    ['Atlantic/Madeira'],
	    ['Atlantic/Reykjavik'],
	    ['Atlantic/South_Georgia'],
	    ['Atlantic/St_Helena'],
	    ['Atlantic/Stanley'],
	    ['Australia/Adelaide'],
	    ['Australia/Brisbane'],
	    ['Australia/Broken_Hill'],
	    ['Australia/Currie'],
	    ['Australia/Darwin'],
	    ['Australia/Eucla'],
	    ['Australia/Hobart'],
	    ['Australia/Lindeman'],
	    ['Australia/Lord_Howe'],
	    ['Australia/Melbourne'],
	    ['Australia/Perth'],
	    ['Australia/Sydney'],
	    ['Europe/Amsterdam'],
	    ['Europe/Andorra'],
	    ['Europe/Athens'],
	    ['Europe/Belgrade'],
	    ['Europe/Berlin'],
	    ['Europe/Bratislava'],
	    ['Europe/Brussels'],
	    ['Europe/Bucharest'],
	    ['Europe/Budapest'],
	    ['Europe/Chisinau'],
	    ['Europe/Copenhagen'],
	    ['Europe/Dublin'],
	    ['Europe/Gibraltar'],
	    ['Europe/Guernsey'],
	    ['Europe/Helsinki'],
	    ['Europe/Isle_of_Man'],
	    ['Europe/Istanbul'],
	    ['Europe/Jersey'],
	    ['Europe/Kaliningrad'],
	    ['Europe/Kiev'],
	    ['Europe/Lisbon'],
	    ['Europe/Ljubljana'],
	    ['Europe/London'],
	    ['Europe/Luxembourg'],
	    ['Europe/Madrid'],
	    ['Europe/Malta'],
	    ['Europe/Mariehamn'],
	    ['Europe/Minsk'],
	    ['Europe/Monaco'],
	    ['Europe/Moscow'],
	    ['Europe/Oslo'],
	    ['Europe/Paris'],
	    ['Europe/Podgorica'],
	    ['Europe/Prague'],
	    ['Europe/Riga'],
	    ['Europe/Rome'],
	    ['Europe/Samara'],
	    ['Europe/San_Marino'],
	    ['Europe/Sarajevo'],
	    ['Europe/Simferopol'],
	    ['Europe/Skopje'],
	    ['Europe/Sofia'],
	    ['Europe/Stockholm'],
	    ['Europe/Tallinn'],
	    ['Europe/Tirane'],
	    ['Europe/Uzhgorod'],
	    ['Europe/Vaduz'],
	    ['Europe/Vatican'],
	    ['Europe/Vienna'],
	    ['Europe/Vilnius'],
	    ['Europe/Volgograd'],
	    ['Europe/Warsaw'],
	    ['Europe/Zagreb'],
	    ['Europe/Zaporozhye'],
	    ['Europe/Zurich'],
	    ['Indian/Antananarivo'],
	    ['Indian/Chagos'],
	    ['Indian/Christmas'],
	    ['Indian/Cocos'],
	    ['Indian/Comoro'],
	    ['Indian/Kerguelen'],
	    ['Indian/Mahe'],
	    ['Indian/Maldives'],
	    ['Indian/Mauritius'],
	    ['Indian/Mayotte'],
	    ['Indian/Reunion'],
	    ['Pacific/Apia'],
	    ['Pacific/Auckland'],
	    ['Pacific/Chatham'],
	    ['Pacific/Chuuk'],
	    ['Pacific/Easter'],
	    ['Pacific/Efate'],
	    ['Pacific/Enderbury'],
	    ['Pacific/Fakaofo'],
	    ['Pacific/Fiji'],
	    ['Pacific/Funafuti'],
	    ['Pacific/Galapagos'],
	    ['Pacific/Gambier'],
	    ['Pacific/Guadalcanal'],
	    ['Pacific/Guam'],
	    ['Pacific/Honolulu'],
	    ['Pacific/Johnston'],
	    ['Pacific/Kiritimati'],
	    ['Pacific/Kosrae'],
	    ['Pacific/Kwajalein'],
	    ['Pacific/Majuro'],
	    ['Pacific/Marquesas'],
	    ['Pacific/Midway'],
	    ['Pacific/Nauru'],
	    ['Pacific/Niue'],
	    ['Pacific/Norfolk'],
	    ['Pacific/Noumea'],
	    ['Pacific/Pago_Pago'],
	    ['Pacific/Palau'],
	    ['Pacific/Pitcairn'],
	    ['Pacific/Pohnpei'],
	    ['Pacific/Port_Moresby'],
	    ['Pacific/Rarotonga'],
	    ['Pacific/Saipan'],
	    ['Pacific/Tahiti'],
	    ['Pacific/Tarawa'],
	    ['Pacific/Tongatapu'],
	    ['Pacific/Wake'],
	    ['Pacific/Wallis'],
	    ['UTC'],
	],
});
Ext.define('proxmox-notification-endpoints', {
    extend: 'Ext.data.Model',
    fields: ['name', 'type', 'comment', 'disable', 'origin'],
    proxy: {
        type: 'proxmox',
    },
    idProperty: 'name',
});

Ext.define('proxmox-notification-matchers', {
    extend: 'Ext.data.Model',
    fields: ['name', 'comment', 'disable', 'origin'],
    proxy: {
        type: 'proxmox',
    },
    idProperty: 'name',
});

Ext.define('proxmox-notification-fields', {
    extend: 'Ext.data.Model',
    fields: ['name', 'description'],
    idProperty: 'name',
});

Ext.define('proxmox-notification-field-values', {
    extend: 'Ext.data.Model',
    fields: ['value', 'comment', 'field'],
    idProperty: 'value',
});
Ext.define('pmx-domains', {
    extend: "Ext.data.Model",
    fields: [
	'realm', 'type', 'comment', 'default',
	{
	    name: 'tfa',
	    allowNull: true,
	},
	{
	    name: 'descr',
	    convert: function(value, { data={} }) {
		if (value) return Ext.String.htmlEncode(value);

		let text = data.comment || data.realm;

		if (data.tfa) {
		    text += ` (+ ${data.tfa})`;
		}

		return Ext.String.htmlEncode(text);
	    },
	},
    ],
    idProperty: 'realm',
    proxy: {
	type: 'proxmox',
	url: "/api2/json/access/domains",
    },
});
Ext.define('proxmox-certificate', {
    extend: 'Ext.data.Model',

    fields: ['filename', 'fingerprint', 'issuer', 'notafter', 'notbefore', 'subject', 'san', 'public-key-bits', 'public-key-type'],
    idProperty: 'filename',
});
Ext.define('proxmox-acme-accounts', {
    extend: 'Ext.data.Model',
    fields: ['name'],
    proxy: {
	type: 'proxmox',
    },
    idProperty: 'name',
});

Ext.define('proxmox-acme-challenges', {
    extend: 'Ext.data.Model',
    fields: ['id', 'type', 'schema'],
    proxy: {
	type: 'proxmox',
    },
    idProperty: 'id',
});


Ext.define('proxmox-acme-plugins', {
    extend: 'Ext.data.Model',
    fields: ['type', 'plugin', 'api'],
    proxy: {
	type: 'proxmox',
    },
    idProperty: 'plugin',
});
Ext.define('Proxmox.form.SizeField', {
    extend: 'Ext.form.FieldContainer',
    alias: 'widget.pmxSizeField',

    mixins: ['Proxmox.Mixin.CBind'],

    viewModel: {
	data: {
	    unit: 'MiB',
	    unitPostfix: '',
	},
	formulas: {
	    unitlabel: (get) => get('unit') + get('unitPostfix'),
	},
    },

    emptyText: '',

    layout: 'hbox',
    defaults: {
	hideLabel: true,
    },

    // display unit (TODO: make (optionally) selectable)
    unit: 'MiB',
    unitPostfix: '',

    // use this if the backend saves values in another unit than bytes, e.g.,
    // for KiB set it to 'KiB'
    backendUnit: undefined,

    // submit a canonical size unit, e.g., 20.5 MiB
    submitAutoScaledSizeUnit: false,

    // allow setting 0 and using it as a submit value
    allowZero: false,

    emptyValue: null,

    items: [
	{
	    xtype: 'numberfield',
	    cbind: {
		name: '{name}',
		emptyText: '{emptyText}',
		allowZero: '{allowZero}',
		emptyValue: '{emptyValue}',
	    },
	    minValue: 0,
	    step: 1,
	    submitLocaleSeparator: false,
	    fieldStyle: 'text-align: right',
	    flex: 1,
	    enableKeyEvents: true,
	    setValue: function(v) {
		if (!this._transformed) {
		    let fieldContainer = this.up('fieldcontainer');
		    let vm = fieldContainer.getViewModel();
		    let unit = vm.get('unit');

		    if (typeof v === "string") {
			v = Proxmox.Utils.size_unit_to_bytes(v);
		    }
		    v /= Proxmox.Utils.SizeUnits[unit];
		    v *= fieldContainer.backendFactor;

		    this._transformed = true;
		}

		if (Number(v) === 0 && !this.allowZero) {
		    v = undefined;
		}

		return Ext.form.field.Text.prototype.setValue.call(this, v);
	    },
	    getSubmitValue: function() {
		let v = this.processRawValue(this.getRawValue());
		v = v.replace(this.decimalSeparator, '.');

		if (v === undefined || v === '') {
		    return this.emptyValue;
		}

		if (Number(v) === 0) {
		    return this.allowZero ? 0 : null;
		}

		let fieldContainer = this.up('fieldcontainer');
		let vm = fieldContainer.getViewModel();
		let unit = vm.get('unit');

		v = parseFloat(v) * Proxmox.Utils.SizeUnits[unit];

		if (fieldContainer.submitAutoScaledSizeUnit) {
		    return Proxmox.Utils.format_size(v, !unit.endsWith('iB'));
		} else {
		    return String(Math.floor(v / fieldContainer.backendFactor));
		}
	    },
	    listeners: {
		// our setValue gets only called if we have a value, avoid
		// transformation of the first user-entered value
		keydown: function() { this._transformed = true; },
	    },
	},
	{
	    xtype: 'displayfield',
	    name: 'unit',
	    submitValue: false,
	    padding: '0 0 0 10',
	    bind: {
		value: '{unitlabel}',
	    },
	    listeners: {
		change: (f, v) => {
		    f.originalValue = v;
		},
	    },
	    width: 40,
	},
    ],

    initComponent: function() {
	let me = this;

	me.unit = me.unit || 'MiB';
	if (!(me.unit in Proxmox.Utils.SizeUnits)) {
	    throw "unknown unit: " + me.unit;
	}

	me.backendFactor = 1;
	if (me.backendUnit !== undefined) {
	    if (!(me.unit in Proxmox.Utils.SizeUnits)) {
		throw "unknown backend unit: " + me.backendUnit;
	    }
	    me.backendFactor = Proxmox.Utils.SizeUnits[me.backendUnit];
	}

	me.callParent(arguments);

	me.getViewModel().set('unit', me.unit);
	me.getViewModel().set('unitPostfix', me.unitPostfix);
    },
});

Ext.define('Proxmox.form.BandwidthField', {
    extend: 'Proxmox.form.SizeField',
    alias: 'widget.pmxBandwidthField',

    unitPostfix: '/s',
});
Ext.define('Proxmox.form.field.DisplayEdit', {
    extend: 'Ext.form.FieldContainer',
    alias: 'widget.pmxDisplayEditField',

    viewModel: {
	parent: null,
	data: {
	    editable: false,
	    value: undefined,
	},
    },

    displayType: 'displayfield',

    editConfig: {},
    editable: false,
    setEditable: function(editable) {
	let me = this;
	let vm = me.getViewModel();

	me.editable = editable;
	vm.set('editable', editable);
    },
    getEditable: function() {
	let me = this;
	let vm = me.getViewModel();
	return vm.get('editable');
    },

    setValue: function(value) {
	let me = this;
	let vm = me.getViewModel();

	me.value = value;
	vm.set('value', value);
    },
    getValue: function() {
	let me = this;
	let vm = me.getViewModel();
	// FIXME: add return, but check all use-sites for regressions then
	vm.get('value');
    },

    setEmptyText: function(emptyText) {
	let me = this;
	me.editField.setEmptyText(emptyText);
    },
    getEmptyText: function() {
	let me = this;
	return me.editField.getEmptyText();
    },

    layout: 'fit',
    defaults: {
	hideLabel: true,
    },

    initComponent: function() {
	let me = this;

	let displayConfig = {
	    xtype: me.displayType,
	    bind: {},
	};
	Ext.applyIf(displayConfig, me.initialConfig);
	delete displayConfig.editConfig;
	delete displayConfig.editable;

	let editConfig = Ext.apply({}, me.editConfig);
	Ext.applyIf(editConfig, {
	    xtype: 'textfield',
	    bind: {},
	});
	Ext.applyIf(editConfig, displayConfig);

	if (me.initialConfig && me.initialConfig.displayConfig) {
	    Ext.applyIf(displayConfig, me.initialConfig.displayConfig);
	    delete displayConfig.displayConfig;
	}

	Ext.applyIf(displayConfig, {
	    renderer: v => Ext.htmlEncode(v),
	});

	Ext.applyIf(displayConfig.bind, {
	    hidden: '{editable}',
	    disabled: '{editable}',
	    value: '{value}',
	});
	Ext.applyIf(editConfig.bind, {
	    hidden: '{!editable}',
	    disabled: '{!editable}',
	    value: '{value}',
	});

	// avoid glitch, start off correct even before viewmodel fixes it
	editConfig.disabled = editConfig.hidden = !me.editable;
	displayConfig.disabled = displayConfig.hidden = !!me.editable;

	editConfig.name = displayConfig.name = me.name;

	Ext.apply(me, {
	    items: [
		editConfig,
		displayConfig,
	    ],
	});

	me.callParent();

	// save a reference to make it easier when one needs to operate on the underlying fields,
	// like when creating a passthrough getter/setter to allow easy data-binding.
	me.editField = me.down(editConfig.xtype);
	me.displayField = me.down(displayConfig.xtype);

	me.getViewModel().set('editable', me.editable);
    },

});
// treats 0 as "never expires"
Ext.define('Proxmox.form.field.ExpireDate', {
    extend: 'Ext.form.field.Date',
    alias: ['widget.pmxExpireDate'],

    name: 'expire',
    fieldLabel: gettext('Expire'),
    emptyText: 'never',
    format: 'Y-m-d',
    submitFormat: 'U',

    getSubmitValue: function() {
	let me = this;

	let value = me.callParent();
	if (!value) value = 0;

	return value;
    },

    setValue: function(value) {
	let me = this;

	if (Ext.isDefined(value)) {
	    if (!value) {
		value = null;
	    } else if (!Ext.isDate(value)) {
		value = new Date(value * 1000);
	    }
	}
	me.callParent([value]);
    },

});
Ext.define('Proxmox.form.field.Integer', {
    extend: 'Ext.form.field.Number',
    alias: 'widget.proxmoxintegerfield',

    config: {
	deleteEmpty: false,
    },

    allowDecimals: false,
    allowExponential: false,
    step: 1,

   getSubmitData: function() {
	let me = this;
	let data = null;
	if (!me.disabled && me.submitValue && !me.isFileUpload()) {
	    let val = me.getSubmitValue();
	    if (val !== undefined && val !== null && val !== '') {
		data = {};
		data[me.getName()] = val;
	    } else if (me.getDeleteEmpty()) {
		data = {};
		data.delete = me.getName();
	    }
	}
	return data;
    },

});
Ext.define('Proxmox.form.field.Textfield', {
    extend: 'Ext.form.field.Text',
    alias: ['widget.proxmoxtextfield'],

    config: {
	skipEmptyText: true,

	deleteEmpty: false,

	trimValue: false,
    },

    getSubmitData: function() {
        let me = this,
            data = null,
            val;
        if (!me.disabled && me.submitValue && !me.isFileUpload()) {
            val = me.getSubmitValue();
            if (val !== null) {
                data = {};
                data[me.getName()] = val;
            } else if (me.getDeleteEmpty()) {
		data = {};
                data.delete = me.getName();
	    }
        }
        return data;
    },

    getSubmitValue: function() {
	let me = this;

        let value = this.processRawValue(this.getRawValue());
	if (me.getTrimValue() && typeof value === 'string') {
	    value = value.trim();
	}
	if (value !== '') {
	    return value;
	}

	return me.getSkipEmptyText() ? null: value;
    },

    setAllowBlank: function(allowBlank) {
	this.allowBlank = allowBlank;
	this.validate();
    },
});
Ext.define('Proxmox.form.field.Base64TextArea', {
    extend: 'Ext.form.field.TextArea',
    alias: ['widget.proxmoxBase64TextArea'],

    config: {
        skipEmptyText: false,
        deleteEmpty: false,
        trimValue: false,
        editable: true,
        width: 600,
        height: 400,
        scrollable: 'y',
        emptyText: gettext('You can use Markdown for rich text formatting.'),
    },

    setValue: function(value) {
        // We want to edit the decoded version of the text
        this.callParent([Proxmox.Utils.base64ToUtf8(value)]);
    },

    processRawValue: function(value) {
        // The field could contain multi-line values
        return Proxmox.Utils.utf8ToBase64(value);
    },

    getSubmitData: function() {
        let me = this,
            data = null,
            val;
        if (!me.disabled && me.submitValue && !me.isFileUpload()) {
            val = me.getSubmitValue();
            if (val !== null) {
                data = {};
                data[me.getName()] = val;
            } else if (me.getDeleteEmpty()) {
                data = {};
                data.delete = me.getName();
            }
        }
        return data;
    },

    getSubmitValue: function() {
        let me = this;

        let value = this.processRawValue(this.getRawValue());
        if (me.getTrimValue() && typeof value === 'string') {
            value = value.trim();
        }
        if (value !== '') {
            return value;
        }

        return me.getSkipEmptyText() ? null: value;
    },

    setAllowBlank: function(allowBlank) {
        this.allowBlank = allowBlank;
        this.validate();
    },
});
Ext.define('Proxmox.form.field.VlanField', {
    extend: 'Ext.form.field.Number',
    alias: ['widget.proxmoxvlanfield'],

    deleteEmpty: false,

    emptyText: gettext('no VLAN'),

    fieldLabel: gettext('VLAN Tag'),

    allowBlank: true,

    getSubmitData: function() {
	var me = this,
	    data = null,
	    val;
	if (!me.disabled && me.submitValue) {
	    val = me.getSubmitValue();
	    if (val) {
		data = {};
		data[me.getName()] = val;
	    } else if (me.deleteEmpty) {
		data = {};
		data.delete = me.getName();
	    }
	}
	return data;
    },

    initComponent: function() {
	var me = this;

	Ext.apply(me, {
	    minValue: 1,
	    maxValue: 4094,
	});

	me.callParent();
    },
});
Ext.define('Proxmox.DateTimeField', {
    extend: 'Ext.form.FieldContainer',
    // FIXME: remove once all use sites upgraded (with versioned depends on new WTK!)
    alias: ['widget.promxoxDateTimeField'],
    xtype: 'proxmoxDateTimeField',

    layout: 'hbox',

    viewModel: {
	data: {
	    datetime: null,
	    minDatetime: null,
	    maxDatetime: null,
	},

	formulas: {
	    date: {
		get: function(get) {
		    return get('datetime');
		},
		set: function(date) {
		    if (!date) {
			this.set('datetime', null);
			return;
		    }
		    let datetime = new Date(this.get('datetime'));
		    datetime.setFullYear(date.getFullYear(), date.getMonth(), date.getDate());
		    this.set('datetime', datetime);
		},
	    },

	    time: {
		get: function(get) {
		    return get('datetime');
		},
		set: function(time) {
		    if (!time) {
			this.set('datetime', null);
			return;
		    }
		    let datetime = new Date(this.get('datetime'));
		    datetime.setHours(time.getHours());
		    datetime.setMinutes(time.getMinutes());
		    datetime.setSeconds(time.getSeconds());
		    datetime.setMilliseconds(time.getMilliseconds());
		    this.set('datetime', datetime);
		},
	    },

	    minDate: {
		get: function(get) {
		    let datetime = get('minDatetime');
		    return datetime ? new Date(datetime) : null;
		},
	    },

	    maxDate: {
		get: function(get) {
		    let datetime = get('maxDatetime');
		    return datetime ? new Date(datetime) : null;
		},
	    },

	    minTime: {
		get: function(get) {
		    let current = get('datetime');
		    let min = get('minDatetime');
		    if (min && current && !this.isSameDay(current, min)) {
			return new Date(min).setHours('00', '00', '00', '000');
		    }
		    return min;
		},
	    },

	    maxTime: {
		get: function(get) {
		    let current = get('datetime');
		    let max = get('maxDatetime');
		    if (max && current && !this.isSameDay(current, max)) {
			return new Date(max).setHours('23', '59', '59', '999');
		    }
		    return max;
		},
	    },
	},

	// Helper function to check if dates are the same day of the year
	isSameDay: function(date1, date2) {
	    return date1.getDate() === date2.getDate() &&
		date1.getMonth() === date2.getMonth() &&
		date1.getFullYear() === date2.getFullYear();
	},
    },

    config: {
	value: null,
	submitFormat: 'U',
	disabled: false,
    },

    setValue: function(value) {
	this.getViewModel().set('datetime', value);
    },

    getValue: function() {
	return this.getViewModel().get('datetime');
    },

    getSubmitValue: function() {
	let me = this;
	let value = me.getValue();
	return value ? Ext.Date.format(value, me.submitFormat) : null;
    },

    setMinValue: function(value) {
	this.getViewModel().set('minDatetime', value);
    },

    getMinValue: function() {
	return this.getViewModel().get('minDatetime');
    },

    setMaxValue: function(value) {
	this.getViewModel().set('maxDatetime', value);
    },

    getMaxValue: function() {
	return this.getViewModel().get('maxDatetime');
    },

    initComponent: function() {
	let me = this;
	me.callParent();

	let vm = me.getViewModel();
	vm.set('datetime', me.config.value);
	// Propagate state change to binding
	vm.bind('{datetime}', function(value) {
	    me.publishState('value', value);
	    me.fireEvent('change', value);
	});
    },

    items: [
	{
	    xtype: 'datefield',
	    editable: false,
	    flex: 1,
	    format: 'Y-m-d',
	    bind: {
		value: '{date}',
		minValue: '{minDate}',
		maxValue: '{maxDate}',
	    },
	},
	{
	    xtype: 'timefield',
	    format: 'H:i',
	    width: 80,
	    value: '00:00',
	    increment: 60,
	    bind: {
		value: '{time}',
		minValue: '{minTime}',
		maxValue: '{maxTime}',
	    },
	},
    ],
});
Ext.define('Proxmox.form.Checkbox', {
    extend: 'Ext.form.field.Checkbox',
    alias: ['widget.proxmoxcheckbox'],

    config: {
	defaultValue: undefined,
	deleteDefaultValue: false,
	deleteEmpty: false,
	clearOnDisable: false,
    },

    inputValue: '1',

    getSubmitData: function() {
        let me = this,
            data = null,
            val;
        if (!me.disabled && me.submitValue) {
            val = me.getSubmitValue();
            if (val !== null) {
                data = {};
		if (val === me.getDefaultValue() && me.getDeleteDefaultValue()) {
		    data.delete = me.getName();
		} else {
                    data[me.getName()] = val;
		}
            } else if (me.getDeleteEmpty()) {
               data = {};
               data.delete = me.getName();
	    }
        }
        return data;
    },

    setDisabled: function(disabled) {
	let me = this;

	// only clear on actual transition
	let toClearValue = me.clearOnDisable && !me.disabled && disabled;

	me.callParent(arguments);

	if (toClearValue) {
	    me.setValue(false); // TODO: could support other "reset value" or use originalValue?
	}
    },

    // also accept integer 1 as true
    setRawValue: function(value) {
	let me = this;

	if (value === 1) {
            me.callParent([true]);
	} else {
            me.callParent([value]);
	}
    },

});
/* Key-Value ComboBox
 *
 * config properties:
 * comboItems: an array of Key - Value pairs
 * deleteEmpty: if set to true (default), an empty value received from the
 * comboBox will reset the property to its default value
 */
Ext.define('Proxmox.form.KVComboBox', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.proxmoxKVComboBox',

    config: {
	deleteEmpty: true,
    },

    comboItems: undefined,
    displayField: 'value',
    valueField: 'key',
    queryMode: 'local',

    // override framework function to implement deleteEmpty behaviour
    getSubmitData: function() {
        let me = this,
            data = null,
            val;
        if (!me.disabled && me.submitValue) {
            val = me.getSubmitValue();
            if (val !== null && val !== '' && val !== '__default__') {
                data = {};
                data[me.getName()] = val;
            } else if (me.getDeleteEmpty()) {
                data = {};
                data.delete = me.getName();
            }
        }
        return data;
    },

    validator: function(val) {
	let me = this;

	if (me.editable || val === null || val === '') {
	    return true;
	}

	if (me.store.getCount() > 0) {
	    let values = me.multiSelect ? val.split(me.delimiter) : [val];
	    let items = me.store.getData().collect('value', 'data');
	    if (Ext.Array.every(values, function(value) {
		return Ext.Array.contains(items, value);
	    })) {
		return true;
	    }
	}

	// returns a boolean or string
	return "value '" + val + "' not allowed!";
    },

    initComponent: function() {
	let me = this;

	me.store = Ext.create('Ext.data.ArrayStore', {
	    model: 'KeyValue',
	    data: me.comboItems,
	});

	if (me.initialConfig.editable === undefined) {
	    me.editable = false;
	}

	me.callParent();
    },

    setComboItems: function(items) {
	let me = this;

	me.getStore().setData(items);
    },

});
Ext.define('Proxmox.form.LanguageSelector', {
    extend: 'Proxmox.form.KVComboBox',
    xtype: 'proxmoxLanguageSelector',

    comboItems: Proxmox.Utils.language_array(),

    matchFieldWidth: false,
    listConfig: {
	width: 300,
    },
});
/*
 * ComboGrid component: a ComboBox where the dropdown menu (the
 * "Picker") is a Grid with Rows and Columns expects a listConfig
 * object with a columns property roughly based on the GridPicker from
 * https://www.sencha.com/forum/showthread.php?299909
 *
*/

Ext.define('Proxmox.form.ComboGrid', {
    extend: 'Ext.form.field.ComboBox',
    alias: ['widget.proxmoxComboGrid'],

    // this value is used as default value after load()
    preferredValue: undefined,

    // hack: allow to select empty value
    // seems extjs does not allow that when 'editable == false'
    onKeyUp: function(e, t) {
        let me = this;
        let key = e.getKey();

        if (!me.editable && me.allowBlank && !me.multiSelect &&
	    (key === e.BACKSPACE || key === e.DELETE)) {
	    me.setValue('');
	}

        me.callParent(arguments);
    },

    config: {
	skipEmptyText: false,
	notFoundIsValid: false,
	deleteEmpty: false,
	errorHeight: 100,
	// NOTE: the trigger will always be shown if allowBlank is true, setting showClearTrigger
	// to false cannot change that
	showClearTrigger: false,
    },

    // needed to trigger onKeyUp etc.
    enableKeyEvents: true,

    editable: false,

    triggers: {
	clear: {
	    cls: 'pmx-clear-trigger',
	    weight: -1,
	    hidden: true,
	    handler: function() {
		let me = this;
		me.setValue('');
	    },
	},
    },

    setValue: function(value) {
	let me = this;
	let empty = Ext.isArray(value) ? !value.length : !value;
	me.triggers.clear.setVisible(!empty && (me.allowBlank || me.showClearTrigger));
	return me.callParent([value]);
    },

    // override ExtJS method
    // if the field has multiSelect enabled, the store is not loaded, and
    // the displayfield == valuefield, it saves the rawvalue as an array
    // but the getRawValue method is only defined in the textfield class
    // (which has not to deal with arrays) an returns the string in the
    // field (not an array)
    //
    // so if we have multiselect enabled, return the rawValue (which
    // should be an array) and else we do callParent so
    // it should not impact any other use of the class
    getRawValue: function() {
	let me = this;
	if (me.multiSelect) {
	    return me.rawValue;
	} else {
	    return me.callParent();
	}
    },

    getSubmitData: function() {
	let me = this;

	let data = null;
	if (!me.disabled && me.submitValue) {
	    let val = me.getSubmitValue();
	    if (val !== null) {
		data = {};
		data[me.getName()] = val;
	    } else if (me.getDeleteEmpty()) {
		data = {};
		data.delete = me.getName();
	    }
	}
	return data;
   },

    getSubmitValue: function() {
	let me = this;

	let value = me.callParent();
	if (value !== '') {
	    return value;
	}

	return me.getSkipEmptyText() ? null: value;
    },

    setAllowBlank: function(allowBlank) {
	this.allowBlank = allowBlank;
	this.validate();
    },

// override ExtJS protected method
    onBindStore: function(store, initial) {
	let me = this,
	    picker = me.picker,
	    extraKeySpec,
	    valueCollectionConfig;

	// We're being bound, not unbound...
	if (store) {
	    // If store was created from a 2 dimensional array with generated field names 'field1' and 'field2'
	    if (store.autoCreated) {
		me.queryMode = 'local';
		me.valueField = me.displayField = 'field1';
		if (!store.expanded) {
		    me.displayField = 'field2';
		}

		// displayTpl config will need regenerating with the autogenerated displayField name 'field1'
		me.setDisplayTpl(null);
	    }
	    if (!Ext.isDefined(me.valueField)) {
		me.valueField = me.displayField;
	    }

	    // Add a byValue index to the store so that we can efficiently look up records by the value field
	    // when setValue passes string value(s).
	    // The two indices (Ext.util.CollectionKeys) are configured unique: false, so that if duplicate keys
	    // are found, they are all returned by the get call.
	    // This is so that findByText and findByValue are able to return the *FIRST* matching value. By default,
	    // if unique is true, CollectionKey keeps the *last* matching value.
	    extraKeySpec = {
		byValue: {
		    rootProperty: 'data',
		    unique: false,
		},
	    };
	    extraKeySpec.byValue.property = me.valueField;
	    store.setExtraKeys(extraKeySpec);

	    if (me.displayField === me.valueField) {
		store.byText = store.byValue;
	    } else {
		extraKeySpec.byText = {
		    rootProperty: 'data',
		    unique: false,
		};
		extraKeySpec.byText.property = me.displayField;
		store.setExtraKeys(extraKeySpec);
	    }

	    // We hold a collection of the values which have been selected, keyed by this field's valueField.
	    // This collection also functions as the selected items collection for the BoundList's selection model
	    valueCollectionConfig = {
		rootProperty: 'data',
		extraKeys: {
		    byInternalId: {
			property: 'internalId',
		    },
		    byValue: {
			property: me.valueField,
			rootProperty: 'data',
		    },
		},
		// Whenever this collection is changed by anyone, whether by this field adding to it,
		// or the BoundList operating, we must refresh our value.
		listeners: {
		    beginupdate: me.onValueCollectionBeginUpdate,
		    endupdate: me.onValueCollectionEndUpdate,
		    scope: me,
		},
	    };

	    // This becomes our collection of selected records for the Field.
	    me.valueCollection = new Ext.util.Collection(valueCollectionConfig);

	    // We use the selected Collection as our value collection and the basis
	    // for rendering the tag list.

	    //proxmox override: since the picker is represented by a grid panel,
	    // we changed here the selection to RowModel
	    me.pickerSelectionModel = new Ext.selection.RowModel({
		mode: me.multiSelect ? 'SIMPLE' : 'SINGLE',
		// There are situations when a row is selected on mousedown but then the mouse is
		// dragged to another row and released.  In these situations, the event target for
		// the click event won't be the row where the mouse was released but the boundview.
		// The view will then determine that it should fire a container click, and the
		// DataViewModel will then deselect all prior selections. Setting
		// `deselectOnContainerClick` here will prevent the model from deselecting.
		deselectOnContainerClick: false,
		enableInitialSelection: false,
		pruneRemoved: false,
		selected: me.valueCollection,
		store: store,
		listeners: {
		    scope: me,
		    lastselectedchanged: me.updateBindSelection,
		},
	    });

	    if (!initial) {
		me.resetToDefault();
	    }

	    if (picker) {
		picker.setSelectionModel(me.pickerSelectionModel);
		if (picker.getStore() !== store) {
		    picker.bindStore(store);
		}
	    }
	}
    },

    // copied from ComboBox
    createPicker: function() {
        let me = this;
        let picker;

        let pickerCfg = Ext.apply({
                // proxmox overrides: display a grid for selection
                xtype: 'gridpanel',
                id: me.pickerId,
                pickerField: me,
                floating: true,
                hidden: true,
                store: me.store,
                displayField: me.displayField,
                preserveScrollOnRefresh: true,
                pageSize: me.pageSize,
                tpl: me.tpl,
                selModel: me.pickerSelectionModel,
                focusOnToFront: false,
            }, me.listConfig, me.defaultListConfig);

        picker = me.picker || Ext.widget(pickerCfg);

        if (picker.getStore() !== me.store) {
            picker.bindStore(me.store);
        }

        if (me.pageSize) {
            picker.pagingToolbar.on('beforechange', me.onPageChange, me);
        }

        // proxmox overrides: pass missing method in gridPanel to its view
        picker.refresh = function() {
            picker.getSelectionModel().select(me.valueCollection.getRange());
            picker.getView().refresh();
        };
        picker.getNodeByRecord = function() {
            picker.getView().getNodeByRecord(arguments);
        };

        // We limit the height of the picker to fit in the space above
        // or below this field unless the picker has its own ideas about that.
        if (!picker.initialConfig.maxHeight) {
            picker.on({
                beforeshow: me.onBeforePickerShow,
                scope: me,
            });
        }
        picker.getSelectionModel().on({
            beforeselect: me.onBeforeSelect,
            beforedeselect: me.onBeforeDeselect,
            focuschange: me.onFocusChange,
            selectionChange: function(sm, selectedRecords) {
                if (selectedRecords.length) {
                    this.setValue(selectedRecords);
                    this.fireEvent('select', me, selectedRecords);
                }
            },
            scope: me,
        });

	// hack for extjs6
	// when the clicked item is the same as the previously selected,
	// it does not select the item
	// instead we hide the picker
	if (!me.multiSelect) {
	    picker.on('itemclick', function(sm, record) {
		if (picker.getSelection()[0] === record) {
		    me.collapse();
		}
	    });
	}

	// when our store is not yet loaded, we increase
	// the height of the gridpanel, so that we can see
	// the loading mask
	//
	// we save the minheight to reset it after the load
	picker.on('show', function() {
	    me.store.fireEvent('refresh');
	    if (me.enableLoadMask) {
		me.savedMinHeight = me.savedMinHeight ?? picker.getMinHeight();
		picker.setMinHeight(me.errorHeight);
	    }
	    if (me.loadError) {
		Proxmox.Utils.setErrorMask(picker.getView(), me.loadError);
		delete me.loadError;
		picker.updateLayout();
	    }
	});

        picker.getNavigationModel().navigateOnSpace = false;

        return picker;
    },

    clearLocalFilter: function() {
        let me = this;

	if (me.queryFilter) {
	    me.changingFilters = true; // FIXME: unused?
	    me.store.removeFilter(me.queryFilter, true);
	    me.queryFilter = null;
	    me.changingFilters = false;
	}
    },

    isValueInStore: function(value) {
	let me = this;
	let store = me.store;
	let found = false;

	if (!store) {
	    return found;
	}

	// Make sure the current filter is removed before checking the store
	// to prevent false negative results when iterating over a filtered store.
	// All store.find*() method's operate on the filtered store.
	if (me.queryFilter && me.queryMode === 'local' && me.clearFilterOnBlur) {
	    me.clearLocalFilter();
	}

	if (Ext.isArray(value)) {
	    Ext.Array.each(value, function(v) {
		if (store.findRecord(me.valueField, v, 0, false, true, true)) {
		    found = true;
		    return false; // break
		}
		return true;
	    });
	} else {
	    found = !!store.findRecord(me.valueField, value, 0, false, true, true);
	}

	return found;
    },

    validator: function(value) {
	let me = this;

	if (!value) {
	    return true; // handled later by allowEmpty in the getErrors call chain
	}

	// we normally get here the displayField as value, but if a valueField
	// is configured we need to get the "actual" value, to ensure it is in
	// the store. Below check is copied from ExtJS 6.0.2 ComboBox source
	//
	// we also have to get the 'real' value if the we have a mulitSelect
	// Field but got a non array value
	if ((me.valueField && me.valueField !== me.displayField) ||
	    (me.multiSelect && !Ext.isArray(value))) {
	    value = me.getValue();
	}

	if (!(me.notFoundIsValid || me.isValueInStore(value))) {
	    return gettext('Invalid Value');
	}

	return true;
    },

    // validate after enabling a field, otherwise blank fields with !allowBlank
    // are sometimes not marked as invalid
    setDisabled: function(value) {
	this.callParent([value]);
	this.validate();
    },

    initComponent: function() {
	let me = this;

	Ext.apply(me, {
	    queryMode: 'local',
	    matchFieldWidth: false,
	});

	Ext.applyIf(me, { value: [] }); // hack: avoid ExtJS validate() bug

	Ext.applyIf(me.listConfig, { width: 400 });

	me.callParent();

	// Create the picker at an early stage, so it is available to store the previous selection
	if (!me.picker) {
	    me.getPicker();
	}

	me.mon(me.store, 'beforeload', function() {
	    if (!me.isDisabled()) {
		me.enableLoadMask = true;
	    }
	});

	// hack: autoSelect does not work
	me.mon(me.store, 'load', function(store, r, success, o) {
	    if (success) {
		me.clearInvalid();
		delete me.loadError;

		if (me.enableLoadMask) {
		    delete me.enableLoadMask;

		    // if the picker exists, we reset its minHeight to the previous saved one or 0
		    if (me.picker) {
			me.picker.setMinHeight(me.savedMinHeight || 0);
			Proxmox.Utils.setErrorMask(me.picker.getView());
			delete me.savedMinHeight;
			// we have to update the layout, otherwise the height gets not recalculated
			me.picker.updateLayout();
		    }
		}

		let def = me.getValue() || me.preferredValue;
		if (def) {
		    me.setValue(def, true); // sync with grid
		}
		let found = false;
		if (def) {
		    found = me.isValueInStore(def);
		}

		if (!found) {
		    if (!(Ext.isArray(def) ? def.length : def)) {
			let rec = me.store.first();
			if (me.autoSelect && rec && rec.data) {
			    def = rec.data[me.valueField];
			    me.setValue(def, true);
			} else if (!me.allowBlank) {
			    me.setValue(def);
			    if (!me.isDisabled()) {
				me.markInvalid(me.blankText);
			    }
			}
		    } else if (!me.notFoundIsValid && !me.isDisabled()) {
			me.markInvalid(gettext('Invalid Value'));
		    }
		}
	    } else {
		let msg = Proxmox.Utils.getResponseErrorMessage(o.getError());
		if (me.picker) {
		    me.savedMinHeight = me.savedMinHeight ?? me.picker.getMinHeight();
		    me.picker.setMinHeight(me.errorHeight);
		    Proxmox.Utils.setErrorMask(me.picker.getView(), msg);
		    me.picker.updateLayout();
		}
		me.loadError = msg;
	    }
	});
    },
});
Ext.define('Proxmox.form.RRDTypeSelector', {
    extend: 'Ext.form.field.ComboBox',
    alias: ['widget.proxmoxRRDTypeSelector'],

    displayField: 'text',
    valueField: 'id',
    editable: false,
    queryMode: 'local',
    value: 'hour',
    stateEvents: ['select'],
    stateful: true,
    stateId: 'proxmoxRRDTypeSelection',
    store: {
	type: 'array',
	fields: ['id', 'timeframe', 'cf', 'text'],
	data: [
	    ['hour', 'hour', 'AVERAGE',
	      gettext('Hour') + ' (' + gettext('average') +')'],
	    ['hourmax', 'hour', 'MAX',
	      gettext('Hour') + ' (' + gettext('maximum') + ')'],
	    ['day', 'day', 'AVERAGE',
	      gettext('Day') + ' (' + gettext('average') + ')'],
	    ['daymax', 'day', 'MAX',
	      gettext('Day') + ' (' + gettext('maximum') + ')'],
	    ['week', 'week', 'AVERAGE',
	      gettext('Week') + ' (' + gettext('average') + ')'],
	    ['weekmax', 'week', 'MAX',
	      gettext('Week') + ' (' + gettext('maximum') + ')'],
	    ['month', 'month', 'AVERAGE',
	      gettext('Month') + ' (' + gettext('average') + ')'],
	    ['monthmax', 'month', 'MAX',
	      gettext('Month') + ' (' + gettext('maximum') + ')'],
	    ['year', 'year', 'AVERAGE',
	      gettext('Year') + ' (' + gettext('average') + ')'],
	    ['yearmax', 'year', 'MAX',
	      gettext('Year') + ' (' + gettext('maximum') + ')'],
	],
    },
    // save current selection in the state Provider so RRDView can read it
    getState: function() {
	let ind = this.getStore().findExact('id', this.getValue());
	let rec = this.getStore().getAt(ind);
	if (!rec) {
	    return undefined;
	}
	return {
	    id: rec.data.id,
	    timeframe: rec.data.timeframe,
	    cf: rec.data.cf,
	};
    },
    // set selection based on last saved state
    applyState: function(state) {
	if (state && state.id) {
	    this.setValue(state.id);
	}
    },
});
Ext.define('Proxmox.form.BondModeSelector', {
    extend: 'Proxmox.form.KVComboBox',
    alias: ['widget.bondModeSelector'],

    openvswitch: false,

    initComponent: function() {
	let me = this;

	if (me.openvswitch) {
	    me.comboItems = Proxmox.Utils.bond_mode_array([
	       'active-backup',
	       'balance-slb',
	       'lacp-balance-slb',
	       'lacp-balance-tcp',
	    ]);
	} else {
	    me.comboItems = Proxmox.Utils.bond_mode_array([
		'balance-rr',
		'active-backup',
		'balance-xor',
		'broadcast',
		'802.3ad',
		'balance-tlb',
		'balance-alb',
	    ]);
	}

	me.callParent();
    },
});

Ext.define('Proxmox.form.BondPolicySelector', {
    extend: 'Proxmox.form.KVComboBox',
    alias: ['widget.bondPolicySelector'],
    comboItems: [
	    ['layer2', 'layer2'],
	    ['layer2+3', 'layer2+3'],
	    ['layer3+4', 'layer3+4'],
    ],
});

Ext.define('Proxmox.form.NetworkSelectorController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.proxmoxNetworkSelectorController',

    init: function(view) {
	let me = this;

	if (!view.nodename) {
	    throw "missing custom view config: nodename";
	}
	view.getStore().getProxy().setUrl('/api2/json/nodes/'+ view.nodename + '/network');
    },
});

Ext.define('Proxmox.data.NetworkSelector', {
    extend: 'Ext.data.Model',
    fields: [
	{ name: 'active' },
	{ name: 'cidr' },
	{ name: 'cidr6' },
	{ name: 'address' },
	{ name: 'address6' },
	{ name: 'comments' },
	{ name: 'iface' },
	{ name: 'slaves' },
	{ name: 'type' },
    ],
});

Ext.define('Proxmox.form.NetworkSelector', {
    extend: 'Proxmox.form.ComboGrid',
    alias: 'widget.proxmoxNetworkSelector',

    controller: 'proxmoxNetworkSelectorController',

    nodename: 'localhost',
    setNodename: function(nodename) {
	this.nodename = nodename;
	let networkSelectorStore = this.getStore();
	networkSelectorStore.removeAll();
	// because of manual local copy of data for ip4/6
	this.getPicker().refresh();
	if (networkSelectorStore && typeof networkSelectorStore.getProxy === 'function') {
	    networkSelectorStore.getProxy().setUrl('/api2/json/nodes/'+ nodename + '/network');
	    networkSelectorStore.load();
	}
    },
    valueField: 'cidr',
    displayField: 'cidr',
    store: {
	autoLoad: true,
	model: 'Proxmox.data.NetworkSelector',
	proxy: {
	    type: 'proxmox',
	},
	sorters: [
	    {
		property: 'iface',
		direction: 'ASC',
	    },
	],
	filters: [
	    function(item) {
		return item.data.cidr;
	    },
	],
	listeners: {
	    load: function(store, records, successful) {
		if (successful) {
		    records.forEach(function(record) {
			if (record.data.cidr6) {
			    let dest = record.data.cidr ? record.copy(null) : record;
			    dest.data.cidr = record.data.cidr6;
			    dest.data.address = record.data.address6;
			    delete record.data.cidr6;
			    dest.data.comments = record.data.comments6;
			    delete record.data.comments6;
			    store.add(dest);
			}
		    });
		}
	    },
	},
    },
    listConfig: {
	width: 600,
	columns: [
	    {

		header: gettext('CIDR'),
		dataIndex: 'cidr',
		hideable: false,
		flex: 1,
	    },
	    {

		header: gettext('IP'),
		dataIndex: 'address',
		hidden: true,
	    },
	    {
		header: gettext('Interface'),
		width: 90,
		dataIndex: 'iface',
	    },
	    {
		header: gettext('Active'),
		renderer: Proxmox.Utils.format_boolean,
		width: 60,
		dataIndex: 'active',
	    },
	    {
		header: gettext('Type'),
		width: 80,
		hidden: true,
		dataIndex: 'type',
	    },
	    {
		header: gettext('Comment'),
		flex: 2,
		dataIndex: 'comments',
		renderer: Ext.String.htmlEncode,
	    },
	],
    },
});
Ext.define('Proxmox.form.RealmComboBox', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.pmxRealmComboBox',

    controller: {
	xclass: 'Ext.app.ViewController',

	init: function(view) {
	    let store = view.getStore();
	    if (view.storeFilter) {
		store.setFilters(view.storeFilter);
	    }
	    store.on('load', this.onLoad, view);
	    store.load();
	},

	onLoad: function(store, records, success) {
	    if (!success) {
		return;
	    }
	    let me = this;
	    let val = me.getValue();
	    if (!val || !me.store.findRecord('realm', val, 0, false, true, true)) {
		let def = 'pam';
		Ext.each(records, function(rec) {
		    if (rec.data && rec.data.default) {
			def = rec.data.realm;
		    }
		});
		me.setValue(def);
	    }
	},
    },

    // define custom filters for the underlying store
    storeFilter: undefined,

    fieldLabel: gettext('Realm'),
    name: 'realm',
    queryMode: 'local',
    allowBlank: false,
    editable: false,
    forceSelection: true,
    autoSelect: false,
    triggerAction: 'all',
    valueField: 'realm',
    displayField: 'descr',
    getState: function() {
	return { value: this.getValue() };
    },
    applyState: function(state) {
	if (state && state.value) {
	    this.setValue(state.value);
	}
    },
    stateEvents: ['select'],
    stateful: true, // last chosen auth realm is saved between page reloads
    id: 'pveloginrealm', // We need stable ids when using stateful, not autogenerated
    stateID: 'pveloginrealm',

    store: {
	model: 'pmx-domains',
	autoLoad: false,
    },
});
Ext.define('Proxmox.form.field.PruneKeep', {
    extend: 'Proxmox.form.field.Integer',
    xtype: 'pmxPruneKeepField',

    allowBlank: true,
    minValue: 1,

    listeners: {
	dirtychange: (field, dirty) => field.triggers.clear.setVisible(dirty),
    },
    triggers: {
	clear: {
	    cls: 'pmx-clear-trigger',
	    weight: -1,
	    hidden: true,
	    handler: function() {
		this.triggers.clear.setVisible(false);
		this.setValue(this.originalValue);
	    },
	},
    },

});
Ext.define('pmx-roles', {
    extend: 'Ext.data.Model',
    fields: ['roleid', 'privs'],
    proxy: {
	type: 'proxmox',
	url: "/api2/json/access/roles",
    },
    idProperty: 'roleid',
});

Ext.define('Proxmox.form.RoleSelector', {
    extend: 'Proxmox.form.ComboGrid',
    alias: 'widget.pmxRoleSelector',

    allowBlank: false,
    autoSelect: false,
    valueField: 'roleid',
    displayField: 'roleid',

    listConfig: {
	width: 560,
	resizable: true,
	columns: [
	    {
		header: gettext('Role'),
		sortable: true,
		dataIndex: 'roleid',
		flex: 2,
	    },
	    {
		header: gettext('Privileges'),
		dataIndex: 'privs',
		cellWrap: true,
		// join manually here, as ExtJS joins without whitespace which breaks cellWrap
		renderer: v => Ext.isArray(v) ? v.join(', ') : v.replaceAll(',', ', '),
		flex: 5,
	    },
	],
    },

    store: {
	autoLoad: true,
	model: 'pmx-roles',
	sorters: 'roleid',
    },
});
Ext.define('Proxmox.form.DiskSelector', {
    extend: 'Proxmox.form.ComboGrid',
    xtype: 'pmxDiskSelector',

    // can be
    // undefined: all
    // unused: only unused
    // journal_disk: all disks with gpt
    diskType: undefined,

    // use include-partitions=1 as a parameter
    includePartitions: false,

    // the property the backend wants for the type ('type' by default)
    typeProperty: 'type',

    valueField: 'devpath',
    displayField: 'devpath',
    emptyText: gettext('No Disks unused'),
    listConfig: {
	width: 600,
	columns: [
	    {
		header: gettext('Device'),
		flex: 3,
		sortable: true,
		dataIndex: 'devpath',
	    },
	    {
		header: gettext('Size'),
		flex: 2,
		sortable: false,
		renderer: Proxmox.Utils.format_size,
		dataIndex: 'size',
	    },
	    {
		header: gettext('Serial'),
		flex: 5,
		sortable: true,
		dataIndex: 'serial',
	    },
	],
    },

    initComponent: function() {
	var me = this;

	var nodename = me.nodename;
	if (!nodename) {
	    throw "no node name specified";
	}

	let extraParams = {};

	if (me.diskType) {
	    extraParams[me.typeProperty] = me.diskType;
	}

	if (me.includePartitions) {
	    extraParams['include-partitions'] = 1;
	}

	var store = Ext.create('Ext.data.Store', {
	    filterOnLoad: true,
	    model: 'pmx-disk-list',
	    proxy: {
                type: 'proxmox',
                url: `/api2/json/nodes/${nodename}/disks/list`,
		extraParams,
	    },
	    sorters: [
		{
		    property: 'devpath',
		    direction: 'ASC',
		},
	    ],
	});

	Ext.apply(me, {
	    store: store,
	});

        me.callParent();

	store.load();
    },
});
Ext.define('Proxmox.form.MultiDiskSelector', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.pmxMultiDiskSelector',

    mixins: {
	field: 'Ext.form.field.Field',
    },

    selModel: 'checkboxmodel',

    store: {
	data: [],
	proxy: {
	    type: 'proxmox',
	},
    },

    // which field of the disklist is used for getValue
    valueField: 'devpath',

    // which parameter is used for the type
    typeParameter: 'type',

    // the type of disks to show
    diskType: 'unused',

    // add include-partitions=1 as a request parameter
    includePartitions: false,

    disks: [],

    allowBlank: false,

    getValue: function() {
	let me = this;
	return me.disks;
    },

    setValue: function(value) {
	let me = this;

	value ??= [];

	if (!Ext.isArray(value)) {
	    value = value.split(/;, /);
	}

	let store = me.getStore();
	let selection = [];

	let keyField = me.valueField;

	value.forEach(item => {
	    let rec = store.findRecord(keyField, item, 0, false, true, true);
	    if (rec) {
		selection.push(rec);
	    }
	});

	me.setSelection(selection);

	return me.mixins.field.setValue.call(me, value);
    },

    getErrors: function(value) {
	let me = this;
	if (me.allowBlank === false &&
	    me.getSelectionModel().getCount() === 0) {
	    me.addBodyCls(['x-form-trigger-wrap-default', 'x-form-trigger-wrap-invalid']);
	    return [gettext('No Disk selected')];
	}

	me.removeBodyCls(['x-form-trigger-wrap-default', 'x-form-trigger-wrap-invalid']);
	return [];
    },

    update_disklist: function() {
	var me = this;
	var disks = me.getSelection();

	var val = [];
	disks.sort(function(a, b) {
	    var aorder = a.get('order') || 0;
	    var border = b.get('order') || 0;
	    return aorder - border;
	});

	disks.forEach(function(disk) {
	    val.push(disk.get(me.valueField));
	});

	me.validate();
	me.disks = val;
    },

    columns: [
	{
	    text: gettext('Device'),
	    dataIndex: 'devpath',
	    flex: 2,
	},
	{
	    text: gettext('Model'),
	    dataIndex: 'model',
	    flex: 2,
	},
	{
	    text: gettext('Serial'),
	    dataIndex: 'serial',
	    flex: 2,
	},
	{
	    text: gettext('Size'),
	    dataIndex: 'size',
	    renderer: Proxmox.Utils.format_size,
	    flex: 1,
	},
	{
	    header: gettext('Order'),
	    xtype: 'widgetcolumn',
	    dataIndex: 'order',
	    sortable: true,
	    flex: 1,
	    widget: {
		xtype: 'proxmoxintegerfield',
		minValue: 1,
		isFormField: false,
		listeners: {
		    change: function(numberfield, value, old_value) {
			let grid = this.up('pmxMultiDiskSelector');
			var record = numberfield.getWidgetRecord();
			record.set('order', value);
			grid.update_disklist(record);
		    },
		},
	    },
	},
    ],

    listeners: {
	selectionchange: function() {
	    this.update_disklist();
	},
    },

    initComponent: function() {
	let me = this;

	let extraParams = {};

	if (!me.url) {
	    if (!me.nodename) {
		throw "no url or nodename given";
	    }

	    me.url = `/api2/json/nodes/${me.nodename}/disks/list`;

	    extraParams[me.typeParameter] = me.diskType;

	    if (me.includePartitions) {
		extraParams['include-partitions'] = 1;
	    }
	}

	me.disks = [];

	me.callParent();
	let store = me.getStore();
	store.setProxy({
	    type: 'proxmox',
	    url: me.url,
	    extraParams,
	});
	store.load();
	store.sort({ property: me.valueField });
    },

});
Ext.define('Proxmox.form.TaskTypeSelector', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.pmxTaskTypeSelector',

    anyMatch: true,

    initComponent: function() {
	let me = this;
	me.store = Object.keys(Proxmox.Utils.task_desc_table).sort();
	me.callParent();
    },
    listeners: {
	change: function(field, newValue, oldValue) {
	    if (newValue !== this.originalValue) {
		this.triggers.clear.setVisible(true);
	    }
	},
    },
    triggers: {
	clear: {
	    cls: 'pmx-clear-trigger',
	    weight: -1,
	    hidden: true,
	    handler: function() {
		this.triggers.clear.setVisible(false);
		this.setValue(this.originalValue);
	    },
	},
    },
});
Ext.define('Proxmox.form.ACMEApiSelector', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.pmxACMEApiSelector',

    fieldLabel: gettext('DNS API'),
    displayField: 'name',
    valueField: 'id',

    store: {
	model: 'proxmox-acme-challenges',
	autoLoad: true,
    },

    triggerAction: 'all',
    queryMode: 'local',
    allowBlank: false,
    editable: true,
    forceSelection: true,
    anyMatch: true,
    selectOnFocus: true,

    getSchema: function() {
	let me = this;
	let val = me.getValue();
	if (val) {
	    let record = me.getStore().findRecord('id', val, 0, false, true, true);
	    if (record) {
		return record.data.schema;
	    }
	}
	return {};
    },

    initComponent: function() {
        let me = this;

        if (!me.url) {
            throw "no url given";
        }

        me.callParent();
        me.getStore().getProxy().setUrl(me.url);
    },
});

Ext.define('Proxmox.form.ACMEAccountSelector', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.pmxACMEAccountSelector',

    displayField: 'name',
    valueField: 'name',

    store: {
	model: 'proxmox-acme-accounts',
	autoLoad: true,
    },

    triggerAction: 'all',
    queryMode: 'local',
    allowBlank: false,
    editable: false,
    forceSelection: true,

    isEmpty: function() {
	return this.getStore().getData().length === 0;
    },

    initComponent: function() {
        let me = this;

        if (!me.url) {
            throw "no url given";
        }

        me.callParent();
        me.getStore().getProxy().setUrl(me.url);
    },
});

Ext.define('Proxmox.form.ACMEPluginSelector', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.pmxACMEPluginSelector',

    fieldLabel: gettext('Plugin'),
    displayField: 'plugin',
    valueField: 'plugin',

    store: {
	model: 'proxmox-acme-plugins',
	autoLoad: true,
	filters: item => item.data.type === 'dns',
    },

    triggerAction: 'all',
    queryMode: 'local',
    allowBlank: false,
    editable: false,

    initComponent: function() {
        let me = this;

        if (!me.url) {
            throw "no url given";
        }

        me.callParent();
        me.getStore().getProxy().setUrl(me.url);
    },
});
Ext.define('Proxmox.form.UserSelector', {
    extend: 'Proxmox.form.ComboGrid',
    alias: 'widget.pmxUserSelector',

    allowBlank: false,
    autoSelect: false,
    valueField: 'userid',
    displayField: 'userid',

    editable: true,
    anyMatch: true,
    forceSelection: true,

    store: {
	model: 'pmx-users',
	autoLoad: true,
	params: {
	    enabled: 1,
	},
	sorters: 'userid',
    },

    listConfig: {
	columns: [
	    {
		header: gettext('User'),
		sortable: true,
		dataIndex: 'userid',
		renderer: Ext.String.htmlEncode,
		flex: 1,
	    },
	    {
		header: gettext('Name'),
		sortable: true,
		renderer: (first, mD, rec) => Ext.String.htmlEncode(
		    `${first || ''} ${rec.data.lastname || ''}`,
		),
		dataIndex: 'firstname',
		flex: 1,
	    },
	    {
		header: gettext('Comment'),
		sortable: false,
		dataIndex: 'comment',
		renderer: Ext.String.htmlEncode,
		flex: 1,
	    },
	],
    },
});
Ext.define('Proxmox.form.ThemeSelector', {
    extend: 'Proxmox.form.KVComboBox',
    xtype: 'proxmoxThemeSelector',

    comboItems: Proxmox.Utils.theme_array(),
});
Ext.define('Proxmox.form.field.FingerprintField', {
    extend: 'Proxmox.form.field.Textfield',
    alias: ['widget.pmxFingerprintField'],

    config: {
	fieldLabel: gettext('Fingerprint'),
	emptyText: gettext('Server certificate SHA-256 fingerprint, required for self-signed certificates'),

	regex: /[A-Fa-f0-9]{2}(:[A-Fa-f0-9]{2}){31}/,
	regexText: gettext('Example') + ': AB:CD:EF:...',

	allowBlank: true,
    },
});
/* Button features:
 * - observe selection changes to enable/disable the button using enableFn()
 * - pop up confirmation dialog using confirmMsg()
 */
Ext.define('Proxmox.button.Button', {
    extend: 'Ext.button.Button',
    alias: 'widget.proxmoxButton',

    // the selection model to observe
    selModel: undefined,

    // if 'false' handler will not be called (button disabled)
    enableFn: function(record) {
	// return undefined by default
    },

    // function(record) or text
    confirmMsg: false,

    // take special care in confirm box (select no as default).
    dangerous: false,

    // is used to get the parent container for its selection model
    parentXType: 'grid',

    initComponent: function() {
        let me = this;

	if (me.handler) {
	    // Note: me.realHandler may be a string (see named scopes)
	    let realHandler = me.handler;

	    me.handler = function(button, event) {
		let rec, msg;
		if (me.selModel) {
		    rec = me.selModel.getSelection()[0];
		    if (!rec || me.enableFn(rec) === false) {
			return;
		    }
		}

		if (me.confirmMsg) {
		    msg = me.confirmMsg;
		    if (Ext.isFunction(me.confirmMsg)) {
			msg = me.confirmMsg(rec);
		    }
		    Ext.MessageBox.defaultButton = me.dangerous ? 2 : 1;
		    Ext.Msg.show({
			title: gettext('Confirm'),
			icon: me.dangerous ? Ext.Msg.WARNING : Ext.Msg.QUESTION,
			message: msg,
			buttons: Ext.Msg.YESNO,
			defaultFocus: me.dangerous ? 'no' : 'yes',
			callback: function(btn) {
			    if (btn !== 'yes') {
				return;
			    }
			    Ext.callback(realHandler, me.scope, [button, event, rec], 0, me);
			},
		    });
		} else {
		    Ext.callback(realHandler, me.scope, [button, event, rec], 0, me);
		}
	    };
	}

	me.callParent();

	let grid;
	if (!me.selModel && me.selModel !== null && me.selModel !== false) {
	    let parent = me.up(me.parentXType);
	    if (parent && parent.selModel) {
		me.selModel = parent.selModel;
	    }
	}

	if (me.waitMsgTarget === true) {
	    grid = me.up('grid');
	    if (grid) {
		me.waitMsgTarget = grid;
	    } else {
		throw "unable to find waitMsgTarget";
	    }
	}

	if (me.selModel) {
	    me.mon(me.selModel, "selectionchange", function() {
		let rec = me.selModel.getSelection()[0];
		if (!rec || me.enableFn(rec) === false) {
		    me.setDisabled(true);
		} else {
		    me.setDisabled(false);
		}
	    });
	}
    },
});


Ext.define('Proxmox.button.StdRemoveButton', {
    extend: 'Proxmox.button.Button',
    alias: 'widget.proxmoxStdRemoveButton',

    text: gettext('Remove'),

    disabled: true,

    // time to wait for removal task to finish
    delay: undefined,

    config: {
	baseurl: undefined,
	customConfirmationMessage: undefined,
    },

    getUrl: function(rec) {
	let me = this;

	if (me.selModel) {
	    return me.baseurl + '/' + rec.getId();
	} else {
	    return me.baseurl;
	}
    },

    // also works with names scopes
    callback: function(options, success, response) {
	// do nothing by default
    },

    getRecordName: (rec) => rec.getId(),

    confirmMsg: function(rec) {
	let me = this;

	let name = me.getRecordName(rec);

	let text;
	if (me.customConfirmationMessage) {
	    text = me.customConfirmationMessage;
	} else {
	    text = gettext('Are you sure you want to remove entry {0}');
	}
	return Ext.String.format(text, Ext.htmlEncode(`'${name}'`));
    },

    handler: function(btn, event, rec) {
	let me = this;

	let url = me.getUrl(rec);

	if (typeof me.delay !== 'undefined' && me.delay >= 0) {
	    url += "?delay=" + me.delay;
	}

	Proxmox.Utils.API2Request({
	    url: url,
	    method: 'DELETE',
	    waitMsgTarget: me.waitMsgTarget,
	    callback: function(options, success, response) {
		Ext.callback(me.callback, me.scope, [options, success, response], 0, me);
	    },
	    failure: response => Ext.Msg.alert(gettext('Error'), response.htmlStatus),
	});
    },
    initComponent: function() {
	let me = this;

	// enable by default if no seleModel is there and disabled not set
	if (me.initialConfig.disabled === undefined &&
	    (me.selModel === null || me.selModel === false)) {
	    me.disabled = false;
	}

	me.callParent();
    },
});
Ext.define('Proxmox.button.AltText', {
    extend: 'Proxmox.button.Button',
    xtype: 'proxmoxAltTextButton',

    defaultText: "",
    altText: "",

    listeners: {
	// HACK: calculate the max button width on first render to avoid toolbar glitches
	render: function(button) {
	    let me = this;

	    button.setText(me.altText);
	    let altWidth = button.getSize().width;

	    button.setText(me.defaultText);
	    let defaultWidth = button.getSize().width;

	    button.setWidth(defaultWidth > altWidth ? defaultWidth : altWidth);
	},
    },
});
/* help button pointing to an online documentation
   for components contained in a modal window
*/
Ext.define('Proxmox.button.Help', {
    extend: 'Ext.button.Button',
    xtype: 'proxmoxHelpButton',

    text: gettext('Help'),

    // make help button less flashy by styling it like toolbar buttons
    iconCls: ' x-btn-icon-el-default-toolbar-small fa fa-question-circle',
    cls: 'x-btn-default-toolbar-small proxmox-inline-button',

    hidden: true,

    listenToGlobalEvent: true,

    controller: {
	xclass: 'Ext.app.ViewController',
	listen: {
	    global: {
		proxmoxShowHelp: 'onProxmoxShowHelp',
		proxmoxHideHelp: 'onProxmoxHideHelp',
	    },
	},
	onProxmoxShowHelp: function(helpLink) {
	    let view = this.getView();
	    if (view.listenToGlobalEvent === true) {
		view.setOnlineHelp(helpLink);
		view.show();
	    }
	},
	onProxmoxHideHelp: function() {
	    let view = this.getView();
	    if (view.listenToGlobalEvent === true) {
		view.hide();
	    }
	},
    },

    // this sets the link and the tooltip text
    setOnlineHelp: function(blockid) {
	let me = this;

	let info = Proxmox.Utils.get_help_info(blockid);
	if (info) {
	    me.onlineHelp = blockid;
	    let title = info.title;
	    if (info.subtitle) {
		title += ' - ' + info.subtitle;
	    }
	    me.setTooltip(title);
	}
    },

    // helper to set the onlineHelp via a config object
    setHelpConfig: function(config) {
	let me = this;
	me.setOnlineHelp(config.onlineHelp);
    },

    handler: function() {
	let me = this;
	let docsURI;

	if (me.onlineHelp) {
	    docsURI = Proxmox.Utils.get_help_link(me.onlineHelp);
	}

	if (docsURI) {
	    window.open(docsURI);
	} else {
	    Ext.Msg.alert(gettext('Help'), gettext('No Help available'));
	}
    },

    initComponent: function() {
	let me = this;

	me.callParent();

	if (me.onlineHelp) {
	    me.setOnlineHelp(me.onlineHelp); // set tooltip
	}
    },
});
/** Renders a list of key values objects

Mandatory Config Parameters:

rows: an object container where each property is a key-value object we want to render

  rows: {
     keyboard: {
         header: gettext('Keyboard Layout'),
         editor: 'Your.KeyboardEdit',
         required: true
     },
     // ...
  },

Convenience Helper:

As alternative you can use the common add-row helper like `add_text_row`, but you need to
call it in an overridden initComponent before `me.callParent(arguments)` gets executed.

For a declarative approach you can use the `gridRows` configuration to pass an array of
objects with each having at least a `xtype` to match `add_XTYPE_row` and a field-name
property, for example:

 gridRows: [
    {
      xtype: 'text',
      name: 'http-proxy',
      text: gettext('HTTP proxy'),
      defaultValue: Proxmox.Utils.noneText,
      vtype: 'HttpProxy',
      deleteEmpty: true,
    },
  ],

Optional Configs:

disabled:: setting this parameter to true will disable selection and focus on
  the proxmoxObjectGrid as well as greying out input elements. Useful for a
  readonly tabular display

*/
Ext.define('Proxmox.grid.ObjectGrid', {
    extend: 'Ext.grid.GridPanel',
    alias: ['widget.proxmoxObjectGrid'],

    // can be used as declarative replacement over manually calling the add_XYZ_row helpers,
    // see top-level doc-comment above for details/example
    gridRows: [],

    disabled: false,
    hideHeaders: true,

    monStoreErrors: false,

    add_combobox_row: function(name, text, opts) {
	let me = this;

	opts = opts || {};
	me.rows = me.rows || {};

	me.rows[name] = {
	    required: true,
	    defaultValue: opts.defaultValue,
	    header: text,
	    renderer: opts.renderer,
	    editor: {
		xtype: 'proxmoxWindowEdit',
		subject: text,
		fieldDefaults: {
		    labelWidth: opts.labelWidth || 100,
		},
		items: {
		    xtype: 'proxmoxKVComboBox',
		    name: name,
		    comboItems: opts.comboItems,
		    value: opts.defaultValue,
		    deleteEmpty: !!opts.deleteEmpty,
		    emptyText: opts.defaultValue,
		    labelWidth: Proxmox.Utils.compute_min_label_width(
			text, opts.labelWidth),
		    fieldLabel: text,
		},
	    },
	};
	if (opts.onlineHelp) {
	    me.rows[name].editor.onlineHelp = opts.onlineHelp;
	}
    },

    add_text_row: function(name, text, opts) {
	let me = this;

	opts = opts || {};
	me.rows = me.rows || {};

	me.rows[name] = {
	    required: true,
	    defaultValue: opts.defaultValue,
	    header: text,
	    renderer: opts.renderer,
	    editor: {
		xtype: 'proxmoxWindowEdit',
		subject: text,
		fieldDefaults: {
		    labelWidth: opts.labelWidth || 100,
		},
		items: {
		    xtype: 'proxmoxtextfield',
		    name: name,
		    deleteEmpty: !!opts.deleteEmpty,
		    emptyText: opts.defaultValue,
		    labelWidth: Proxmox.Utils.compute_min_label_width(text, opts.labelWidth),
		    vtype: opts.vtype,
		    fieldLabel: text,
		},
	    },
	};
	if (opts.onlineHelp) {
	    me.rows[name].editor.onlineHelp = opts.onlineHelp;
	}
    },

    add_boolean_row: function(name, text, opts) {
	let me = this;

	opts = opts || {};
	me.rows = me.rows || {};

	me.rows[name] = {
	    required: true,
	    defaultValue: opts.defaultValue || 0,
	    header: text,
	    renderer: opts.renderer || Proxmox.Utils.format_boolean,
	    editor: {
		xtype: 'proxmoxWindowEdit',
		subject: text,
		fieldDefaults: {
		    labelWidth: opts.labelWidth || 100,
		},
		items: {
		    xtype: 'proxmoxcheckbox',
		    name: name,
		    uncheckedValue: 0,
		    defaultValue: opts.defaultValue || 0,
		    checked: !!opts.defaultValue,
		    deleteDefaultValue: !!opts.deleteDefaultValue,
		    labelWidth: Proxmox.Utils.compute_min_label_width(text, opts.labelWidth),
		    fieldLabel: text,
		},
	    },
	};
	if (opts.onlineHelp) {
	    me.rows[name].editor.onlineHelp = opts.onlineHelp;
	}
    },

    add_integer_row: function(name, text, opts) {
	let me = this;

	opts = opts || {};
	me.rows = me.rows || {};

	me.rows[name] = {
	    required: true,
	    defaultValue: opts.defaultValue,
	    header: text,
	    renderer: opts.renderer,
	    editor: {
		xtype: 'proxmoxWindowEdit',
		subject: text,
		fieldDefaults: {
		    labelWidth: opts.labelWidth || 100,
		},
		items: {
		    xtype: 'proxmoxintegerfield',
		    name: name,
		    minValue: opts.minValue,
		    maxValue: opts.maxValue,
		    emptyText: gettext('Default'),
		    deleteEmpty: !!opts.deleteEmpty,
		    value: opts.defaultValue,
		    labelWidth: Proxmox.Utils.compute_min_label_width(text, opts.labelWidth),
		    fieldLabel: text,
		},
	    },
	};
	if (opts.onlineHelp) {
	    me.rows[name].editor.onlineHelp = opts.onlineHelp;
	}
    },

    // adds a row that allows editing in a full TextArea that transparently de/encodes as Base64
    add_textareafield_row: function(name, text, opts) {
	let me = this;

	opts = opts || {};
	me.rows = me.rows || {};
	let fieldOpts = opts.fieldOpts || {};

	me.rows[name] = {
	    required: true,
	    defaultValue: "",
	    header: text,
	    renderer: value => Ext.htmlEncode(Proxmox.Utils.base64ToUtf8(value)),
	    editor: {
		xtype: 'proxmoxWindowEdit',
		subject: text,
		fieldDefaults: {
		    labelWidth: opts.labelWidth || 600,
		},
		items: {
		    xtype: 'proxmoxBase64TextArea',
		    ...fieldOpts,
		    name,
		},
	    },
	};
	if (opts.onlineHelp) {
	    me.rows[name].editor.onlineHelp = opts.onlineHelp;
	}
    },

    editorConfig: {}, // default config passed to editor

    run_editor: function() {
	let me = this;

	let sm = me.getSelectionModel();
	let rec = sm.getSelection()[0];
	if (!rec) {
	    return;
	}

	let rows = me.rows;
	let rowdef = rows[rec.data.key];
	if (!rowdef.editor) {
	    return;
	}

	let win;
	let config;
	if (Ext.isString(rowdef.editor)) {
	    config = Ext.apply({
		confid: rec.data.key,
	    }, me.editorConfig);
	    win = Ext.create(rowdef.editor, config);
	} else {
	    config = Ext.apply({
		confid: rec.data.key,
	    }, me.editorConfig);
	    Ext.apply(config, rowdef.editor);
	    win = Ext.createWidget(rowdef.editor.xtype, config);
	    win.load();
	}

	win.show();
	win.on('destroy', me.reload, me);
    },

    reload: function() {
	let me = this;
	me.rstore.load();
    },

    getObjectValue: function(key, defaultValue) {
	let me = this;
	let rec = me.store.getById(key);
	if (rec) {
	    return rec.data.value;
	}
	return defaultValue;
    },

    renderKey: function(key, metaData, record, rowIndex, colIndex, store) {
	let me = this;
	let rows = me.rows;
	let rowdef = rows && rows[key] ? rows[key] : {};
	return rowdef.header || key;
    },

    renderValue: function(value, metaData, record, rowIndex, colIndex, store) {
	let me = this;
	let rows = me.rows;
	let key = record.data.key;
	let rowdef = rows && rows[key] ? rows[key] : {};

	let renderer = rowdef.renderer;
	if (renderer) {
	    return renderer.call(me, value, metaData, record, rowIndex, colIndex, store);
	}

	return value;
    },

    listeners: {
	itemkeydown: function(view, record, item, index, e) {
	    if (e.getKey() === e.ENTER) {
		this.pressedIndex = index;
	    }
	},
	itemkeyup: function(view, record, item, index, e) {
	    if (e.getKey() === e.ENTER && index === this.pressedIndex) {
		this.run_editor();
	    }

	    this.pressedIndex = undefined;
	},
    },

    initComponent: function() {
	let me = this;

	for (const rowdef of me.gridRows || []) {
	    let addFn = me[`add_${rowdef.xtype}_row`];
	    if (typeof addFn !== 'function') {
		throw `unknown object-grid row xtype '${rowdef.xtype}'`;
	    } else if (typeof rowdef.name !== 'string') {
		throw `object-grid row need a valid name string-property!`;
	    } else {
		addFn.call(me, rowdef.name, rowdef.text || rowdef.name, rowdef);
	    }
	}

	let rows = me.rows;

	if (!me.rstore) {
	    if (!me.url) {
		throw "no url specified";
	    }

	    me.rstore = Ext.create('Proxmox.data.ObjectStore', {
		url: me.url,
		interval: me.interval,
		extraParams: me.extraParams,
		rows: me.rows,
	    });
	}

	let rstore = me.rstore;
	let store = Ext.create('Proxmox.data.DiffStore', {
	    rstore: rstore,
	    sorters: [],
	    filters: [],
	});

	if (rows) {
	    for (const [key, rowdef] of Object.entries(rows)) {
		if (Ext.isDefined(rowdef.defaultValue)) {
		    store.add({ key: key, value: rowdef.defaultValue });
		} else if (rowdef.required) {
		    store.add({ key: key, value: undefined });
		}
	    }
	}

	if (me.sorterFn) {
	    store.sorters.add(Ext.create('Ext.util.Sorter', {
		sorterFn: me.sorterFn,
	    }));
	}

	store.filters.add(Ext.create('Ext.util.Filter', {
	    filterFn: function(item) {
		if (rows) {
		    let rowdef = rows[item.data.key];
		    if (!rowdef || rowdef.visible === false) {
			return false;
		    }
		}
		return true;
	    },
	}));

	Proxmox.Utils.monStoreErrors(me, rstore);

	Ext.applyIf(me, {
	    store: store,
	    stateful: false,
	    columns: [
		{
		    header: gettext('Name'),
		    width: me.cwidth1 || 200,
		    dataIndex: 'key',
		    renderer: me.renderKey,
		},
		{
		    flex: 1,
		    header: gettext('Value'),
		    dataIndex: 'value',
		    renderer: me.renderValue,
		},
	    ],
	});

	me.callParent();

	if (me.monStoreErrors) {
	    Proxmox.Utils.monStoreErrors(me, me.store);
	}
   },
});
Ext.define('Proxmox.grid.PendingObjectGrid', {
    extend: 'Proxmox.grid.ObjectGrid',
    alias: ['widget.proxmoxPendingObjectGrid'],

    getObjectValue: function(key, defaultValue, pending) {
	let me = this;
	let rec = me.store.getById(key);
	if (rec) {
	    let value = rec.data.value;
	    if (pending) {
		if (Ext.isDefined(rec.data.pending) && rec.data.pending !== '') {
		    value = rec.data.pending;
		} else if (rec.data.delete === 1) {
		    value = defaultValue;
		}
	    }

            if (Ext.isDefined(value) && value !== '') {
		return value;
            } else {
		return defaultValue;
            }
	}
	return defaultValue;
    },

    hasPendingChanges: function(key) {
	let me = this;
	let rows = me.rows;
	let rowdef = rows && rows[key] ? rows[key] : {};
	let keys = rowdef.multiKey || [key];
	let pending = false;

	Ext.Array.each(keys, function(k) {
	    let rec = me.store.getById(k);
	    if (rec && rec.data && (
		    (Ext.isDefined(rec.data.pending) && rec.data.pending !== '') ||
		    rec.data.delete === 1
	    )) {
		pending = true;
		return false; // break
	    }
	    return true;
	});

	return pending;
    },

    renderValue: function(value, metaData, record, rowIndex, colIndex, store) {
	let me = this;
	let rows = me.rows;
	let key = record.data.key;
	let rowdef = rows && rows[key] ? rows[key] : {};
	let renderer = rowdef.renderer;
	let current = '';
	let pending = '';

	if (renderer) {
	    current = renderer(value, metaData, record, rowIndex, colIndex, store, false);
	    if (me.hasPendingChanges(key)) {
		pending = renderer(record.data.pending, metaData, record, rowIndex, colIndex, store, true);
	    }
	    if (pending === current) {
		pending = undefined;
	    }
	} else {
	    current = value || '';
	    pending = record.data.pending;
	}

	if (record.data.delete) {
	    let delete_all = true;
	    if (rowdef.multiKey) {
		Ext.Array.each(rowdef.multiKey, function(k) {
		    let rec = me.store.getById(k);
		    if (rec && rec.data && rec.data.delete !== 1) {
			delete_all = false;
			return false; // break
		    }
		    return true;
		});
	    }
	    if (delete_all) {
		pending = '<div style="text-decoration: line-through;">'+ current +'</div>';
	    }
	}

	if (pending) {
	    return current + '<div style="color:darkorange">' + pending + '</div>';
	} else {
	    return current;
	}
    },

    initComponent: function() {
	let me = this;

	if (!me.rstore) {
	    if (!me.url) {
		throw "no url specified";
	    }

	    me.rstore = Ext.create('Proxmox.data.ObjectStore', {
		model: 'KeyValuePendingDelete',
		readArray: true,
		url: me.url,
		interval: me.interval,
		extraParams: me.extraParams,
		rows: me.rows,
	    });
	}

	me.callParent();
   },
});
Ext.define('Proxmox.panel.AuthView', {
    extend: 'Ext.grid.GridPanel',
    alias: 'widget.pmxAuthView',
    mixins: ['Proxmox.Mixin.CBind'],

    showDefaultRealm: false,

    stateful: true,
    stateId: 'grid-authrealms',

    viewConfig: {
	trackOver: false,
    },

    baseUrl: '/access/domains',

    columns: [
	{
	    header: gettext('Realm'),
	    width: 100,
	    sortable: true,
	    dataIndex: 'realm',
	},
	{
	    header: gettext('Type'),
	    width: 100,
	    sortable: true,
	    dataIndex: 'type',
	},
	{
	    header: gettext('Default'),
	    width: 80,
	    sortable: true,
	    dataIndex: 'default',
	    renderer: isDefault => isDefault ? Proxmox.Utils.renderEnabledIcon(true) : '',
	    align: 'center',
	    cbind: {
		hidden: '{!showDefaultRealm}',
	    },
	},
	{
	    header: gettext('Comment'),
	    sortable: false,
	    dataIndex: 'comment',
	    renderer: Ext.String.htmlEncode,
	    flex: 1,
	},
    ],

    store: {
	model: 'pmx-domains',
	sorters: {
	    property: 'realm',
	    direction: 'ASC',
	},
    },

    openEditWindow: function(authType, realm) {
	let me = this;
	const { useTypeInUrl, onlineHelp } = Proxmox.Schema.authDomains[authType];

	Ext.create('Proxmox.window.AuthEditBase', {
	    baseUrl: me.baseUrl,
	    useTypeInUrl,
	    onlineHelp,
	    authType,
	    realm,
	    showDefaultRealm: me.showDefaultRealm,
	    listeners: {
		destroy: () => me.reload(),
	    },
	}).show();
    },

    reload: function() {
	let me = this;
	me.getStore().load();
    },

    run_editor: function() {
	let me = this;
	let rec = me.getSelection()[0];
	if (!rec) {
	    return;
	}

	if (!Proxmox.Schema.authDomains[rec.data.type].edit) {
	    return;
	}

	me.openEditWindow(rec.data.type, rec.data.realm);
    },

    open_sync_window: function() {
	let rec = this.getSelection()[0];
	if (!rec) {
	    return;
	}
	if (!Proxmox.Schema.authDomains[rec.data.type].sync) {
	    return;
	}
	Ext.create('Proxmox.window.SyncWindow', {
	    type: rec.data.type,
	    realm: rec.data.realm,
	    listeners: {
		destroy: () => this.reload(),
	    },
	}).show();
    },

    initComponent: function() {
	var me = this;

	let menuitems = [];
	for (const [authType, config] of Object.entries(Proxmox.Schema.authDomains).sort()) {
	    if (!config.add) { continue; }
	    menuitems.push({
		text: config.name,
		iconCls: 'fa fa-fw ' + (config.iconCls || 'fa-address-book-o'),
		handler: () => me.openEditWindow(authType),
	    });
	}

	let tbar = [
	    {
		text: gettext('Add'),
		menu: {
		    items: menuitems,
		},
	    },
	    {
		xtype: 'proxmoxButton',
		text: gettext('Edit'),
		disabled: true,
		enableFn: (rec) => Proxmox.Schema.authDomains[rec.data.type].edit,
		handler: () => me.run_editor(),
	    },
	    {
		xtype: 'proxmoxStdRemoveButton',
		getUrl: (rec) => {
		    let url = me.baseUrl;
		    if (Proxmox.Schema.authDomains[rec.data.type].useTypeInUrl) {
			url += `/${rec.get('type')}`;
		    }
		    url += `/${rec.getId()}`;
		    return url;
		},
		enableFn: (rec) => Proxmox.Schema.authDomains[rec.data.type].add,
		callback: () => me.reload(),
	    },
	    {
		xtype: 'proxmoxButton',
		text: gettext('Sync'),
		disabled: true,
		enableFn: (rec) => Proxmox.Schema.authDomains[rec.data.type].sync,
		handler: () => me.open_sync_window(),
	    },
	];

	if (me.extraButtons) {
	    tbar.push('-');
	    for (const button of me.extraButtons) {
		tbar.push(button);
	    }
	}

	Ext.apply(me, {
	    tbar,
	    listeners: {
		activate: () => me.reload(),
		itemdblclick: () => me.run_editor(),
	    },
	});

	me.callParent();
    },
});
Ext.define('pmx-disk-list', {
    extend: 'Ext.data.Model',
    fields: [
	'devpath', 'used',
	{ name: 'size', type: 'number' },
	{ name: 'osdid', type: 'number', defaultValue: -1 },
	{
	    name: 'status',
	    convert: function(value, rec) {
		if (value) return value;
		if (rec.data.health) {
		    return rec.data.health;
		}

		if (rec.data.type === 'partition') {
		    return "";
		}

		return Proxmox.Utils.unknownText;
	    },
	},
	{
	    name: 'name',
	    convert: function(value, rec) {
		if (value) return value;
		if (rec.data.devpath) return rec.data.devpath;
		return undefined;
	    },
	},
	{
	    name: 'disk-type',
	    convert: function(value, rec) {
		if (value) return value;
		if (rec.data.type) return rec.data.type;
		return undefined;
	    },
	},
	'vendor', 'model', 'serial', 'rpm', 'type', 'wearout', 'health', 'mounted',
    ],
    idProperty: 'devpath',
});

Ext.define('Proxmox.DiskList', {
    extend: 'Ext.tree.Panel',
    alias: 'widget.pmxDiskList',

    supportsWipeDisk: false,

    rootVisible: false,

    emptyText: gettext('No Disks found'),

    stateful: true,
    stateId: 'tree-node-disks',

    controller: {
	xclass: 'Ext.app.ViewController',

	reload: function() {
	    let me = this;
	    let view = me.getView();

	    let extraParams = {};
	    if (view.includePartitions) {
		extraParams['include-partitions'] = 1;
	    }

	    let url = `${view.baseurl}/list`;
	    me.store.setProxy({
		type: 'proxmox',
		extraParams: extraParams,
		url: url,
	    });
	    me.store.load();
	},

	openSmartWindow: function() {
	    let me = this;
	    let view = me.getView();
	    let selection = view.getSelection();
	    if (!selection || selection.length < 1) return;

	    let rec = selection[0];
	    Ext.create('Proxmox.window.DiskSmart', {
		baseurl: view.baseurl,
		dev: rec.data.name,
	    }).show();
	},

	initGPT: function() {
	    let me = this;
	    let view = me.getView();
	    let selection = view.getSelection();
	    if (!selection || selection.length < 1) return;

	    let rec = selection[0];
	    Proxmox.Utils.API2Request({
		url: `${view.exturl}/initgpt`,
		waitMsgTarget: view,
		method: 'POST',
		params: { disk: rec.data.name },
		failure: response => Ext.Msg.alert(gettext('Error'), response.htmlStatus),
		success: function(response, options) {
		    Ext.create('Proxmox.window.TaskProgress', {
		        upid: response.result.data,
			taskDone: function() {
			    me.reload();
			},
			autoShow: true,
		    });
		},
	    });
	},

	wipeDisk: function() {
	    let me = this;
	    let view = me.getView();
	    let selection = view.getSelection();
	    if (!selection || selection.length < 1) return;

	    let rec = selection[0];
	    Proxmox.Utils.API2Request({
		url: `${view.exturl}/wipedisk`,
		waitMsgTarget: view,
		method: 'PUT',
		params: { disk: rec.data.name },
		failure: response => Ext.Msg.alert(gettext('Error'), response.htmlStatus),
		success: function(response, options) {
		    Ext.create('Proxmox.window.TaskProgress', {
		        upid: response.result.data,
			taskDone: function() {
			    me.reload();
			},
			autoShow: true,
		    });
		},
	    });
	},

	init: function(view) {
	    let nodename = view.nodename || 'localhost';
	    view.baseurl = `/api2/json/nodes/${nodename}/disks`;
	    view.exturl = `/api2/extjs/nodes/${nodename}/disks`;

	    this.store = Ext.create('Ext.data.Store', {
		model: 'pmx-disk-list',
	    });
	    this.store.on('load', this.onLoad, this);

	    Proxmox.Utils.monStoreErrors(view, this.store);
	    this.reload();
	},

	onLoad: function(store, records, success, operation) {
	    let me = this;
	    let view = this.getView();

	    if (!success) {
		Proxmox.Utils.setErrorMask(
		    view,
		    Proxmox.Utils.getResponseErrorMessage(operation.getError()),
		);
		return;
	    }

	    let disks = {};

	    for (const item of records) {
		let data = item.data;
		data.expanded = true;
		data.children = data.partitions ?? [];
		for (let p of data.children) {
		    p['disk-type'] = 'partition';
		    p.iconCls = 'fa fa-fw fa-hdd-o x-fa-tree';
		    p.used = p.used === 'filesystem' ? p.filesystem : p.used;
		    p.parent = data.devpath;
		    p.children = [];
		    p.leaf = true;
		}
		data.iconCls = 'fa fa-fw fa-hdd-o x-fa-tree';
		data.leaf = data.children.length === 0;

		if (!data.parent) {
		    disks[data.devpath] = data;
		}
	    }
	    for (const item of records) {
		let data = item.data;
		if (data.parent) {
		    disks[data.parent].leaf = false;
		    disks[data.parent].children.push(data);
		}
	    }

	    let children = [];
	    for (const [_, device] of Object.entries(disks)) {
		children.push(device);
	    }

	    view.setRootNode({
		expanded: true,
		children: children,
	    });

	    Proxmox.Utils.setErrorMask(view, false);
	},
    },

    renderDiskType: function(v) {
	if (v === undefined) return Proxmox.Utils.unknownText;
	switch (v) {
	    case 'ssd': return 'SSD';
	    case 'hdd': return 'Hard Disk';
	    case 'usb': return 'USB';
	    default: return v;
	}
    },

    renderDiskUsage: function(v, metaData, rec) {
	let extendedInfo = '';
	if (rec) {
	    let types = [];
	    if (rec.data['osdid-list'] && rec.data['osdid-list'].length > 0) {
		for (const id of rec.data['osdid-list'].sort()) {
		    types.push(`OSD.${id.toString()}`);
		}
	    } else if (rec.data.osdid !== undefined && rec.data.osdid >= 0) {
		types.push(`OSD.${rec.data.osdid.toString()}`);
	    }
	    if (rec.data.journals > 0) {
		types.push('Journal');
	    }
	    if (rec.data.db > 0) {
		types.push('DB');
	    }
	    if (rec.data.wal > 0) {
		types.push('WAL');
	    }
	    if (types.length > 0) {
		extendedInfo = `, Ceph (${types.join(', ')})`;
	    }
	}
	const formatMap = {
	    'bios': 'BIOS boot',
	    'zfsreserved': 'ZFS reserved',
	    'efi': 'EFI',
	    'lvm': 'LVM',
	    'zfs': 'ZFS',
	};

	v = formatMap[v] || v;
	return v ? `${v}${extendedInfo}` : Proxmox.Utils.noText;
    },

    columns: [
	{
	    xtype: 'treecolumn',
	    header: gettext('Device'),
	    width: 150,
	    sortable: true,
	    dataIndex: 'devpath',
	},
	{
	    header: gettext('Type'),
	    width: 80,
	    sortable: true,
	    dataIndex: 'disk-type',
	    renderer: function(v) {
		let me = this;
		return me.renderDiskType(v);
	    },
	},
	{
	    header: gettext('Usage'),
	    width: 150,
	    sortable: false,
	    renderer: function(v, metaData, rec) {
		let me = this;
		return me.renderDiskUsage(v, metaData, rec);
	    },
	    dataIndex: 'used',
	},
	{
	    header: gettext('Size'),
	    width: 100,
	    align: 'right',
	    sortable: true,
	    renderer: Proxmox.Utils.format_size,
	    dataIndex: 'size',
	},
	{
	    header: 'GPT',
	    width: 60,
	    align: 'right',
	    renderer: Proxmox.Utils.format_boolean,
	    dataIndex: 'gpt',
	},
	{
	    header: gettext('Vendor'),
	    width: 100,
	    sortable: true,
	    hidden: true,
	    renderer: Ext.String.htmlEncode,
	    dataIndex: 'vendor',
	},
	{
	    header: gettext('Model'),
	    width: 200,
	    sortable: true,
	    renderer: Ext.String.htmlEncode,
	    dataIndex: 'model',
	},
	{
	    header: gettext('Serial'),
	    width: 200,
	    sortable: true,
	    renderer: Ext.String.htmlEncode,
	    dataIndex: 'serial',
	},
	{
	    header: 'S.M.A.R.T.',
	    width: 100,
	    sortable: true,
	    renderer: Ext.String.htmlEncode,
	    dataIndex: 'status',
	},
	{
	    header: gettext('Mounted'),
	    width: 60,
	    align: 'right',
	    renderer: Proxmox.Utils.format_boolean,
	    dataIndex: 'mounted',
	},
	{
	    header: gettext('Wearout'),
	    width: 90,
	    sortable: true,
	    align: 'right',
	    dataIndex: 'wearout',
	    renderer: function(value) {
		if (Ext.isNumeric(value)) {
		    return (100 - value).toString() + '%';
		}
		return gettext('N/A');
	    },
	},
    ],

    listeners: {
	itemdblclick: 'openSmartWindow',
    },

    initComponent: function() {
	let me = this;

	let tbar = [
	    {
		text: gettext('Reload'),
		handler: 'reload',
	    },
	    {
		xtype: 'proxmoxButton',
		text: gettext('Show S.M.A.R.T. values'),
		parentXType: 'treepanel',
		disabled: true,
		enableFn: function(rec) {
		    if (!rec || rec.data.parent) {
			return false;
		    } else {
			return true;
		    }
		},
		handler: 'openSmartWindow',
	    },
	    {
		xtype: 'proxmoxButton',
		text: gettext('Initialize Disk with GPT'),
		parentXType: 'treepanel',
		disabled: true,
		enableFn: function(rec) {
		    if (!rec || rec.data.parent ||
			(rec.data.used && rec.data.used !== 'unused')) {
			return false;
		    } else {
			return true;
		    }
		},
		handler: 'initGPT',
	    },
	];

	if (me.supportsWipeDisk) {
	    tbar.push('-');
	    tbar.push({
		xtype: 'proxmoxButton',
		text: gettext('Wipe Disk'),
		parentXType: 'treepanel',
		dangerous: true,
		confirmMsg: function(rec) {
		    const data = rec.data;

		    let mainMessage = Ext.String.format(
			gettext('Are you sure you want to wipe {0}?'),
			data.devpath,
		    );
		    mainMessage += `<br> ${gettext('All data on the device will be lost!')}`;

		    const type = me.renderDiskType(data["disk-type"]);

		    let usage;
		    if (data.children.length > 0) {
			const partitionUsage = data.children.map(
			    partition => me.renderDiskUsage(partition.used),
			).join(', ');
			usage = `${gettext('Partitions')} (${partitionUsage})`;
		    } else {
			usage = me.renderDiskUsage(data.used, undefined, rec);
		    }

		    const size = Proxmox.Utils.format_size(data.size);
		    const serial = Ext.String.htmlEncode(data.serial);

		    let additionalInfo = `${gettext('Type')}: ${type}<br>`;
		    additionalInfo += `${gettext('Usage')}: ${usage}<br>`;
		    additionalInfo += `${gettext('Size')}: ${size}<br>`;
		    additionalInfo += `${gettext('Serial')}: ${serial}`;

		    return `${mainMessage}<br><br>${additionalInfo}`;
		},
		disabled: true,
		handler: 'wipeDisk',
	    });
	}

	me.tbar = tbar;

	me.callParent();
    },
});
// not realy a panel descendant, but its the best (existing) place for this
Ext.define('Proxmox.EOLNotice', {
    extend: 'Ext.Component',
    alias: 'widget.proxmoxEOLNotice',

    userCls: 'eol-notice',
    padding: '0 5',

    config: {
	product: '',
	version: '',
	eolDate: '',
	href: '',
    },

    autoEl: {
	tag: 'div',
	'data-qtip': gettext("You won't get any security fixes after the End-Of-Life date. Please consider upgrading."),
    },

    getIconCls: function() {
	let me = this;

	const now = new Date();
	const eolDate = new Date(me.eolDate);
	const warningCutoff = new Date(eolDate.getTime() - (21 * 24 * 60 * 60 * 1000)); // 3 weeks

	return now > warningCutoff ? 'critical fa-exclamation-triangle' : 'info-blue fa-info-circle';
    },

    initComponent: function() {
	let me = this;

	let iconCls = me.getIconCls();
	let href = me.href.startsWith('http') ? me.href : `https://${me.href}`;
	let message = Ext.String.format(
	    gettext('Support for {0} {1} ends on {2}'), me.product, me.version, me.eolDate);

	me.html = `<i class="fa ${iconCls}"></i>
	    <a href="${href}" target="_blank">${message} <i class="fa fa-external-link"></i></a>
	`;

	me.callParent();
    },
});
Ext.define('Proxmox.panel.InputPanel', {
    extend: 'Ext.panel.Panel',
    alias: ['widget.inputpanel'],
    listeners: {
	activate: function() {
	    // notify owning container that it should display a help button
	    if (this.onlineHelp) {
		Ext.GlobalEvents.fireEvent('proxmoxShowHelp', this.onlineHelp);
	    }
	},
	deactivate: function() {
	    if (this.onlineHelp) {
		Ext.GlobalEvents.fireEvent('proxmoxHideHelp', this.onlineHelp);
	    }
	},
    },
    border: false,

    // override this with an URL to a relevant chapter of the pve manual
    // setting this will display a help button in our parent panel
    onlineHelp: undefined,

    // will be set if the inputpanel has advanced items
    hasAdvanced: false,

    // if the panel has advanced items, this will determine if they are shown by default
    showAdvanced: false,

    // overwrite this to modify submit data
    onGetValues: function(values) {
	return values;
    },

    getValues: function(dirtyOnly) {
	let me = this;

	if (Ext.isFunction(me.onGetValues)) {
	    dirtyOnly = false;
	}

	let values = {};

	Ext.Array.each(me.query('[isFormField]'), function(field) {
	    if (!dirtyOnly || field.isDirty()) {
		Proxmox.Utils.assemble_field_data(values, field.getSubmitData());
	    }
	});

	return me.onGetValues(values);
    },

    setAdvancedVisible: function(visible) {
	let me = this;
	let advItems = me.getComponent('advancedContainer');
	if (advItems) {
	    advItems.setVisible(visible);
	}
    },

    onSetValues: function(values) {
	return values;
    },

    setValues: function(values) {
	let me = this;

	let form = me.up('form');

	values = me.onSetValues(values);

	Ext.iterate(values, function(fieldId, val) {
	    let fields = me.query('[isFormField][name=' + fieldId + ']');
	    for (const field of fields) {
		if (field) {
		    field.setValue(val);
		    if (form.trackResetOnLoad) {
			field.resetOriginalValue();
		    }
		}
	    }
	});
    },

    /**
     *  inputpanel, vbox
     * +---------------------------------------------------------------------+
     * |                             columnT                                 |
     * +---------------------------------------------------------------------+
     * |                          container, hbox                            |
     * |  +---------------+---------------+---------------+---------------+  |
     * |  |    column1    |    column2    |    column3    |    column4    |  |
     * |  | panel, anchor | panel, anchor | panel, anchor | panel, anchor |  |
     * |  +---------------+---------------+---------------+---------------+  |
     * +---------------------------------------------------------------------+
     * |                             columnB                                 |
     * +---------------------------------------------------------------------+
     */
    initComponent: function() {
	let me = this;

	let items;

	if (me.items) {
	    items = [
		{
		    layout: 'anchor',
		    items: me.items,
		},
	    ];
	    me.items = undefined;
	} else if (me.column4) {
	    items = [];
	    if (me.columnT) {
		items.push({
		    padding: '0 0 0 0',
		    layout: 'anchor',
		    items: me.columnT,
		});
	    }
	    items.push(
		{
		    layout: 'hbox',
		    defaults: {
			border: false,
			layout: 'anchor',
			flex: 1,
		    },
		    items: [
			{
			    padding: '0 10 0 0',
			    items: me.column1,
			},
			{
			    padding: '0 10 0 0',
			    items: me.column2,
			},
			{
			    padding: '0 10 0 0',
			    items: me.column3,
			},
			{
			    padding: '0 0 0 10',
			    items: me.column4,
			},
		    ],
		},
	    );
	    if (me.columnB) {
		items.push({
		    padding: '10 0 0 0',
		    layout: 'anchor',
		    items: me.columnB,
		});
	    }
	} else if (me.column1) {
	    items = [];
	    if (me.columnT) {
		items.push({
		    padding: '0 0 10 0',
		    layout: 'anchor',
		    items: me.columnT,
		});
	    }
	    items.push(
		{
		    layout: 'hbox',
		    defaults: {
			border: false,
			layout: 'anchor',
			flex: 1,
		    },
		    items: [
			{
			    padding: '0 10 0 0',
			    items: me.column1,
			},
			{
			    padding: '0 0 0 10',
			    items: me.column2 || [], // allow empty column
			},
		    ],
		},
	    );
	    if (me.columnB) {
		items.push({
		    padding: '10 0 0 0',
		    layout: 'anchor',
		    items: me.columnB,
		});
	    }
	} else {
	    throw "unsupported config";
	}

	let advItems;
	if (me.advancedItems) {
	    advItems = [
		{
		    layout: 'anchor',
		    items: me.advancedItems,
		},
	    ];
	    me.advancedItems = undefined;
	} else if (me.advancedColumn1 || me.advancedColumn2 || me.advancedColumnB) {
	    advItems = [
		{
		    layout: {
			type: 'hbox',
			align: 'begin',
		    },
		    defaults: {
			border: false,
			layout: 'anchor',
			flex: 1,
		    },
		    items: [
			{
			    padding: '0 10 0 0',
			    items: me.advancedColumn1 || [], // allow empty column
			},
			{
			    padding: '0 0 0 10',
			    items: me.advancedColumn2 || [], // allow empty column
			},
		    ],
		},
	    ];

	    me.advancedColumn1 = undefined;
	    me.advancedColumn2 = undefined;

	    if (me.advancedColumnB) {
		advItems.push({
		    padding: '10 0 0 0',
		    layout: 'anchor',
		    items: me.advancedColumnB,
		});
		me.advancedColumnB = undefined;
	    }
	}

	if (advItems) {
	    me.hasAdvanced = true;
	    advItems.unshift({
		xtype: 'box',
		hidden: false,
		border: true,
		autoEl: {
		    tag: 'hr',
		},
	    });
	    items.push({
		xtype: 'container',
		itemId: 'advancedContainer',
		hidden: !me.showAdvanced,
		defaults: {
		    border: false,
		},
		items: advItems,
	    });
	}

	Ext.apply(me, {
	    layout: {
		type: 'vbox',
		align: 'stretch',
	    },
	    defaultType: 'container',
	    items: items,
	});

	me.callParent();
    },
});
Ext.define('Proxmox.widget.Info', {
    extend: 'Ext.container.Container',
    alias: 'widget.pmxInfoWidget',

    layout: {
	type: 'vbox',
	align: 'stretch',
    },

    value: 0,
    maximum: 1,
    printBar: true,
    items: [
	{
	    xtype: 'component',
	    itemId: 'label',
	    data: {
		title: '',
		usage: '',
		iconCls: undefined,
	    },
	    tpl: [
		'<div class="left-aligned">',
		'<tpl if="iconCls">',
		'<i class="{iconCls}"></i> ',
		'</tpl>',
		'{title}</div>&nbsp;<div class="right-aligned">{usage}</div>',
	    ],
	},
	{
	    height: 2,
	    border: 0,
	},
	{
	    xtype: 'progressbar',
	    itemId: 'progress',
	    height: 5,
	    value: 0,
	    animate: true,
	},
    ],

    warningThreshold: 0.75,
    criticalThreshold: 0.9,

    setPrintBar: function(enable) {
	var me = this;
	me.printBar = enable;
	me.getComponent('progress').setVisible(enable);
    },

    setIconCls: function(iconCls) {
	var me = this;
	me.getComponent('label').data.iconCls = iconCls;
    },

    setData: function(data) {
	this.updateValue(data.text, data.usage);
    },

    updateValue: function(text, usage) {
	let me = this;

	if (me.lastText === text && me.lastUsage === usage) {
	    return;
	}
	me.lastText = text;
	me.lastUsage = usage;

	var label = me.getComponent('label');
	label.update(Ext.apply(label.data, { title: me.title, usage: text }));

	if (usage !== undefined && me.printBar && Ext.isNumeric(usage) && usage >= 0) {
	    let progressBar = me.getComponent('progress');
	    progressBar.updateProgress(usage, '');
	    if (usage > me.criticalThreshold) {
		progressBar.removeCls('warning');
		progressBar.addCls('critical');
	    } else if (usage > me.warningThreshold) {
		progressBar.removeCls('critical');
		progressBar.addCls('warning');
	    } else {
		progressBar.removeCls('warning');
		progressBar.removeCls('critical');
	    }
	}
    },

    initComponent: function() {
	var me = this;

	if (!me.title) {
	    throw "no title defined";
	}

	me.callParent();

	me.getComponent('progress').setVisible(me.printBar);

	me.updateValue(me.text, me.value);
	me.setIconCls(me.iconCls);
    },

});
/*
 * Display log entries in a panel with scrollbar
 * The log entries are automatically refreshed via a background task,
 * with newest entries coming at the bottom
 */
Ext.define('Proxmox.panel.LogView', {
    extend: 'Ext.panel.Panel',
    xtype: 'proxmoxLogView',

    pageSize: 510,
    viewBuffer: 50,
    lineHeight: 16,

    scrollToEnd: true,

    // callback for load failure, used for ceph
    failCallback: undefined,

    controller: {
	xclass: 'Ext.app.ViewController',

	updateParams: function() {
	    let me = this;
	    let viewModel = me.getViewModel();

	    if (viewModel.get('hide_timespan') || viewModel.get('livemode')) {
		return;
	    }

	    let since = viewModel.get('since');
	    let until = viewModel.get('until');

	    if (since > until) {
		Ext.Msg.alert('Error', 'Since date must be less equal than Until date.');
		return;
	    }

	    let submitFormat = viewModel.get('submitFormat');

	    viewModel.set('params.since', Ext.Date.format(since, submitFormat));
	    if (submitFormat === 'Y-m-d') {
		viewModel.set('params.until', Ext.Date.format(until, submitFormat) + ' 23:59:59');
	    } else {
		viewModel.set('params.until', Ext.Date.format(until, submitFormat));
	    }

	    me.getView().loadTask.delay(200);
	},

	scrollPosBottom: function() {
	    let view = this.getView();
	    let pos = view.getScrollY();
	    let maxPos = view.getScrollable().getMaxPosition().y;
	    return maxPos - pos;
	},

	updateView: function(lines, first, total) {
	    let me = this;
	    let view = me.getView();
	    let viewModel = me.getViewModel();
	    let content = me.lookup('content');
	    let data = viewModel.get('data');

	    if (first === data.first && total === data.total && lines.length === data.lines) {
		// before there is any real output, we get 'no output' as a single line, so always
		// update if we only have one to be sure to catch the first real line of output
		if (total !== 1) {
		    return; // same content, skip setting and scrolling
		}
	    }
	    viewModel.set('data', {
		first: first,
		total: total,
		lines: lines.length,
	    });

	    let scrollPos = me.scrollPosBottom();
	    let scrollToBottom = view.scrollToEnd && scrollPos <= 5;

	    if (!scrollToBottom) {
		// so that we have the 'correct' height for the text
		lines.length = total;
	    }

	    content.update(lines.join('<br>'));

	    if (scrollToBottom) {
		let scroller = view.getScrollable();
		scroller.suspendEvent('scroll');
		view.scrollTo(0, Infinity);
		me.updateStart(true);
		scroller.resumeEvent('scroll');
	    }
	},

	doLoad: function() {
	    let me = this;
	    if (me.running) {
		me.requested = true;
		return;
	    }
	    me.running = true;
	    let view = me.getView();
	    let viewModel = me.getViewModel();
	    Proxmox.Utils.API2Request({
		url: me.getView().url,
		params: viewModel.get('params'),
		method: 'GET',
		success: function(response) {
		    if (me.isDestroyed) {
			return;
		    }
		    Proxmox.Utils.setErrorMask(me, false);
		    let total = response.result.total;
		    let lines = [];
		    let first = Infinity;

		    Ext.Array.each(response.result.data, function(line) {
			if (first > line.n) {
			    first = line.n;
			}
			lines[line.n - 1] = Ext.htmlEncode(line.t);
		    });

		    me.updateView(lines, first - 1, total);
		    me.running = false;
		    if (me.requested) {
			me.requested = false;
			view.loadTask.delay(200);
		    }
		},
		failure: function(response) {
		    if (view.failCallback) {
			view.failCallback(response);
		    } else {
			let msg = response.htmlStatus;
			Proxmox.Utils.setErrorMask(me, msg);
		    }
		    me.running = false;
		    if (me.requested) {
			me.requested = false;
			view.loadTask.delay(200);
		    }
		},
	    });
	},

	updateStart: function(scrolledToBottom, targetLine) {
	    let me = this;
	    let view = me.getView(), viewModel = me.getViewModel();

	    let limit = viewModel.get('params.limit');
	    let total = viewModel.get('data.total');

	    // heuristic: scroll up? -> load more in front; scroll down? -> load more at end
	    let startRatio = view.lastTargetLine && view.lastTargetLine > targetLine ? 2/3 : 1/3;
	    view.lastTargetLine = targetLine;

	    let newStart = scrolledToBottom
		? Math.trunc(total - limit, 10)
		: Math.trunc(targetLine - (startRatio * limit) + 10);

	    viewModel.set('params.start', Math.max(newStart, 0));

	    view.loadTask.delay(200);
	},

	onScroll: function(x, y) {
	    let me = this;
	    let view = me.getView(), viewModel = me.getViewModel();

	    let line = view.getScrollY() / view.lineHeight;
	    let viewLines = view.getHeight() / view.lineHeight;

	    let viewStart = Math.max(Math.trunc(line - 1 - view.viewBuffer), 0);
	    let viewEnd = Math.trunc(line + viewLines + 1 + view.viewBuffer);

	    let { start, limit } = viewModel.get('params');

	    let margin = start < 20 ? 0 : 20;

	    if (viewStart < start + margin || viewEnd > start + limit - margin) {
		me.updateStart(false, line);
	    }
	},

	onLiveMode: function() {
	    let me = this;
	    let viewModel = me.getViewModel();
	    viewModel.set('livemode', true);
	    viewModel.set('params', { start: 0, limit: 510 });

	    let view = me.getView();
	    delete view.content;
	    view.scrollToEnd = true;
	    me.updateView([], true, false);
	},

	onTimespan: function() {
	    let me = this;
	    me.getViewModel().set('livemode', false);
	    me.updateView([], false);
	    // Directly apply currently selected values without update
	    // button click.
	    me.updateParams();
	},

	init: function(view) {
	    let me = this;

	    if (!view.url) {
		throw "no url specified";
	    }

	    let viewModel = this.getViewModel();
	    let since = new Date();
	    since.setDate(since.getDate() - 3);
	    viewModel.set('until', new Date());
	    viewModel.set('since', since);
	    viewModel.set('params.limit', view.pageSize);
	    viewModel.set('hide_timespan', !view.log_select_timespan);
	    viewModel.set('submitFormat', view.submitFormat);
	    me.lookup('content').setStyle('line-height', `${view.lineHeight}px`);

	    view.loadTask = new Ext.util.DelayedTask(me.doLoad, me);

	    me.updateParams();
	    view.task = Ext.TaskManager.start({
		run: () => {
		    if (!view.isVisible() || !view.scrollToEnd) {
			return;
		    }
		    if (me.scrollPosBottom() <= 5) {
			view.loadTask.delay(200);
		    }
		},
		interval: 1000,
	    });
	},
    },

    onDestroy: function() {
	let me = this;
	me.loadTask.cancel();
	Ext.TaskManager.stop(me.task);
    },

    // for user to initiate a load from outside
    requestUpdate: function() {
	let me = this;
	me.loadTask.delay(200);
    },

    viewModel: {
	data: {
	    until: null,
	    since: null,
	    submitFormat: 'Y-m-d',
	    livemode: true,
	    hide_timespan: false,
	    data: {
		start: 0,
		total: 0,
		textlen: 0,
	    },
	    params: {
		start: 0,
		limit: 510,
	    },
	},
    },

    layout: 'auto',
    bodyPadding: 5,
    scrollable: {
	x: 'auto',
	y: 'auto',
	listeners: {
	    // we have to have this here, since we cannot listen to events of the scroller in
	    // the viewcontroller (extjs bug?), nor does the panel have a 'scroll' event'
	    scroll: {
		fn: function(scroller, x, y) {
		    let controller = this.component.getController();
		    if (controller) { // on destroy, controller can be gone
			controller.onScroll(x, y);
		    }
		},
		buffer: 200,
	    },
	},
    },

    tbar: {
	bind: {
	    hidden: '{hide_timespan}',
	},
	items: [
	    '->',
	    {
		xtype: 'segmentedbutton',
		items: [
		    {
			text: gettext('Live Mode'),
			bind: {
			    pressed: '{livemode}',
			},
			handler: 'onLiveMode',
		    },
		    {
			text: gettext('Select Timespan'),
			bind: {
			    pressed: '{!livemode}',
			},
			handler: 'onTimespan',
		    },
		],
	    },
	    {
		xtype: 'box',
		autoEl: { cn: gettext('Since') + ':' },
		bind: {
		    disabled: '{livemode}',
		},
	    },
	    {
		xtype: 'proxmoxDateTimeField',
		name: 'since_date',
		reference: 'since',
		format: 'Y-m-d',
		bind: {
		    disabled: '{livemode}',
		    value: '{since}',
		    maxValue: '{until}',
		    submitFormat: '{submitFormat}',
		},
	    },
	    {
		xtype: 'box',
		autoEl: { cn: gettext('Until') + ':' },
		bind: {
		    disabled: '{livemode}',
		},
	    },
	    {
		xtype: 'proxmoxDateTimeField',
		name: 'until_date',
		reference: 'until',
		format: 'Y-m-d',
		bind: {
		    disabled: '{livemode}',
		    value: '{until}',
		    minValue: '{since}',
		    submitFormat: '{submitFormat}',
		},
	    },
	    {
		xtype: 'button',
		text: 'Update',
		handler: 'updateParams',
		bind: {
		    disabled: '{livemode}',
		},
	    },
	],
    },

    items: [
	{
	    xtype: 'box',
	    reference: 'content',
	    style: {
		font: 'normal 11px tahoma, arial, verdana, sans-serif',
		'white-space': 'pre',
	    },
	},
    ],
});
Ext.define('Proxmox.widget.NodeInfoRepoStatus', {
    extend: 'Proxmox.widget.Info',
    alias: 'widget.pmxNodeInfoRepoStatus',

    title: gettext('Repository Status'),

    colspan: 2,

    printBar: false,

    product: undefined,
    repoLink: undefined,

    viewModel: {
	data: {
	    subscriptionActive: '',
	    noSubscriptionRepo: '',
	    enterpriseRepo: '',
	    testRepo: '',
	},

	formulas: {
	    repoStatus: function(get) {
		if (get('subscriptionActive') === '' || get('enterpriseRepo') === '') {
		    return '';
		}

		if (get('noSubscriptionRepo') || get('testRepo')) {
		    return 'non-production';
		} else if (get('subscriptionActive') && get('enterpriseRepo')) {
		    return 'ok';
		} else if (!get('subscriptionActive') && get('enterpriseRepo')) {
		    return 'no-sub';
		} else if (!get('enterpriseRepo') || !get('noSubscriptionRepo') || !get('testRepo')) {
		    return 'no-repo';
		}
		return 'unknown';
	    },

	    repoStatusMessage: function(get) {
		let me = this;
		let view = me.getView();

		const status = get('repoStatus');

		let repoLink = ` <a data-qtip="${gettext("Open Repositories Panel")}"
		    href="${view.repoLink}">
		    <i class="fa black fa-chevron-right txt-shadow-hover"></i>
		    </a>`;

		return Proxmox.Utils.formatNodeRepoStatus(status, view.product) + repoLink;
	    },
	},
    },

    setValue: function(value) { // for binding below
	this.updateValue(value);
    },

    bind: {
	value: '{repoStatusMessage}',
    },

    setRepositoryInfo: function(standardRepos) {
	let me = this;
	let vm = me.getViewModel();

	for (const standardRepo of standardRepos) {
	    const handle = standardRepo.handle;
	    const status = standardRepo.status || 0;

	    if (handle === "enterprise") {
		vm.set('enterpriseRepo', status);
	    } else if (handle === "no-subscription") {
		vm.set('noSubscriptionRepo', status);
	    } else if (handle === "test") {
		vm.set('testRepo', status);
	    }
	}
    },

    setSubscriptionStatus: function(status) {
	let me = this;
	let vm = me.getViewModel();

	vm.set('subscriptionActive', status);
    },

    initComponent: function() {
	let me = this;

	if (me.product === undefined) {
	    throw "no product name provided";
	}

	if (me.repoLink === undefined) {
	    throw "no repo link href provided";
	}

	me.callParent();
    },
});
Ext.define('Proxmox.panel.NotificationConfigViewModel', {
    extend: 'Ext.app.ViewModel',

    alias: 'viewmodel.pmxNotificationConfigPanel',

    formulas: {
	builtinSelected: function(get) {
	    let origin = get('selection')?.get('origin');
	    return origin === 'modified-builtin' || origin === 'builtin';
	},
	removeButtonText: get => get('builtinSelected') ? gettext('Reset') : gettext('Remove'),
	removeButtonConfirmMessage: function(get) {
	    if (get('builtinSelected')) {
		return gettext('Do you want to reset {0} to its default settings?');
	    } else {
		// Use default message provided by the button
		return undefined;
	    }
	},
    },

});

Ext.define('Proxmox.panel.NotificationConfigView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.pmxNotificationConfigView',
    mixins: ['Proxmox.Mixin.CBind'],
    onlineHelp: 'chapter_notifications',
    layout: {
	type: 'border',
    },

    items: [
	{
	    region: 'center',
	    border: false,
	    xtype: 'pmxNotificationEndpointView',
	    cbind: {
		baseUrl: '{baseUrl}',
	    },
	},
	{
	    region: 'south',
	    height: '50%',
	    border: false,
	    collapsible: true,
	    animCollapse: false,
	    xtype: 'pmxNotificationMatcherView',
	    cbind: {
		baseUrl: '{baseUrl}',
	    },
	},
    ],
});

Ext.define('Proxmox.panel.NotificationEndpointView', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.pmxNotificationEndpointView',

    title: gettext('Notification Targets'),

    viewModel: {
	type: 'pmxNotificationConfigPanel',
    },

    bind: {
	selection: '{selection}',
    },

    controller: {
	xclass: 'Ext.app.ViewController',

	openEditWindow: function(endpointType, endpoint) {
	    let me = this;

	    Ext.create('Proxmox.window.EndpointEditBase', {
		baseUrl: me.getView().baseUrl,
		type: endpointType,

		name: endpoint,
		autoShow: true,
		listeners: {
		    destroy: () => me.reload(),
		},
	    });
	},

	openEditForSelectedItem: function() {
	    let me = this;
	    let view = me.getView();

	    let selection = view.getSelection();
	    if (selection.length < 1) {
		return;
	    }

	    me.openEditWindow(selection[0].data.type, selection[0].data.name);
	},

	reload: function() {
	    let me = this;
	    let view = me.getView();
	    view.getStore().rstore.load();
	    this.getView().setSelection(null);
	},

	testEndpoint: function() {
	    let me = this;
	    let view = me.getView();

	    let selection = view.getSelection();
	    if (selection.length < 1) {
		return;
	    }

	    let target = selection[0].data.name;

	    Ext.Msg.confirm(
		gettext("Notification Target Test"),
		Ext.String.format(gettext("Do you want to send a test notification to '{0}'?"), target),
		function(decision) {
		    if (decision !== "yes") {
			return;
		    }

		    Proxmox.Utils.API2Request({
			method: 'POST',
			url: `${view.baseUrl}/targets/${target}/test`,

			success: function(response, opt) {
			    Ext.Msg.show({
				title: gettext('Notification Target Test'),
				message: Ext.String.format(
				    gettext("Sent test notification to '{0}'."),
				    target,
				),
				buttons: Ext.Msg.OK,
				icon: Ext.Msg.INFO,
			    });
			},
			autoErrorAlert: true,
		    });
	    });
	},
    },

    listeners: {
	itemdblclick: 'openEditForSelectedItem',
	activate: 'reload',
    },

    emptyText: gettext('No notification targets configured'),

    columns: [
	{
	    dataIndex: 'disable',
	    text: gettext('Enable'),
	    renderer: (disable) => Proxmox.Utils.renderEnabledIcon(!disable),
	    align: 'center',
	},
	{
	    dataIndex: 'name',
	    text: gettext('Target Name'),
	    renderer: Ext.String.htmlEncode,
	    flex: 2,
	},
	{
	    dataIndex: 'type',
	    text: gettext('Type'),
	    renderer: Ext.String.htmlEncode,
	    flex: 1,
	},
	{
	    dataIndex: 'comment',
	    text: gettext('Comment'),
	    renderer: Ext.String.htmlEncode,
	    flex: 3,
	},
	{
	    dataIndex: 'origin',
	    text: gettext('Origin'),
	    renderer: (origin) => {
		switch (origin) {
		    case 'user-created': return gettext('Custom');
		    case 'modified-builtin': return gettext('Built-In (modified)');
		    case 'builtin': return gettext('Built-In');
		}

		// Should not happen...
		return 'unknown';
	    },
	},
    ],

    store: {
	type: 'diff',
	autoDestroy: true,
	autoDestroyRstore: true,
	rstore: {
	    type: 'update',
	    storeid: 'proxmox-notification-endpoints',
	    model: 'proxmox-notification-endpoints',
	    autoStart: true,
	},
	sorters: 'name',
    },

    initComponent: function() {
	let me = this;

	if (!me.baseUrl) {
	    throw "baseUrl is not set!";
	}

	let menuItems = [];
	for (const [endpointType, config] of Object.entries(
	    Proxmox.Schema.notificationEndpointTypes).sort()) {
	    menuItems.push({
		text: config.name,
		iconCls: 'fa fa-fw ' + (config.iconCls || 'fa-bell-o'),
		handler: () => me.controller.openEditWindow(endpointType),
	    });
	}

	Ext.apply(me, {
	    tbar: [
		{
		    text: gettext('Add'),
		    menu: menuItems,
		},
		{
		    xtype: 'proxmoxButton',
		    text: gettext('Modify'),
		    handler: 'openEditForSelectedItem',
		    disabled: true,
		},
		{
		    xtype: 'proxmoxStdRemoveButton',
		    callback: 'reload',
		    bind: {
			text: '{removeButtonText}',
			customConfirmationMessage: '{removeButtonConfirmMessage}',
		    },
		    getUrl: function(rec) {
			return `${me.baseUrl}/endpoints/${rec.data.type}/${rec.getId()}`;
		    },
		    enableFn: (rec) => {
			let origin = rec.get('origin');
			return origin === 'user-created' || origin === 'modified-builtin';
		    },
		},
		'-',
		{
		    xtype: 'proxmoxButton',
		    text: gettext('Test'),
		    handler: 'testEndpoint',
		    disabled: true,
		},
	    ],
	});

	me.callParent();
	me.store.rstore.proxy.setUrl(`/api2/json/${me.baseUrl}/targets`);
    },
});

Ext.define('Proxmox.panel.NotificationMatcherView', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.pmxNotificationMatcherView',

    title: gettext('Notification Matchers'),

    controller: {
	xclass: 'Ext.app.ViewController',

	openEditWindow: function(matcher) {
	    let me = this;

	    Ext.create('Proxmox.window.NotificationMatcherEdit', {
		baseUrl: me.getView().baseUrl,
		name: matcher,
		autoShow: true,
		listeners: {
		    destroy: () => me.reload(),
		},
	    });
	},

	openEditForSelectedItem: function() {
	    let me = this;
	    let view = me.getView();

	    let selection = view.getSelection();
	    if (selection.length < 1) {
		return;
	    }

	    me.openEditWindow(selection[0].data.name);
	},

	reload: function() {
	    this.getView().getStore().rstore.load();
	    this.getView().setSelection(null);
	},
    },

    viewModel: {
	type: 'pmxNotificationConfigPanel',
    },

    bind: {
	selection: '{selection}',
    },

    listeners: {
	itemdblclick: 'openEditForSelectedItem',
	activate: 'reload',
    },

    emptyText: gettext('No notification matchers configured'),

    columns: [
	{
	    dataIndex: 'disable',
	    text: gettext('Enable'),
	    renderer: (disable) => Proxmox.Utils.renderEnabledIcon(!disable),
	    align: 'center',
	},
	{
	    dataIndex: 'name',
	    text: gettext('Matcher Name'),
	    renderer: Ext.String.htmlEncode,
	    flex: 1,
	},
	{
	    dataIndex: 'comment',
	    text: gettext('Comment'),
	    renderer: Ext.String.htmlEncode,
	    flex: 2,
	},
	{
	    dataIndex: 'origin',
	    text: gettext('Origin'),
	    renderer: (origin) => {
		switch (origin) {
		    case 'user-created': return gettext('Custom');
		    case 'modified-builtin': return gettext('Built-In (modified)');
		    case 'builtin': return gettext('Built-In');
		}

		// Should not happen...
		return 'unknown';
	    },
	},
    ],

    store: {
	type: 'diff',
	autoDestroy: true,
	autoDestroyRstore: true,
	rstore: {
	    type: 'update',
	    storeid: 'proxmox-notification-matchers',
	    model: 'proxmox-notification-matchers',
	    autoStart: true,
	},
	sorters: 'name',
    },

    initComponent: function() {
	let me = this;

	if (!me.baseUrl) {
	    throw "baseUrl is not set!";
	}

	Ext.apply(me, {
	    tbar: [
		{
		    xtype: 'proxmoxButton',
		    text: gettext('Add'),
		    handler: () => me.getController().openEditWindow(),
		    selModel: false,
		},
		{
		    xtype: 'proxmoxButton',
		    text: gettext('Modify'),
		    handler: 'openEditForSelectedItem',
		    disabled: true,
		},
		{
		    xtype: 'proxmoxStdRemoveButton',
		    callback: 'reload',
		    bind: {
			text: '{removeButtonText}',
			customConfirmationMessage: '{removeButtonConfirmMessage}',
		    },
		    baseurl: `${me.baseUrl}/matchers`,
		    enableFn: (rec) => {
			let origin = rec.get('origin');
			return origin === 'user-created' || origin === 'modified-builtin';
		    },
		},
	    ],
	});

	me.callParent();
	me.store.rstore.proxy.setUrl(`/api2/json/${me.baseUrl}/matchers`);
    },
});
/*
 * Display log entries in a panel with scrollbar
 * The log entries are automatically refreshed via a background task,
 * with newest entries coming at the bottom
 */
Ext.define('Proxmox.panel.JournalView', {
    extend: 'Ext.panel.Panel',
    xtype: 'proxmoxJournalView',

    numEntries: 500,
    lineHeight: 16,

    scrollToEnd: true,

    controller: {
	xclass: 'Ext.app.ViewController',

	updateParams: function() {
	    let me = this;
	    let viewModel = me.getViewModel();
	    let since = viewModel.get('since');
	    let until = viewModel.get('until');

	    since.setHours(0, 0, 0, 0);
	    until.setHours(0, 0, 0, 0);
	    until.setDate(until.getDate()+1);

	    me.getView().loadTask.delay(200, undefined, undefined, [
		false,
		false,
		Ext.Date.format(since, "U"),
		Ext.Date.format(until, "U"),
	    ]);
	},

	scrollPosBottom: function() {
	    let view = this.getView();
	    let pos = view.getScrollY();
	    let maxPos = view.getScrollable().getMaxPosition().y;
	    return maxPos - pos;
	},

	scrollPosTop: function() {
	    let view = this.getView();
	    return view.getScrollY();
	},

	updateScroll: function(livemode, num, scrollPos, scrollPosTop) {
	    let me = this;
	    let view = me.getView();

	    if (!livemode) {
		setTimeout(function() { view.scrollTo(0, 0); }, 10);
	    } else if (view.scrollToEnd && scrollPos <= 5) {
		setTimeout(function() { view.scrollTo(0, Infinity); }, 10);
	    } else if (!view.scrollToEnd && scrollPosTop < 20 * view.lineHeight) {
		setTimeout(function() { view.scrollTo(0, (num * view.lineHeight) + scrollPosTop); }, 10);
	    }
	},

	updateView: function(lines, livemode, top) {
	    let me = this;
	    let view = me.getView();
	    let viewmodel = me.getViewModel();
	    if (!viewmodel || viewmodel.get('livemode') !== livemode) {
		return; // we switched mode, do not update the content
	    }
	    let contentEl = me.lookup('content');

	    // save old scrollpositions
	    let scrollPos = me.scrollPosBottom();
	    let scrollPosTop = me.scrollPosTop();

	    let newend = lines.shift();
	    let newstart = lines.pop();

	    let num = lines.length;
	    let text = lines.map(Ext.htmlEncode).join('<br>');

	    let contentChanged = true;

	    if (!livemode) {
		if (num) {
		    view.content = text;
		} else {
		    view.content = 'nothing logged or no timespan selected';
		}
	    } else {
		// update content
		if (top && num) {
		    view.content = view.content ? text + '<br>' + view.content : text;
		} else if (!top && num) {
		    view.content = view.content ? view.content + '<br>' + text : text;
		} else {
		    contentChanged = false;
		}

		// update cursors
		if (!top || !view.startcursor) {
		    view.startcursor = newstart;
		}

		if (top || !view.endcursor) {
		    view.endcursor = newend;
		}
	    }

	    if (contentChanged) {
		contentEl.update(view.content);
	    }

	    me.updateScroll(livemode, num, scrollPos, scrollPosTop);
	},

	doLoad: function(livemode, top, since, until) {
	    let me = this;
	    if (me.running) {
		me.requested = true;
		return;
	    }
	    me.running = true;
	    let view = me.getView();
	    let params = {
		lastentries: view.numEntries || 500,
	    };
	    if (livemode) {
		if (!top && view.startcursor) {
		    params = {
			startcursor: view.startcursor,
		    };
		} else if (view.endcursor) {
		    params.endcursor = view.endcursor;
		}
	    } else {
		params = {
		    since: since,
		    until: until,
		};
	    }
	    Proxmox.Utils.API2Request({
		url: view.url,
		params: params,
		waitMsgTarget: !livemode ? view : undefined,
		method: 'GET',
		success: function(response) {
		    if (me.isDestroyed) {
			return;
		    }
		    Proxmox.Utils.setErrorMask(me, false);
		    let lines = response.result.data;
		    me.updateView(lines, livemode, top);
		    me.running = false;
		    if (me.requested) {
			me.requested = false;
			view.loadTask.delay(200);
		    }
		},
		failure: function(response) {
		    let msg = response.htmlStatus;
		    Proxmox.Utils.setErrorMask(me, msg);
		    me.running = false;
		    if (me.requested) {
			me.requested = false;
			view.loadTask.delay(200);
		    }
		},
	    });
	},

	onScroll: function(x, y) {
	    let me = this;
	    let view = me.getView();
	    let viewmodel = me.getViewModel();
	    let livemode = viewmodel.get('livemode');
	    if (!livemode) {
		return;
	    }

	    if (me.scrollPosTop() < 20*view.lineHeight) {
		view.scrollToEnd = false;
		view.loadTask.delay(200, undefined, undefined, [true, true]);
	    } else if (me.scrollPosBottom() <= 5) {
		view.scrollToEnd = true;
	    }
	},

	init: function(view) {
	    let me = this;

	    if (!view.url) {
		throw "no url specified";
	    }

	    let viewmodel = me.getViewModel();
	    let viewModel = this.getViewModel();
	    let since = new Date();
	    since.setDate(since.getDate() - 3);
	    viewModel.set('until', new Date());
	    viewModel.set('since', since);
	    me.lookup('content').setStyle('line-height', view.lineHeight + 'px');

	    view.loadTask = new Ext.util.DelayedTask(me.doLoad, me, [true, false]);

	    view.task = Ext.TaskManager.start({
		run: function() {
		    if (!view.isVisible() || !view.scrollToEnd || !viewmodel.get('livemode')) {
			return;
		    }

		    if (me.scrollPosBottom() <= 5) {
			view.loadTask.delay(200, undefined, undefined, [true, false]);
		    }
		},
		interval: 1000,
	    });
	},

	onLiveMode: function() {
	    let me = this;
	    let view = me.getView();
	    delete view.startcursor;
	    delete view.endcursor;
	    delete view.content;
	    me.getViewModel().set('livemode', true);
	    view.scrollToEnd = true;
	    me.updateView([], true, false);
	},

	onTimespan: function() {
	    let me = this;
	    me.getViewModel().set('livemode', false);
	    me.updateView([], false);
	},
    },

    onDestroy: function() {
	let me = this;
	me.loadTask.cancel();
	Ext.TaskManager.stop(me.task);
	delete me.content;
    },

    // for user to initiate a load from outside
    requestUpdate: function() {
	let me = this;
	me.loadTask.delay(200);
    },

    viewModel: {
	data: {
	    livemode: true,
	    until: null,
	    since: null,
	},
    },

    layout: 'auto',
    bodyPadding: 5,
    scrollable: {
	x: 'auto',
	y: 'auto',
	listeners: {
	    // we have to have this here, since we cannot listen to events
	    // of the scroller in the viewcontroller (extjs bug?), nor does
	    // the panel have a 'scroll' event'
	    scroll: {
		fn: function(scroller, x, y) {
		    let controller = this.component.getController();
		    if (controller) { // on destroy, controller can be gone
			controller.onScroll(x, y);
		    }
		},
		buffer: 200,
	    },
	},
    },

    tbar: {

	items: [
	    '->',
	    {
		xtype: 'segmentedbutton',
		items: [
		    {
			text: gettext('Live Mode'),
			bind: {
			    pressed: '{livemode}',
			},
			handler: 'onLiveMode',
		    },
		    {
			text: gettext('Select Timespan'),
			bind: {
			    pressed: '{!livemode}',
			},
			handler: 'onTimespan',
		    },
		],
	    },
	    {
		xtype: 'box',
		bind: { disabled: '{livemode}' },
		autoEl: { cn: gettext('Since') + ':' },
	    },
	    {
		xtype: 'datefield',
		name: 'since_date',
		reference: 'since',
		format: 'Y-m-d',
		bind: {
		    disabled: '{livemode}',
		    value: '{since}',
		    maxValue: '{until}',
		},
	    },
	    {
		xtype: 'box',
		bind: { disabled: '{livemode}' },
		autoEl: { cn: gettext('Until') + ':' },
	    },
	    {
		xtype: 'datefield',
		name: 'until_date',
		reference: 'until',
		format: 'Y-m-d',
		bind: {
		    disabled: '{livemode}',
		    value: '{until}',
		    minValue: '{since}',
		},
	    },
	    {
		xtype: 'button',
		text: 'Update',
		reference: 'updateBtn',
		handler: 'updateParams',
		bind: {
		    disabled: '{livemode}',
		},
	    },
	],
    },

    items: [
	{
	    xtype: 'box',
	    reference: 'content',
	    style: {
		font: 'normal 11px tahoma, arial, verdana, sans-serif',
		'white-space': 'pre',
	    },
	},
    ],
});
Ext.define('pmx-permissions', {
    extend: 'Ext.data.TreeModel',
    fields: [
	'text', 'type',
	{
	    type: 'boolean', name: 'propagate',
	},
    ],
});

Ext.define('Proxmox.panel.PermissionViewPanel', {
    extend: 'Ext.tree.Panel',
    xtype: 'proxmoxPermissionViewPanel',

    scrollable: true,
    layout: 'fit',
    rootVisible: false,
    animate: false,
    sortableColumns: false,

    auth_id_name: "userid",
    auth_id: undefined,

    columns: [
	{
	    xtype: 'treecolumn',
	    header: gettext('Path') + '/' + gettext('Permission'),
	    dataIndex: 'text',
	    flex: 6,
	},
	{
	    header: gettext('Propagate'),
	    dataIndex: 'propagate',
	    flex: 1,
	    renderer: function(value) {
		if (Ext.isDefined(value)) {
		    return Proxmox.Utils.format_boolean(value);
		}
		return '';
	    },
	},
    ],

    initComponent: function() {
	let me = this;

	Proxmox.Utils.API2Request({
	    url: '/access/permissions?' + encodeURIComponent(me.auth_id_name) + '=' + encodeURIComponent(me.auth_id),
	    method: 'GET',
	    failure: function(response, opts) {
		Proxmox.Utils.setErrorMask(me, response.htmlStatus);
	    },
	    success: function(response, opts) {
		Proxmox.Utils.setErrorMask(me, false);
		let result = Ext.decode(response.responseText);
		let data = result.data || {};

		let root = {
		    name: '__root',
		    expanded: true,
		    children: [],
		};
		let idhash = {
		    '/': {
			children: [],
			text: '/',
			type: 'path',
		    },
		};
		Ext.Object.each(data, function(path, perms) {
		    let path_item = {
			text: path,
			type: 'path',
			children: [],
		    };
		    Ext.Object.each(perms, function(perm, propagate) {
			let perm_item = {
			    text: perm,
			    type: 'perm',
			    propagate: propagate === 1 || propagate === true,
			    iconCls: 'fa fa-fw fa-unlock',
			    leaf: true,
			};
			path_item.children.push(perm_item);
			path_item.expandable = true;
		    });
		    idhash[path] = path_item;
		});

		Ext.Object.each(idhash, function(path, item) {
		    let parent_item = idhash['/'];
		    if (path === '/') {
			parent_item = root;
			item.expanded = true;
		    } else {
			let split_path = path.split('/');
			while (split_path.pop()) {
			    let parent_path = split_path.join('/');
			    if (idhash[parent_path]) {
				parent_item = idhash[parent_path];
				break;
			    }
			}
		    }
		    parent_item.children.push(item);
		});

		me.setRootNode(root);
	    },
	});

	me.callParent();

	me.store.sorters.add(new Ext.util.Sorter({
	    sorterFn: function(rec1, rec2) {
		let v1 = rec1.data.text,
		    v2 = rec2.data.text;
		if (rec1.data.type !== rec2.data.type) {
		    v2 = rec1.data.type;
		    v1 = rec2.data.type;
		}
		if (v1 > v2) {
		    return 1;
		} else if (v1 < v2) {
		    return -1;
		}
		return 0;
	    },
	}));
    },
});

Ext.define('Proxmox.PermissionView', {
    extend: 'Ext.window.Window',
    alias: 'widget.userShowPermissionWindow',
    mixins: ['Proxmox.Mixin.CBind'],

    scrollable: true,
    width: 800,
    height: 600,
    layout: 'fit',
    cbind: {
	title: (get) => Ext.String.htmlEncode(get('auth_id')) +
	    ` - ${gettext('Granted Permissions')}`,
    },
    items: [{
	xtype: 'proxmoxPermissionViewPanel',
	cbind: {
	    auth_id: '{auth_id}',
	    auth_id_name: '{auth_id_name}',
	},
    }],
});
Ext.define('Proxmox.panel.PruneInputPanel', {
    extend: 'Proxmox.panel.InputPanel',
    xtype: 'pmxPruneInputPanel',
    mixins: ['Proxmox.Mixin.CBind'],

    // set on use for now
    //onlineHelp: 'maintenance_pruning',

    keepLastEmptyText: '',

    cbindData: function() {
	let me = this;
	me.isCreate = !!me.isCreate;
	return {};
    },

    column1: [
	{
	    xtype: 'pmxPruneKeepField',
	    name: 'keep-last',
	    fieldLabel: gettext('Keep Last'),
	    cbind: {
		deleteEmpty: '{!isCreate}',
		emptyText: '{keepLastEmptyText}',
	    },
	},
	{
	    xtype: 'pmxPruneKeepField',
	    name: 'keep-daily',
	    fieldLabel: gettext('Keep Daily'),
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
	{
	    xtype: 'pmxPruneKeepField',
	    name: 'keep-monthly',
	    fieldLabel: gettext('Keep Monthly'),
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
    ],
    column2: [
	{
	    xtype: 'pmxPruneKeepField',
	    fieldLabel: gettext('Keep Hourly'),
	    name: 'keep-hourly',
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
	{
	    xtype: 'pmxPruneKeepField',
	    name: 'keep-weekly',
	    fieldLabel: gettext('Keep Weekly'),
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
	{
	    xtype: 'pmxPruneKeepField',
	    name: 'keep-yearly',
	    fieldLabel: gettext('Keep Yearly'),
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
    ],
});
// override the download server url globally, for privacy reasons
Ext.draw.Container.prototype.defaultDownloadServerUrl = "-";

Ext.define('Proxmox.chart.axis.segmenter.NumericBase2', {
    extend: 'Ext.chart.axis.segmenter.Numeric',
    alias: 'segmenter.numericBase2',

    // derived from the original numeric segmenter but using 2 instead of 10 as base
    preferredStep: function(min, estStepSize) {
	// Getting an order of magnitude of the estStepSize with a common logarithm.
	let order = Math.floor(Math.log2(estStepSize));
	let scale = Math.pow(2, order);

	estStepSize /= scale;

	// FIXME: below is not useful when using base 2 instead of base 10, we could
	// just directly set estStepSize to 2
	if (estStepSize <= 1) {
	    estStepSize = 1;
	} else if (estStepSize < 2) {
	    estStepSize = 2;
	}
	return {
	    unit: {
		// When passed estStepSize is less than 1, its order of magnitude
		// is equal to -number_of_leading_zeros in the estStepSize.
		fixes: -order, // Number of fractional digits.
		scale: scale,
	    },
	    step: estStepSize,
	};
    },

    /**
     * Wraps the provided estimated step size of a range without altering it into a step size object.
     *
     * @param {*} min The start point of range.
     * @param {*} estStepSize The estimated step size.
     * @return {Object} Return the step size by an object of step x unit.
     * @return {Number} return.step The step count of units.
     * @return {Object} return.unit The unit.
     */
    // derived from the original numeric segmenter but using 2 instead of 10 as base
    exactStep: function(min, estStepSize) {
	let order = Math.floor(Math.log2(estStepSize));
	let scale = Math.pow(2, order);

	return {
	    unit: {
		// add one decimal point if estStepSize is not a multiple of scale
		fixes: -order + (estStepSize % scale === 0 ? 0 : 1),
		scale: 1,
	    },
	    step: estStepSize,
	};
    },
});

Ext.define('Proxmox.widget.RRDChart', {
    extend: 'Ext.chart.CartesianChart',
    alias: 'widget.proxmoxRRDChart',

    unit: undefined, // bytes, bytespersecond, percent

    powerOfTwo: false,

    // set to empty string to suppress warning in debug mode
    downloadServerUrl: '-',

    controller: {
	xclass: 'Ext.app.ViewController',

	init: function(view) {
	    this.powerOfTwo = view.powerOfTwo;
	},

	convertToUnits: function(value) {
	    let units = ['', 'k', 'M', 'G', 'T', 'P'];
	    let si = 0;
	    let format = '0.##';
	    if (value < 0.1) format += '#';
	    const baseValue = this.powerOfTwo ? 1024 : 1000;
	    while (value >= baseValue && si < units.length -1) {
		value = value / baseValue;
		si++;
	    }

	    // javascript floating point weirdness
	    value = Ext.Number.correctFloat(value);

	    // limit decimal points
	    value = Ext.util.Format.number(value, format);

	    let unit = units[si];
	    if (unit && this.powerOfTwo) unit += 'i';

	    return `${value.toString()} ${unit}`;
	},

	leftAxisRenderer: function(axis, label, layoutContext) {
	    let me = this;
	    return me.convertToUnits(label);
	},

	onSeriesTooltipRender: function(tooltip, record, item) {
	    let view = this.getView();

	    let suffix = '';
	    if (view.unit === 'percent') {
		suffix = '%';
	    } else if (view.unit === 'bytes') {
		suffix = 'B';
	    } else if (view.unit === 'bytespersecond') {
		suffix = 'B/s';
	    }

	    let prefix = item.field;
	    if (view.fieldTitles && view.fieldTitles[view.fields.indexOf(item.field)]) {
		prefix = view.fieldTitles[view.fields.indexOf(item.field)];
	    }
	    let v = this.convertToUnits(record.get(item.field));
	    let t = new Date(record.get('time'));
	    tooltip.setHtml(`${prefix}: ${v}${suffix}<br>${t}`);
	},

	onAfterAnimation: function(chart, eopts) {
	    if (!chart.header || !chart.header.tools) {
		return;
	    }
	    // if the undo button is disabled, disable our tool
	    let ourUndoZoomButton = chart.header.tools[0];
	    let undoButton = chart.interactions[0].getUndoButton();
	    ourUndoZoomButton.setDisabled(undoButton.isDisabled());
	},
    },

    width: 770,
    height: 300,
    animation: false,
    interactions: [
	{
	    type: 'crosszoom',
	},
    ],
    legend: {
	type: 'dom',
	padding: 0,
    },
    listeners: {
	redraw: {
	    fn: 'onAfterAnimation',
	    options: {
		buffer: 500,
	    },
	},
    },

    touchAction: {
	panX: true,
	panY: true,
    },

    constructor: function(config) {
	let me = this;

	let segmenter = config.powerOfTwo ? 'numericBase2' : 'numeric';
	config.axes = [
	    {
		type: 'numeric',
		position: 'left',
		grid: true,
		renderer: 'leftAxisRenderer',
		minimum: 0,
		segmenter,
	    },
	    {
		type: 'time',
		position: 'bottom',
		grid: true,
		fields: ['time'],
	    },
	];
	me.callParent([config]);
    },

    checkThemeColors: function() {
	let me = this;
	let rootStyle = getComputedStyle(document.documentElement);

	// get colors
	let background = rootStyle.getPropertyValue("--pwt-panel-background").trim() || "#ffffff";
	let text = rootStyle.getPropertyValue("--pwt-text-color").trim() || "#000000";
	let primary = rootStyle.getPropertyValue("--pwt-chart-primary").trim() || "#000000";
	let gridStroke = rootStyle.getPropertyValue("--pwt-chart-grid-stroke").trim() || "#dddddd";

	// set the colors
	me.setBackground(background);
	me.axes.forEach((axis) => {
		axis.setLabel({ color: text });
		axis.setTitle({ color: text });
		axis.setStyle({ strokeStyle: primary });
		axis.setGrid({ stroke: gridStroke });
	});
	me.redraw();
    },

    initComponent: function() {
	let me = this;

	if (!me.store) {
	    throw "cannot work without store";
	}

	if (!me.fields) {
	    throw "cannot work without fields";
	}

	me.callParent();

	// add correct label for left axis
	let axisTitle = "";
	if (me.unit === 'percent') {
	    axisTitle = "%";
	} else if (me.unit === 'bytes') {
	    axisTitle = "Bytes";
	} else if (me.unit === 'bytespersecond') {
	    axisTitle = "Bytes/s";
	} else if (me.fieldTitles && me.fieldTitles.length === 1) {
	    axisTitle = me.fieldTitles[0];
	} else if (me.fields.length === 1) {
	    axisTitle = me.fields[0];
	}

	me.axes[0].setTitle(axisTitle);

	me.updateHeader();

	if (me.header && me.legend) {
	    me.header.padding = '4 9 4';
	    me.header.add(me.legend);
	    me.legend = undefined;
	}

	if (!me.noTool) {
	    me.addTool({
		type: 'minus',
		disabled: true,
		tooltip: gettext('Undo Zoom'),
		handler: function() {
		    let undoButton = me.interactions[0].getUndoButton();
		    if (undoButton.handler) {
			undoButton.handler();
		    }
		},
	    });
	}

	// add a series for each field we get
	me.fields.forEach(function(item, index) {
	    let title = item;
	    if (me.fieldTitles && me.fieldTitles[index]) {
		title = me.fieldTitles[index];
	    }
	    me.addSeries(Ext.apply(
		{
		    type: 'line',
		    xField: 'time',
		    yField: item,
		    title: title,
		    fill: true,
		    style: {
			lineWidth: 1.5,
			opacity: 0.60,
		    },
		    marker: {
			opacity: 0,
			scaling: 0.01,
		    },
		    highlightCfg: {
			opacity: 1,
			scaling: 1.5,
		    },
		    tooltip: {
			trackMouse: true,
			renderer: 'onSeriesTooltipRender',
		    },
		},
		me.seriesConfig,
	    ));
	});

	// enable animation after the store is loaded
	me.store.onAfter('load', function() {
	    me.setAnimation({
		duration: 200,
		easing: 'easeIn',
	    });
	}, this, { single: true });


	me.checkThemeColors();

	// switch colors on media query changes
	me.mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
	me.themeListener = (e) => { me.checkThemeColors(); };
	me.mediaQueryList.addEventListener("change", me.themeListener);
    },

    doDestroy: function() {
	let me = this;

	me.mediaQueryList.removeEventListener("change", me.themeListener);

	me.callParent();
    },
});
Ext.define('Proxmox.panel.GaugeWidget', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.proxmoxGauge',

    defaults: {
	style: {
	    'text-align': 'center',
	},
    },
    items: [
	{
	    xtype: 'box',
	    itemId: 'title',
	    data: {
		title: '',
	    },
	    tpl: '<h3>{title}</h3>',
	},
	{
	    xtype: 'polar',
	    height: 120,
	    border: false,
	    // set to '-' to suppress warning in debug mode
	    downloadServerUrl: '-',
	    itemId: 'chart',
	    series: [{
		type: 'gauge',
		value: 0,
		colors: ['#f5f5f5'],
		sectors: [0],
		donut: 90,
		needleLength: 100,
		totalAngle: Math.PI,
	    }],
	    sprites: [{
		id: 'valueSprite',
		type: 'text',
		text: '',
		textAlign: 'center',
		textBaseline: 'bottom',
		x: 125,
		y: 110,
		fontSize: 30,
	    }],
	},
	{
	    xtype: 'box',
	    itemId: 'text',
	},
    ],

    header: false,
    border: false,

    warningThreshold: 0.6,
    criticalThreshold: 0.9,
    warningColor: '#fc0',
    criticalColor: '#FF6C59',
    defaultColor: '#c2ddf2',
    backgroundColor: '#f5f5f5',

    initialValue: 0,

    checkThemeColors: function() {
	let me = this;
	let rootStyle = getComputedStyle(document.documentElement);

	// get colors
	let panelBg = rootStyle.getPropertyValue("--pwt-panel-background").trim() || "#ffffff";
	let textColor = rootStyle.getPropertyValue("--pwt-text-color").trim() || "#000000";
	me.defaultColor = rootStyle.getPropertyValue("--pwt-gauge-default").trim() || '#c2ddf2';
	me.criticalColor = rootStyle.getPropertyValue("--pwt-gauge-crit").trim() || '#ff6c59';
	me.warningColor = rootStyle.getPropertyValue("--pwt-gauge-warn").trim() || '#fc0';
	me.backgroundColor = rootStyle.getPropertyValue("--pwt-gauge-back").trim() || '#f5f5f5';

	// set gauge colors
	let value = me.chart.series[0].getValue() / 100;

	let color = me.defaultColor;

	if (value >= me.criticalThreshold) {
	    color = me.criticalColor;
	} else if (value >= me.warningThreshold) {
	    color = me.warningColor;
	}

	me.chart.series[0].setColors([color, me.backgroundColor]);

	// set text and background colors
	me.chart.setBackground(panelBg);
	me.valueSprite.setAttributes({ fillStyle: textColor }, true);
	me.chart.redraw();
    },

    updateValue: function(value, text) {
	let me = this;
	let color = me.defaultColor;
	let attr = {};

	if (value >= me.criticalThreshold) {
	    color = me.criticalColor;
	} else if (value >= me.warningThreshold) {
	    color = me.warningColor;
	}

	me.chart.series[0].setColors([color, me.backgroundColor]);
	me.chart.series[0].setValue(value*100);

	me.valueSprite.setText(' '+(value*100).toFixed(0) + '%');
	attr.x = me.chart.getWidth()/2;
	attr.y = me.chart.getHeight()-20;
	if (me.spriteFontSize) {
	    attr.fontSize = me.spriteFontSize;
	}
	me.valueSprite.setAttributes(attr, true);

	if (text !== undefined) {
	    me.text.setHtml(text);
	}
    },

    initComponent: function() {
	let me = this;

	me.callParent();

	if (me.title) {
	    me.getComponent('title').update({ title: me.title });
	}
	me.text = me.getComponent('text');
	me.chart = me.getComponent('chart');
	me.valueSprite = me.chart.getSurface('chart').get('valueSprite');

	me.checkThemeColors();

	// switch colors on media query changes
	me.mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
	me.themeListener = (e) => { me.checkThemeColors(); };
	me.mediaQueryList.addEventListener("change", me.themeListener);
    },

    doDestroy: function() {
	let me = this;

	me.mediaQueryList.removeEventListener("change", me.themeListener);

	me.callParent();
    },
});
Ext.define('Proxmox.panel.GotifyEditPanel', {
    extend: 'Proxmox.panel.InputPanel',
    xtype: 'pmxGotifyEditPanel',
    mixins: ['Proxmox.Mixin.CBind'],
    onlineHelp: 'notification_targets_gotify',

    type: 'gotify',

    items: [
	{
	    xtype: 'pmxDisplayEditField',
	    name: 'name',
	    cbind: {
		value: '{name}',
		editable: '{isCreate}',
	    },
	    fieldLabel: gettext('Endpoint Name'),
	    allowBlank: false,
	},
	{
	    xtype: 'proxmoxcheckbox',
	    name: 'enable',
	    fieldLabel: gettext('Enable'),
	    allowBlank: false,
	    checked: true,
	},
	{
	    xtype: 'proxmoxtextfield',
	    fieldLabel: gettext('Server URL'),
	    name: 'server',
	    allowBlank: false,
	},
	{
	    xtype: 'proxmoxtextfield',
	    inputType: 'password',
	    fieldLabel: gettext('API Token'),
	    name: 'token',
	    cbind: {
		emptyText: get => !get('isCreate') ? gettext('Unchanged') : '',
		allowBlank: '{!isCreate}',
	    },
	},
	{
	    xtype: 'proxmoxtextfield',
	    name: 'comment',
	    fieldLabel: gettext('Comment'),
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
    ],

    onSetValues: (values) => {
	values.enable = !values.disable;

	delete values.disable;
	return values;
    },

    onGetValues: function(values) {
	let me = this;

	if (values.enable) {
	    if (!me.isCreate) {
		Proxmox.Utils.assemble_field_data(values, { 'delete': 'disable' });
	    }
	} else {
	    values.disable = 1;
	}

	delete values.enable;

	return values;
    },
});
Ext.define('Proxmox.panel.Certificates', {
    extend: 'Ext.grid.Panel',
    xtype: 'pmxCertificates',

    // array of { name, id (=filename), url, deletable, reloadUi }
    uploadButtons: undefined,

    // The /info path for the current node.
    infoUrl: undefined,

    columns: [
	{
	    header: gettext('File'),
	    width: 150,
	    dataIndex: 'filename',
	},
	{
	    header: gettext('Issuer'),
	    flex: 1,
	    dataIndex: 'issuer',
	},
	{
	    header: gettext('Subject'),
	    flex: 1,
	    dataIndex: 'subject',
	},
	{
	    header: gettext('Public Key Alogrithm'),
	    flex: 1,
	    dataIndex: 'public-key-type',
	    hidden: true,
	},
	{
	    header: gettext('Public Key Size'),
	    flex: 1,
	    dataIndex: 'public-key-bits',
	    hidden: true,
	},
	{
	    header: gettext('Valid Since'),
	    width: 150,
	    dataIndex: 'notbefore',
	    renderer: Proxmox.Utils.render_timestamp,
	},
	{
	    header: gettext('Expires'),
	    width: 150,
	    dataIndex: 'notafter',
	    renderer: Proxmox.Utils.render_timestamp,
	},
	{
	    header: gettext('Subject Alternative Names'),
	    flex: 1,
	    dataIndex: 'san',
	    renderer: Proxmox.Utils.render_san,
	},
	{
	    header: gettext('Fingerprint'),
	    dataIndex: 'fingerprint',
	    hidden: true,
	},
	{
	    header: gettext('PEM'),
	    dataIndex: 'pem',
	    hidden: true,
	},
    ],

    reload: function() {
	let me = this;
	me.rstore.load();
    },

    delete_certificate: function() {
	let me = this;

	let rec = me.selModel.getSelection()[0];
	if (!rec) {
	    return;
	}

	let cert = me.certById[rec.id];
	let url = cert.url;
	Proxmox.Utils.API2Request({
	    url: `/api2/extjs/${url}?restart=1`,
	    method: 'DELETE',
	    success: function(response, opt) {
		if (cert.reloadUi) {
		    Ext.getBody().mask(
			gettext('API server will be restarted to use new certificates, please reload web-interface!'),
			['pve-static-mask'],
		    );
		    // try to reload after 10 seconds automatically
		    Ext.defer(() => window.location.reload(true), 10000);
		}
	    },
	    failure: function(response, opt) {
		Ext.Msg.alert(gettext('Error'), response.htmlStatus);
	    },
	});
    },

    controller: {
	xclass: 'Ext.app.ViewController',
	view_certificate: function() {
	    let me = this;
	    let view = me.getView();

	    let selection = view.getSelection();
	    if (!selection || selection.length < 1) {
		return;
	    }
	    let win = Ext.create('Proxmox.window.CertificateViewer', {
		cert: selection[0].data.filename,
		url: `/api2/extjs/${view.infoUrl}`,
	    });
	    win.show();
	},
    },

    listeners: {
	itemdblclick: 'view_certificate',
    },

    initComponent: function() {
	let me = this;

	if (!me.nodename) {
	    // only used for the store name
	    me.nodename = "_all";
	}

	if (!me.uploadButtons) {
	    throw "no upload buttons defined";
	}

	if (!me.infoUrl) {
	    throw "no certificate store url given";
	}

	me.rstore = Ext.create('Proxmox.data.UpdateStore', {
	    storeid: 'certs-' + me.nodename,
	    model: 'proxmox-certificate',
	    proxy: {
		type: 'proxmox',
		url: `/api2/extjs/${me.infoUrl}`,
	    },
	});

	me.store = {
	    type: 'diff',
	    rstore: me.rstore,
	};

	let tbar = [];

	me.deletableCertIds = {};
	me.certById = {};
	if (me.uploadButtons.length === 1) {
	    let cert = me.uploadButtons[0];

	    if (!cert.url) {
		throw "missing certificate url";
	    }

	    me.certById[cert.id] = cert;

	    if (cert.deletable) {
		me.deletableCertIds[cert.id] = true;
	    }

	    tbar.push(
		{
		    xtype: 'button',
		    text: gettext('Upload Custom Certificate'),
		    handler: function() {
			let grid = this.up('grid');
			let win = Ext.create('Proxmox.window.CertificateUpload', {
			    url: `/api2/extjs/${cert.url}`,
			    reloadUi: cert.reloadUi,
			});
			win.show();
			win.on('destroy', grid.reload, grid);
		    },
		},
	    );
	} else {
	    let items = [];

	    me.selModel = Ext.create('Ext.selection.RowModel', {});

	    for (const cert of me.uploadButtons) {
		if (!cert.id) {
		    throw "missing id in certificate entry";
		}

		if (!cert.url) {
		    throw "missing url in certificate entry";
		}

		if (!cert.name) {
		    throw "missing name in certificate entry";
		}

		me.certById[cert.id] = cert;

		if (cert.deletable) {
		    me.deletableCertIds[cert.id] = true;
		}

		items.push({
		    text: Ext.String.format('Upload {0} Certificate', cert.name),
		    handler: function() {
			let grid = this.up('grid');
			let win = Ext.create('Proxmox.window.CertificateUpload', {
			    url: `/api2/extjs/${cert.url}`,
			    reloadUi: cert.reloadUi,
			});
			win.show();
			win.on('destroy', grid.reload, grid);
		    },
		});
	    }

	    tbar.push(
		{
		    text: gettext('Upload Custom Certificate'),
		    menu: {
			xtype: 'menu',
			items,
		    },
		},
	    );
	}

	tbar.push(
	    {
		xtype: 'proxmoxButton',
		text: gettext('Delete Custom Certificate'),
		confirmMsg: rec => {
		    let cert = me.certById[rec.id];
		    if (cert.name) {
			return Ext.String.format(
			    gettext('Are you sure you want to remove the certificate used for {0}'),
			    cert.name,
			);
		    }
		    return gettext('Are you sure you want to remove the certificate');
		},
		callback: () => me.reload(),
		selModel: me.selModel,
		disabled: true,
		enableFn: rec => !!me.deletableCertIds[rec.id],
		handler: function() { me.delete_certificate(); },
	    },
	    '-',
	    {
		xtype: 'proxmoxButton',
		itemId: 'viewbtn',
		disabled: true,
		text: gettext('View Certificate'),
		handler: 'view_certificate',
	    },
	);
	Ext.apply(me, { tbar });

	me.callParent();

	me.rstore.startUpdate();
	me.on('destroy', me.rstore.stopUpdate, me.rstore);
    },
});
Ext.define('Proxmox.panel.ACMEAccounts', {
    extend: 'Ext.grid.Panel',
    xtype: 'pmxACMEAccounts',

    title: gettext('Accounts'),

    acmeUrl: undefined,

    controller: {
	xclass: 'Ext.app.ViewController',

	addAccount: function() {
	    let me = this;
	    let view = me.getView();
	    let defaultExists = view.getStore().findExact('name', 'default') !== -1;
	    Ext.create('Proxmox.window.ACMEAccountCreate', {
		defaultExists,
		acmeUrl: view.acmeUrl,
		taskDone: function() {
		    me.reload();
		},
	    }).show();
	},

	viewAccount: function() {
	    let me = this;
	    let view = me.getView();
	    let selection = view.getSelection();
	    if (selection.length < 1) return;
	    Ext.create('Proxmox.window.ACMEAccountView', {
	        url: `${view.acmeUrl}/account/${selection[0].data.name}`,
	    }).show();
	},

	reload: function() {
	    let me = this;
	    let view = me.getView();
	    view.getStore().rstore.load();
	},

	showTaskAndReload: function(options, success, response) {
	    let me = this;
	    if (!success) return;

	    let upid = response.result.data;
	    Ext.create('Proxmox.window.TaskProgress', {
		upid,
		taskDone: function() {
		    me.reload();
		},
	    }).show();
	},
    },

    minHeight: 150,
    emptyText: gettext('No Accounts configured'),

    columns: [
	{
	    dataIndex: 'name',
	    text: gettext('Name'),
	    renderer: Ext.String.htmlEncode,
	    flex: 1,
	},
    ],

    listeners: {
	itemdblclick: 'viewAccount',
    },

    store: {
	type: 'diff',
	autoDestroy: true,
	autoDestroyRstore: true,
	rstore: {
	    type: 'update',
	    storeid: 'proxmox-acme-accounts',
	    model: 'proxmox-acme-accounts',
	    autoStart: true,
	},
	sorters: 'name',
    },

    initComponent: function() {
	let me = this;

	if (!me.acmeUrl) {
	    throw "no acmeUrl given";
	}

	Ext.apply(me, {
	    tbar: [
		{
		    xtype: 'proxmoxButton',
		    text: gettext('Add'),
		    selModel: false,
		    handler: 'addAccount',
		},
		{
		    xtype: 'proxmoxButton',
		    text: gettext('View'),
		    handler: 'viewAccount',
		    disabled: true,
		},
		{
		    xtype: 'proxmoxStdRemoveButton',
		    baseurl: `${me.acmeUrl}/account`,
		    callback: 'showTaskAndReload',
		},
	    ],
	});

	me.callParent();
	me.store.rstore.proxy.setUrl(`/api2/json/${me.acmeUrl}/account`);
    },
});
Ext.define('Proxmox.panel.ACMEPluginView', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.pmxACMEPluginView',

    title: gettext('Challenge Plugins'),
    acmeUrl: undefined,

    controller: {
	xclass: 'Ext.app.ViewController',

	addPlugin: function() {
	    let me = this;
	    let view = me.getView();
	    Ext.create('Proxmox.window.ACMEPluginEdit', {
		acmeUrl: view.acmeUrl,
		url: `${view.acmeUrl}/plugins`,
		isCreate: true,
		apiCallDone: function() {
		    me.reload();
		},
	    }).show();
	},

	editPlugin: function() {
	    let me = this;
	    let view = me.getView();
	    let selection = view.getSelection();
	    if (selection.length < 1) return;
	    let plugin = selection[0].data.plugin;
	    Ext.create('Proxmox.window.ACMEPluginEdit', {
		acmeUrl: view.acmeUrl,
		url: `${view.acmeUrl}/plugins/${plugin}`,
		apiCallDone: function() {
		    me.reload();
		},
	    }).show();
	},

	reload: function() {
	    let me = this;
	    let view = me.getView();
	    view.getStore().rstore.load();
	},
    },

    minHeight: 150,
    emptyText: gettext('No Plugins configured'),

    columns: [
	{
	    dataIndex: 'plugin',
	    text: gettext('Plugin'),
	    renderer: Ext.String.htmlEncode,
	    flex: 1,
	},
	{
	    dataIndex: 'api',
	    text: 'API',
	    renderer: Ext.String.htmlEncode,
	    flex: 1,
	},
    ],

    listeners: {
	itemdblclick: 'editPlugin',
    },

    store: {
	type: 'diff',
	autoDestroy: true,
	autoDestroyRstore: true,
	rstore: {
	    type: 'update',
	    storeid: 'proxmox-acme-plugins',
	    model: 'proxmox-acme-plugins',
	    autoStart: true,
	    filters: item => !!item.data.api,
	},
	sorters: 'plugin',
    },

    initComponent: function() {
	let me = this;

	if (!me.acmeUrl) {
	    throw "no acmeUrl given";
	}
	me.url = `${me.acmeUrl}/plugins`;

	Ext.apply(me, {
	    tbar: [
		{
		    xtype: 'proxmoxButton',
		    text: gettext('Add'),
		    handler: 'addPlugin',
		    selModel: false,
		},
		{
		    xtype: 'proxmoxButton',
		    text: gettext('Edit'),
		    handler: 'editPlugin',
		    disabled: true,
		},
		{
		    xtype: 'proxmoxStdRemoveButton',
		    callback: 'reload',
		    baseurl: `${me.acmeUrl}/plugins`,
		},
	    ],
	});

	me.callParent();

	me.store.rstore.proxy.setUrl(`/api2/json/${me.acmeUrl}/plugins`);
    },
});
Ext.define('proxmox-acme-domains', {
    extend: 'Ext.data.Model',
    fields: ['domain', 'type', 'alias', 'plugin', 'configkey'],
    idProperty: 'domain',
});

Ext.define('Proxmox.panel.ACMEDomains', {
    extend: 'Ext.grid.Panel',
    xtype: 'pmxACMEDomains',
    mixins: ['Proxmox.Mixin.CBind'],

    margin: '10 0 0 0',
    title: 'ACME',

    emptyText: gettext('No Domains configured'),

    // URL to the config containing 'acme' and 'acmedomainX' properties
    url: undefined,

    // array of { name, url, usageLabel }
    domainUsages: undefined,
    // if no domainUsages parameter is supllied, the orderUrl is required instead:
    orderUrl: undefined,
    // Force the use of 'acmedomainX' properties.
    separateDomainEntries: undefined,

    acmeUrl: undefined,

    cbindData: function(config) {
	let me = this;
	return {
	    acmeUrl: me.acmeUrl,
	    accountUrl: `/api2/json/${me.acmeUrl}/account`,
	};
    },

    viewModel: {
	data: {
	    domaincount: 0,
	    account: undefined, // the account we display
	    configaccount: undefined, // the account set in the config
	    accountEditable: false,
	    accountsAvailable: false,
	    hasUsage: false,
	},

	formulas: {
	    canOrder: (get) => !!get('account') && get('domaincount') > 0,
	    editBtnIcon: (get) => 'fa black fa-' + (get('accountEditable') ? 'check' : 'pencil'),
	    accountTextHidden: (get) => get('accountEditable') || !get('accountsAvailable'),
	    accountValueHidden: (get) => !get('accountEditable') || !get('accountsAvailable'),
	},
    },

    controller: {
	xclass: 'Ext.app.ViewController',

	init: function(view) {
	    let accountSelector = this.lookup('accountselector');
	    accountSelector.store.on('load', this.onAccountsLoad, this);
	},

	onAccountsLoad: function(store, records, success) {
	    let me = this;
	    let vm = me.getViewModel();
	    let configaccount = vm.get('configaccount');
	    vm.set('accountsAvailable', records.length > 0);
	    if (me.autoChangeAccount && records.length > 0) {
		me.changeAccount(records[0].data.name, () => {
		    vm.set('accountEditable', false);
		    me.reload();
		});
		me.autoChangeAccount = false;
	    } else if (configaccount) {
		if (store.findExact('name', configaccount) !== -1) {
		    vm.set('account', configaccount);
		} else {
		    vm.set('account', null);
		}
	    }
	},

	addDomain: function() {
	    let me = this;
	    let view = me.getView();

	    Ext.create('Proxmox.window.ACMEDomainEdit', {
		url: view.url,
		acmeUrl: view.acmeUrl,
		nodeconfig: view.nodeconfig,
		domainUsages: view.domainUsages,
		separateDomainEntries: view.separateDomainEntries,
		apiCallDone: function() {
		    me.reload();
		},
	    }).show();
	},

	editDomain: function() {
	    let me = this;
	    let view = me.getView();

	    let selection = view.getSelection();
	    if (selection.length < 1) return;

	    Ext.create('Proxmox.window.ACMEDomainEdit', {
		url: view.url,
		acmeUrl: view.acmeUrl,
		nodeconfig: view.nodeconfig,
		domainUsages: view.domainUsages,
		separateDomainEntries: view.separateDomainEntries,
		domain: selection[0].data,
		apiCallDone: function() {
		    me.reload();
		},
	    }).show();
	},

	removeDomain: function() {
	    let me = this;
	    let view = me.getView();
	    let selection = view.getSelection();
	    if (selection.length < 1) return;

	    let rec = selection[0].data;
	    let params = {};
	    if (rec.configkey !== 'acme') {
		params.delete = rec.configkey;
	    } else {
		let acme = Proxmox.Utils.parseACME(view.nodeconfig.acme);
		Proxmox.Utils.remove_domain_from_acme(acme, rec.domain);
		params.acme = Proxmox.Utils.printACME(acme);
	    }

	    Proxmox.Utils.API2Request({
		method: 'PUT',
		url: view.url,
		params,
		success: function(response, opt) {
		    me.reload();
		},
		failure: function(response, opt) {
		    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
		},
	    });
	},

	toggleEditAccount: function() {
	    let me = this;
	    let vm = me.getViewModel();
	    let editable = vm.get('accountEditable');
	    if (editable) {
		me.changeAccount(vm.get('account'), function() {
		    vm.set('accountEditable', false);
		    me.reload();
		});
	    } else {
		vm.set('accountEditable', true);
	    }
	},

	changeAccount: function(account, callback) {
	    let me = this;
	    let view = me.getView();
	    let params = {};

	    let acme = Proxmox.Utils.parseACME(view.nodeconfig.acme);
	    acme.account = account;
	    params.acme = Proxmox.Utils.printACME(acme);

	    Proxmox.Utils.API2Request({
		method: 'PUT',
		waitMsgTarget: view,
		url: view.url,
		params,
		success: function(response, opt) {
		    if (Ext.isFunction(callback)) {
			callback();
		    }
		},
		failure: function(response, opt) {
		    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
		},
	    });
	},

	order: function(cert) {
	    let me = this;
	    let view = me.getView();

	    Proxmox.Utils.API2Request({
		method: 'POST',
		params: {
		    force: 1,
		},
		url: cert ? cert.url : view.orderUrl,
		success: function(response, opt) {
		    Ext.create('Proxmox.window.TaskViewer', {
		        upid: response.result.data,
		        taskDone: function(success) {
			    me.orderFinished(success, cert);
		        },
		    }).show();
		},
		failure: function(response, opt) {
		    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
		},
	    });
	},

	orderFinished: function(success, cert) {
	    if (!success || !cert.reloadUi) return;

	    Ext.getBody().mask(
		gettext('API server will be restarted to use new certificates, please reload web-interface!'),
		['pve-static-mask'],
	    );
	    // try to reload after 10 seconds automatically
	    Ext.defer(() => window.location.reload(true), 10000);
	},

	reload: function() {
	    let me = this;
	    let view = me.getView();
	    view.rstore.load();
	},

	addAccount: function() {
	    let me = this;
	    let view = me.getView();
	    Ext.create('Proxmox.window.ACMEAccountCreate', {
		autoShow: true,
		acmeUrl: view.acmeUrl,
		taskDone: function() {
		    me.reload();
		    let accountSelector = me.lookup('accountselector');
		    me.autoChangeAccount = true;
		    accountSelector.store.load();
		},
	    });
	},
    },

    tbar: [
	{
	    xtype: 'proxmoxButton',
	    text: gettext('Add'),
	    handler: 'addDomain',
	    selModel: false,
	},
	{
	    xtype: 'proxmoxButton',
	    text: gettext('Edit'),
	    disabled: true,
	    handler: 'editDomain',
	},
	{
	    xtype: 'proxmoxStdRemoveButton',
	    handler: 'removeDomain',
	},
	'-',
	'order-menu', // placeholder, filled in initComponent
	'-',
	{
	    xtype: 'displayfield',
	    value: gettext('Using Account') + ':',
	    bind: {
		hidden: '{!accountsAvailable}',
	    },
	},
	{
	    xtype: 'displayfield',
	    reference: 'accounttext',
	    renderer: (val) => val || Proxmox.Utils.NoneText,
	    bind: {
		value: '{account}',
		hidden: '{accountTextHidden}',
	    },
	},
	{
	    xtype: 'pmxACMEAccountSelector',
	    hidden: true,
	    reference: 'accountselector',
	    cbind: {
		url: '{accountUrl}',
	    },
	    bind: {
		value: '{account}',
		hidden: '{accountValueHidden}',
	    },
	},
	{
	    xtype: 'button',
	    iconCls: 'fa black fa-pencil',
	    baseCls: 'x-plain',
	    userCls: 'pointer',
	    bind: {
		iconCls: '{editBtnIcon}',
		hidden: '{!accountsAvailable}',
	    },
	    handler: 'toggleEditAccount',
	},
	{
	    xtype: 'displayfield',
	    value: gettext('No Account available.'),
	    bind: {
		hidden: '{accountsAvailable}',
	    },
	},
	{
	    xtype: 'button',
	    hidden: true,
	    reference: 'accountlink',
	    text: gettext('Add ACME Account'),
	    bind: {
		hidden: '{accountsAvailable}',
	    },
	    handler: 'addAccount',
	},
    ],

    updateStore: function(store, records, success) {
	let me = this;
	let data = [];
	let rec;
	if (success && records.length > 0) {
	    rec = records[0];
	} else {
	    rec = {
		data: {},
	    };
	}

	me.nodeconfig = rec.data; // save nodeconfig for updates

	let account = 'default';

	if (rec.data.acme) {
	    let obj = Proxmox.Utils.parseACME(rec.data.acme);
	    (obj.domains || []).forEach(domain => {
		if (domain === '') return;
		let record = {
		    domain,
		    type: 'standalone',
		    configkey: 'acme',
		};
		data.push(record);
	    });

	    if (obj.account) {
		account = obj.account;
	    }
	}

	let vm = me.getViewModel();
	let oldaccount = vm.get('account');

	// account changed, and we do not edit currently, load again to verify
	if (oldaccount !== account && !vm.get('accountEditable')) {
	    vm.set('configaccount', account);
	    me.lookup('accountselector').store.load();
	}

	for (let i = 0; i < Proxmox.Utils.acmedomain_count; i++) {
	    let acmedomain = rec.data[`acmedomain${i}`];
	    if (!acmedomain) continue;

	    let record = Proxmox.Utils.parsePropertyString(acmedomain, 'domain');
	    record.type = record.plugin ? 'dns' : 'standalone';
	    record.configkey = `acmedomain${i}`;
	    data.push(record);
	}

	vm.set('domaincount', data.length);
	me.store.loadData(data, false);
    },

    listeners: {
	itemdblclick: 'editDomain',
    },

    columns: [
	{
	    dataIndex: 'domain',
	    flex: 5,
	    text: gettext('Domain'),
	},
	{
	    dataIndex: 'usage',
	    flex: 1,
	    text: gettext('Usage'),
	    bind: {
		hidden: '{!hasUsage}',
	    },
	},
	{
	    dataIndex: 'type',
	    flex: 1,
	    text: gettext('Type'),
	},
	{
	    dataIndex: 'plugin',
	    flex: 1,
	    text: gettext('Plugin'),
	},
    ],

    initComponent: function() {
	let me = this;

	if (!me.acmeUrl) {
	    throw "no acmeUrl given";
	}

	if (!me.url) {
	    throw "no url given";
	}

	if (!me.nodename) {
	    throw "no nodename given";
	}

	if (!me.domainUsages && !me.orderUrl) {
	    throw "neither domainUsages nor orderUrl given";
	}

	me.rstore = Ext.create('Proxmox.data.UpdateStore', {
	    interval: 10 * 1000,
	    autoStart: true,
	    storeid: `proxmox-node-domains-${me.nodename}`,
	    proxy: {
		type: 'proxmox',
		url: `/api2/json/${me.url}`,
	    },
	});

	me.store = Ext.create('Ext.data.Store', {
	    model: 'proxmox-acme-domains',
	    sorters: 'domain',
	});

	if (me.domainUsages) {
	    let items = [];

	    for (const cert of me.domainUsages) {
		if (!cert.name) {
		    throw "missing certificate url";
		}

		if (!cert.url) {
		    throw "missing certificate url";
		}

		items.push({
		    text: Ext.String.format('Order {0} Certificate Now', cert.name),
		    handler: function() {
			return me.getController().order(cert);
		    },
		});
	    }
	    me.tbar.splice(
		me.tbar.indexOf("order-menu"),
		1,
		{
		    text: gettext('Order Certificates Now'),
		    menu: {
			xtype: 'menu',
			items,
		    },
		},
	    );
	} else {
	    me.tbar.splice(
		me.tbar.indexOf("order-menu"),
		1,
		{
		    xtype: 'button',
		    reference: 'order',
		    text: gettext('Order Certificates Now'),
		    bind: {
			disabled: '{!canOrder}',
		    },
		    handler: function() {
			return me.getController().order();
		    },
		},
	    );
	}

	me.callParent();
	me.getViewModel().set('hasUsage', !!me.domainUsages);
	me.mon(me.rstore, 'load', 'updateStore', me);
	Proxmox.Utils.monStoreErrors(me, me.rstore);
	me.on('destroy', me.rstore.stopUpdate, me.rstore);
    },
});
Ext.define('Proxmox.panel.EmailRecipientPanel', {
    extend: 'Ext.panel.Panel',
    xtype: 'pmxEmailRecipientPanel',
    mixins: ['Proxmox.Mixin.CBind'],
    border: false,

    mailValidator: function() {
	let mailto_user = this.down(`[name=mailto-user]`);
	let mailto = this.down(`[name=mailto]`);

	if (!mailto_user.getValue()?.length && !mailto.getValue()) {
	    return gettext('Either mailto or mailto-user must be set');
	}

	return true;
    },

    items: [
	{
	    layout: 'anchor',
	    border: false,
	    cbind: {
		isCreate: '{isCreate}',
	    },
	    items: [
		{
		    xtype: 'pmxUserSelector',
		    name: 'mailto-user',
		    multiSelect: true,
		    allowBlank: true,
		    editable: false,
		    skipEmptyText: true,
		    fieldLabel: gettext('Recipient(s)'),
		    cbind: {
			deleteEmpty: '{!isCreate}',
		    },
		    validator: function() {
			return this.up('pmxEmailRecipientPanel').mailValidator();
		    },
		    autoEl: {
			tag: 'div',
			'data-qtip': gettext('The notification will be sent to the user\'s configured mail address'),
		    },
		    listConfig: {
			width: 600,
			columns: [
			    {
				header: gettext('User'),
				sortable: true,
				dataIndex: 'userid',
				renderer: Ext.String.htmlEncode,
				flex: 1,
			    },
			    {
				header: gettext('E-Mail'),
				sortable: true,
				dataIndex: 'email',
				renderer: Ext.String.htmlEncode,
				flex: 1,
			    },
			    {
				header: gettext('Comment'),
				sortable: false,
				dataIndex: 'comment',
				renderer: Ext.String.htmlEncode,
				flex: 1,
			    },
			],
		    },
		},
		{
		    xtype: 'proxmoxtextfield',
		    fieldLabel: gettext('Additional Recipient(s)'),
		    name: 'mailto',
		    allowBlank: true,
		    emptyText: 'user@example.com, ...',
		    cbind: {
			deleteEmpty: '{!isCreate}',
		    },
		    autoEl: {
			tag: 'div',
			'data-qtip': gettext('Multiple recipients must be separated by spaces, commas or semicolons'),
		    },
		    validator: function() {
			return this.up('pmxEmailRecipientPanel').mailValidator();
		    },
		},
	    ],
	},
    ],
});
Ext.define('Proxmox.panel.SendmailEditPanel', {
    extend: 'Proxmox.panel.InputPanel',
    xtype: 'pmxSendmailEditPanel',
    mixins: ['Proxmox.Mixin.CBind'],

    type: 'sendmail',
    onlineHelp: 'notification_targets_sendmail',

    mailValidator: function() {
	let mailto_user = this.down(`[name=mailto-user]`);
	let mailto = this.down(`[name=mailto]`);

	if (!mailto_user.getValue()?.length && !mailto.getValue()) {
	    return gettext('Either mailto or mailto-user must be set');
	}

	return true;
    },

    items: [
	{
	    xtype: 'pmxDisplayEditField',
	    name: 'name',
	    cbind: {
		value: '{name}',
		editable: '{isCreate}',
	    },
	    fieldLabel: gettext('Endpoint Name'),
	    allowBlank: false,
	},
	{
	    xtype: 'proxmoxcheckbox',
	    name: 'enable',
	    fieldLabel: gettext('Enable'),
	    allowBlank: false,
	    checked: true,
	},
	{
	    // provides 'mailto' and 'mailto-user' fields
	    xtype: 'pmxEmailRecipientPanel',
	    cbind: {
		isCreate: '{isCreate}',
	    },
	},
	{
	    xtype: 'proxmoxtextfield',
	    name: 'comment',
	    fieldLabel: gettext('Comment'),
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
    ],

    advancedItems: [
	{
	    xtype: 'proxmoxtextfield',
	    fieldLabel: gettext('Author'),
	    name: 'author',
	    allowBlank: true,
	    cbind: {
		emptyText: '{defaultMailAuthor}',
		deleteEmpty: '{!isCreate}',
	    },
	},
	{
	    xtype: 'proxmoxtextfield',
	    fieldLabel: gettext('From Address'),
	    name: 'from-address',
	    allowBlank: true,
	    emptyText: gettext('Defaults to datacenter configuration, or root@$hostname'),
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
    ],

    onSetValues: (values) => {
	values.enable = !values.disable;

	delete values.disable;
	return values;
    },

    onGetValues: function(values) {
	let me = this;

	if (values.enable) {
	    if (!me.isCreate) {
		Proxmox.Utils.assemble_field_data(values, { 'delete': 'disable' });
	    }
	} else {
	    values.disable = 1;
	}

	delete values.enable;

	if (values.mailto) {
	    values.mailto = values.mailto.split(/[\s,;]+/);
	}
	return values;
    },
});
Ext.define('Proxmox.panel.SmtpEditPanel', {
    extend: 'Proxmox.panel.InputPanel',
    xtype: 'pmxSmtpEditPanel',
    mixins: ['Proxmox.Mixin.CBind'],
    onlineHelp: 'notification_targets_smtp',

    type: 'smtp',

    viewModel: {
	xtype: 'viewmodel',
	cbind: {
	    isCreate: "{isCreate}",
	},
	data: {
	    mode: 'tls',
	    authentication: true,
	},
	formulas: {
	    portEmptyText: function(get) {
		let port;

		switch (get('mode')) {
		    case 'insecure':
			port = 25;
			break;
		    case 'starttls':
			port = 587;
			break;
		    case 'tls':
			port = 465;
			break;
		}
		return `${Proxmox.Utils.defaultText} (${port})`;
	    },
	    passwordEmptyText: function(get) {
		let isCreate = this.isCreate;
		return get('authentication') && !isCreate ? gettext('Unchanged') : '';
	    },
	},
    },

    columnT: [
	{
	    xtype: 'pmxDisplayEditField',
	    name: 'name',
	    cbind: {
		value: '{name}',
		editable: '{isCreate}',
	    },
	    fieldLabel: gettext('Endpoint Name'),
	    allowBlank: false,
	},
	{
	    xtype: 'proxmoxcheckbox',
	    name: 'enable',
	    fieldLabel: gettext('Enable'),
	    allowBlank: false,
	    checked: true,
	},
    ],

    column1: [
	{
	    xtype: 'proxmoxtextfield',
	    fieldLabel: gettext('Server'),
	    name: 'server',
	    allowBlank: false,
	    emptyText: gettext('mail.example.com'),
	},
	{
	    xtype: 'proxmoxKVComboBox',
	    name: 'mode',
	    fieldLabel: gettext('Encryption'),
	    editable: false,
	    comboItems: [
		['insecure', Proxmox.Utils.noneText + ' (' + gettext('insecure') + ')'],
		['starttls', 'STARTTLS'],
		['tls', 'TLS'],
	    ],
	    bind: "{mode}",
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
	{
	    xtype: 'proxmoxintegerfield',
	    name: 'port',
	    fieldLabel: gettext('Port'),
	    minValue: 1,
	    maxValue: 65535,
	    bind: {
		emptyText: "{portEmptyText}",
	    },
	    submitEmptyText: false,
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
    ],
    column2: [
	{
	    xtype: 'proxmoxcheckbox',
	    fieldLabel: gettext('Authenticate'),
	    name: 'authentication',
	    bind: {
		value: '{authentication}',
	    },
	},
	{
	    xtype: 'proxmoxtextfield',
	    fieldLabel: gettext('Username'),
	    name: 'username',
	    allowBlank: false,
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	    bind: {
		disabled: '{!authentication}',
	    },
	},
	{
	    xtype: 'proxmoxtextfield',
	    inputType: 'password',
	    fieldLabel: gettext('Password'),
	    name: 'password',
	    allowBlank: true,
	    bind: {
		disabled: '{!authentication}',
		emptyText: '{passwordEmptyText}',
	    },
	},
    ],
    columnB: [
	{
	    xtype: 'proxmoxtextfield',
	    fieldLabel: gettext('From Address'),
	    name: 'from-address',
	    allowBlank: false,
	    emptyText: gettext('user@example.com'),
	},
	{
	    // provides 'mailto' and 'mailto-user' fields
	    xtype: 'pmxEmailRecipientPanel',
	    cbind: {
		isCreate: '{isCreate}',
	    },
	},
	{
	    xtype: 'proxmoxtextfield',
	    name: 'comment',
	    fieldLabel: gettext('Comment'),
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
    ],

    advancedColumnB: [
	{
	    xtype: 'proxmoxtextfield',
	    fieldLabel: gettext('Author'),
	    name: 'author',
	    allowBlank: true,
	    cbind: {
		emptyText: '{defaultMailAuthor}',
		deleteEmpty: '{!isCreate}',
	    },
	},
    ],

    onGetValues: function(values) {
	let me = this;

	if (values.mailto) {
	    values.mailto = values.mailto.split(/[\s,;]+/);
	}

	if (!values.authentication && !me.isCreate) {
	    Proxmox.Utils.assemble_field_data(values, { 'delete': 'username' });
	    Proxmox.Utils.assemble_field_data(values, { 'delete': 'password' });
	}

	if (values.enable) {
	    if (!me.isCreate) {
		Proxmox.Utils.assemble_field_data(values, { 'delete': 'disable' });
	    }
	} else {
	    values.disable = 1;
	}

	delete values.enable;

	delete values.authentication;

	return values;
    },

    onSetValues: function(values) {
	values.authentication = !!values.username;
	values.enable = !values.disable;
	delete values.disable;

	return values;
    },
});
Ext.define('Proxmox.panel.StatusView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.pmxStatusView',

    layout: {
	type: 'column',
    },

    title: gettext('Status'),

    getRecordValue: function(key, store) {
	let me = this;

	if (!key) {
	    throw "no key given";
	}

	if (store === undefined) {
	    store = me.getStore();
	}

	let rec = store.getById(key);
	if (rec) {
	    return rec.data.value;
	}
	return '';
    },

    fieldRenderer: function(val, max) {
	if (max === undefined) {
	    return val;
	}

	if (!Ext.isNumeric(max) || max === 1) {
	    return Proxmox.Utils.render_usage(val);
	}
	return Proxmox.Utils.render_size_usage(val, max);
    },

    fieldCalculator: function(used, max) {
	if (!Ext.isNumeric(max) && Ext.isNumeric(used)) {
	    return used;
	} else if (!Ext.isNumeric(used)) {
	    /* we come here if the field is from a node
	     * where the records are not mem and maxmem
	     * but mem.used and mem.total
	     */
	    if (used.used !== undefined &&
		used.total !== undefined) {
		return used.total > 0 ? used.used/used.total : 0;
	    }
	}

	return used/max;
    },

    updateField: function(field) {
	let me = this;
	let renderer = me.fieldRenderer;
	if (Ext.isFunction(field.renderer)) {
	    renderer = field.renderer;
	}
	if (field.multiField === true) {
	    field.updateValue(renderer.call(field, me.getStore().getRecord()));
	} else if (field.textField !== undefined) {
	    field.updateValue(renderer.call(field, me.getRecordValue(field.textField)));
	} else if (field.valueField !== undefined) {
	    let used = me.getRecordValue(field.valueField);
	    let max = field.maxField !== undefined ? me.getRecordValue(field.maxField) : 1;

	    let calculate = me.fieldCalculator;
	    if (Ext.isFunction(field.calculate)) {
		calculate = field.calculate;
	    }
	    field.updateValue(renderer.call(field, used, max), calculate(used, max));
	}
    },

    getStore: function() {
	let me = this;

	if (!me.rstore) {
	    throw "there is no rstore";
	}

	return me.rstore;
    },

    updateTitle: function() {
	let me = this;
	me.setTitle(me.getRecordValue('name'));
    },

    updateValues: function(store, records, success) {
	let me = this;

	if (!success) {
	    return; // do not update if store load was not successful
	}
	me.query('pmxInfoWidget').forEach(me.updateField, me);
	me.query('pveInfoWidget').forEach(me.updateField, me);

	me.updateTitle(store);
    },

    initComponent: function() {
	let me = this;

	if (!me.rstore) {
	    throw "no rstore given";
	}
	if (!me.title) {
	    throw "no title given";
	}

	Proxmox.Utils.monStoreErrors(me, me.rstore);

	me.callParent();

	me.mon(me.rstore, 'load', me.updateValues, me);
    },

});
Ext.define('pmx-tfa-users', {
    extend: 'Ext.data.Model',
    fields: ['userid'],
    idProperty: 'userid',
    proxy: {
	type: 'proxmox',
	url: '/api2/json/access/tfa',
    },
});

Ext.define('pmx-tfa-entry', {
    extend: 'Ext.data.Model',
    fields: ['fullid', 'userid', 'type', 'description', 'created', 'enable'],
    idProperty: 'fullid',
});


Ext.define('Proxmox.panel.TfaView', {
    extend: 'Ext.grid.GridPanel',
    alias: 'widget.pmxTfaView',
    mixins: ['Proxmox.Mixin.CBind'],

    title: gettext('Second Factors'),
    reference: 'tfaview',

    issuerName: 'Proxmox',
    yubicoEnabled: false,

    cbindData: function(initialConfig) {
	let me = this;
	return {
	    yubicoEnabled: me.yubicoEnabled,
	};
    },

    store: {
	type: 'diff',
	autoDestroy: true,
	autoDestroyRstore: true,
	model: 'pmx-tfa-entry',
	rstore: {
	    type: 'store',
	    proxy: 'memory',
	    storeid: 'pmx-tfa-entry',
	    model: 'pmx-tfa-entry',
	},
    },

    controller: {
	xclass: 'Ext.app.ViewController',

	init: function(view) {
	    let me = this;
	    view.tfaStore = Ext.create('Proxmox.data.UpdateStore', {
		autoStart: true,
		interval: 5 * 1000,
		storeid: 'pmx-tfa-users',
		model: 'pmx-tfa-users',
	    });
	    view.tfaStore.on('load', this.onLoad, this);
	    view.on('destroy', view.tfaStore.stopUpdate);
	    Proxmox.Utils.monStoreErrors(view, view.tfaStore);
	},

	reload: function() { this.getView().tfaStore.load(); },

	onLoad: function(store, data, success) {
	    if (!success) return;

	    let now = new Date().getTime() / 1000;
	    let records = [];
	    Ext.Array.each(data, user => {
		let tfa_locked = (user.data['tfa-locked-until'] || 0) > now;
		let totp_locked = user.data['totp-locked'];
		Ext.Array.each(user.data.entries, entry => {
		    records.push({
			fullid: `${user.id}/${entry.id}`,
			userid: user.id,
			type: entry.type,
			description: entry.description,
			created: entry.created,
			enable: entry.enable,
			locked: tfa_locked || (entry.type === 'totp' && totp_locked),
		    });
		});
	    });

	    let rstore = this.getView().store.rstore;
	    rstore.loadData(records);
	    rstore.fireEvent('load', rstore, records, true);
	},

	addTotp: function() {
	    let me = this;

	    Ext.create('Proxmox.window.AddTotp', {
		isCreate: true,
		issuerName: me.getView().issuerName,
		listeners: {
		    destroy: function() {
			me.reload();
		    },
		},
	    }).show();
	},

	addWebauthn: function() {
	    let me = this;

	    Ext.create('Proxmox.window.AddWebauthn', {
		isCreate: true,
		autoShow: true,
		listeners: {
		    destroy: () => me.reload(),
		},
	    });
	},

	addRecovery: async function() {
	    let me = this;

	    Ext.create('Proxmox.window.AddTfaRecovery', {
		autoShow: true,
		listeners: {
		    destroy: () => me.reload(),
		},
	    });
	},

	addYubico: function() {
	    let me = this;

	    Ext.create('Proxmox.window.AddYubico', {
		isCreate: true,
		autoShow: true,
		listeners: {
		    destroy: () => me.reload(),
		},
	    });
	},

	editItem: function() {
	    let me = this;
	    let view = me.getView();
	    let selection = view.getSelection();
	    if (selection.length !== 1 || selection[0].id.endsWith("/recovery")) {
		return;
	    }

	    Ext.create('Proxmox.window.TfaEdit', {
		'tfa-id': selection[0].data.fullid,
		autoShow: true,
		listeners: {
		    destroy: () => me.reload(),
		},
	    });
	},

	renderUser: fullid => fullid.split('/')[0],

	renderEnabled: function(enabled, metaData, record) {
	    if (record.data.locked) {
		return gettext("Locked");
	    } else if (enabled === undefined) {
		return Proxmox.Utils.yesText;
	    } else {
		return Proxmox.Utils.format_boolean(enabled);
	    }
	},

	onRemoveButton: function(btn, event, record) {
	    let me = this;

	    Ext.create('Proxmox.tfa.confirmRemove', {
		...record.data,
		callback: password => me.removeItem(password, record),
		autoShow: true,
	    });
	},

	removeItem: async function(password, record) {
	    let me = this;

	    if (password !== null) {
		password = '?password=' + encodeURIComponent(password);
	    } else {
		password = '';
	    }

	    try {
		me.getView().mask(gettext('Please wait...'), 'x-mask-loading');
		await Proxmox.Async.api2({
		    url: `/api2/extjs/access/tfa/${record.id}${password}`,
		    method: 'DELETE',
		});
		me.reload();
	    } catch (response) {
		Ext.Msg.alert(gettext('Error'), response.result.message);
	    } finally {
		me.getView().unmask();
            }
	},
    },

    viewConfig: {
	trackOver: false,
    },

    listeners: {
	itemdblclick: 'editItem',
    },

    columns: [
	{
	    header: gettext('User'),
	    width: 200,
	    sortable: true,
	    dataIndex: 'fullid',
	    renderer: 'renderUser',
	},
	{
	    header: gettext('Enabled'),
	    width: 80,
	    sortable: true,
	    dataIndex: 'enable',
	    renderer: 'renderEnabled',
	},
	{
	    header: gettext('TFA Type'),
	    width: 80,
	    sortable: true,
	    dataIndex: 'type',
	},
	{
	    header: gettext('Created'),
	    width: 150,
	    sortable: true,
	    dataIndex: 'created',
	    renderer: t => !t ? 'N/A' : Proxmox.Utils.render_timestamp(t),
	},
	{
	    header: gettext('Description'),
	    width: 300,
	    sortable: true,
	    dataIndex: 'description',
	    renderer: Ext.String.htmlEncode,
	    flex: 1,
	},
    ],

    tbar: [
	{
	    text: gettext('Add'),
	    cbind: {},
	    menu: {
		xtype: 'menu',
		items: [
		    {
			text: gettext('TOTP'),
			itemId: 'totp',
			iconCls: 'fa fa-fw fa-clock-o',
			handler: 'addTotp',
		    },
		    {
			text: gettext('WebAuthn'),
			itemId: 'webauthn',
			iconCls: 'fa fa-fw fa-shield',
			handler: 'addWebauthn',
		    },
		    {
			text: gettext('Recovery Keys'),
			itemId: 'recovery',
			iconCls: 'fa fa-fw fa-file-text-o',
			handler: 'addRecovery',
		    },
		    {
			text: gettext('Yubico OTP'),
			itemId: 'yubico',
			iconCls: 'fa fa-fw fa-yahoo', // close enough
			handler: 'addYubico',
			cbind: {
			    hidden: '{!yubicoEnabled}',
			},
		    },
		],
	    },
	},
	'-',
	{
	    xtype: 'proxmoxButton',
	    text: gettext('Edit'),
	    handler: 'editItem',
	    enableFn: rec => !rec.id.endsWith("/recovery"),
	    disabled: true,
	},
	{
	    xtype: 'proxmoxButton',
	    disabled: true,
	    text: gettext('Remove'),
	    getRecordName: rec => rec.data.description,
	    handler: 'onRemoveButton',
	},
    ],
});
Ext.define('Proxmox.panel.NotesView', {
    extend: 'Ext.panel.Panel',
    xtype: 'pmxNotesView',
    mixins: ['Proxmox.Mixin.CBind'],

    title: gettext("Notes"),
    bodyPadding: 10,
    scrollable: true,
    animCollapse: false,
    collapseFirst: false,

    maxLength: 64 * 1024,
    enableTBar: false,
    onlineHelp: 'markdown_basics',

    tbar: {
	itemId: 'tbar',
	hidden: true,
	items: [
	    {
		text: gettext('Edit'),
		iconCls: 'fa fa-pencil-square-o',
		handler: function() {
		    let view = this.up('panel');
		    view.run_editor();
		},
	    },
	],
    },

    cbindData: function(initalConfig) {
	let me = this;
	let type = '';

	if (me.node) {
	    me.url = `/api2/extjs/nodes/${me.node}/config`;
	} else if (me.pveSelNode?.data?.id === 'root') {
	    me.url = '/api2/extjs/cluster/options';
	    type = me.pveSelNode?.data?.type;
	} else {
	    const nodename = me.pveSelNode?.data?.node;
	    type = me.pveSelNode?.data?.type;

	    if (!nodename) {
		throw "no node name specified";
	    }

	    if (!Ext.Array.contains(['node', 'qemu', 'lxc'], type)) {
		throw 'invalid type specified';
	    }

	    const vmid = me.pveSelNode?.data?.vmid;

	    if (!vmid && type !== 'node') {
		throw "no VM ID specified";
	    }

	    me.url = `/api2/extjs/nodes/${nodename}/`;

	    // add the type specific path if qemu/lxc and set the backend's maxLen
	    if (type === 'qemu' || type === 'lxc') {
		me.url += `${type}/${vmid}/`;
		me.maxLength = 8 * 1024;
	    }

	    me.url += 'config';
	}

	me.pveType = type;

	me.load();
	return {};
    },

    run_editor: function() {
	let me = this;
	Ext.create('Proxmox.window.NotesEdit', {
	    url: me.url,
	    onlineHelp: me.onlineHelp,
	    listeners: {
		destroy: () => me.load(),
	    },
	    autoShow: true,
	}).setMaxLength(me.maxLength);
    },

    setNotes: function(value = '') {
	let me = this;

	let mdHtml = Proxmox.Markdown.parse(value);
	me.update(mdHtml);

	if (me.collapsible && me.collapseMode === 'auto') {
	    me.setCollapsed(!value);
	}
    },

    load: function() {
	let me = this;

	Proxmox.Utils.API2Request({
	    url: me.url,
	    waitMsgTarget: me,
	    failure: (response, opts) => {
		me.update(gettext('Error') + " " + response.htmlStatus);
		me.setCollapsed(false);
	    },
	    success: ({ result }) => me.setNotes(result.data.description),
	});
    },

    listeners: {
	render: function(c) {
	    let me = this;
	    let sp = Ext.state.Manager.getProvider();
	    // to cover live changes to the browser setting
	    me.mon(sp, 'statechange', function(provider, key, value) {
		if (value === null || key !== 'edit-notes-on-double-click') {
		    return;
		}
		if (value) {
		    me.getEl().on('dblclick', me.run_editor, me);
		} else {
		    // there's only the me.run_editor listener, and removing just that did not work
		    me.getEl().clearListeners();
		}
	    });
	    // to cover initial setting value
	    if (sp.get('edit-notes-on-double-click', false)) {
		me.getEl().on('dblclick', me.run_editor, me);
	    }
	},
	afterlayout: function() {
	    let me = this;
	    if (me.collapsible && !me.getCollapsed() && me.collapseMode === 'always') {
		me.setCollapsed(true);
		me.collapseMode = ''; // only once, on initial load!
	    }
	},
    },

    tools: [
	{
	    glyph: 'xf044@FontAwesome', // fa-pencil-square-o
	    tooltip: gettext('Edit notes'),
	    callback: view => view.run_editor(),
	    style: {
		paddingRight: '5px',
	    },
	},
    ],

    initComponent: function() {
	let me = this;
	me.callParent();

	// '' is for datacenter
	if (me.enableTBar === true || me.pveType === 'node' || me.pveType === '') {
	    me.down('#tbar').setVisible(true);
	} else if (me.pveSelNode?.data?.template !== 1) {
	    me.setCollapsible(true);
	    me.collapseDirection = 'right';

	    let sp = Ext.state.Manager.getProvider();
	    me.collapseMode = sp.get('guest-notes-collapse', 'never');

	    if (me.collapseMode === 'auto') {
		me.setCollapsed(true);
	    }
	}
    },
});
Ext.define('Proxmox.panel.WebhookEditPanel', {
    extend: 'Proxmox.panel.InputPanel',
    xtype: 'pmxWebhookEditPanel',
    mixins: ['Proxmox.Mixin.CBind'],
    onlineHelp: 'notification_targets_webhook',

    type: 'webhook',

    columnT: [

    ],

    column1: [
	{
	    xtype: 'pmxDisplayEditField',
	    name: 'name',
	    cbind: {
		value: '{name}',
		editable: '{isCreate}',
	    },
	    fieldLabel: gettext('Endpoint Name'),
	    regex: Proxmox.Utils.safeIdRegex,
	    allowBlank: false,
	},
    ],

    column2: [
	{
	    xtype: 'proxmoxcheckbox',
	    name: 'enable',
	    fieldLabel: gettext('Enable'),
	    allowBlank: false,
	    checked: true,
	},
    ],

    columnB: [
	{
	    xtype: 'fieldcontainer',
	    fieldLabel: gettext('Method/URL'),
	    layout: 'hbox',
	    border: false,
	    margin: '0 0 5 0',
	    items: [
		{
		    xtype: 'proxmoxKVComboBox',
		    name: 'method',
		    editable: false,
		    value: 'post',
		    comboItems: [
			['post', 'POST'],
			['put', 'PUT'],
			['get', 'GET'],
		    ],
		    width: 80,
		    margin: '0 5 0 0',
		},
		{
		    xtype: 'proxmoxtextfield',
		    name: 'url',
		    allowBlank: false,
		    emptyText: "https://example.com/hook",
		    regex: Proxmox.Utils.httpUrlRegex,
		    regexText: gettext('Must be a valid URL'),
		    flex: 4,
		},
	    ],
	},
	{
	    xtype: 'pmxWebhookKeyValueList',
	    name: 'header',
	    fieldLabel: gettext('Headers'),
	    addLabel: gettext('Add Header'),
	    maskValues: false,
	    cbind: {
		isCreate: '{isCreate}',
	    },
	    margin: '0 0 10 0',
	},
	{
	    xtype: 'textarea',
	    fieldLabel: gettext('Body'),
	    name: 'body',
	    allowBlank: true,
	    minHeight: '150',
	    fieldStyle: {
		'font-family': 'monospace',
	    },
	    margin: '0 0 5 0',
	},
	{
	    xtype: 'pmxWebhookKeyValueList',
	    name: 'secret',
	    fieldLabel: gettext('Secrets'),
	    addLabel: gettext('Add Secret'),
	    maskValues: true,
	    cbind: {
		isCreate: '{isCreate}',
	    },
	    margin: '0 0 10 0',
	},
	{
	    xtype: 'proxmoxtextfield',
	    name: 'comment',
	    fieldLabel: gettext('Comment'),
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
    ],

    onSetValues: (values) => {
	values.enable = !values.disable;

	if (values.body) {
	    values.body = Proxmox.Utils.base64ToUtf8(values.body);
	}

	delete values.disable;
	return values;
    },

    onGetValues: function(values) {
	let me = this;

	if (values.enable) {
	    if (!me.isCreate) {
		Proxmox.Utils.assemble_field_data(values, { 'delete': 'disable' });
	    }
	} else {
	    values.disable = 1;
	}

	if (values.body) {
	    values.body = Proxmox.Utils.utf8ToBase64(values.body);
	} else {
	    delete values.body;
	    if (!me.isCreate) {
		Proxmox.Utils.assemble_field_data(values, { 'delete': 'body' });
	    }
	}

	if (Ext.isArray(values.header) && !values.header.length) {
	    delete values.header;
	    if (!me.isCreate) {
		Proxmox.Utils.assemble_field_data(values, { 'delete': 'header' });
	    }
	}

	if (Ext.isArray(values.secret) && !values.secret.length) {
	    delete values.secret;
	    if (!me.isCreate) {
		Proxmox.Utils.assemble_field_data(values, { 'delete': 'secret' });
	    }
	}
	delete values.enable;

	return values;
    },
});

Ext.define('Proxmox.form.WebhookKeyValueList', {
    extend: 'Ext.form.FieldContainer',
    alias: 'widget.pmxWebhookKeyValueList',

    mixins: [
	'Ext.form.field.Field',
    ],

    // override for column header
    fieldTitle: gettext('Item'),

    // label displayed in the "Add" button
    addLabel: undefined,

    // will be applied to the textfields
    maskRe: undefined,

    allowBlank: true,
    selectAll: false,
    isFormField: true,
    deleteEmpty: false,
    config: {
	deleteEmpty: false,
	maskValues: false,
    },

    setValue: function(list) {
	let me = this;

	list = Ext.isArray(list) ? list : (list ?? '').split(';').filter(t => t !== '');

	let store = me.lookup('grid').getStore();
	if (list.length > 0) {
	    store.setData(list.map(item => {
		let properties = Proxmox.Utils.parsePropertyString(item);

		// decode base64
		let value = me.maskValues ? '' : Proxmox.Utils.base64ToUtf8(properties.value);

		let obj = {
		    headerName: properties.name,
		    headerValue: value,
		};

		if (!me.isCreate && me.maskValues) {
		    obj.emptyText = gettext('Unchanged');
		}

		return obj;
	    }));
	} else {
	    store.removeAll();
	}
	me.checkChange();
	return me;
    },

    getValue: function() {
	let me = this;
	let values = [];
	me.lookup('grid').getStore().each((rec) => {
	    if (rec.data.headerName) {
		let obj = {
		    name: rec.data.headerName,
		    value: Proxmox.Utils.utf8ToBase64(rec.data.headerValue),
		};

		values.push(Proxmox.Utils.printPropertyString(obj));
	    }
	});

	return values;
    },

    getErrors: function(value) {
	let me = this;
	let empty = false;

	me.lookup('grid').getStore().each((rec) => {
	    if (!rec.data.headerName) {
		empty = true;
	    }

	    if (!rec.data.headerValue && rec.data.newValue) {
		empty = true;
	    }

	    if (!rec.data.headerValue && !me.maskValues) {
		empty = true;
	    }
	});
	if (empty) {
	    return [gettext('Name/value must not be empty.')];
	}
	return [];
    },

    // override framework function to implement deleteEmpty behaviour
    getSubmitData: function() {
	let me = this,
	    data = null,
	    val;
	if (!me.disabled && me.submitValue) {
	    val = me.getValue();
	    if (val !== null && val !== '') {
		data = {};
		data[me.getName()] = val;
	    } else if (me.getDeleteEmpty()) {
		data = {};
		data.delete = me.getName();
	    }
	}
	return data;
    },

    controller: {
	xclass: 'Ext.app.ViewController',

	addLine: function() {
	    let me = this;
	    me.lookup('grid').getStore().add({
		headerName: '',
		headerValue: '',
		emptyText: gettext('Value'),
		newValue: true,
	    });
	},

	removeSelection: function(field) {
	    let me = this;
	    let view = me.getView();
	    let grid = me.lookup('grid');

	    let record = field.getWidgetRecord();
	    if (record === undefined) {
		// this is sometimes called before a record/column is initialized
		return;
	    }

	    grid.getStore().remove(record);
	    view.checkChange();
	    view.validate();
	},

	itemChange: function(field, newValue) {
	    let rec = field.getWidgetRecord();
	    if (!rec) {
		return;
	    }

	    let column = field.getWidgetColumn();
	    rec.set(column.dataIndex, newValue);
	    let list = field.up('pmxWebhookKeyValueList');
	    list.checkChange();
	    list.validate();
	},

	control: {
	    'grid button': {
		click: 'removeSelection',
	    },
	},
    },

    initComponent: function() {
	let me = this;

	let items = [
	    {
		xtype: 'grid',
		reference: 'grid',
		minHeight: 100,
		maxHeight: 100,
		scrollable: 'vertical',

		viewConfig: {
		    deferEmptyText: false,
		},

		store: {
		    listeners: {
			update: function() {
			    this.commitChanges();
			},
		    },
		},
		margin: '5 0 5 0',
		columns: [
		    {
			header: me.fieldTtitle,
			dataIndex: 'headerName',
			xtype: 'widgetcolumn',
			widget: {
			    xtype: 'textfield',
			    isFormField: false,
			    maskRe: me.maskRe,
			    allowBlank: false,
			    queryMode: 'local',
			    emptyText: gettext('Key'),
			    listeners: {
				change: 'itemChange',
			    },
			},
			onWidgetAttach: function(_col, widget) {
			    widget.isValid();
			},
			flex: 1,
		    },
		    {
			header: me.fieldTtitle,
			dataIndex: 'headerValue',
			xtype: 'widgetcolumn',
			widget: {
			    xtype: 'proxmoxtextfield',
			    inputType: me.maskValues ? 'password' : 'text',
			    isFormField: false,
			    maskRe: me.maskRe,
			    queryMode: 'local',
			    listeners: {
				change: 'itemChange',
			    },
			    allowBlank: !me.isCreate && me.maskValues,

			    bind: {
				emptyText: '{record.emptyText}',
			    },
			},
			onWidgetAttach: function(_col, widget) {
			    widget.isValid();
			},
			flex: 1,
		    },
		    {
			xtype: 'widgetcolumn',
			width: 40,
			widget: {
			    xtype: 'button',
			    iconCls: 'fa fa-trash-o',
			},
		    },
		],
	    },
	    {
		xtype: 'button',
		text: me.addLabel ? me.addLabel : gettext('Add'),
		iconCls: 'fa fa-plus-circle',
		handler: 'addLine',
	    },
	];

	for (const [key, value] of Object.entries(me.gridConfig ?? {})) {
	    items[0][key] = value;
	}

	Ext.apply(me, {
	    items,
	});

	me.callParent();
	me.initField();
    },
});
Ext.define('Proxmox.window.Edit', {
    extend: 'Ext.window.Window',
    alias: 'widget.proxmoxWindowEdit',

    // autoLoad trigger a load() after component creation
    autoLoad: false,
    // set extra options like params for the load request
    autoLoadOptions: undefined,

    // to submit extra params on load and submit, useful, e.g., if not all ID
    // parameters are included in the URL
    extraRequestParams: {},

    resizable: false,

    // use this to automatically generate a title like `Create: <subject>`
    subject: undefined,

    // set isCreate to true if you want a Create button (instead OK and RESET)
    isCreate: false,

    // set to true if you want an Add button (instead of Create)
    isAdd: false,

    // set to true if you want a Remove button (instead of Create)
    isRemove: false,

    // set to false, if you don't want the reset button present
    showReset: true,

    // custom submitText
    submitText: undefined,

    // custom options for the submit api call
    submitOptions: {},

    backgroundDelay: 0,

    // string or function, called as (url, values) - useful if the ID of the
    // new object is part of the URL, or that URL differs from GET/PUT URL
    submitUrl: Ext.identityFn,

    // string or function, called as (url, initialConfig) - mostly for
    // consistency with submitUrl existing. If both are set `url` gets optional
    loadUrl: Ext.identityFn,

    // needed for finding the reference to submitbutton
    // because we do not have a controller
    referenceHolder: true,
    defaultButton: 'submitbutton',

    // finds the first form field
    defaultFocus: 'field:focusable[disabled=false][hidden=false]',

    showProgress: false,

    showTaskViewer: false,

    // gets called if we have a progress bar or taskview and it detected that
    // the task finished. function(success)
    taskDone: Ext.emptyFn,

    // gets called when the api call is finished, right at the beginning
    // function(success, response, options)
    apiCallDone: Ext.emptyFn,

    // assign a reference from docs, to add a help button docked to the
    // bottom of the window. If undefined we magically fall back to the
    // onlineHelp of our first item, if set.
    onlineHelp: undefined,

    constructor: function(conf) {
	let me = this;
	// make copies in order to prevent subclasses from accidentally writing
	// to objects that are shared with other edit window subclasses
	me.extraRequestParams = Object.assign({}, me.extraRequestParams);
	me.submitOptions = Object.assign({}, me.submitOptions);
	me.callParent(arguments);
    },

    isValid: function() {
	let me = this;

	let form = me.formPanel.getForm();
	return form.isValid();
    },

    getValues: function(dirtyOnly) {
	let me = this;

	let values = {};
	Ext.apply(values, me.extraRequestParams);

	let form = me.formPanel.getForm();

	form.getFields().each(function(field) {
	    if (!field.up('inputpanel') && (!dirtyOnly || field.isDirty())) {
		Proxmox.Utils.assemble_field_data(values, field.getSubmitData());
	    }
	});

	Ext.Array.each(me.query('inputpanel'), function(panel) {
	    Proxmox.Utils.assemble_field_data(values, panel.getValues(dirtyOnly));
	});

        return values;
    },

    setValues: function(values) {
	let me = this;

	let form = me.formPanel.getForm();
	let formfields = form.getFields();

	Ext.iterate(values, function(id, val) {
	    let fields = formfields.filterBy((f) =>
	        (f.id === id || f.name === id || f.dataIndex === id) && !f.up('inputpanel'),
	    );
	    fields.each((field) => {
		field.setValue(val);
		if (form.trackResetOnLoad) {
		    field.resetOriginalValue();
		}
	    });
	});

	Ext.Array.each(me.query('inputpanel'), function(panel) {
	    panel.setValues(values);
	});
    },

    setSubmitText: function(text) {
	this.lookup('submitbutton').setText(text);
    },

    submit: function() {
	let me = this;

	let form = me.formPanel.getForm();

	let values = me.getValues();
	Ext.Object.each(values, function(name, val) {
	    if (Object.prototype.hasOwnProperty.call(values, name)) {
		if (Ext.isArray(val) && !val.length) {
		    values[name] = '';
		}
	    }
	});

	if (me.digest) {
	    values.digest = me.digest;
	}

	if (me.backgroundDelay) {
	    values.background_delay = me.backgroundDelay;
	}

	let url = Ext.isFunction(me.submitUrl)
	    ? me.submitUrl(me.url, values)
	    : me.submitUrl || me.url;
	if (me.method === 'DELETE') {
	    url = url + "?" + Ext.Object.toQueryString(values);
	    values = undefined;
	}

	let requestOptions = Ext.apply({
	    url: url,
	    waitMsgTarget: me,
	    method: me.method || (me.backgroundDelay ? 'POST' : 'PUT'),
	    params: values,
	    failure: function(response, options) {
		me.apiCallDone(false, response, options);

		if (response.result && response.result.errors) {
		    form.markInvalid(response.result.errors);
		}
		Ext.Msg.alert(gettext('Error'), response.htmlStatus);
	    },
	    success: function(response, options) {
		let hasProgressBar =
		    (me.backgroundDelay || me.showProgress || me.showTaskViewer) &&
		    response.result.data;

		me.apiCallDone(true, response, options);

		if (hasProgressBar) {
		    // only hide to allow delaying our close event until task is done
		    me.hide();

		    let upid = response.result.data;
		    let viewerClass = me.showTaskViewer ? 'Viewer' : 'Progress';
		    Ext.create('Proxmox.window.Task' + viewerClass, {
			autoShow: true,
			upid: upid,
			taskDone: me.taskDone,
			listeners: {
			    destroy: function() {
				me.close();
			    },
			},
		    });
		} else {
		    me.close();
		}
	    },
	}, me.submitOptions ?? {});
	Proxmox.Utils.API2Request(requestOptions);
    },

    load: function(options) {
	let me = this;

	let form = me.formPanel.getForm();

	options = options || {};

	let newopts = Ext.apply({
	    waitMsgTarget: me,
	}, options);

	if (Object.keys(me.extraRequestParams).length > 0) {
	    let params = newopts.params || {};
	    Ext.applyIf(params, me.extraRequestParams);
	    newopts.params = params;
	}

	let url = Ext.isFunction(me.loadUrl)
	    ? me.loadUrl(me.url, me.initialConfig)
	    : me.loadUrl || me.url;

	let createWrapper = function(successFn) {
	    Ext.apply(newopts, {
		url: url,
		method: 'GET',
		success: function(response, opts) {
		    form.clearInvalid();
		    me.digest = response.result?.digest || response.result?.data?.digest;
		    if (successFn) {
			successFn(response, opts);
		    } else {
			me.setValues(response.result.data);
		    }
		    // hack: fix ExtJS bug
		    Ext.Array.each(me.query('radiofield'), f => f.resetOriginalValue());
		},
		failure: function(response, opts) {
		    Ext.Msg.alert(gettext('Error'), response.htmlStatus, function() {
			me.close();
		    });
		},
	    });
	};

	createWrapper(options.success);

	Proxmox.Utils.API2Request(newopts);
    },

    initComponent: function() {
	let me = this;

	if (!me.url && (
		!me.submitUrl || !me.loadUrl || me.submitUrl === Ext.identityFn ||
		me.loadUrl === Ext.identityFn
	    )
	) {
	    throw "neither 'url' nor both, submitUrl and loadUrl specified";
	}
	if (me.create) {
	    throw "deprecated parameter, use isCreate";
	}

	let items = Ext.isArray(me.items) ? me.items : [me.items];

	me.items = undefined;

	me.formPanel = Ext.create('Ext.form.Panel', {
	    url: me.url, // FIXME: not in 'form' class, safe to remove??
	    method: me.method || 'PUT',
	    trackResetOnLoad: true,
	    bodyPadding: me.bodyPadding !== undefined ? me.bodyPadding : 10,
	    border: false,
	    defaults: Ext.apply({}, me.defaults, {
		border: false,
	    }),
	    fieldDefaults: Ext.apply({}, me.fieldDefaults, {
		labelWidth: 100,
		anchor: '100%',
            }),
	    items: items,
	});

	let inputPanel = me.formPanel.down('inputpanel');

	let form = me.formPanel.getForm();

	let submitText;
	if (me.isCreate) {
	    if (me.submitText) {
		submitText = me.submitText;
	    } else if (me.isAdd) {
		submitText = gettext('Add');
	    } else if (me.isRemove) {
		submitText = gettext('Remove');
	    } else {
		submitText = gettext('Create');
	    }
	} else {
	    submitText = me.submitText || gettext('OK');
	}

	let submitBtn = Ext.create('Ext.Button', {
	    reference: 'submitbutton',
	    text: submitText,
	    disabled: !me.isCreate,
	    handler: function() {
		me.submit();
	    },
	});

	let resetTool = Ext.create('Ext.panel.Tool', {
	    glyph: 'xf0e2@FontAwesome', // fa-undo
	    tooltip: gettext('Reset form data'),
	    callback: () => form.reset(),
	    style: {
		paddingRight: '2px', // just slightly more room to breathe
	    },
	    disabled: true,
	});

	let set_button_status = function() {
	    let valid = form.isValid();
	    let dirty = form.isDirty();
	    submitBtn.setDisabled(!valid || !(dirty || me.isCreate));
	    resetTool.setDisabled(!dirty);
	};

	form.on('dirtychange', set_button_status);
	form.on('validitychange', set_button_status);

	let colwidth = 300;
	if (me.fieldDefaults && me.fieldDefaults.labelWidth) {
	    colwidth += me.fieldDefaults.labelWidth - 100;
	}

	let twoColumn = inputPanel && (inputPanel.column1 || inputPanel.column2);

	if (me.subject && !me.title) {
	    me.title = Proxmox.Utils.dialog_title(me.subject, me.isCreate, me.isAdd);
	}

	me.buttons = [submitBtn];

	if (!me.isCreate && me.showReset) {
	    me.tools = [resetTool];
	}

	if (inputPanel && inputPanel.hasAdvanced) {
	    let sp = Ext.state.Manager.getProvider();
	    let advchecked = sp.get('proxmox-advanced-cb');
	    inputPanel.setAdvancedVisible(advchecked);
	    me.buttons.unshift({
		xtype: 'proxmoxcheckbox',
		itemId: 'advancedcb',
		boxLabelAlign: 'before',
		boxLabel: gettext('Advanced'),
		stateId: 'proxmox-advanced-cb',
		value: advchecked,
		listeners: {
		    change: function(cb, val) {
			inputPanel.setAdvancedVisible(val);
			sp.set('proxmox-advanced-cb', val);
		    },
		},
	    });
	}

	let onlineHelp = me.onlineHelp;
	if (!onlineHelp && inputPanel && inputPanel.onlineHelp) {
	    onlineHelp = inputPanel.onlineHelp;
	}

	if (onlineHelp) {
	    let helpButton = Ext.create('Proxmox.button.Help');
	    me.buttons.unshift(helpButton, '->');
	    Ext.GlobalEvents.fireEvent('proxmoxShowHelp', onlineHelp);
	}

	Ext.applyIf(me, {
	    modal: true,
	    width: twoColumn ? colwidth*2 : colwidth,
	    border: false,
	    items: [me.formPanel],
	});

	me.callParent();


	if (inputPanel?.hasAdvanced) {
	    let advancedItems = inputPanel.down('#advancedContainer').query('field');
	    advancedItems.forEach(function(field) {
		me.mon(field, 'validitychange', (f, valid) => {
		    if (!valid) {
			f.up('inputpanel').setAdvancedVisible(true);
		    }
		});
	    });
	}

	// always mark invalid fields
	me.on('afterlayout', function() {
	    // on touch devices, the isValid function
	    // triggers a layout, which triggers an isValid
	    // and so on
	    // to prevent this we disable the layouting here
	    // and enable it afterwards
	    me.suspendLayout = true;
	    me.isValid();
	    me.suspendLayout = false;
	});

	if (me.autoLoad) {
	    me.load(me.autoLoadOptions);
	}
    },
});
Ext.define('Proxmox.window.PasswordEdit', {
    extend: 'Proxmox.window.Edit',
    alias: 'proxmoxWindowPasswordEdit',
    mixins: ['Proxmox.Mixin.CBind'],

    subject: gettext('Password'),

    url: '/api2/extjs/access/password',

    width: 380,
    fieldDefaults: {
	labelWidth: 150,
    },

    // specifies the minimum length of *new* passwords so this can be
    // adapted by each product as limits are changed there.
    minLength: 5,

    // allow products to opt-in as their API gains support for this.
    confirmCurrentPassword: false,

    items: [
	{
	    xtype: 'textfield',
	    inputType: 'password',
	    fieldLabel: gettext('Your Current Password'),
	    reference: 'confirmation-password',
	    name: 'confirmation-password',
	    allowBlank: false,
	    vtype: 'password',
	    cbind: {
		hidden: '{!confirmCurrentPassword}',
		disabled: '{!confirmCurrentPassword}',
	    },
	},
	{
	    xtype: 'textfield',
	    inputType: 'password',
	    fieldLabel: gettext('New Password'),
	    allowBlank: false,
	    name: 'password',
	    listeners: {
		change: (field) => field.next().validate(),
		blur: (field) => field.next().validate(),
	    },
	    cbind: {
		minLength: '{minLength}',
	    },
	},
	{
	    xtype: 'textfield',
	    inputType: 'password',
	    fieldLabel: gettext('Confirm New Password'),
	    name: 'verifypassword',
	    allowBlank: false,
	    vtype: 'password',
	    initialPassField: 'password',
	    submitValue: false,
	},
	{
	    xtype: 'hiddenfield',
	    name: 'userid',
	    cbind: {
		value: '{userid}',
	    },
	},
    ],
});
// Pop-up a message window where the user has to manually enter the resource ID to enable the
// destroy confirmation button to ensure that they got the correct resource selected for.
Ext.define('Proxmox.window.SafeDestroy', {
    extend: 'Ext.window.Window',
    alias: 'widget.proxmoxSafeDestroy',

    title: gettext('Confirm'),
    modal: true,
    buttonAlign: 'center',
    bodyPadding: 10,
    width: 450,
    layout: { type: 'hbox' },
    defaultFocus: 'confirmField',
    showProgress: false,

    additionalItems: [],

    // gets called if we have a progress bar or taskview and it detected that
    // the task finished. function(success)
    taskDone: Ext.emptyFn,

    // gets called when the api call is finished, right at the beginning
    // function(success, response, options)
    apiCallDone: Ext.emptyFn,

    config: {
	item: {
	    id: undefined,
	},
	url: undefined,
	note: undefined,
	taskName: undefined,
	params: {},
    },

    getParams: function() {
	let me = this;

	if (Ext.Object.isEmpty(me.params)) {
	    return '';
	}
	return '?' + Ext.Object.toQueryString(me.params);
    },

    controller: {

	xclass: 'Ext.app.ViewController',

	control: {
	    'field[name=confirm]': {
		change: function(f, value) {
		    const view = this.getView();
		    const removeButton = this.lookupReference('removeButton');
		    if (value === view.getItem().id.toString()) {
			removeButton.enable();
		    } else {
			removeButton.disable();
		    }
		},
		specialkey: function(field, event) {
		    const removeButton = this.lookupReference('removeButton');
		    if (!removeButton.isDisabled() && event.getKey() === event.ENTER) {
			removeButton.fireEvent('click', removeButton, event);
		    }
		},
	    },
           'button[reference=removeButton]': {
		click: function() {
		    const view = this.getView();
		    Proxmox.Utils.API2Request({
			url: view.getUrl() + view.getParams(),
			method: 'DELETE',
			waitMsgTarget: view,
			failure: function(response, opts) {
			    view.apiCallDone(false, response, opts);
			    view.close();
			    Ext.Msg.alert('Error', response.htmlStatus);
			},
			success: function(response, options) {
			    const hasProgressBar = !!(view.showProgress &&
				response.result.data);

			    view.apiCallDone(true, response, options);

			    if (hasProgressBar) {
				// stay around so we can trigger our close events
				// when background action is completed
				view.hide();

				const upid = response.result.data;
				const win = Ext.create('Proxmox.window.TaskProgress', {
				    upid: upid,
				    taskDone: view.taskDone,
				    listeners: {
					destroy: function() {
					    view.close();
					},
				    },
				});
				win.show();
			    } else {
				view.close();
			    }
			},
		    });
		},
            },
	},
    },

    buttons: [
	{
	    reference: 'removeButton',
	    text: gettext('Remove'),
	    disabled: true,
	},
    ],

    initComponent: function() {
	let me = this;

	me.items = [
	    {
		xtype: 'component',
		cls: [
		    Ext.baseCSSPrefix + 'message-box-icon',
		    Ext.baseCSSPrefix + 'message-box-warning',
		    Ext.baseCSSPrefix + 'dlg-icon',
		],
	    },
	    {
		xtype: 'container',
		flex: 1,
		layout: {
		    type: 'vbox',
		    align: 'stretch',
		},
		items: [
		    {
			xtype: 'component',
			reference: 'messageCmp',
		    },
		    {
			itemId: 'confirmField',
			reference: 'confirmField',
			xtype: 'textfield',
			name: 'confirm',
			labelWidth: 300,
			hideTrigger: true,
			allowBlank: false,
		    },
		]
		.concat(me.additionalItems)
		.concat([
		    {
			xtype: 'container',
			reference: 'noteContainer',
			flex: 1,
			hidden: true,
			layout: {
			    type: 'vbox',
			},
			items: [
			    {
				xtype: 'component',
				reference: 'noteCmp',
				userCls: 'pmx-hint',
			    },
			],
		    },
		]),
	    },
	];

	me.callParent();

	const itemId = me.getItem().id;
	if (!Ext.isDefined(itemId)) {
	    throw "no ID specified";
	}

	if (Ext.isDefined(me.getNote())) {
	    me.lookupReference('noteCmp').setHtml(`<span title="${me.getNote()}">${me.getNote()}</span>`);
	    const noteContainer = me.lookupReference('noteContainer');
	    noteContainer.setHidden(false);
	    noteContainer.setDisabled(false);
	}

	let taskName = me.getTaskName();
	if (Ext.isDefined(taskName)) {
	    me.lookupReference('messageCmp').setHtml(
		Proxmox.Utils.format_task_description(taskName, itemId),
	    );
	} else {
	    throw "no task name specified";
	}

	me.lookupReference('confirmField')
	    .setFieldLabel(`${gettext('Please enter the ID to confirm')} (${itemId})`);
    },
});
Ext.define('Proxmox.window.PackageVersions', {
    extend: 'Ext.window.Window',
    alias: 'widget.proxmoxPackageVersions',

    title: gettext('Package versions'),
    width: 600,
    height: 650,
    layout: 'fit',
    modal: true,

    url: `/nodes/localhost/apt/versions`,

    viewModel: {
	parent: null,
	data: {
	    packageList: '',
	},
    },
    buttons: [
	{
	    xtype: 'button',
	    text: gettext('Copy'),
	    iconCls: 'fa fa-clipboard',
	    handler: function(button) {
		window.getSelection().selectAllChildren(
		    document.getElementById('pkgversions'),
		);
		document.execCommand("copy");
	    },
	},
	{
	    text: gettext('Ok'),
	    handler: function() {
		this.up('window').close();
	    },
	},
    ],
    items: [
	{
	    xtype: 'component',
	    autoScroll: true,
	    id: 'pkgversions',
	    padding: 5,
	    bind: {
		html: '{packageList}',
	    },
	    style: {
		'white-space': 'pre',
		'font-family': 'monospace',
	    },
	},
    ],
    listeners: {
	afterrender: function() {
	    this.loadPackageVersions(); // wait for after render so that we can show a load mask
	},
    },

    loadPackageVersions: async function() {
	let me = this;

	let { result } = await Proxmox.Async.api2({
	    waitMsgTarget: me.down('component[id="pkgversions"]'),
	    method: 'GET',
	    url: me.url,
	}).catch(Proxmox.Utils.alertResponseFailure); // FIXME: mask window instead?

	let text = '';
	for (const pkg of result.data) {
	    let version = "not correctly installed";
	    if (pkg.OldVersion && pkg.OldVersion !== 'unknown') {
		version = pkg.OldVersion;
	    } else if (pkg.CurrentState === 'ConfigFiles') {
		version = 'residual config';
	    }
	    const name = pkg.Package;
	    if (pkg.ExtraInfo) {
		text += `${name}: ${version} (${pkg.ExtraInfo})\n`;
	    } else {
		text += `${name}: ${version}\n`;
	    }
	}
	me.getViewModel().set('packageList', Ext.htmlEncode(text));
    },
});
Ext.define('Proxmox.window.TaskProgress', {
    extend: 'Ext.window.Window',
    alias: 'widget.proxmoxTaskProgress',

    taskDone: Ext.emptyFn,

    width: 300,
    layout: 'auto',
    modal: true,
    bodyPadding: 5,

    initComponent: function() {
        let me = this;

	if (!me.upid) {
	    throw "no task specified";
	}

	let task = Proxmox.Utils.parse_task_upid(me.upid);

	let statstore = Ext.create('Proxmox.data.ObjectStore', {
	    url: `/api2/json/nodes/${task.node}/tasks/${encodeURIComponent(me.upid)}/status`,
	    interval: 1000,
	    rows: {
		status: { defaultValue: 'unknown' },
		exitstatus: { defaultValue: 'unknown' },
	    },
	});

	me.on('destroy', statstore.stopUpdate);

	let getObjectValue = function(key, defaultValue) {
	    let rec = statstore.getById(key);
	    if (rec) {
		return rec.data.value;
	    }
	    return defaultValue;
	};

	let pbar = Ext.create('Ext.ProgressBar');

	me.mon(statstore, 'load', function() {
	    let status = getObjectValue('status');
	    if (status === 'stopped') {
		let exitstatus = getObjectValue('exitstatus');
		if (exitstatus === 'OK') {
		    pbar.reset();
		    pbar.updateText("Done!");
		    Ext.Function.defer(me.close, 1000, me);
		} else {
		    me.close();
		    Ext.Msg.alert('Task failed', exitstatus);
		}
		me.taskDone(exitstatus === 'OK');
	    }
	});

	let descr = Proxmox.Utils.format_task_description(task.type, task.id);

	Ext.apply(me, {
	    title: gettext('Task') + ': ' + descr,
	    items: pbar,
	    buttons: [
		{
		    text: gettext('Details'),
		    handler: function() {
			Ext.create('Proxmox.window.TaskViewer', {
			    autoShow: true,
			    taskDone: me.taskDone,
			    upid: me.upid,
			});
			me.close();
		    },
		},
	    ],
	});

	me.callParent();

	statstore.startUpdate();

	pbar.wait({ text: gettext('running...') });
    },
});

Ext.define('Proxmox.window.TaskViewer', {
    extend: 'Ext.window.Window',
    alias: 'widget.proxmoxTaskViewer',

    extraTitle: '', // string to prepend after the generic task title

    taskDone: Ext.emptyFn,

    initComponent: function() {
        let me = this;

	if (!me.upid) {
	    throw "no task specified";
	}

	let task = Proxmox.Utils.parse_task_upid(me.upid);

	let statgrid;

	let rows = {
	    status: {
		header: gettext('Status'),
		defaultValue: 'unknown',
		renderer: function(value) {
		    if (value !== 'stopped') {
			return Ext.htmlEncode(value);
		    }
		    let es = statgrid.getObjectValue('exitstatus');
		    if (es) {
			return Ext.htmlEncode(`${value}: ${es}`);
		    }
		    return 'unknown';
		},
	    },
	    exitstatus: {
		visible: false,
	    },
	    type: {
		header: gettext('Task type'),
		required: true,
	    },
	    user: {
		header: gettext('User name'),
		renderer: function(value) {
		    let user = value;
		    let tokenid = statgrid.getObjectValue('tokenid');
		    if (tokenid) {
			user += `!${tokenid} (API Token)`;
		    }
		    return Ext.String.htmlEncode(user);
		},
		required: true,
	    },
	    tokenid: {
		header: gettext('API Token'),
		renderer: Ext.String.htmlEncode,
		visible: false,
	    },
	    node: {
		header: gettext('Node'),
		required: true,
	    },
	    pid: {
		header: gettext('Process ID'),
		required: true,
	    },
	    task_id: {
		header: gettext('Task ID'),
	    },
	    starttime: {
		header: gettext('Start Time'),
		required: true,
		renderer: Proxmox.Utils.render_timestamp,
	    },
	    upid: {
		header: gettext('Unique task ID'),
		renderer: Ext.String.htmlEncode,
	    },
	};

	if (me.endtime) {
	    if (typeof me.endtime === 'object') {
		// convert to epoch
		me.endtime = parseInt(me.endtime.getTime()/1000, 10);
	    }
	    rows.endtime = {
		header: gettext('End Time'),
		required: true,
		renderer: function() {
		    return Proxmox.Utils.render_timestamp(me.endtime);
		},
	    };
	}

	rows.duration = {
	    header: gettext('Duration'),
	    required: true,
	    renderer: function() {
		let starttime = statgrid.getObjectValue('starttime');
		let endtime = me.endtime || Date.now()/1000;
		let duration = endtime - starttime;
		return Proxmox.Utils.format_duration_human(duration);
	    },
	};

	let statstore = Ext.create('Proxmox.data.ObjectStore', {
            url: `/api2/json/nodes/${task.node}/tasks/${encodeURIComponent(me.upid)}/status`,
	    interval: 1000,
	    rows: rows,
	});

	me.on('destroy', statstore.stopUpdate);

	let stop_task = function() {
	    Proxmox.Utils.API2Request({
		url: `/nodes/${task.node}/tasks/${encodeURIComponent(me.upid)}`,
		waitMsgTarget: me,
		method: 'DELETE',
		failure: response => Ext.Msg.alert(gettext('Error'), response.htmlStatus),
	    });
	};

	let stop_btn1 = new Ext.Button({
	    text: gettext('Stop'),
	    disabled: true,
	    handler: stop_task,
	});

	let stop_btn2 = new Ext.Button({
	    text: gettext('Stop'),
	    disabled: true,
	    handler: stop_task,
	});

	statgrid = Ext.create('Proxmox.grid.ObjectGrid', {
	    title: gettext('Status'),
	    layout: 'fit',
	    tbar: [stop_btn1],
	    rstore: statstore,
	    rows: rows,
	    border: false,
	});

	let downloadBtn = new Ext.Button({
	    text: gettext('Download'),
	    iconCls: 'fa fa-download',
	    handler: () => Proxmox.Utils.downloadAsFile(
	        `/api2/json/nodes/${task.node}/tasks/${encodeURIComponent(me.upid)}/log?download=1`),
	});


	let logView = Ext.create('Proxmox.panel.LogView', {
	    title: gettext('Output'),
	    tbar: [stop_btn2, '->', downloadBtn],
	    border: false,
	    url: `/api2/extjs/nodes/${task.node}/tasks/${encodeURIComponent(me.upid)}/log`,
	});

	me.mon(statstore, 'load', function() {
	    let status = statgrid.getObjectValue('status');

	    if (status === 'stopped') {
		logView.scrollToEnd = false;
		logView.requestUpdate();
		statstore.stopUpdate();
		me.taskDone(statgrid.getObjectValue('exitstatus') === 'OK');
	    }

	    stop_btn1.setDisabled(status !== 'running');
	    stop_btn2.setDisabled(status !== 'running');
	    downloadBtn.setDisabled(status === 'running');
	});

	statstore.startUpdate();

	Ext.apply(me, {
	    title: "Task viewer: " + task.desc + me.extraTitle,
	    width: 800,
	    height: 500,
	    layout: 'fit',
	    modal: true,
	    items: [{
		xtype: 'tabpanel',
		region: 'center',
		items: [logView, statgrid],
	    }],
        });

	me.callParent();

	logView.fireEvent('show', logView);
    },
});

Ext.define('Proxmox.window.LanguageEditWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.pmxLanguageEditWindow',

    viewModel: {
	parent: null,
	data: {
	    language: '__default__',
	},
    },
    controller: {
	xclass: 'Ext.app.ViewController',
	init: function(view) {
	    let language = Ext.util.Cookies.get(view.cookieName) || '__default__';
	    if (language === 'kr') {
		// fix-up wrongly used Korean code before FIXME: remove with trixie releases
		language = 'ko';
		let expire = Ext.Date.add(new Date(), Ext.Date.YEAR, 10);
		Ext.util.Cookies.set(view.cookieName, language, expire);
	    }
	    this.getViewModel().set('language', language);
	},
	applyLanguage: function(button) {
	    let view = this.getView();
	    let vm = this.getViewModel();

	    let expire = Ext.Date.add(new Date(), Ext.Date.YEAR, 10);
	    Ext.util.Cookies.set(view.cookieName, vm.get('language'), expire);
	    view.mask(gettext('Please wait...'), 'x-mask-loading');
	    window.location.reload();
	},
    },

    cookieName: 'PVELangCookie',

    title: gettext('Language'),
    modal: true,
    bodyPadding: 10,
    resizable: false,
    items: [
	{
	    xtype: 'proxmoxLanguageSelector',
	    fieldLabel: gettext('Language'),
	    labelWidth: 75,
	    bind: {
		value: '{language}',
	    },
	},
    ],
    buttons: [
	{
	    text: gettext('Apply'),
	    handler: 'applyLanguage',
	},
    ],
});
Ext.define('Proxmox.window.DiskSmart', {
    extend: 'Ext.window.Window',
    alias: 'widget.pmxSmartWindow',

    modal: true,

    layout: {
	type: 'fit',
    },
    width: 800,
    height: 500,
    minWidth: 400,
    minHeight: 300,
    bodyPadding: 5,

    items: [
	{
	    xtype: 'gridpanel',
	    layout: {
		type: 'fit',
	    },
	    emptyText: gettext('No S.M.A.R.T. Values'),
	    scrollable: true,
	    flex: 1,
	    itemId: 'smartGrid',
	    reserveScrollbar: true,
	    columns: [
		{
		    text: 'ID',
		    dataIndex: 'id',
		    width: 50,
		    align: 'right',
		},
		{
		    text: gettext('Attribute'),
		    dataIndex: 'name',
		    flex: 1,
		    renderer: Ext.String.htmlEncode,
		},
		{
		    text: gettext('Value'),
		    dataIndex: 'real-value',
		    renderer: Ext.String.htmlEncode,
		},
		{
		    text: gettext('Normalized'),
		    dataIndex: 'real-normalized',
		    width: 60,
		    align: 'right',
		},
		{
		    text: gettext('Threshold'),
		    dataIndex: 'threshold',
		    width: 60,
		    align: 'right',
		},
		{
		    text: gettext('Worst'),
		    dataIndex: 'worst',
		    width: 60,
		    align: 'right',
		},
		{
		    text: gettext('Flags'),
		    dataIndex: 'flags',
		},
		{
		    text: gettext('Failing'),
		    dataIndex: 'fail',
		    renderer: Ext.String.htmlEncode,
		},
	    ],
	},
	{
	    xtype: 'component',
	    itemId: 'smartPlainText',
	    hidden: true,
	    autoScroll: true,
	    padding: 5,
	    style: {
		'white-space': 'pre',
		'font-family': 'monospace',
	    },
	},
    ],

    buttons: [
	{
	    text: gettext('Reload'),
	    name: 'reload',
	    handler: function() {
		var me = this;
		me.up('window').store.reload();
	    },
	},
	{
	    text: gettext('Close'),
	    name: 'close',
	    handler: function() {
		var me = this;
		me.up('window').close();
	    },
	},
    ],

    initComponent: function() {
	let me = this;

	if (!me.baseurl) {
	    throw "no baseurl specified";
	}
	if (!me.dev) {
	    throw "no device specified";
	}

	me.title = `${gettext('S.M.A.R.T. Values')} (${me.dev})`;

	me.store = Ext.create('Ext.data.Store', {
	    model: 'pmx-disk-smart',
	    proxy: {
                type: 'proxmox',
		url: `${me.baseurl}/smart?disk=${me.dev}`,
	    },
	});

	me.callParent();

	let grid = me.down('#smartGrid'), plainText = me.down('#smartPlainText');

	Proxmox.Utils.monStoreErrors(grid, me.store);
	me.mon(me.store, 'load', function(_store, records, success) {
	    if (!success || records.length <= 0) {
		return; // FIXME: clear displayed info?
	    }
	    let isPlainText = records[0].data.type === 'text';
	    if (isPlainText) {
		plainText.setHtml(Ext.String.htmlEncode(records[0].data.text));
	    } else {
		grid.setStore(records[0].attributes());
	    }
	    grid.setVisible(!isPlainText);
	    plainText.setVisible(isPlainText);
	});

	me.store.load();
    },
}, function() {
    Ext.define('pmx-disk-smart', {
	extend: 'Ext.data.Model',
	fields: [
	    { name: 'health' },
	    { name: 'type' },
	    { name: 'text' },
	],
	hasMany: { model: 'pmx-smart-attribute', name: 'attributes' },
    });
    Ext.define('pmx-smart-attribute', {
	extend: 'Ext.data.Model',
	fields: [
	    { name: 'id', type: 'number' }, 'name', 'value', 'worst', 'threshold', 'flags', 'fail',
	    'raw', 'normalized',
	    {
		name: 'real-value',
		// FIXME remove with next major release (PBS 3.0)
		calculate: data => data.raw ?? data.value,
	    },
	    {
		name: 'real-normalized',
		// FIXME remove with next major release (PBS 3.0)
		calculate: data => data.normalized ?? data.value,
	    },
	],
	idProperty: 'name',
    });
});
Ext.define('Proxmox.window.ZFSDetail', {
    extend: 'Ext.window.Window',
    alias: 'widget.pmxZFSDetail',
    mixins: ['Proxmox.Mixin.CBind'],

    cbindData: function(initialConfig) {
	let me = this;
	me.url = `/nodes/${me.nodename}/disks/zfs/${encodeURIComponent(me.zpool)}`;
	return {
	    zpoolUri: `/api2/json/${me.url}`,
	    title: `${gettext('Status')}: ${me.zpool}`,
	};
    },

    controller: {
	xclass: 'Ext.app.ViewController',

	reload: function() {
	    let me = this;
	    let view = me.getView();
	    me.lookup('status').reload();

	    Proxmox.Utils.API2Request({
		url: `/api2/extjs/${view.url}`,
		waitMsgTarget: view,
		method: 'GET',
		failure: function(response, opts) {
		    Proxmox.Utils.setErrorMask(view, response.htmlStatus);
		},
		success: function(response, opts) {
		    let devices = me.lookup('devices');
		    devices.getSelectionModel().deselectAll();
		    devices.setRootNode(response.result.data);
		    devices.expandAll();
		},
	    });
	},

	init: function(view) {
	    let me = this;
	    Proxmox.Utils.monStoreErrors(me, me.lookup('status').getStore().rstore);
	    me.reload();
	},
    },

    modal: true,
    width: 800,
    height: 600,
    resizable: true,
    cbind: {
	title: '{title}',
    },

    layout: {
	type: 'vbox',
	align: 'stretch',
    },
    defaults: {
	layout: 'fit',
	border: false,
    },

    tbar: [
	{
	    text: gettext('Reload'),
	    iconCls: 'fa fa-refresh',
	    handler: 'reload',
	},
    ],

    items: [
	{
	    xtype: 'proxmoxObjectGrid',
	    reference: 'status',
	    flex: 0,
	    cbind: {
		url: '{zpoolUri}',
		nodename: '{nodename}',
	    },
	    rows: {
		state: {
		    header: gettext('Health'),
		    renderer: Proxmox.Utils.render_zfs_health,
		},
		scan: {
		    header: gettext('Scan'),
		},
		status: {
		    header: gettext('Status'),
		},
		action: {
		    header: gettext('Action'),
		},
		errors: {
		    header: gettext('Errors'),
		},
	    },
	},
	{
	    xtype: 'treepanel',
	    reference: 'devices',
	    title: gettext('Devices'),
	    stateful: true,
	    stateId: 'grid-node-zfsstatus',
	    // the root is the pool itself and the information is shown by the grid
	    rootVisible: false,
	    fields: ['name', 'status',
		{
		    type: 'string',
		    name: 'iconCls',
		    calculate: function(data) {
			var txt = 'fa x-fa-tree fa-';
			if (data.leaf) {
			    return txt + 'hdd-o';
			}
			return undefined;
		    },
		},
	    ],
	    sorters: 'name',
	    flex: 1,
	    cbind: {
		zpool: '{zpoolUri}',
		nodename: '{nodename}',
	    },
	    columns: [
		{
		    xtype: 'treecolumn',
		    text: gettext('Name'),
		    dataIndex: 'name',
		    flex: 1,
		},
		{
		    text: gettext('Health'),
		    renderer: Proxmox.Utils.render_zfs_health,
		    dataIndex: 'state',
		},
		{
		    text: 'READ',
		    dataIndex: 'read',
		},
		{
		    text: 'WRITE',
		    dataIndex: 'write',
		},
		{
		    text: 'CKSUM',
		    dataIndex: 'cksum',
		},
		{
		    text: gettext('Message'),
		    dataIndex: 'msg',
		},
	    ],
	},
    ],
});
Ext.define('Proxmox.window.CertificateViewer', {
    extend: 'Proxmox.window.Edit',
    xtype: 'pmxCertViewer',

    title: gettext('Certificate'),

    fieldDefaults: {
	labelWidth: 120,
    },
    width: 800,
    resizable: true,

    items: [
	{
	    xtype: 'displayfield',
	    fieldLabel: gettext('Name'),
	    name: 'filename',
	},
	{
	    xtype: 'displayfield',
	    fieldLabel: gettext('Fingerprint'),
	    name: 'fingerprint',
	},
	{
	    xtype: 'displayfield',
	    fieldLabel: gettext('Issuer'),
	    name: 'issuer',
	},
	{
	    xtype: 'displayfield',
	    fieldLabel: gettext('Subject'),
	    name: 'subject',
	},
	{
	    xtype: 'displayfield',
	    fieldLabel: gettext('Public Key Type'),
	    name: 'public-key-type',
	},
	{
	    xtype: 'displayfield',
	    fieldLabel: gettext('Public Key Size'),
	    name: 'public-key-bits',
	},
	{
	    xtype: 'displayfield',
	    fieldLabel: gettext('Valid Since'),
	    renderer: Proxmox.Utils.render_timestamp,
	    name: 'notbefore',
	},
	{
	    xtype: 'displayfield',
	    fieldLabel: gettext('Expires'),
	    renderer: Proxmox.Utils.render_timestamp,
	    name: 'notafter',
	},
	{
	    xtype: 'displayfield',
	    fieldLabel: gettext('Subject Alternative Names'),
	    name: 'san',
	    renderer: Proxmox.Utils.render_san,
	},
	{
	    xtype: 'textarea',
	    editable: false,
	    grow: true,
	    growMax: 200,
	    fieldLabel: gettext('Certificate'),
	    name: 'pem',
	},
    ],

    initComponent: function() {
	var me = this;

	if (!me.cert) {
	    throw "no cert given";
	}

	if (!me.url) {
	    throw "no url given";
	}

	me.callParent();

	// hide OK/Reset button, because we just want to show data
	me.down('toolbar[dock=bottom]').setVisible(false);

	me.load({
	    success: function(response) {
		if (Ext.isArray(response.result.data)) {
		    Ext.Array.each(response.result.data, function(item) {
			if (item.filename === me.cert) {
			    me.setValues(item);
			    return false;
			}
			return true;
		    });
		}
	    },
	});
    },
});

Ext.define('Proxmox.window.CertificateUpload', {
    extend: 'Proxmox.window.Edit',
    xtype: 'pmxCertUpload',

    title: gettext('Upload Custom Certificate'),
    resizable: false,
    isCreate: true,
    submitText: gettext('Upload'),
    method: 'POST',
    width: 600,

    // whether the UI needs a reload after this
    reloadUi: undefined,

    apiCallDone: function(success, response, options) {
	let me = this;

	if (!success || !me.reloadUi) {
	    return;
	}

	Ext.getBody().mask(
	    gettext('API server will be restarted to use new certificates, please reload web-interface!'),
	    ['pve-static-mask'],
	);
	// try to reload after 10 seconds automatically
	Ext.defer(() => window.location.reload(true), 10000);
    },

    items: [
	{
	    fieldLabel: gettext('Private Key (Optional)'),
	    labelAlign: 'top',
	    emptyText: gettext('No change'),
	    name: 'key',
	    xtype: 'textarea',
	},
	{
	    xtype: 'filebutton',
	    text: gettext('From File'),
	    listeners: {
		change: function(btn, e, value) {
		    let form = this.up('form');
		    e = e.event;
		    Ext.Array.each(e.target.files, function(file) {
			Proxmox.Utils.loadTextFromFile(
			    file,
			    function(res) {
				form.down('field[name=key]').setValue(res);
			    },
			    16384,
			);
		    });
		    btn.reset();
		},
	    },
	},
	{
	    xtype: 'box',
	    autoEl: 'hr',
	},
	{
	    fieldLabel: gettext('Certificate Chain'),
	    labelAlign: 'top',
	    allowBlank: false,
	    name: 'certificates',
	    xtype: 'textarea',
	},
	{
	    xtype: 'filebutton',
	    text: gettext('From File'),
	    listeners: {
		change: function(btn, e, value) {
		    let form = this.up('form');
		    e = e.event;
		    Ext.Array.each(e.target.files, function(file) {
			Proxmox.Utils.loadTextFromFile(
			    file,
			    function(res) {
				form.down('field[name=certificates]').setValue(res);
			    },
			    16384,
			);
		    });
		    btn.reset();
		},
	    },
	},
	{
	    xtype: 'hidden',
	    name: 'restart',
	    value: '1',
	},
	{
	    xtype: 'hidden',
	    name: 'force',
	    value: '1',
	},
    ],

    initComponent: function() {
	var me = this;

	if (!me.url) {
	    throw "neither url given";
	}

	me.callParent();
    },
});
Ext.define('Proxmox.window.ConsentModal', {
    extend: 'Ext.window.Window',
    alias: ['widget.pmxConsentModal'],
    mixins: ['Proxmox.Mixin.CBind'],

    maxWidth: 1000,
    maxHeight: 1000,
    minWidth: 600,
    minHeight: 400,
    scrollable: true,
    modal: true,
    closable: false,
    resizable: false,
    alwaysOnTop: true,
    title: gettext('Consent'),

    items: [
	{
	    xtype: 'displayfield',
	    padding: 10,
	    scrollable: true,
	    cbind: {
		value: '{consent}',
	    },
	},
    ],
    buttons: [
	{
	    handler: function() {
		this.up('window').close();
	    },
	    text: gettext('OK'),
	},
    ],
});

Ext.define('Proxmox.window.ACMEAccountCreate', {
    extend: 'Proxmox.window.Edit',
    mixins: ['Proxmox.Mixin.CBind'],
    xtype: 'pmxACMEAccountCreate',

    acmeUrl: undefined,

    width: 450,
    title: gettext('Register Account'),
    isCreate: true,
    method: 'POST',
    submitText: gettext('Register'),
    showTaskViewer: true,
    defaultExists: false,

    items: [
	{
	    xtype: 'proxmoxtextfield',
	    fieldLabel: gettext('Account Name'),
	    name: 'name',
	    cbind: {
		emptyText: (get) => get('defaultExists') ? '' : 'default',
		allowBlank: (get) => !get('defaultExists'),
	    },
	},
	{
	    xtype: 'textfield',
	    name: 'contact',
	    vtype: 'email',
	    allowBlank: false,
	    fieldLabel: gettext('E-Mail'),
	},
	{
	    xtype: 'proxmoxComboGrid',
	    name: 'directory',
	    reference: 'directory',
	    allowBlank: false,
	    valueField: 'url',
	    displayField: 'name',
	    fieldLabel: gettext('ACME Directory'),
	    store: {
		autoLoad: true,
		fields: ['name', 'url'],
		idProperty: ['name'],
		proxy: { type: 'proxmox' },
		sorters: {
		    property: 'name',
		    direction: 'ASC',
		},
	    },
	    listConfig: {
		columns: [
		    {
			header: gettext('Name'),
			dataIndex: 'name',
			flex: 1,
		    },
		    {
			header: gettext('URL'),
			dataIndex: 'url',
			flex: 1,
		    },
		],
	    },
	    listeners: {
		change: function(combogrid, value) {
		    let me = this;

		    if (!value) {
			return;
		    }

		    let acmeUrl = me.up('window').acmeUrl;

		    let disp = me.up('window').down('#tos_url_display');
		    let field = me.up('window').down('#tos_url');
		    let checkbox = me.up('window').down('#tos_checkbox');

		    disp.setValue(gettext('Loading'));
		    field.setValue(undefined);
		    checkbox.setValue(undefined);
		    checkbox.setHidden(true);

		    Proxmox.Utils.API2Request({
			url: `${acmeUrl}/tos`,
			method: 'GET',
			params: {
			    directory: value,
			},
			success: function(response, opt) {
			    field.setValue(response.result.data);
			    disp.setValue(response.result.data);
			    checkbox.setHidden(false);
			},
			failure: function(response, opt) {
			    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
			},
		    });
		},
	    },
	},
	{
	    xtype: 'displayfield',
	    itemId: 'tos_url_display',
	    renderer: Proxmox.Utils.render_optional_url,
	    name: 'tos_url_display',
	},
	{
	    xtype: 'hidden',
	    itemId: 'tos_url',
	    name: 'tos_url',
	},
	{
	    xtype: 'proxmoxcheckbox',
	    itemId: 'tos_checkbox',
	    boxLabel: gettext('Accept TOS'),
	    submitValue: false,
	    validateValue: function(value) {
		if (value && this.checked) {
		    return true;
		}
		return false;
	    },
	},
    ],

    initComponent: function() {
	let me = this;

	if (!me.acmeUrl) {
	    throw "no acmeUrl given";
	}

	me.url = `${me.acmeUrl}/account`;

	me.callParent();

	me.lookup('directory')
	    .store
	    .proxy
	    .setUrl(`/api2/json/${me.acmeUrl}/directories`);
    },
});

Ext.define('Proxmox.window.ACMEAccountView', {
    extend: 'Proxmox.window.Edit',
    xtype: 'pmxACMEAccountView',

    width: 600,
    fieldDefaults: {
	labelWidth: 140,
    },

    title: gettext('Account'),

    items: [
	{
	    xtype: 'displayfield',
	    fieldLabel: gettext('E-Mail'),
	    name: 'email',
	},
	{
	    xtype: 'displayfield',
	    fieldLabel: gettext('Created'),
	    name: 'createdAt',
	},
	{
	    xtype: 'displayfield',
	    fieldLabel: gettext('Status'),
	    name: 'status',
	},
	{
	    xtype: 'displayfield',
	    fieldLabel: gettext('Directory'),
	    renderer: Proxmox.Utils.render_optional_url,
	    name: 'directory',
	},
	{
	    xtype: 'displayfield',
	    fieldLabel: gettext('Terms of Services'),
	    renderer: Proxmox.Utils.render_optional_url,
	    name: 'tos',
	},
    ],

    initComponent: function() {
	var me = this;

	me.callParent();

	// hide OK/Reset button, because we just want to show data
	me.down('toolbar[dock=bottom]').setVisible(false);

	me.load({
	    success: function(response) {
		var data = response.result.data;
		data.email = data.account.contact[0];
		data.createdAt = data.account.createdAt;
		data.status = data.account.status;
		me.setValues(data);
	    },
	});
    },
});
Ext.define('Proxmox.window.ACMEPluginEdit', {
    extend: 'Proxmox.window.Edit',
    xtype: 'pmxACMEPluginEdit',
    mixins: ['Proxmox.Mixin.CBind'],

    //onlineHelp: 'sysadmin_certs_acme_plugins',

    isAdd: true,
    isCreate: false,

    width: 550,

    acmeUrl: undefined,

    subject: 'ACME DNS Plugin',

    cbindData: function(config) {
	let me = this;
	return {
	    challengeSchemaUrl: `/api2/json/${me.acmeUrl}/challenge-schema`,
	};
    },

    items: [
	{
	    xtype: 'inputpanel',
	    // we dynamically create fields from the given schema
	    // things we have to do here:
	    // * save which fields we created to remove them again
	    // * split the data from the generic 'data' field into the boxes
	    // * on deletion collect those values again
	    // * save the original values of the data field
	    createdFields: {},
	    createdInitially: false,
	    originalValues: {},
	    createSchemaFields: function(schema) {
		let me = this;
		// we know where to add because we define it right below
		let container = me.down('container');
		let datafield = me.down('field[name=data]');
		let hintfield = me.down('field[name=hint]');
		if (!me.createdInitially) {
		    [me.originalValues] = Proxmox.Utils.parseACMEPluginData(datafield.getValue());
		}

		// collect values from custom fields and add it to 'data'',
		// then remove the custom fields
		let data = [];
		for (const [name, field] of Object.entries(me.createdFields)) {
		    let value = field.getValue();
		    if (value !== undefined && value !== null && value !== '') {
			data.push(`${name}=${value}`);
		    }
		    container.remove(field);
		}
		let datavalue = datafield.getValue();
		if (datavalue !== undefined && datavalue !== null && datavalue !== '') {
		    data.push(datavalue);
		}
		datafield.setValue(data.join('\n'));

		me.createdFields = {};

		if (typeof schema.fields !== 'object') {
		    schema.fields = {};
		}
		// create custom fields according to schema
		let gotSchemaField = false;
		for (const [name, definition] of Object
		    .entries(schema.fields)
		    .sort((a, b) => a[0].localeCompare(b[0]))
		) {
		    let xtype;
		    switch (definition.type) {
			case 'string':
			    xtype = 'proxmoxtextfield';
			    break;
			case 'integer':
			    xtype = 'proxmoxintegerfield';
			    break;
			case 'number':
			    xtype = 'numberfield';
			    break;
			default:
			    console.warn(`unknown type '${definition.type}'`);
			    xtype = 'proxmoxtextfield';
			    break;
		    }

		    let label = name;
		    if (typeof definition.name === "string") {
			label = definition.name;
		    }

		    let field = Ext.create({
			xtype,
			name: `custom_${name}`,
			fieldLabel: Ext.htmlEncode(label),
			width: '100%',
			labelWidth: 150,
			labelSeparator: '=',
			emptyText: definition.default || '',
			autoEl: definition.description ? {
			    tag: 'div',
			    'data-qtip': Ext.htmlEncode(Ext.htmlEncode(definition.description)),
			} : undefined,
		    });

		    me.createdFields[name] = field;
		    container.add(field);
		    gotSchemaField = true;
		}
		datafield.setHidden(gotSchemaField); // prefer schema-fields

		if (schema.description) {
		    hintfield.setValue(schema.description);
		    hintfield.setHidden(false);
		} else {
		    hintfield.setValue('');
		    hintfield.setHidden(true);
		}

		// parse data from field and set it to the custom ones
		let extradata = [];
		[data, extradata] = Proxmox.Utils.parseACMEPluginData(datafield.getValue());
		for (const [key, value] of Object.entries(data)) {
		    if (me.createdFields[key]) {
			me.createdFields[key].setValue(value);
			me.createdFields[key].originalValue = me.originalValues[key];
			me.createdFields[key].checkDirty();
		    } else {
			extradata.push(`${key}=${value}`);
		    }
		}
		datafield.setValue(extradata.join('\n'));
		if (!me.createdInitially) {
		    datafield.resetOriginalValue();
		    me.createdInitially = true; // save that we initially set that
		}
	    },

	    onGetValues: function(values) {
		let me = this;
		let win = me.up('pmxACMEPluginEdit');
		if (win.isCreate) {
		    values.id = values.plugin;
		    values.type = 'dns'; // the only one for now
		}
		delete values.plugin;

		Proxmox.Utils.delete_if_default(values, 'validation-delay', '30', win.isCreate);

		let data = '';
		for (const [name, field] of Object.entries(me.createdFields)) {
		    let value = field.getValue();
		    if (value !== null && value !== undefined && value !== '') {
			data += `${name}=${value}\n`;
		    }
		    delete values[`custom_${name}`];
		}
		values.data = Ext.util.Base64.encode(data + values.data);
		return values;
	    },

	    items: [
		{
		    xtype: 'pmxDisplayEditField',
		    cbind: {
			editable: (get) => get('isCreate'),
			submitValue: (get) => get('isCreate'),
		    },
		    editConfig: {
			flex: 1,
			xtype: 'proxmoxtextfield',
			allowBlank: false,
		    },
		    name: 'plugin',
		    labelWidth: 150,
		    fieldLabel: gettext('Plugin ID'),
		},
		{
		    xtype: 'proxmoxintegerfield',
		    name: 'validation-delay',
		    labelWidth: 150,
		    fieldLabel: gettext('Validation Delay'),
		    emptyText: 30,
		    cbind: {
			deleteEmpty: '{!isCreate}',
		    },
		    minValue: 0,
		    maxValue: 48*60*60,
		},
		{
		    xtype: 'pmxACMEApiSelector',
		    name: 'api',
		    labelWidth: 150,
		    cbind: {
			url: '{challengeSchemaUrl}',
		    },
		    listeners: {
			change: function(selector) {
			    let schema = selector.getSchema();
			    selector.up('inputpanel').createSchemaFields(schema);
			},
		    },
		},
		{
		    xtype: 'textarea',
		    fieldLabel: gettext('API Data'),
		    labelWidth: 150,
		    name: 'data',
		},
		{
		    xtype: 'displayfield',
		    fieldLabel: gettext('Hint'),
		    labelWidth: 150,
		    name: 'hint',
		    hidden: true,
		},
	    ],
	},
    ],

    initComponent: function() {
	var me = this;

	if (!me.acmeUrl) {
	    throw "no acmeUrl given";
	}

	me.callParent();

	if (!me.isCreate) {
	    me.load({
		success: function(response, opts) {
		    me.setValues(response.result.data);
		},
	    });
	} else {
	    me.method = 'POST';
	}
    },
});
Ext.define('Proxmox.window.ACMEDomainEdit', {
    extend: 'Proxmox.window.Edit',
    xtype: 'pmxACMEDomainEdit',
    mixins: ['Proxmox.Mixin.CBind'],

    subject: gettext('Domain'),
    isCreate: false,
    width: 450,
    //onlineHelp: 'sysadmin_certificate_management',

    acmeUrl: undefined,

    // config url
    url: undefined,

    // For PMG the we have multiple certificates, so we have a "usage" attribute & column.
    domainUsages: undefined,

    // Force the use of 'acmedomainX' properties.
    separateDomainEntries: undefined,

    cbindData: function(config) {
	let me = this;
	return {
	    pluginsUrl: `/api2/json/${me.acmeUrl}/plugins`,
	    hasUsage: !!me.domainUsages,
	};
    },

    items: [
	{
	    xtype: 'inputpanel',
	    onGetValues: function(values) {
		let me = this;
		let win = me.up('pmxACMEDomainEdit');
		let nodeconfig = win.nodeconfig;
		let olddomain = win.domain || {};

		let params = {
		    digest: nodeconfig.digest,
		};

		let configkey = olddomain.configkey;
		let acmeObj = Proxmox.Utils.parseACME(nodeconfig.acme);

		let find_free_slot = () => {
		    for (let i = 0; i < Proxmox.Utils.acmedomain_count; i++) {
			if (nodeconfig[`acmedomain${i}`] === undefined) {
			    return `acmedomain${i}`;
			}
		    }
		    throw "too many domains configured";
		};

		// If we have a 'usage' property (pmg), we only use the `acmedomainX` config keys.
		if (win.separateDomainEntries || win.domainUsages) {
		    if (!configkey || configkey === 'acme') {
			configkey = find_free_slot();
		    }
		    delete values.type;
		    params[configkey] = Proxmox.Utils.printPropertyString(values, 'domain');
		    return params;
		}

		// Otherwise we put the standalone entries into the `domains` list of the `acme`
		// property string.

		// Then insert the domain depending on its type:
		if (values.type === 'dns') {
		    if (!olddomain.configkey || olddomain.configkey === 'acme') {
			configkey = find_free_slot();
			if (olddomain.domain) {
			    // we have to remove the domain from the acme domainlist
			    Proxmox.Utils.remove_domain_from_acme(acmeObj, olddomain.domain);
			    params.acme = Proxmox.Utils.printACME(acmeObj);
			}
		    }

		    delete values.type;
		    params[configkey] = Proxmox.Utils.printPropertyString(values, 'domain');
		} else {
		    if (olddomain.configkey && olddomain.configkey !== 'acme') {
			// delete the old dns entry, unless we need to declare its usage:
			params.delete = [olddomain.configkey];
		    }

		    // add new, remove old and make entries unique
		    Proxmox.Utils.add_domain_to_acme(acmeObj, values.domain);
		    if (olddomain.domain !== values.domain) {
			Proxmox.Utils.remove_domain_from_acme(acmeObj, olddomain.domain);
		    }
		    params.acme = Proxmox.Utils.printACME(acmeObj);
		}

		return params;
	    },
	    items: [
		{
		    xtype: 'proxmoxKVComboBox',
		    name: 'type',
		    fieldLabel: gettext('Challenge Type'),
		    allowBlank: false,
		    value: 'standalone',
		    comboItems: [
			['standalone', 'HTTP'],
			['dns', 'DNS'],
		    ],
		    validator: function(value) {
			let me = this;
			let win = me.up('pmxACMEDomainEdit');
			let oldconfigkey = win.domain ? win.domain.configkey : undefined;
			let val = me.getValue();
			if (val === 'dns' && (!oldconfigkey || oldconfigkey === 'acme')) {
			    // we have to check if there is a 'acmedomain' slot left
			    let found = false;
			    for (let i = 0; i < Proxmox.Utils.acmedomain_count; i++) {
				if (!win.nodeconfig[`acmedomain${i}`]) {
				    found = true;
				}
			    }
			    if (!found) {
				return gettext('Only 5 Domains with type DNS can be configured');
			    }
			}

			return true;
		    },
		    listeners: {
			change: function(cb, value) {
			    let me = this;
			    let view = me.up('pmxACMEDomainEdit');
			    let pluginField = view.down('field[name=plugin]');
			    pluginField.setDisabled(value !== 'dns');
			    pluginField.setHidden(value !== 'dns');
			},
		    },
		},
		{
		    xtype: 'hidden',
		    name: 'alias',
		},
		{
		    xtype: 'pmxACMEPluginSelector',
		    name: 'plugin',
		    disabled: true,
		    hidden: true,
		    allowBlank: false,
		    cbind: {
			url: '{pluginsUrl}',
		    },
		},
		{
		    xtype: 'proxmoxtextfield',
		    name: 'domain',
		    allowBlank: false,
		    vtype: 'DnsNameOrWildcard',
		    value: '',
		    fieldLabel: gettext('Domain'),
		},
		{
		    xtype: 'combobox',
		    name: 'usage',
		    multiSelect: true,
		    editable: false,
		    fieldLabel: gettext('Usage'),
		    cbind: {
			hidden: '{!hasUsage}',
			allowBlank: '{!hasUsage}',
		    },
		    fields: ['usage', 'name'],
		    displayField: 'name',
		    valueField: 'usage',
		    store: {
			data: [
			    { usage: 'api', name: 'API' },
			    { usage: 'smtp', name: 'SMTP' },
			],
		    },
		},
	    ],
	},
    ],

    initComponent: function() {
	let me = this;

	if (!me.url) {
	    throw 'no url given';
	}

	if (!me.acmeUrl) {
	    throw 'no acmeUrl given';
	}

	if (!me.nodeconfig) {
	    throw 'no nodeconfig given';
	}

	me.isCreate = !me.domain;
	if (me.isCreate) {
	    me.domain = `${Proxmox.NodeName}.`; // TODO: FQDN of node
	}

	me.callParent();

	if (!me.isCreate) {
	    let values = { ...me.domain };
	    if (Ext.isDefined(values.usage)) {
		values.usage = values.usage.split(';');
	    }
	    me.setValues(values);
	} else {
	    me.setValues({ domain: me.domain });
	}
    },
});
Ext.define('Proxmox.window.EndpointEditBase', {
    extend: 'Proxmox.window.Edit',

    isAdd: true,

    fieldDefaults: {
	labelWidth: 120,
    },

    width: 700,

    initComponent: function() {
	let me = this;

	me.isCreate = !me.name;

	if (!me.baseUrl) {
	    throw "baseUrl not set";
	}

	if (me.type === 'group') {
	    me.url = `/api2/extjs${me.baseUrl}/groups`;
	} else {
	    me.url = `/api2/extjs${me.baseUrl}/endpoints/${me.type}`;
	}

	if (me.isCreate) {
	    me.method = 'POST';
	} else {
	    me.url += `/${me.name}`;
	    me.method = 'PUT';
	}

	let endpointConfig = Proxmox.Schema.notificationEndpointTypes[me.type];
	if (!endpointConfig) {
	    throw 'unknown endpoint type';
	}

	me.subject = endpointConfig.name;

	Ext.apply(me, {
	    items: [{
		name: me.name,
		xtype: endpointConfig.ipanel,
		isCreate: me.isCreate,
		baseUrl: me.baseUrl,
		type: me.type,
		defaultMailAuthor: endpointConfig.defaultMailAuthor,
	    }],
	});

	me.callParent();

	if (!me.isCreate) {
	    me.load();
	}
    },
});
Ext.define('Proxmox.panel.NotificationMatcherGeneralPanel', {
    extend: 'Proxmox.panel.InputPanel',
    xtype: 'pmxNotificationMatcherGeneralPanel',
    mixins: ['Proxmox.Mixin.CBind'],

    items: [
	{
	    xtype: 'pmxDisplayEditField',
	    name: 'name',
	    cbind: {
		value: '{name}',
		editable: '{isCreate}',
	    },
	    fieldLabel: gettext('Matcher Name'),
	    allowBlank: false,
	},
	{
	    xtype: 'proxmoxcheckbox',
	    name: 'enable',
	    fieldLabel: gettext('Enable'),
	    allowBlank: false,
	    checked: true,
	},
	{
	    xtype: 'proxmoxtextfield',
	    name: 'comment',
	    fieldLabel: gettext('Comment'),
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
    ],


    onSetValues: function(values) {
	values.enable = !values.disable;

	delete values.disable;
	return values;
    },

    onGetValues: function(values) {
	let me = this;

	if (values.enable) {
	    if (!me.isCreate) {
		Proxmox.Utils.assemble_field_data(values, { 'delete': 'disable' });
	    }
	} else {
	    values.disable = 1;
	}
	delete values.enable;

	return values;
    },
});

Ext.define('Proxmox.panel.NotificationMatcherTargetPanel', {
    extend: 'Proxmox.panel.InputPanel',
    xtype: 'pmxNotificationMatcherTargetPanel',
    mixins: ['Proxmox.Mixin.CBind'],

    items: [
	{
	    xtype: 'pmxNotificationTargetSelector',
	    name: 'target',
	    allowBlank: false,
	},
    ],
});

Ext.define('Proxmox.window.NotificationMatcherEdit', {
    extend: 'Proxmox.window.Edit',

    isAdd: true,
    onlineHelp: 'notification_matchers',

    fieldDefaults: {
	labelWidth: 120,
    },

    width: 800,

    initComponent: function() {
	let me = this;

	me.isCreate = !me.name;

	if (!me.baseUrl) {
	    throw "baseUrl not set";
	}

	me.url = `/api2/extjs${me.baseUrl}/matchers`;

	if (me.isCreate) {
	    me.method = 'POST';
	} else {
	    me.url += `/${me.name}`;
	    me.method = 'PUT';
	}

	me.subject = gettext('Notification Matcher');

	Ext.apply(me, {
	    bodyPadding: 0,
	    items: [
		{
		    xtype: 'tabpanel',
		    region: 'center',
		    layout: 'fit',
		    bodyPadding: 10,
		    items: [
			{
			    name: me.name,
			    title: gettext('General'),
			    xtype: 'pmxNotificationMatcherGeneralPanel',
			    isCreate: me.isCreate,
			    baseUrl: me.baseUrl,
			},
			{
			    name: me.name,
			    title: gettext('Match Rules'),
			    xtype: 'pmxNotificationMatchRulesEditPanel',
			    isCreate: me.isCreate,
			    baseUrl: me.baseUrl,
			},
			{
			    name: me.name,
			    title: gettext('Targets to notify'),
			    xtype: 'pmxNotificationMatcherTargetPanel',
			    isCreate: me.isCreate,
			    baseUrl: me.baseUrl,
			},
		    ],
		},
	    ],
	});

	me.callParent();

	if (!me.isCreate) {
	    me.load();
	}
    },
});

Ext.define('Proxmox.form.NotificationTargetSelector', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.pmxNotificationTargetSelector',

    mixins: {
	field: 'Ext.form.field.Field',
    },

    padding: '0 0 10 0',

    allowBlank: true,
    selectAll: false,
    isFormField: true,

    store: {
	autoLoad: true,
	model: 'proxmox-notification-endpoints',
	sorters: 'name',
    },

    columns: [
	{
	    header: gettext('Target Name'),
	    dataIndex: 'name',
	    flex: 1,
	},
	{
	    header: gettext('Type'),
	    dataIndex: 'type',
	    flex: 1,
	},
	{
	    header: gettext('Comment'),
	    dataIndex: 'comment',
	    flex: 3,
	},
    ],

    selModel: {
	selType: 'checkboxmodel',
	mode: 'SIMPLE',
    },

    checkChangeEvents: [
	'selectionchange',
	'change',
    ],

    listeners: {
	selectionchange: function() {
	    // to trigger validity and error checks
	    this.checkChange();
	},
    },

    getSubmitData: function() {
	let me = this;
	let res = {};
	res[me.name] = me.getValue();
	return res;
    },

    getValue: function() {
	let me = this;
	if (me.savedValue !== undefined) {
	    return me.savedValue;
	}
	let sm = me.getSelectionModel();
	return (sm.getSelection() ?? []).map(item => item.data.name);
    },

    setValueSelection: function(value) {
	let me = this;

	let store = me.getStore();

	let notFound = [];
	let selection = value.map(item => {
	    let found = store.findRecord('name', item, 0, false, true, true);
	    if (!found) {
		notFound.push(item);
	    }
	    return found;
	}).filter(r => r);

	for (const name of notFound) {
	    let rec = store.add({
		name,
		type: '-',
		comment: gettext('Included target does not exist!'),
	    });
	    selection.push(rec[0]);
	}

	let sm = me.getSelectionModel();
	if (selection.length) {
	    sm.select(selection);
	} else {
	    sm.deselectAll();
	}
	// to correctly trigger invalid class
	me.getErrors();
    },

    setValue: function(value) {
	let me = this;

	let store = me.getStore();
	if (!store.isLoaded()) {
	    me.savedValue = value;
	    store.on('load', function() {
		me.setValueSelection(value);
		delete me.savedValue;
	    }, { single: true });
	} else {
	    me.setValueSelection(value);
	}
	return me.mixins.field.setValue.call(me, value);
    },

    getErrors: function(value) {
	let me = this;
	if (!me.isDisabled() && me.allowBlank === false &&
	    me.getSelectionModel().getCount() === 0) {
	    me.addBodyCls(['x-form-trigger-wrap-default', 'x-form-trigger-wrap-invalid']);
	    return [gettext('No target selected')];
	}

	me.removeBodyCls(['x-form-trigger-wrap-default', 'x-form-trigger-wrap-invalid']);
	return [];
    },

    initComponent: function() {
	let me = this;
	me.callParent();
	me.initField();
    },

});

Ext.define('Proxmox.panel.NotificationRulesEditPanel', {
    extend: 'Proxmox.panel.InputPanel',
    xtype: 'pmxNotificationMatchRulesEditPanel',
    mixins: ['Proxmox.Mixin.CBind'],

    controller: {
	xclass: 'Ext.app.ViewController',

	// we want to also set the empty value, but 'bind' does not do that so
	// we have to set it then (and only then) to get the correct value in
	// the tree
	control: {
	    'field': {
		change: function(cmp) {
		    let me = this;
		    let vm = me.getViewModel();
		    if (cmp.field) {
			let record = vm.get('selectedRecord');
			if (!record) {
			    return;
			}
			let data = Ext.apply({}, record.get('data'));
			let value = cmp.getValue();
			// only update if the value is empty (or empty array)
			if (!value || !value.length) {
			    data[cmp.field] = value;
			    record.set({ data });
			}
		    }
		},
	    },
	},
    },

    viewModel: {
	data: {
	    selectedRecord: null,
	    matchFieldType: 'exact',
	    matchFieldField: '',
	    matchFieldValue: '',
	    rootMode: 'all',
	},

	formulas: {
	    nodeType: {
		get: function(get) {
		    let record = get('selectedRecord');
		    return record?.get('type');
		},
		set: function(value) {
		    let me = this;
		    let record = me.get('selectedRecord');

		    let data;

		    switch (value) {
			case 'match-severity':
			    data = {
				value: ['info', 'notice', 'warning', 'error', 'unknown'],
			    };
			    break;
			case 'match-field':
			    data = {
				type: 'exact',
				field: '',
				value: '',
			    };
			    break;
			case 'match-calendar':
			    data = {
				value: '',
			    };
			    break;
		    }

		    let node = {
			type: value,
			data,
		    };
		    record.set(node);
		},
	    },
	    showMatchingMode: function(get) {
		let record = get('selectedRecord');
		if (!record) {
		    return false;
		}
		return record.isRoot();
	    },
	    showMatcherType: function(get) {
		let record = get('selectedRecord');
		if (!record) {
		    return false;
		}
		return !record.isRoot();
	    },

	    rootMode: {
		bind: {
		    bindTo: '{selectedRecord}',
		    deep: true,
		},
		set: function(value) {
		    let me = this;
		    let record = me.get('selectedRecord');
		    let currentData = record.get('data');
		    let invert = false;
		    if (value.startsWith('not')) {
			value = value.substring(3);
			invert = true;
		    }
		    record.set({
			data: {
			    ...currentData,
			    value,
			    invert,
			},
		    });
		},
		get: function(record) {
		    let prefix = record?.get('data').invert ? 'not' : '';
		    return prefix + record?.get('data')?.value;
		},
	    },
	},
    },

    column1: [
	{
	    xtype: 'pmxNotificationMatchRuleTree',
	    cbind: {
		isCreate: '{isCreate}',
	    },
	},
    ],
    column2: [
	{
	    xtype: 'pmxNotificationMatchRuleSettings',
	    cbind: {
		baseUrl: '{baseUrl}',
	    },
	},

    ],

    onGetValues: function(values) {
	let me = this;

	let deleteArrayIfEmtpy = (field) => {
	    if (Ext.isArray(values[field])) {
		if (values[field].length === 0) {
		    delete values[field];
		    if (!me.isCreate) {
			Proxmox.Utils.assemble_field_data(values, { 'delete': field });
		    }
		}
	    }
	};
	deleteArrayIfEmtpy('match-field');
	deleteArrayIfEmtpy('match-severity');
	deleteArrayIfEmtpy('match-calendar');

	return values;
    },
});

Ext.define('Proxmox.panel.NotificationMatchRuleTree', {
    extend: 'Ext.panel.Panel',
    xtype: 'pmxNotificationMatchRuleTree',
    mixins: ['Proxmox.Mixin.CBind'],
    border: false,

    getNodeTextAndIcon: function(type, data) {
	let text;
	let iconCls;

	switch (type) {
	    case 'match-severity': {
		let v = data.value;
		if (Ext.isArray(data.value)) {
		    v = data.value.join(', ');
		}
		text = Ext.String.format(gettext("Match severity: {0}"), v);
		iconCls = 'fa fa-exclamation';
		if (!v) {
		    iconCls += ' internal-error';
		}
	    } break;
	    case 'match-field': {
		let field = data.field;
		let value = data.value;
		text = Ext.String.format(gettext("Match field: {0}={1}"), field, value);
		iconCls = 'fa fa-square-o';
		if (!field || !value || (Ext.isArray(value) && !value.length)) {
		    iconCls += ' internal-error';
		}
	    } break;
	    case 'match-calendar': {
		let v = data.value;
		text = Ext.String.format(gettext("Match calendar: {0}"), v);
		iconCls = 'fa fa-calendar-o';
		if (!v || !v.length) {
		    iconCls += ' internal-error';
		}
	    } break;
	    case 'mode':
		if (data.value === 'all') {
		    if (data.invert) {
			text = gettext('At least one rule does not match');
		    } else {
			text = gettext('All rules match');
		    }
		} else if (data.value === 'any') {
		    if (data.invert) {
			text = gettext('No rule matches');
		    } else {
			text = gettext('Any rule matches');
		    }
		}
		iconCls = 'fa fa-filter';

		break;
	}

	return [text, iconCls];
    },

    initComponent: function() {
	let me = this;

	let treeStore = Ext.create('Ext.data.TreeStore', {
	    root: {
		expanded: true,
		expandable: false,
		text: '',
		type: 'mode',
		data: {
		    value: 'all',
		    invert: false,
		},
		children: [],
		iconCls: 'fa fa-filter',
	    },
	});

	let realMatchFields = Ext.create({
	    xtype: 'hiddenfield',
	    setValue: function(value) {
		this.value = value;
		this.checkChange();
	    },
	    getValue: function() {
		return this.value;
	    },
	    getErrors: function() {
		for (const matcher of this.value ?? []) {
		    let matches = matcher.match(/^([^:]+):([^=]+)=(.+)$/);
		    if (!matches) {
			return [""]; // fake error for validation
		    }
		}
		return [];
	    },
	    getSubmitValue: function() {
		let value = this.value;
		if (!value) {
		    value = [];
		}
		return value;
	    },
	    name: 'match-field',
	});

	let realMatchSeverity = Ext.create({
	    xtype: 'hiddenfield',
	    setValue: function(value) {
		this.value = value;
		this.checkChange();
	    },
	    getValue: function() {
		return this.value;
	    },
	    getErrors: function() {
		for (const severities of this.value ?? []) {
		    if (!severities) {
			return [""]; // fake error for validation
		    }
		}
		return [];
	    },
	    getSubmitValue: function() {
		let value = this.value;
		if (!value) {
		    value = [];
		}
		return value;
	    },
	    name: 'match-severity',
	});

	let realMode = Ext.create({
	    xtype: 'hiddenfield',
	    name: 'mode',
	    setValue: function(value) {
		this.value = value;
		this.checkChange();
	    },
	    getValue: function() {
		return this.value;
	    },
	    getSubmitValue: function() {
		let value = this.value;
		return value;
	    },
	});

	let realMatchCalendar = Ext.create({
	    xtype: 'hiddenfield',
	    name: 'match-calendar',

	    setValue: function(value) {
		this.value = value;
		this.checkChange();
	    },
	    getValue: function() {
		return this.value;
	    },
	    getErrors: function() {
		for (const timespan of this.value ?? []) {
		    if (!timespan) {
			return [""]; // fake error for validation
		    }
		}
		return [];
	    },
	    getSubmitValue: function() {
		let value = this.value;
		return value;
	    },
	});

	let realInvertMatch = Ext.create({
	    xtype: 'proxmoxcheckbox',
	    name: 'invert-match',
	    hidden: true,
	    deleteEmpty: !me.isCreate,
	});

	let storeChanged = function(store) {
	    store.suspendEvent('datachanged');

	    let matchFieldStmts = [];
	    let matchSeverityStmts = [];
	    let matchCalendarStmts = [];
	    let modeStmt = 'all';
	    let invertMatchStmt = false;

	    store.each(function(model) {
		let type = model.get('type');
		let data = model.get('data');

		switch (type) {
		    case 'match-field':
			matchFieldStmts.push(`${data.type}:${data.field ?? ''}=${data.value ?? ''}`);
			break;
		    case 'match-severity':
			if (Ext.isArray(data.value)) {
			    matchSeverityStmts.push(data.value.join(','));
			} else {
			    matchSeverityStmts.push(data.value);
			}
			break;
		    case 'match-calendar':
			matchCalendarStmts.push(data.value);
			break;
		    case 'mode':
			modeStmt = data.value;
			invertMatchStmt = data.invert;
			break;
		}

		let [text, iconCls] = me.getNodeTextAndIcon(type, data);
		model.set({
		    text,
		    iconCls,
		});
	    });

	    realMatchFields.suspendEvent('change');
	    realMatchFields.setValue(matchFieldStmts);
	    realMatchFields.resumeEvent('change');

	    realMatchCalendar.suspendEvent('change');
	    realMatchCalendar.setValue(matchCalendarStmts);
	    realMatchCalendar.resumeEvent('change');

	    realMode.suspendEvent('change');
	    realMode.setValue(modeStmt);
	    realMode.resumeEvent('change');

	    realInvertMatch.suspendEvent('change');
	    realInvertMatch.setValue(invertMatchStmt);
	    realInvertMatch.resumeEvent('change');

	    realMatchSeverity.suspendEvent('change');
	    realMatchSeverity.setValue(matchSeverityStmts);
	    realMatchSeverity.resumeEvent('change');

	    store.resumeEvent('datachanged');
	};

	realMatchFields.addListener('change', function(field, value) {
	    let parseMatchField = function(filter) {
		let [, type, matchedField, matchedValue] =
		    filter.match(/^(?:(regex|exact):)?([A-Za-z0-9_][A-Za-z0-9._-]*)=(.+)$/);
		if (type === undefined) {
		    type = "exact";
		}

		if (type === 'exact') {
		    matchedValue = matchedValue.split(',');
		}

		return {
		    type: 'match-field',
		    data: {
			type,
			field: matchedField,
			value: matchedValue,
		    },
		    leaf: true,
		};
	    };

	    for (let node of treeStore.queryBy(
		record => record.get('type') === 'match-field',
	    ).getRange()) {
		node.remove(true);
	    }

	    if (!value) {
		return;
	    }
	    let records = value.map(parseMatchField);

	    let rootNode = treeStore.getRootNode();

	    for (let record of records) {
		rootNode.appendChild(record);
	    }
	});

	realMatchSeverity.addListener('change', function(field, value) {
	    let parseSeverity = function(severities) {
		return {
		    type: 'match-severity',
		    data: {
			value: severities.split(','),
		    },
		    leaf: true,
		};
	    };

	    for (let node of treeStore.queryBy(
		record => record.get('type') === 'match-severity').getRange()) {
		node.remove(true);
	    }

	    let records = value.map(parseSeverity);
	    let rootNode = treeStore.getRootNode();

	    for (let record of records) {
		rootNode.appendChild(record);
	    }
	});

	realMatchCalendar.addListener('change', function(field, value) {
	    let parseCalendar = function(timespan) {
		return {
		    type: 'match-calendar',
		    data: {
			value: timespan,
		    },
		    leaf: true,
		};
	    };

	    for (let node of treeStore.queryBy(
		record => record.get('type') === 'match-calendar').getRange()) {
		node.remove(true);
	    }

	    let records = value.map(parseCalendar);
	    let rootNode = treeStore.getRootNode();

	    for (let record of records) {
		rootNode.appendChild(record);
	    }
	});

	realMode.addListener('change', function(field, value) {
	    let data = treeStore.getRootNode().get('data');
	    treeStore.getRootNode().set('data', {
		...data,
		value,
	    });
	});

	realInvertMatch.addListener('change', function(field, value) {
	    let data = treeStore.getRootNode().get('data');
	    treeStore.getRootNode().set('data', {
		...data,
		invert: value,
	    });
	});

	treeStore.addListener('datachanged', storeChanged);

	let treePanel = Ext.create({
	    xtype: 'treepanel',
	    store: treeStore,
	    minHeight: 300,
	    maxHeight: 300,
	    scrollable: true,

	    bind: {
		selection: '{selectedRecord}',
	    },
	});

	let addNode = function() {
	    let node = {
		type: 'match-field',
		data: {
		    type: 'exact',
		    field: '',
		    value: '',
		},
		leaf: true,
	    };
	    treeStore.getRootNode().appendChild(node);
	    treePanel.setSelection(treeStore.getRootNode().lastChild);
	};

	let deleteNode = function() {
	    let selection = treePanel.getSelection();
	    for (let selected of selection) {
		if (!selected.isRoot()) {
		    selected.remove(true);
		}
	    }
	};

	Ext.apply(me, {
	    items: [
		realMatchFields,
		realMode,
		realMatchSeverity,
		realInvertMatch,
		realMatchCalendar,
		treePanel,
		{
		    xtype: 'button',
		    margin: '5 5 5 0',
		    text: gettext('Add'),
		    iconCls: 'fa fa-plus-circle',
		    handler: addNode,
		},
		{
		    xtype: 'button',
		    margin: '5 5 5 0',
		    text: gettext('Remove'),
		    iconCls: 'fa fa-minus-circle',
		    handler: deleteNode,
		},
	    ],
	});
	me.callParent();
    },
});

Ext.define('Proxmox.panel.NotificationMatchRuleSettings', {
    extend: 'Ext.panel.Panel',
    xtype: 'pmxNotificationMatchRuleSettings',
    mixins: ['Proxmox.Mixin.CBind'],
    border: false,
    layout: 'anchor',

    items: [
	{
	    xtype: 'proxmoxKVComboBox',
	    name: 'mode',
	    fieldLabel: gettext('Match if'),
	    allowBlank: false,
	    isFormField: false,

	    matchFieldWidth: false,

	    comboItems: [
		['all', gettext('All rules match')],
		['any', gettext('Any rule matches')],
		['notall', gettext('At least one rule does not match')],
		['notany', gettext('No rule matches')],
	    ],
	    // Hide initially to avoid glitches when opening the window
	    hidden: true,
	    bind: {
		hidden: '{!showMatchingMode}',
		disabled: '{!showMatchingMode}',
		value: '{rootMode}',
	    },
	},
	{
	    xtype: 'proxmoxKVComboBox',
	    fieldLabel: gettext('Node type'),
	    isFormField: false,
	    allowBlank: false,
	    // Hide initially to avoid glitches when opening the window
	    hidden: true,
	    bind: {
		value: '{nodeType}',
		hidden: '{!showMatcherType}',
		disabled: '{!showMatcherType}',
	    },

	    comboItems: [
		['match-field', gettext('Match Field')],
		['match-severity', gettext('Match Severity')],
		['match-calendar', gettext('Match Calendar')],
	    ],
	},
	{
	    xtype: 'pmxNotificationMatchFieldSettings',
	    cbind: {
		baseUrl: '{baseUrl}',
	    },
	},
	{
	    xtype: 'pmxNotificationMatchSeveritySettings',
	},
	{
	    xtype: 'pmxNotificationMatchCalendarSettings',
	},
    ],
});

Ext.define('Proxmox.panel.MatchCalendarSettings', {
    extend: 'Ext.panel.Panel',
    xtype: 'pmxNotificationMatchCalendarSettings',
    border: false,
    layout: 'anchor',
    // Hide initially to avoid glitches when opening the window
    hidden: true,
    bind: {
	hidden: '{!typeIsMatchCalendar}',
    },
    viewModel: {
	// parent is set in `initComponents`
	formulas: {
	    typeIsMatchCalendar: {
		bind: {
		    bindTo: '{selectedRecord}',
		    deep: true,
		},
		get: function(record) {
		    return record?.get('type') === 'match-calendar';
		},
	    },

	    matchCalendarValue: {
		bind: {
		    bindTo: '{selectedRecord}',
		    deep: true,
		},
		set: function(value) {
		    let me = this;
		    let record = me.get('selectedRecord');
		    let currentData = record.get('data');
		    record.set({
			data: {
			    ...currentData,
			    value: value,
			},
		    });
		},
		get: function(record) {
		    return record?.get('data')?.value;
		},
	    },
	},
    },
    items: [
	{
	    xtype: 'proxmoxKVComboBox',
	    fieldLabel: gettext('Timespan to match'),
	    isFormField: false,
	    allowBlank: false,
	    editable: true,
	    displayField: 'key',
	    field: 'value',
	    bind: {
		value: '{matchCalendarValue}',
		disabled: '{!typeIsMatchCalender}',
	    },

	    comboItems: [
		['mon 8-12', ''],
		['tue..fri,sun 0:00-23:59', ''],
	    ],
	},
    ],

    initComponent: function() {
	let me = this;
	Ext.apply(me.viewModel, {
	    parent: me.up('pmxNotificationMatchRulesEditPanel').getViewModel(),
	});
	me.callParent();
    },
});

Ext.define('Proxmox.panel.MatchSeveritySettings', {
    extend: 'Ext.panel.Panel',
    xtype: 'pmxNotificationMatchSeveritySettings',
    border: false,
    layout: 'anchor',
    // Hide initially to avoid glitches when opening the window
    hidden: true,
    bind: {
	hidden: '{!typeIsMatchSeverity}',
    },
    viewModel: {
	// parent is set in `initComponents`
	formulas: {
	    typeIsMatchSeverity: {
		bind: {
		    bindTo: '{selectedRecord}',
		    deep: true,
		},
		get: function(record) {
		    return record?.get('type') === 'match-severity';
		},
	    },
	    matchSeverityValue: {
		bind: {
		    bindTo: '{selectedRecord}',
		    deep: true,
		},
		set: function(value) {
		    let record = this.get('selectedRecord');
		    let currentData = record.get('data');
		    record.set({
			data: {
			    ...currentData,
			    value: value,
			},
		    });
		},
		get: function(record) {
		    return record?.get('data')?.value;
		},
	    },
	},
    },
    items: [
	{
	    xtype: 'proxmoxKVComboBox',
	    fieldLabel: gettext('Severities to match'),
	    isFormField: false,
	    allowBlank: true,
	    multiSelect: true,
	    field: 'value',
	    // Hide initially to avoid glitches when opening the window
	    hidden: true,
	    bind: {
		value: '{matchSeverityValue}',
		hidden: '{!typeIsMatchSeverity}',
		disabled: '{!typeIsMatchSeverity}',
	    },

	    comboItems: [
		['info', gettext('Info')],
		['notice', gettext('Notice')],
		['warning', gettext('Warning')],
		['error', gettext('Error')],
		['unknown', gettext('Unknown')],
	    ],
	},
    ],

    initComponent: function() {
	let me = this;
	Ext.apply(me.viewModel, {
	    parent: me.up('pmxNotificationMatchRulesEditPanel').getViewModel(),
	});
	me.callParent();
    },
});

Ext.define('Proxmox.panel.MatchFieldSettings', {
    extend: 'Ext.panel.Panel',
    xtype: 'pmxNotificationMatchFieldSettings',
    border: false,
    layout: 'anchor',
    // Hide initially to avoid glitches when opening the window
    hidden: true,
    bind: {
	hidden: '{!typeIsMatchField}',
    },
    controller: {
	xclass: 'Ext.app.ViewController',

	control: {
	    'field[reference=fieldSelector]': {
		change: function(field) {
		    let view = this.getView();
		    let valueField = view.down('field[reference=valueSelector]');
		    let store = valueField.getStore();
		    let val = field.getValue();

		    if (val) {
			store.setFilters([
			    {
				property: 'field',
				value: val,
			    },
			]);
		    }
		},
	    },
	},
    },
    viewModel: {
	// parent is set in `initComponents`
	formulas: {
	    typeIsMatchField: {
		bind: {
		    bindTo: '{selectedRecord}',
		    deep: true,
		},
		get: function(record) {
		    return record?.get('type') === 'match-field';
		},
	    },
	    isRegex: function(get) {
		return get('matchFieldType') === 'regex';
	    },
	    matchFieldType: {
		bind: {
		    bindTo: '{selectedRecord}',
		    deep: true,
		},
		set: function(value) {
		    let record = this.get('selectedRecord');
		    let currentData = record.get('data');

		    let newValue = [];

		    // Build equivalent regular expression if switching
		    // to 'regex' mode
		    if (value === 'regex') {
			let regexVal = "^";
			if (currentData.value && currentData.value.length) {
			    regexVal += `(${currentData.value.join('|')})`;
			}
			regexVal += "$";
			newValue.push(regexVal);
		    }

		    record.set({
			data: {
			    ...currentData,
			    type: value,
			    value: newValue,
			},
		    });
		},
		get: function(record) {
		    return record?.get('data')?.type;
		},
	    },
	    matchFieldField: {
		bind: {
		    bindTo: '{selectedRecord}',
		    deep: true,
		},
		set: function(value) {
		    let record = this.get('selectedRecord');
		    let currentData = record.get('data');

		    record.set({
			data: {
			    ...currentData,
			    field: value,
			    // Reset value if field changes
			    value: [],
			},
		    });
		},
		get: function(record) {
		    return record?.get('data')?.field;
		},
	    },
	    matchFieldValue: {
		bind: {
		    bindTo: '{selectedRecord}',
		    deep: true,
		},
		set: function(value) {
		    let record = this.get('selectedRecord');
		    let currentData = record.get('data');
		    record.set({
			data: {
			    ...currentData,
			    value: value,
			},
		    });
		},
		get: function(record) {
		    return record?.get('data')?.value;
		},
	    },
	},
    },

    initComponent: function() {
	let me = this;

	let store = Ext.create('Ext.data.Store', {
	    model: 'proxmox-notification-fields',
	    autoLoad: true,
	    proxy: {
		type: 'proxmox',
		url: `/api2/json/${me.baseUrl}/matcher-fields`,
	    },
	    listeners: {
		'load': function() {
		    this.each(function(record) {
			record.set({
			    description:
				Proxmox.Utils.formatNotificationFieldName(
				    record.get('name'),
				),
			});
		    });

		    // Commit changes so that the description field is not marked
		    // as dirty
		    this.commitChanges();
		},
	    },
	});

	let valueStore = Ext.create('Ext.data.Store', {
	    model: 'proxmox-notification-field-values',
	    autoLoad: true,
	    proxy: {
		type: 'proxmox',

		url: `/api2/json/${me.baseUrl}/matcher-field-values`,
	    },
	    listeners: {
		'load': function() {
		    this.each(function(record) {
			if (record.get('field') === 'type') {
			    record.set({
				comment:
				    Proxmox.Utils.formatNotificationFieldValue(
					record.get('value'),
				    ),
			    });
			}
		    }, this, true);

		    // Commit changes so that the description field is not marked
		    // as dirty
		    this.commitChanges();
		},
	    },
	});

	Ext.apply(me.viewModel, {
	    parent: me.up('pmxNotificationMatchRulesEditPanel').getViewModel(),
	});
	Ext.apply(me, {
	    items: [
		{
		    fieldLabel: gettext('Match Type'),
		    xtype: 'proxmoxKVComboBox',
		    reference: 'type',
		    isFormField: false,
		    allowBlank: false,
		    submitValue: false,
		    field: 'type',

		    bind: {
			value: '{matchFieldType}',
		    },

		    comboItems: [
			['exact', gettext('Exact')],
			['regex', gettext('Regex')],
		    ],
		},
		{
		    fieldLabel: gettext('Field'),
		    reference: 'fieldSelector',
		    xtype: 'proxmoxComboGrid',
		    isFormField: false,
		    submitValue: false,
		    allowBlank: false,
		    editable: false,
		    store: store,
		    queryMode: 'local',
		    valueField: 'name',
		    displayField: 'description',
		    field: 'field',
		    bind: {
			value: '{matchFieldField}',
		    },
		    listConfig: {
			columns: [
			    {
				header: gettext('Description'),
				dataIndex: 'description',
				flex: 2,
			    },
			    {
				header: gettext('Field Name'),
				dataIndex: 'name',
				flex: 1,
			    },
			],
		    },
		},
		{
		    fieldLabel: gettext('Value'),
		    reference: 'valueSelector',
		    xtype: 'proxmoxComboGrid',
		    autoSelect: false,
		    editable: false,
		    isFormField: false,
		    submitValue: false,
		    allowBlank: false,
		    showClearTrigger: true,
		    field: 'value',
		    store: valueStore,
		    valueField: 'value',
		    displayField: 'value',
		    notFoundIsValid: false,
		    multiSelect: true,
		    bind: {
			value: '{matchFieldValue}',
			hidden: '{isRegex}',
		    },
		    listConfig: {
			columns: [
			    {
				header: gettext('Value'),
				dataIndex: 'value',
				flex: 1,
			    },
			    {
				header: gettext('Comment'),
				dataIndex: 'comment',
				flex: 2,
			    },
			],
		    },
		},
		{
		    fieldLabel: gettext('Regex'),
		    xtype: 'proxmoxtextfield',
		    editable: true,
		    isFormField: false,
		    submitValue: false,
		    allowBlank: false,
		    field: 'value',
		    bind: {
			value: '{matchFieldValue}',
			hidden: '{!isRegex}',
		    },
		},
	    ],
	});
	me.callParent();
    },
});
Ext.define('proxmox-file-tree', {
    extend: 'Ext.data.Model',

    fields: [
	'filepath', 'text', 'type', 'size',
	{
	    name: 'sizedisplay',
	    calculate: data => {
		if (data.size === undefined) {
		    return '';
		} else if (false && data.type === 'd') { // eslint-disable-line no-constant-condition
		    // FIXME: enable again once we fixed trouble with confusing size vs item #
		    let fs = data.size === 1 ? gettext('{0} Item') : gettext('{0} Items');
		    return Ext.String.format(fs, data.size);
		}

		return Proxmox.Utils.format_size(data.size);
	    },
	},
	{
	    name: 'mtime',
	    type: 'date',
	    dateFormat: 'timestamp',
	},
	{
	    name: 'iconCls',
	    calculate: function(data) {
		let icon = Proxmox.Schema.pxarFileTypes[data.type]?.icon ?? 'file-o';
		if (data.expanded && data.type === 'd') {
		    icon = 'folder-open-o';
		}
		return `fa fa-${icon}`;
	    },
	},
    ],
    idProperty: 'filepath',
});

Ext.define("Proxmox.window.FileBrowser", {
    extend: "Ext.window.Window",

    width: 800,
    height: 600,

    modal: true,

    config: {
	// the base-URL to get the list of files. required.
	listURL: '',

	// the base download URL, e.g., something like '/api2/...'
	downloadURL: '',

	// extra parameters set as proxy paramns and for an actual download request
	extraParams: {},

	// the file types for which the download button should be enabled
	downloadableFileTypes: {
	    'h': true, // hardlinks
	    'f': true, // "normal" files
	    'd': true, // directories
	},

	// prefix to prepend to downloaded file names
	downloadPrefix: '',
    },

    controller: {
	xclass: 'Ext.app.ViewController',

	buildUrl: function(baseurl, params) {
	    let url = new URL(baseurl, window.location.origin);
	    for (const [key, value] of Object.entries(params)) {
		url.searchParams.append(key, value);
	    }

	    return url.href;
	},

	downloadTar: function() {
	    this.downloadFile(true);
	},

	downloadZip: function() {
	    this.downloadFile(false);
	},

	downloadFile: function(tar) {
	    let me = this;
	    let view = me.getView();
	    let tree = me.lookup('tree');
	    let selection = tree.getSelection();
	    if (!selection || selection.length < 1) return;

	    let data = selection[0].data;

	    let params = { ...view.extraParams };
	    params.filepath = data.filepath;

	    let filename = view.downloadPrefix + data.text;
	    if (data.type === 'd') {
		if (tar) {
		    params.tar = 1;
		    filename += ".tar.zst";
		} else {
		    filename += ".zip";
		}
	    }

	    Proxmox.Utils.downloadAsFile(me.buildUrl(view.downloadURL, params), filename);
	},

	fileChanged: function() {
	    let me = this;
	    let view = me.getView();
	    let tree = me.lookup('tree');
	    let selection = tree.getSelection();
	    if (!selection || selection.length < 1) return;

	    let data = selection[0].data;
	    let st = Ext.String.format(gettext('Selected "{0}"'), atob(data.filepath));
	    view.lookup('selectText').setText(st);

	    let canDownload = view.downloadURL && view.downloadableFileTypes[data.type];
	    let enableMenu = data.type === 'd';

	    let downloadBtn = view.lookup('downloadBtn');
	    downloadBtn.setDisabled(!canDownload || enableMenu);
	    downloadBtn.setHidden(canDownload && enableMenu);
	    let typeLabel = Proxmox.Schema.pxarFileTypes[data.type]?.label ?? Proxmox.Utils.unknownText;
	    let ttip = Ext.String.format(
	        gettext('File of type {0} cannot be downloaded directly, download a parent directory instead.'),
	        typeLabel,
	    );
	    if (!canDownload) { // ensure tooltip gets shown
		downloadBtn.setStyle({ pointerEvents: 'all' });
	    }
	    downloadBtn.setTooltip(canDownload ? null : ttip);

	    let menuBtn = view.lookup('menuBtn');
	    menuBtn.setDisabled(!canDownload || !enableMenu);
	    menuBtn.setHidden(!canDownload || !enableMenu);
	},

	errorHandler: function(error, msg) {
	    let me = this;
	    if (error?.status === 503) {
		return false;
	    }
	    me.lookup('downloadBtn').setDisabled(true);
	    me.lookup('menuBtn').setDisabled(true);
	    if (me.initialLoadDone) {
		Ext.Msg.alert(gettext('Error'), msg);
		return true;
	    }
	    return false;
	},

	init: function(view) {
	    let me = this;
	    let tree = me.lookup('tree');

	    if (!view.listURL) {
		throw "no list URL given";
	    }

	    let store = tree.getStore();
	    let proxy = store.getProxy();

	    let errorCallback = (error, msg) => me.errorHandler(error, msg);
	    proxy.setUrl(view.listURL);
	    proxy.setTimeout(60*1000);
	    proxy.setExtraParams(view.extraParams);

	    tree.mon(store, 'beforeload', () => {
		Proxmox.Utils.setErrorMask(tree, true);
	    });
	    tree.mon(store, 'load', (treestore, rec, success, operation, node) => {
		if (success) {
		    Proxmox.Utils.setErrorMask(tree, false);
		    return;
		}
		if (!node.loadCount) {
		    node.loadCount = 0; // ensure its numeric
		}
		// trigger a reload if we got a 503 answer from the proxy
		if (operation?.error?.status === 503 && node.loadCount < 10) {
		    node.collapse();
		    node.expand();
		    node.loadCount++;
		    return;
		}

		let error = operation.getError();
		let msg = Proxmox.Utils.getResponseErrorMessage(error);
		if (!errorCallback(error, msg)) {
		    Proxmox.Utils.setErrorMask(tree, msg);
		} else {
		    Proxmox.Utils.setErrorMask(tree, false);
		}
	    });
	    store.load((rec, op, success) => {
		let root = store.getRoot();
		root.expand(); // always expand invisible root node
		if (view.archive === 'all') {
		    root.expandChildren(false);
		} else if (view.archive) {
		    let child = root.findChild('text', view.archive);
		    if (child) {
			child.expand();
			setTimeout(function() {
			    tree.setSelection(child);
			    tree.getView().focusRow(child);
			}, 10);
		    }
		} else if (root.childNodes.length === 1) {
		    root.firstChild.expand();
		}
		me.initialLoadDone = success;
	    });
	},

	control: {
	    'treepanel': {
		selectionchange: 'fileChanged',
	    },
	},
    },

    layout: 'fit',
    items: [
	{
	    xtype: 'treepanel',
	    scrollable: true,
	    rootVisible: false,
	    reference: 'tree',
	    store: {
		autoLoad: false,
		model: 'proxmox-file-tree',
		defaultRootId: '/',
		nodeParam: 'filepath',
		sorters: 'text',
		proxy: {
		    appendId: false,
		    type: 'proxmox',
		},
	    },

	    viewConfig: {
		loadMask: false,
	    },

	    columns: [
		{
		    text: gettext('Name'),
		    xtype: 'treecolumn',
		    flex: 1,
		    dataIndex: 'text',
		    renderer: Ext.String.htmlEncode,
		},
		{
		    text: gettext('Size'),
		    dataIndex: 'sizedisplay',
		    align: 'end',
		    sorter: {
			sorterFn: function(a, b) {
			    if (a.data.type === 'd' && b.data.type !== 'd') {
				return -1;
			    } else if (a.data.type !== 'd' && b.data.type === 'd') {
				return 1;
			    }

			    let asize = a.data.size || 0;
			    let bsize = b.data.size || 0;

			    return asize - bsize;
			},
		    },
		},
		{
		    text: gettext('Modified'),
		    dataIndex: 'mtime',
		    minWidth: 200,
		},
		{
		    text: gettext('Type'),
		    dataIndex: 'type',
		    renderer: (v) => Proxmox.Schema.pxarFileTypes[v]?.label ?? Proxmox.Utils.unknownText,
		},
	    ],
	},
    ],

    fbar: [
	{
	    text: '',
	    xtype: 'label',
	    reference: 'selectText',
	},
	{
	    text: gettext('Download'),
	    xtype: 'button',
	    handler: 'downloadZip',
	    reference: 'downloadBtn',
	    disabled: true,
	    hidden: true,
	},
	{
	    text: gettext('Download as'),
	    xtype: 'button',
	    reference: 'menuBtn',
	    menu: {
		items: [
		    {
			iconCls: 'fa fa-fw fa-file-zip-o',
			text: gettext('.zip'),
			handler: 'downloadZip',
			reference: 'downloadZip',
		    },
		    {
			iconCls: 'fa fa-fw fa-archive',
			text: gettext('.tar.zst'),
			handler: 'downloadTar',
			reference: 'downloadTar',
		    },
		],
	    },
	},
    ],
});
Ext.define('Proxmox.window.AuthEditBase', {
    extend: 'Proxmox.window.Edit',
    mixins: ['Proxmox.Mixin.CBind'],

    showDefaultRealm: false,

    isAdd: true,

    fieldDefaults: {
	labelWidth: 120,
    },

    baseurl: '/access/domains',
    useTypeInUrl: false,

    initComponent: function() {
	var me = this;

	me.isCreate = !me.realm;

	me.url = `/api2/extjs${me.baseUrl}`;
	if (me.useTypeInUrl) {
	    me.url += `/${me.authType}`;
	}

	if (me.isCreate) {
	    me.method = 'POST';
	} else {
	    me.url += `/${me.realm}`;
	    me.method = 'PUT';
	}

	let authConfig = Proxmox.Schema.authDomains[me.authType];
	if (!authConfig) {
	    throw `unknown auth type ${me.authType}`;
	} else if (!authConfig.add && me.isCreate) {
	    throw `trying to add non addable realm of type ${me.authType}`;
	}

	me.subject = authConfig.name;

	let items;
	let bodyPadding;
	if (authConfig.syncipanel) {
	    bodyPadding = 0;
	    items = {
		xtype: 'tabpanel',
		region: 'center',
		layout: 'fit',
		bodyPadding: 10,
		items: [
		    {
			title: gettext('General'),
			realm: me.realm,
			xtype: authConfig.ipanel,
			isCreate: me.isCreate,
			useTypeInUrl: me.useTypeInUrl,
			type: me.authType,
			showDefaultRealm: me.showDefaultRealm,
		    },
		    {
			title: gettext('Sync Options'),
			realm: me.realm,
			xtype: authConfig.syncipanel,
			isCreate: me.isCreate,
			type: me.authType,
		    },
		],
	    };
	} else {
	    items = [{
		realm: me.realm,
		xtype: authConfig.ipanel,
		isCreate: me.isCreate,
		useTypeInUrl: me.useTypeInUrl,
		type: me.authType,
		showDefaultRealm: me.showDefaultRealm,
	    }];
	}

	Ext.apply(me, {
	    items,
	    bodyPadding,
	});

	me.callParent();

	if (!me.isCreate) {
	    me.load({
		success: function(response, options) {
		    var data = response.result.data || {};
		    // just to be sure (should not happen)
		    // only check this when the type is not in the api path
		    if (!me.useTypeInUrl && data.realm !== me.authType) {
			me.close();
			throw `got wrong auth type '${me.authType}' for realm '${data.realm}'`;
		    }
		    me.setValues(data);
		},
	    });
	}
    },
});
Ext.define('Proxmox.panel.OpenIDInputPanel', {
    extend: 'Proxmox.panel.InputPanel',
    xtype: 'pmxAuthOpenIDPanel',
    mixins: ['Proxmox.Mixin.CBind'],

    showDefaultRealm: false,

    type: 'openid',

    onGetValues: function(values) {
	let me = this;

	if (me.isCreate && !me.useTypeInUrl) {
	    values.type = me.type;
	}

	return values;
    },

    columnT: [
	{
	    xtype: 'textfield',
	    name: 'issuer-url',
	    fieldLabel: gettext('Issuer URL'),
	    allowBlank: false,
	},
    ],

    column1: [
	{
	    xtype: 'pmxDisplayEditField',
	    name: 'realm',
	    cbind: {
		value: '{realm}',
		editable: '{isCreate}',
	    },
	    fieldLabel: gettext('Realm'),
	    allowBlank: false,
	},
	{
	    xtype: 'proxmoxcheckbox',
	    fieldLabel: gettext('Default realm'),
	    name: 'default',
	    value: 0,
	    cbind: {
		deleteEmpty: '{!isCreate}',
		hidden: '{!showDefaultRealm}',
		disabled: '{!showDefaultRealm}',
	    },
	    autoEl: {
		tag: 'div',
		'data-qtip': gettext('Set realm as default for login'),
	    },
	},
	{
	    xtype: 'proxmoxtextfield',
	    fieldLabel: gettext('Client ID'),
	    name: 'client-id',
	    allowBlank: false,
	},
	{
	    xtype: 'proxmoxtextfield',
	    fieldLabel: gettext('Client Key'),
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	    name: 'client-key',
	},
    ],

    column2: [
	{
	    xtype: 'proxmoxcheckbox',
	    fieldLabel: gettext('Autocreate Users'),
	    name: 'autocreate',
	    value: 0,
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
	{
	    xtype: 'pmxDisplayEditField',
	    name: 'username-claim',
	    fieldLabel: gettext('Username Claim'),
	    editConfig: {
		xtype: 'proxmoxKVComboBox',
		editable: true,
		comboItems: [
		    ['__default__', Proxmox.Utils.defaultText],
		    ['subject', 'subject'],
		    ['username', 'username'],
		    ['email', 'email'],
		],
	    },
	    cbind: {
		value: get => get('isCreate') ? '__default__' : Proxmox.Utils.defaultText,
		deleteEmpty: '{!isCreate}',
		editable: '{isCreate}',
	    },
	},
	{
	    xtype: 'proxmoxtextfield',
	    name: 'scopes',
	    fieldLabel: gettext('Scopes'),
	    emptyText: `${Proxmox.Utils.defaultText} (email profile)`,
	    submitEmpty: false,
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
	{
	    xtype: 'proxmoxKVComboBox',
	    name: 'prompt',
	    fieldLabel: gettext('Prompt'),
	    editable: true,
	    emptyText: gettext('Auth-Provider Default'),
	    comboItems: [
		['__default__', gettext('Auth-Provider Default')],
		['none', 'none'],
		['login', 'login'],
		['consent', 'consent'],
		['select_account', 'select_account'],
	    ],
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
    ],

    columnB: [
	{
	    xtype: 'proxmoxtextfield',
	    name: 'comment',
	    fieldLabel: gettext('Comment'),
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
    ],

    advancedColumnB: [
	{
	    xtype: 'proxmoxtextfield',
	    name: 'acr-values',
	    fieldLabel: gettext('ACR Values'),
	    submitEmpty: false,
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
    ],
});

Ext.define('Proxmox.panel.LDAPInputPanelViewModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.pmxAuthLDAPPanel',

    data: {
	mode: 'ldap',
	anonymous_search: 1,
    },

    formulas: {
	tls_enabled: function(get) {
	    return get('mode') !== 'ldap';
	},
    },

});


Ext.define('Proxmox.panel.LDAPInputPanel', {
    extend: 'Proxmox.panel.InputPanel',
    xtype: 'pmxAuthLDAPPanel',
    mixins: ['Proxmox.Mixin.CBind'],

    showDefaultRealm: false,

    viewModel: {
	type: 'pmxAuthLDAPPanel',
    },

    type: 'ldap',

    onlineHelp: 'user-realms-ldap',

    onGetValues: function(values) {
	if (this.isCreate && !this.useTypeInUrl) {
	    values.type = this.type;
	}

	if (values.anonymous_search && !this.isCreate) {
	    if (!values.delete) {
		values.delete = [];
	    }

	    if (!Array.isArray(values.delete)) {
		let tmp = values.delete;
		values.delete = [];
		values.delete.push(tmp);
	    }

	    values.delete.push("bind-dn");
	    values.delete.push("password");
	}

	delete values.anonymous_search;

	return values;
    },

    onSetValues: function(values) {
	let me = this;
	values.anonymous_search = values["bind-dn"] ? 0 : 1;
	me.getViewModel().set('anonymous_search', values.anonymous_search);

	return values;
    },

    cbindData: function(config) {
	return {
	    isLdap: this.type === 'ldap',
	    isAd: this.type === 'ad',
	};
    },

    column1: [
	{
	    xtype: 'pmxDisplayEditField',
	    name: 'realm',
	    cbind: {
		value: '{realm}',
		editable: '{isCreate}',
	    },
	    fieldLabel: gettext('Realm'),
	    allowBlank: false,
	},
	{
	    xtype: 'proxmoxcheckbox',
	    fieldLabel: gettext('Default realm'),
	    name: 'default',
	    value: 0,
	    cbind: {
		deleteEmpty: '{!isCreate}',
		hidden: '{!showDefaultRealm}',
		disabled: '{!showDefaultRealm}',
	    },
	    autoEl: {
		tag: 'div',
		'data-qtip': gettext('Set realm as default for login'),
	    },
	},
	{
	    xtype: 'proxmoxtextfield',
	    fieldLabel: gettext('Base Domain Name'),
	    name: 'base-dn',
	    emptyText: 'cn=Users,dc=company,dc=net',
	    cbind: {
		hidden: '{!isLdap}',
		allowBlank: '{!isLdap}',
	    },
	},
	{
	    xtype: 'proxmoxtextfield',
	    fieldLabel: gettext('User Attribute Name'),
	    name: 'user-attr',
	    emptyText: 'uid / sAMAccountName',
	    cbind: {
		hidden: '{!isLdap}',
		allowBlank: '{!isLdap}',
	    },
	},
	{
	    xtype: 'proxmoxcheckbox',
	    fieldLabel: gettext('Anonymous Search'),
	    name: 'anonymous_search',
	    bind: {
		value: '{anonymous_search}',
	    },
	},
	{
	    xtype: 'proxmoxtextfield',
	    fieldLabel: gettext('Bind Domain Name'),
	    name: 'bind-dn',
	    allowBlank: false,
	    cbind: {
		emptyText: get => get('isAd') ? 'user@company.net' : 'cn=user,dc=company,dc=net',
		autoEl: get => get('isAd') ? {
		    tag: 'div',
		    'data-qtip':
			gettext('LDAP DN syntax can be used as well, e.g. cn=user,dc=company,dc=net'),
		} : {},
	    },
	    bind: {
		disabled: "{anonymous_search}",
	    },
	},
	{
	    xtype: 'proxmoxtextfield',
	    inputType: 'password',
	    fieldLabel: gettext('Bind Password'),
	    name: 'password',
	    cbind: {
		emptyText: get => !get('isCreate') ? gettext('Unchanged') : '',
		allowBlank: '{!isCreate}',
	    },
	    bind: {
		disabled: "{anonymous_search}",
	    },
	},
    ],

    column2: [
	{
	    xtype: 'proxmoxtextfield',
	    name: 'server1',
	    fieldLabel: gettext('Server'),
	    allowBlank: false,
	},
	{
	    xtype: 'proxmoxtextfield',
	    name: 'server2',
	    fieldLabel: gettext('Fallback Server'),
	    submitEmpty: false,
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
	{
	    xtype: 'proxmoxintegerfield',
	    name: 'port',
	    fieldLabel: gettext('Port'),
	    minValue: 1,
	    maxValue: 65535,
	    emptyText: gettext('Default'),
	    submitEmptyText: false,
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
	{
	    xtype: 'proxmoxKVComboBox',
	    name: 'mode',
	    fieldLabel: gettext('Mode'),
	    editable: false,
	    comboItems: [
		['ldap', 'LDAP'],
		['ldap+starttls', 'STARTTLS'],
		['ldaps', 'LDAPS'],
	    ],
	    bind: "{mode}",
	    cbind: {
		deleteEmpty: '{!isCreate}',
		value: get => get('isCreate') ? 'ldap' : 'LDAP',
	    },
	},
	{
	    xtype: 'proxmoxcheckbox',
	    fieldLabel: gettext('Verify Certificate'),
	    name: 'verify',
	    value: 0,
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },

	    bind: {
		disabled: '{!tls_enabled}',
	    },
	    autoEl: {
		tag: 'div',
		'data-qtip': gettext('Verify TLS certificate of the server'),
	    },

	},
    ],

    columnB: [
	{
	    xtype: 'proxmoxtextfield',
	    name: 'comment',
	    fieldLabel: gettext('Comment'),
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
    ],
});


Ext.define('Proxmox.panel.LDAPSyncInputPanel', {
    extend: 'Proxmox.panel.InputPanel',
    xtype: 'pmxAuthLDAPSyncPanel',
    mixins: ['Proxmox.Mixin.CBind'],

    editableAttributes: ['firstname', 'lastname', 'email'],
    editableDefaults: ['scope', 'enable-new'],
    default_opts: {},
    sync_attributes: {},

    type: 'ldap',

    // (de)construct the sync-attributes from the list above,
    // not touching all others
    onGetValues: function(values) {
	let me = this;

	me.editableDefaults.forEach((attr) => {
	    if (values[attr]) {
		me.default_opts[attr] = values[attr];
		delete values[attr];
	    } else {
		delete me.default_opts[attr];
	    }
	});
	let vanished_opts = [];
	['acl', 'entry', 'properties'].forEach((prop) => {
	    if (values[`remove-vanished-${prop}`]) {
		vanished_opts.push(prop);
	    }
	    delete values[`remove-vanished-${prop}`];
	});
	me.default_opts['remove-vanished'] = vanished_opts.join(';');

	values['sync-defaults-options'] = Proxmox.Utils.printPropertyString(me.default_opts);
	me.editableAttributes.forEach((attr) => {
	    if (values[attr]) {
		me.sync_attributes[attr] = values[attr];
		delete values[attr];
	    } else {
		delete me.sync_attributes[attr];
	    }
	});
	values['sync-attributes'] = Proxmox.Utils.printPropertyString(me.sync_attributes);

	Proxmox.Utils.delete_if_default(values, 'sync-defaults-options');
	Proxmox.Utils.delete_if_default(values, 'sync-attributes');

	// Force values.delete to be an array
	if (typeof values.delete === 'string') {
	   values.delete = values.delete.split(',');
	}

	if (me.isCreate) {
	    delete values.delete; // on create we cannot delete values
	}

	return values;
    },

    setValues: function(values) {
	let me = this;

	if (values['sync-attributes']) {
	    me.sync_attributes = Proxmox.Utils.parsePropertyString(values['sync-attributes']);
	    delete values['sync-attributes'];
	    me.editableAttributes.forEach((attr) => {
		if (me.sync_attributes[attr]) {
		    values[attr] = me.sync_attributes[attr];
		}
	    });
	}
	if (values['sync-defaults-options']) {
	    me.default_opts = Proxmox.Utils.parsePropertyString(values['sync-defaults-options']);
	    delete values.default_opts;
	    me.editableDefaults.forEach((attr) => {
		if (me.default_opts[attr]) {
		    values[attr] = me.default_opts[attr];
		}
	    });

	    if (me.default_opts['remove-vanished']) {
		let opts = me.default_opts['remove-vanished'].split(';');
		for (const opt of opts) {
		    values[`remove-vanished-${opt}`] = 1;
		}
	    }
	}
	return me.callParent([values]);
    },

    column1: [
	{
	    xtype: 'proxmoxtextfield',
	    name: 'firstname',
	    fieldLabel: gettext('First Name attribute'),
	    autoEl: {
		tag: 'div',
		'data-qtip': Ext.String.format(gettext('Often called {0}'), '`givenName`'),
	    },
	},
	{
	    xtype: 'proxmoxtextfield',
	    name: 'lastname',
	    fieldLabel: gettext('Last Name attribute'),
	    autoEl: {
		tag: 'div',
		'data-qtip': Ext.String.format(gettext('Often called {0}'), '`sn`'),
	    },
	},
	{
	    xtype: 'proxmoxtextfield',
	    name: 'email',
	    fieldLabel: gettext('E-Mail attribute'),
	    autoEl: {
		tag: 'div',
		'data-qtip': get => get('isAd')
		    ? Ext.String.format(gettext('Often called {0} or {1}'), '`userPrincipalName`', '`mail`')
		    : Ext.String.format(gettext('Often called {0}'), '`mail`'),
	    },
	},
	{
	    xtype: 'displayfield',
	    value: gettext('Default Sync Options'),
	},
	{
	    xtype: 'proxmoxKVComboBox',
	    value: '__default__',
	    deleteEmpty: false,
	    comboItems: [
		[
		    '__default__',
		    Ext.String.format(
			gettext("{0} ({1})"),
			Proxmox.Utils.yesText,
			Proxmox.Utils.defaultText,
		    ),
		],
		['true', Proxmox.Utils.yesText],
		['false', Proxmox.Utils.noText],
	    ],
	    name: 'enable-new',
	    fieldLabel: gettext('Enable new users'),
	},
    ],

    column2: [
	{
	    xtype: 'proxmoxtextfield',
	    name: 'user-classes',
	    fieldLabel: gettext('User classes'),
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	    emptyText: 'inetorgperson, posixaccount, person, user',
	    autoEl: {
		tag: 'div',
		'data-qtip': gettext('Default user classes: inetorgperson, posixaccount, person, user'),
	    },
	},
	{
	    xtype: 'proxmoxtextfield',
	    name: 'filter',
	    fieldLabel: gettext('User Filter'),
	    cbind: {
		deleteEmpty: '{!isCreate}',
	    },
	},
    ],

    columnB: [
	{
	    xtype: 'fieldset',
	    title: gettext('Remove Vanished Options'),
	    items: [
		{
		    xtype: 'proxmoxcheckbox',
		    fieldLabel: gettext('ACL'),
		    name: 'remove-vanished-acl',
		    boxLabel: gettext('Remove ACLs of vanished users'),
		},
		{
		    xtype: 'proxmoxcheckbox',
		    fieldLabel: gettext('Entry'),
		    name: 'remove-vanished-entry',
		    boxLabel: gettext('Remove vanished user'),
		},
		{
		    xtype: 'proxmoxcheckbox',
		    fieldLabel: gettext('Properties'),
		    name: 'remove-vanished-properties',
		    boxLabel: gettext('Remove vanished properties from synced users.'),
		},
	    ],
	},
    ],
});
Ext.define('Proxmox.panel.ADInputPanel', {
    extend: 'Proxmox.panel.LDAPInputPanel',
    xtype: 'pmxAuthADPanel',

    type: 'ad',
    onlineHelp: 'user-realms-ad',
});

Ext.define('Proxmox.panel.ADSyncInputPanel', {
    extend: 'Proxmox.panel.LDAPSyncInputPanel',
    xtype: 'pmxAuthADSyncPanel',

    type: 'ad',
});
Ext.define('Proxmox.panel.SimpleRealmInputPanel', {
    extend: 'Proxmox.panel.InputPanel',
    xtype: 'pmxAuthSimplePanel',
    mixins: ['Proxmox.Mixin.CBind'],

    showDefaultRealm: false,

    column1: [
	{
	    xtype: 'pmxDisplayEditField',
	    name: 'realm',
	    cbind: {
		value: '{realm}',
	    },
	    fieldLabel: gettext('Realm'),
	},
	{
	    xtype: 'proxmoxcheckbox',
	    fieldLabel: gettext('Default realm'),
	    name: 'default',
	    value: 0,
	    deleteEmpty: true,
	    autoEl: {
		tag: 'div',
		'data-qtip': gettext('Set realm as default for login'),
	    },
	    cbind: {
		hidden: '{!showDefaultRealm}',
		disabled: '{!showDefaultRealm}',
	    },
	},
    ],

    column2: [],

    columnB: [
	{
	    xtype: 'proxmoxtextfield',
	    name: 'comment',
	    fieldLabel: gettext('Comment'),
	    allowBlank: true,
	    deleteEmpty: true,
	},
    ],
});
/*global u2f*/
Ext.define('Proxmox.window.TfaLoginWindow', {
    extend: 'Ext.window.Window',
    mixins: ['Proxmox.Mixin.CBind'],

    title: gettext("Second login factor required"),

    modal: true,
    resizable: false,
    width: 512,
    layout: {
	type: 'vbox',
	align: 'stretch',
    },

    defaultButton: 'tfaButton',

    viewModel: {
	data: {
	    confirmText: gettext('Confirm Second Factor'),
	    canConfirm: false,
	    availableChallenge: {},
	},
    },

    cancelled: true,

    controller: {
	xclass: 'Ext.app.ViewController',

	init: function(view) {
	    let me = this;
	    let vm = me.getViewModel();

	    if (!view.userid) {
		throw "no userid given";
	    }
	    if (!view.ticket) {
		throw "no ticket given";
	    }
	    const challenge = view.challenge;
	    if (!challenge) {
		throw "no challenge given";
	    }

	    let lastTabId = me.getLastTabUsed();
	    let initialTab = -1, i = 0;
	    let count2nd = 0;
	    let hasRecovery = false;
	    for (const k of ['webauthn', 'totp', 'recovery', 'u2f', 'yubico']) {
		const available = !!challenge[k];
		vm.set(`availableChallenge.${k}`, available);

		if (available) {
		    count2nd++;
		    if (k === 'recovery') {
			hasRecovery = true;
		    }
		    if (i === lastTabId) {
			initialTab = i;
		    } else if (initialTab < 0) {
			initialTab = i;
		    }
		}
		i++;
	    }
	    if (!count2nd || (count2nd === 1 && hasRecovery && !challenge.recovery.length)) {
		// no 2nd factors available (and if recovery keys are configured they're empty)
		me.lookup('cannotLogin').setVisible(true);
		me.lookup('recoveryKey').setVisible(false);
		view.down('tabpanel').setActiveTab(2); // recovery
		return;
	    }
	    view.down('tabpanel').setActiveTab(initialTab);

	    if (challenge.recovery) {
		if (!view.challenge.recovery.length) {
		    me.lookup('recoveryEmpty').setVisible(true);
		    me.lookup('recoveryKey').setVisible(false);
		} else {
		    let idList = view
			    .challenge
			    .recovery
			    .map((id) => Ext.String.format(gettext('ID {0}'), id))
			    .join(', ');
		    me.lookup('availableRecovery').update(Ext.String.htmlEncode(
			Ext.String.format(gettext('Available recovery keys: {0}'), idList),
		    ));
		    me.lookup('availableRecovery').setVisible(true);
		    if (view.challenge.recovery.length <= 3) {
			me.lookup('recoveryLow').setVisible(true);
		    }
		}
	    }

	    if (challenge.webauthn && initialTab === 0) {
		let _promise = me.loginWebauthn();
	    } else if (challenge.u2f && initialTab === 3) {
		let _promise = me.loginU2F();
	    }
	},
	control: {
	    'tabpanel': {
		tabchange: function(tabPanel, newCard, oldCard) {
		    // for now every TFA method has at max one field, so keep it simple..
		    let oldField = oldCard.down('field');
		    if (oldField) {
			oldField.setDisabled(true);
		    }
		    let newField = newCard.down('field');
		    if (newField) {
			newField.setDisabled(false);
			newField.focus();
			newField.validate();
		    }

		    let confirmText = newCard.confirmText || gettext('Confirm Second Factor');
		    this.getViewModel().set('confirmText', confirmText);

		    this.saveLastTabUsed(tabPanel, newCard);
		},
	    },
	    'field': {
		validitychange: function(field, valid) {
		    // triggers only for enabled fields and we disable the one from the
		    // non-visible tab, so we can just directly use the valid param
		    this.getViewModel().set('canConfirm', valid);
		},
		afterrender: field => field.focus(), // ensure focus after initial render
	    },
	},

	saveLastTabUsed: function(tabPanel, card) {
	    let id = tabPanel.items.indexOf(card);
	    window.localStorage.setItem('Proxmox.TFALogin.lastTab', JSON.stringify({ id }));
	},

	getLastTabUsed: function() {
	    let data = window.localStorage.getItem('Proxmox.TFALogin.lastTab');
	    if (typeof data === 'string') {
		let last = JSON.parse(data);
		return last.id;
	    }
	    return null;
	},

	onClose: function() {
	    let me = this;
	    let view = me.getView();

	    if (!view.cancelled) {
		return;
	    }

	    view.onReject();
	},

	cancel: function() {
	    this.getView().close();
	},

	loginTotp: function() {
	    let me = this;

	    let code = me.lookup('totp').getValue();
	    let _promise = me.finishChallenge(`totp:${code}`);
	},

	loginYubico: function() {
	    let me = this;

	    let code = me.lookup('yubico').getValue();
	    let _promise = me.finishChallenge(`yubico:${code}`);
	},

	loginWebauthn: async function() {
	    let me = this;
	    let view = me.getView();

	    me.lookup('webAuthnWaiting').setVisible(true);
	    me.lookup('webAuthnError').setVisible(false);

	    let challenge = view.challenge.webauthn;

	    if (typeof challenge.string !== 'string') {
		// Byte array fixup, keep challenge string:
		challenge.string = challenge.publicKey.challenge;
		challenge.publicKey.challenge = Proxmox.Utils.base64url_to_bytes(challenge.string);
		for (const cred of challenge.publicKey.allowCredentials) {
		    cred.id = Proxmox.Utils.base64url_to_bytes(cred.id);
		}
	    }

	    let controller = new AbortController();
	    challenge.signal = controller.signal;

	    let hwrsp;
	    try {
		//Promise.race( ...
		hwrsp = await navigator.credentials.get(challenge);
	    } catch (error) {
		// we do NOT want to fail login because of canceling the challenge actively,
		// in some browser that's the only way to switch over to another method as the
		// disallow user input during the time the challenge is active
		// checking for error.code === DOMException.ABORT_ERR only works in firefox -.-
		this.getViewModel().set('canConfirm', true);
		// FIXME: better handling, show some message, ...?
		me.lookup('webAuthnError').setData({
		    error: Ext.htmlEncode(error.toString()),
		});
		me.lookup('webAuthnError').setVisible(true);
		return;
	    } finally {
		let waitingMessage = me.lookup('webAuthnWaiting');
		if (waitingMessage) {
		    waitingMessage.setVisible(false);
		}
	    }

	    let response = {
		id: hwrsp.id,
		type: hwrsp.type,
		challenge: challenge.string,
		rawId: Proxmox.Utils.bytes_to_base64url(hwrsp.rawId),
		response: {
		    authenticatorData: Proxmox.Utils.bytes_to_base64url(
			hwrsp.response.authenticatorData,
		    ),
		    clientDataJSON: Proxmox.Utils.bytes_to_base64url(hwrsp.response.clientDataJSON),
		    signature: Proxmox.Utils.bytes_to_base64url(hwrsp.response.signature),
		},
	    };

	    await me.finishChallenge("webauthn:" + JSON.stringify(response));
	},

	loginU2F: async function() {
	    let me = this;
	    let view = me.getView();

	    me.lookup('u2fWaiting').setVisible(true);
	    me.lookup('u2fError').setVisible(false);

	    let hwrsp;
	    try {
		hwrsp = await new Promise((resolve, reject) => {
		    try {
			let data = view.challenge.u2f;
			let chlg = data.challenge;
			u2f.sign(chlg.appId, chlg.challenge, data.keys, resolve);
		    } catch (error) {
			reject(error);
		    }
		});
		if (hwrsp.errorCode) {
		    throw Proxmox.Utils.render_u2f_error(hwrsp.errorCode);
		}
		delete hwrsp.errorCode;
	    } catch (error) {
		this.getViewModel().set('canConfirm', true);
		me.lookup('u2fError').setData({
		    error: Ext.htmlEncode(error.toString()),
		});
		me.lookup('u2fError').setVisible(true);
		return;
	    } finally {
		let waitingMessage = me.lookup('u2fWaiting');
		if (waitingMessage) {
		    waitingMessage.setVisible(false);
		}
	    }

	    await me.finishChallenge("u2f:" + JSON.stringify(hwrsp));
	},

	loginRecovery: function() {
	    let me = this;

	    let key = me.lookup('recoveryKey').getValue();
	    let _promise = me.finishChallenge(`recovery:${key}`);
	},

	loginTFA: function() {
	    let me = this;
	    // avoid triggering more than once during challenge
	    me.getViewModel().set('canConfirm', false);
	    let view = me.getView();
	    let tfaPanel = view.down('tabpanel').getActiveTab();
	    me[tfaPanel.handler]();
	},

	finishChallenge: function(password) {
	    let me = this;
	    let view = me.getView();
	    view.cancelled = false;

	    let params = {
		username: view.userid,
		'tfa-challenge': view.ticket,
		password,
	    };

	    let resolve = view.onResolve;
	    let reject = view.onReject;
	    view.close();

	    return Proxmox.Async.api2({
		url: '/api2/extjs/access/ticket',
		method: 'POST',
		params,
	    })
	    .then(resolve)
	    .catch(reject);
	},
    },

    listeners: {
	close: 'onClose',
    },

    items: [{
	xtype: 'tabpanel',
	region: 'center',
	layout: 'fit',
	bodyPadding: 10,
	items: [
	    {
		xtype: 'panel',
		title: 'WebAuthn',
		iconCls: 'fa fa-fw fa-shield',
		confirmText: gettext('Start WebAuthn challenge'),
		handler: 'loginWebauthn',
		bind: {
		    disabled: '{!availableChallenge.webauthn}',
		},
		items: [
		    {
			xtype: 'box',
			html: gettext('Please insert your authentication device and press its button'),
		    },
		    {
			xtype: 'box',
			html: gettext('Waiting for second factor.') +`<i class="fa fa-refresh fa-spin fa-fw"></i>`,
			reference: 'webAuthnWaiting',
			hidden: true,
		    },
		    {
			xtype: 'box',
			data: {
			    error: '',
			},
			tpl: '<i class="fa fa-warning warning"></i> {error}',
			reference: 'webAuthnError',
			hidden: true,
		    },
		],
	    },
	    {
		xtype: 'panel',
		title: gettext('TOTP App'),
		iconCls: 'fa fa-fw fa-clock-o',
		handler: 'loginTotp',
		bind: {
		    disabled: '{!availableChallenge.totp}',
		},
		items: [
		    {
			xtype: 'textfield',
			fieldLabel: gettext('Please enter your TOTP verification code'),
			labelWidth: 300,
			name: 'totp',
			disabled: true,
			reference: 'totp',
			allowBlank: false,
			regex: /^[0-9]{2,16}$/,
			regexText: gettext('TOTP codes usually consist of six decimal digits'),
			inputAttrTpl: 'autocomplete=one-time-code',
		    },
		],
	    },
	    {
		xtype: 'panel',
		title: gettext('Recovery Key'),
		iconCls: 'fa fa-fw fa-file-text-o',
		handler: 'loginRecovery',
		bind: {
		    disabled: '{!availableChallenge.recovery}',
		},
		items: [
		    {
			xtype: 'box',
			reference: 'cannotLogin',
			hidden: true,
			html: '<i class="fa fa-exclamation-triangle warning"></i>'
			    + Ext.String.format(
				gettext('No second factor left! Please contact an administrator!'),
				4,
			    ),
		    },
		    {
			xtype: 'box',
			reference: 'recoveryEmpty',
			hidden: true,
			html: '<i class="fa fa-exclamation-triangle warning"></i>'
			    + Ext.String.format(
				gettext('No more recovery keys left! Please generate a new set!'),
				4,
			    ),
		    },
		    {
			xtype: 'box',
			reference: 'recoveryLow',
			hidden: true,
			html: '<i class="fa fa-exclamation-triangle warning"></i>'
			    + Ext.String.format(
				gettext('Less than {0} recovery keys available. Please generate a new set after login!'),
				4,
			    ),
		    },
		    {
			xtype: 'box',
			reference: 'availableRecovery',
			hidden: true,
		    },
		    {
			xtype: 'textfield',
			fieldLabel: gettext('Please enter one of your single-use recovery keys'),
			labelWidth: 300,
			name: 'recoveryKey',
			disabled: true,
			reference: 'recoveryKey',
			allowBlank: false,
			regex: /^[0-9a-f]{4}(-[0-9a-f]{4}){3}$/,
			regexText: gettext('Does not look like a valid recovery key'),
		    },
		],
	    },
	    {
		xtype: 'panel',
		title: 'U2F',
		iconCls: 'fa fa-fw fa-shield',
		confirmText: gettext('Start U2F challenge'),
		handler: 'loginU2F',
		bind: {
		    disabled: '{!availableChallenge.u2f}',
		},
		tabConfig: {
		    bind: {
			hidden: '{!availableChallenge.u2f}',
		    },
		},
		items: [
		    {
			xtype: 'box',
			html: gettext('Please insert your authentication device and press its button'),
		    },
		    {
			xtype: 'box',
			html: gettext('Waiting for second factor.') +`<i class="fa fa-refresh fa-spin fa-fw"></i>`,
			reference: 'u2fWaiting',
			hidden: true,
		    },
		    {
			xtype: 'box',
			data: {
			    error: '',
			},
			tpl: '<i class="fa fa-warning warning"></i> {error}',
			reference: 'u2fError',
			hidden: true,
		    },
		],
	    },
	    {
		xtype: 'panel',
		title: gettext('Yubico OTP'),
		iconCls: 'fa fa-fw fa-yahoo',
		handler: 'loginYubico',
		bind: {
		    disabled: '{!availableChallenge.yubico}',
		},
		tabConfig: {
		    bind: {
			hidden: '{!availableChallenge.yubico}',
		    },
		},
		items: [
		    {
			xtype: 'textfield',
			fieldLabel: gettext('Please enter your Yubico OTP code'),
			labelWidth: 300,
			name: 'yubico',
			disabled: true,
			reference: 'yubico',
			allowBlank: false,
			regex: /^[a-z0-9]{30,60}$/, // *should* be 44 but not sure if that's "fixed"
			regexText: gettext('TOTP codes consist of six decimal digits'),
		    },
		],
	    },
	],
    }],

    buttons: [
	{
	    handler: 'loginTFA',
	    reference: 'tfaButton',
	    disabled: true,
	    bind: {
		text: '{confirmText}',
		disabled: '{!canConfirm}',
	    },
	},
    ],
});
Ext.define('Proxmox.window.AddTfaRecovery', {
    extend: 'Proxmox.window.Edit',
    alias: 'widget.pmxAddTfaRecovery',
    mixins: ['Proxmox.Mixin.CBind'],

    onlineHelp: 'user_mgmt',
    isCreate: true,
    isAdd: true,
    subject: gettext('TFA recovery keys'),
    width: 512,
    method: 'POST',

    fixedUser: false,

    url: '/api2/extjs/access/tfa',
    submitUrl: function(url, values) {
	let userid = values.userid;
	delete values.userid;
	return `${url}/${userid}`;
    },

    apiCallDone: function(success, response) {
	if (!success) {
	    return;
	}

	let values = response
	    .result
	    .data
	    .recovery
	    .map((v, i) => `${i}: ${v}`)
	    .join("\n");
	Ext.create('Proxmox.window.TfaRecoveryShow', {
	    autoShow: true,
	    userid: this.getViewModel().get('userid'),
	    values,
	});
    },

    viewModel: {
	data: {
	    has_entry: false,
	    userid: null,
	},
    },

    controller: {
	xclass: 'Ext.app.ViewController',
	hasEntry: async function(userid) {
	    let me = this;
	    let view = me.getView();

	    try {
		await Proxmox.Async.api2({
		    url: `${view.url}/${userid}/recovery`,
		    method: 'GET',
		});
		return true;
	    } catch (_response) {
		return false;
	    }
	},

	init: function(view) {
	    this.onUseridChange(null, Proxmox.UserName);
	},

	onUseridChange: async function(field, userid) {
	    let me = this;
	    let vm = me.getViewModel();

	    me.userid = userid;
	    vm.set('userid', userid);

	    let has_entry = await me.hasEntry(userid);
	    vm.set('has_entry', has_entry);
	},
    },

    items: [
	{
	    xtype: 'pmxDisplayEditField',
	    name: 'userid',
	    cbind: {
		editable: (get) => !get('fixedUser'),
		value: () => Proxmox.UserName,
	    },
	    fieldLabel: gettext('User'),
	    editConfig: {
		xtype: 'pmxUserSelector',
		allowBlank: false,
		validator: function(_value) {
		    return !this.up('window').getViewModel().get('has_entry');
		},
	    },
	    renderer: Ext.String.htmlEncode,
	    listeners: {
		change: 'onUseridChange',
	    },
	},
	{
	    xtype: 'hiddenfield',
	    name: 'type',
	    value: 'recovery',
	},
	{
	    xtype: 'displayfield',
	    bind: {
		hidden: '{!has_entry}',
	    },
	    hidden: true,
	    userCls: 'pmx-hint',
	    value: gettext('User already has recovery keys.'),
	},
	{
	    xtype: 'textfield',
	    name: 'password',
	    reference: 'password',
	    fieldLabel: gettext('Verify Password'),
	    inputType: 'password',
	    minLength: 5,
	    allowBlank: false,
	    validateBlank: true,
	    cbind: {
		hidden: () => Proxmox.UserName === 'root@pam',
		disabled: () => Proxmox.UserName === 'root@pam',
		emptyText: () =>
		    Ext.String.format(gettext("Confirm your ({0}) password"), Proxmox.UserName),
	    },
	},
    ],
});

Ext.define('Proxmox.window.TfaRecoveryShow', {
    extend: 'Ext.window.Window',
    alias: ['widget.pmxTfaRecoveryShow'],
    mixins: ['Proxmox.Mixin.CBind'],

    width: 600,
    modal: true,
    resizable: false,
    title: gettext('Recovery Keys'),
    onEsc: Ext.emptyFn,

    items: [
	{
	    xtype: 'form',
	    layout: 'anchor',
	    bodyPadding: 10,
	    border: false,
	    fieldDefaults: {
		anchor: '100%',
            },
	    items: [
		{
		    xtype: 'textarea',
		    editable: false,
		    inputId: 'token-secret-value',
		    cbind: {
			value: '{values}',
		    },
		    fieldStyle: {
			'fontFamily': 'monospace',
		    },
		    height: '160px',
		},
		{
		    xtype: 'displayfield',
		    border: false,
		    padding: '5 0 0 0',
		    userCls: 'pmx-hint',
		    value: gettext('Please record recovery keys - they will only be displayed now'),
		},
	    ],
	},
    ],
    buttons: [
	{
	    handler: function(b) {
		document.getElementById('token-secret-value').select();
		document.execCommand("copy");
	    },
	    iconCls: 'fa fa-clipboard',
	    text: gettext('Copy Recovery Keys'),
	},
	{
	    handler: function(b) {
		let win = this.up('window');
		win.paperkeys(win.values, win.userid);
	    },
	    iconCls: 'fa fa-print',
	    text: gettext('Print Recovery Keys'),
	},
    ],
    paperkeys: function(keyString, userid) {
	let me = this;

	let printFrame = document.createElement("iframe");
	Object.assign(printFrame.style, {
	    position: "fixed",
	    right: "0",
	    bottom: "0",
	    width: "0",
	    height: "0",
	    border: "0",
	});
	const host = document.location.host;
	const title = document.title;
	const html = `<html><head><script>
	    window.addEventListener('DOMContentLoaded', (ev) => window.print());
	</script><style>@media print and (max-height: 150mm) {
	  h4, p { margin: 0; font-size: 1em; }
	}</style></head><body style="padding: 5px;">
	<h4>Recovery Keys for '${userid}' - ${title} (${host})</h4>
<p style="font-size:1.5em;line-height:1.5em;font-family:monospace;
   white-space:pre-wrap;overflow-wrap:break-word;">
${keyString}
</p>
	</body></html>`;

	printFrame.src = "data:text/html;base64," + btoa(html);
	document.body.appendChild(printFrame);
	me.on('destroy', () => document.body.removeChild(printFrame));
    },
});
/*global QRCode*/
Ext.define('Proxmox.window.AddTotp', {
    extend: 'Proxmox.window.Edit',
    alias: 'widget.pmxAddTotp',
    mixins: ['Proxmox.Mixin.CBind'],

    onlineHelp: 'user_mgmt',

    modal: true,
    resizable: false,
    title: gettext('Add a TOTP login factor'),
    width: 512,
    layout: {
	type: 'vbox',
	align: 'stretch',
    },

    isAdd: true,
    userid: undefined,
    tfa_id: undefined,
    issuerName: `Proxmox - ${document?.location?.hostname || 'unknown'}`,
    fixedUser: false,

    updateQrCode: function() {
	let me = this;
	let values = me.lookup('totp_form').getValues();
	let algorithm = values.algorithm;
	if (!algorithm) {
	    algorithm = 'SHA1';
	}

	let otpuri =
	    'otpauth://totp/' +
	    encodeURIComponent(values.issuer) +
	    ':' +
	    encodeURIComponent(values.userid) +
	    '?secret=' + values.secret +
	    '&period=' + values.step +
	    '&digits=' + values.digits +
	    '&algorithm=' + algorithm +
	    '&issuer=' + encodeURIComponent(values.issuer);

	me.getController().getViewModel().set('otpuri', otpuri);
	me.qrcode.makeCode(otpuri);
	me.lookup('challenge').setVisible(true);
	me.down('#qrbox').setVisible(true);
    },

    viewModel: {
	data: {
	    valid: false,
	    secret: '',
	    otpuri: '',
	    userid: null,
	},

	formulas: {
	    secretEmpty: function(get) {
		return get('secret').length === 0;
	    },
	},
    },

    controller: {
	xclass: 'Ext.app.ViewController',
	control: {
	    'field[qrupdate=true]': {
		change: function() {
		    this.getView().updateQrCode();
		},
	    },
	    'field': {
		validitychange: function(field, valid) {
		    let me = this;
		    let viewModel = me.getViewModel();
		    let form = me.lookup('totp_form');
		    let challenge = me.lookup('challenge');
		    let password = me.lookup('password');
		    viewModel.set('valid', form.isValid() && challenge.isValid() && password.isValid());
		},
	    },
	    '#': {
		show: function() {
		    let me = this;
		    let view = me.getView();

		    view.qrdiv = document.createElement('div');
		    view.qrcode = new QRCode(view.qrdiv, {
			width: 256,
			height: 256,
			correctLevel: QRCode.CorrectLevel.M,
		    });
		    view.down('#qrbox').getEl().appendChild(view.qrdiv);

		    view.getController().randomizeSecret();
		},
	    },
	},

	randomizeSecret: function() {
	    let me = this;
	    let rnd = new Uint8Array(32);
	    window.crypto.getRandomValues(rnd);
	    let data = '';
	    rnd.forEach(function(b) {
		// secret must be base32, so just use the first 5 bits
		b = b & 0x1f;
		if (b < 26) {
		    // A..Z
		    data += String.fromCharCode(b + 0x41);
		} else {
		    // 2..7
		    data += String.fromCharCode(b-26 + 0x32);
		}
	    });
	    me.getViewModel().set('secret', data);
	},
    },

    items: [
	{
	    xtype: 'form',
	    layout: 'anchor',
	    border: false,
	    reference: 'totp_form',
	    fieldDefaults: {
		anchor: '100%',
	    },
	    items: [
		{
		    xtype: 'pmxDisplayEditField',
		    name: 'userid',
		    cbind: {
			editable: (get) => get('isAdd') && !get('fixedUser'),
			value: () => Proxmox.UserName,
		    },
		    fieldLabel: gettext('User'),
		    editConfig: {
			xtype: 'pmxUserSelector',
			allowBlank: false,
		    },
		    renderer: Ext.String.htmlEncode,
		    listeners: {
			change: function(field, newValue, oldValue) {
			    let vm = this.up('window').getViewModel();
			    vm.set('userid', newValue);
			},
		    },
		    qrupdate: true,
		},
		{
		    xtype: 'textfield',
		    fieldLabel: gettext('Description'),
		    emptyText: gettext('For example: TFA device ID, required to identify multiple factors.'),
		    allowBlank: false,
		    name: 'description',
		    maxLength: 256,
		},
		{
		    layout: 'hbox',
		    border: false,
		    padding: '0 0 5 0',
		    items: [
			{
			    xtype: 'textfield',
			    fieldLabel: gettext('Secret'),
			    emptyText: gettext('Unchanged'),
			    name: 'secret',
			    reference: 'tfa_secret',
			    regex: /^[A-Z2-7=]+$/,
			    regexText: 'Must be base32 [A-Z2-7=]',
			    maskRe: /[A-Z2-7=]/,
			    qrupdate: true,
			    bind: {
				value: "{secret}",
			    },
			    flex: 4,
			    padding: '0 5 0 0',
			},
			{
			    xtype: 'button',
			    text: gettext('Randomize'),
			    reference: 'randomize_button',
			    handler: 'randomizeSecret',
			    flex: 1,
			},
		    ],
		},
		{
		    xtype: 'numberfield',
		    fieldLabel: gettext('Time period'),
		    name: 'step',
		    // Google Authenticator ignores this and generates bogus data
		    hidden: true,
		    value: 30,
		    minValue: 10,
		    qrupdate: true,
		},
		{
		    xtype: 'numberfield',
		    fieldLabel: gettext('Digits'),
		    name: 'digits',
		    value: 6,
		    // Google Authenticator ignores this and generates bogus data
		    hidden: true,
		    minValue: 6,
		    maxValue: 8,
		    qrupdate: true,
		},
		{
		    xtype: 'textfield',
		    fieldLabel: gettext('Issuer Name'),
		    name: 'issuer',
		    cbind: {
			value: '{issuerName}',
		    },
		    qrupdate: true,
		},
		{
		    xtype: 'box',
		    itemId: 'qrbox',
		    visible: false, // will be enabled when generating a qr code
		    bind: {
			visible: '{!secretEmpty}',
		    },
		    style: {
			margin: '16px auto',
			padding: '16px',
			width: '288px',
			height: '288px',
			'background-color': 'white',
		    },
		},
		{
		    xtype: 'textfield',
		    fieldLabel: gettext('Verify Code'),
		    allowBlank: false,
		    reference: 'challenge',
		    name: 'challenge',
		    bind: {
			disabled: '{!showTOTPVerifiction}',
			visible: '{showTOTPVerifiction}',
		    },
		    emptyText: gettext('Scan QR code in a TOTP app and enter an auth. code here'),
		},
		{
		    xtype: 'textfield',
		    name: 'password',
		    reference: 'password',
		    fieldLabel: gettext('Verify Password'),
		    inputType: 'password',
		    minLength: 5,
		    allowBlank: false,
		    validateBlank: true,
		    cbind: {
			hidden: () => Proxmox.UserName === 'root@pam',
			disabled: () => Proxmox.UserName === 'root@pam',
			emptyText: () =>
			    Ext.String.format(gettext("Confirm your ({0}) password"), Proxmox.UserName),
		    },
		},
	    ],
	},
    ],

    initComponent: function() {
	let me = this;
	me.url = '/api2/extjs/access/tfa/';
	me.method = 'POST';
	me.callParent();
    },

    getValues: function(dirtyOnly) {
	let me = this;
	let viewmodel = me.getController().getViewModel();

	let values = me.callParent(arguments);

	let uid = encodeURIComponent(values.userid);
	me.url = `/api2/extjs/access/tfa/${uid}`;
	delete values.userid;

	let data = {
	    description: values.description,
	    type: "totp",
	    totp: viewmodel.get('otpuri'),
	    value: values.challenge,
	};

	if (values.password) {
	    data.password = values.password;
	}

	return data;
    },
});
Ext.define('Proxmox.window.AddWebauthn', {
    extend: 'Ext.window.Window',
    alias: 'widget.pmxAddWebauthn',
    mixins: ['Proxmox.Mixin.CBind'],

    onlineHelp: 'user_mgmt',

    modal: true,
    resizable: false,
    title: gettext('Add a Webauthn login token'),
    width: 512,

    user: undefined,
    fixedUser: false,

    initComponent: function() {
	let me = this;
	me.callParent();
	Ext.GlobalEvents.fireEvent('proxmoxShowHelp', me.onlineHelp);
    },

    viewModel: {
	data: {
	    valid: false,
	    userid: null,
	},
    },

    controller: {
	xclass: 'Ext.app.ViewController',

	control: {
	    'field': {
		validitychange: function(field, valid) {
		    let me = this;
		    let viewmodel = me.getViewModel();
		    let form = me.lookup('webauthn_form');
		    viewmodel.set('valid', form.isValid());
		},
	    },
	    '#': {
		show: function() {
		    let me = this;
		    let view = me.getView();

		    if (Proxmox.UserName === 'root@pam') {
			view.lookup('password').setVisible(false);
			view.lookup('password').setDisabled(true);
		    }
		},
	    },
	},

	registerWebauthn: async function() {
	    let me = this;
	    let values = me.lookup('webauthn_form').getValues();
	    values.type = "webauthn";

	    let userid = values.user;
	    delete values.user;

	    me.getView().mask(gettext('Please wait...'), 'x-mask-loading');

	    try {
		let register_response = await Proxmox.Async.api2({
		    url: `/api2/extjs/access/tfa/${userid}`,
		    method: 'POST',
		    params: values,
		});

		let data = register_response.result.data;
		if (!data.challenge) {
		    throw "server did not respond with a challenge";
		}

		let creds = JSON.parse(data.challenge);

		// Fix this up before passing it to the browser, but keep a copy of the original
		// string to pass in the response:
		let challenge_str = creds.publicKey.challenge;
		creds.publicKey.challenge = Proxmox.Utils.base64url_to_bytes(challenge_str);
		creds.publicKey.user.id =
		    Proxmox.Utils.base64url_to_bytes(creds.publicKey.user.id);

		// convert existing authenticators structure
		creds.publicKey.excludeCredentials =
		    (creds.publicKey.excludeCredentials || [])
		    .map((credential) => ({
			id: Proxmox.Utils.base64url_to_bytes(credential.id),
			type: credential.type,
		    }));

		let msg = Ext.Msg.show({
		    title: `Webauthn: ${gettext('Setup')}`,
		    message: gettext('Please press the button on your Webauthn Device'),
		    buttons: [],
		});

		let token_response;
		try {
		    token_response = await navigator.credentials.create(creds);
		} catch (error) {
		    let errmsg = error.message;
		    if (error.name === 'InvalidStateError') {
			errmsg = gettext('Is this token already registered?');
		    }
		    throw gettext('An error occurred during token registration.') +
			`<br>${error.name}: ${errmsg}`;
		}

		// We cannot pass ArrayBuffers to the API, so extract & convert the data.
		let response = {
		    id: token_response.id,
		    type: token_response.type,
		    rawId: Proxmox.Utils.bytes_to_base64url(token_response.rawId),
		    response: {
			attestationObject: Proxmox.Utils.bytes_to_base64url(
			    token_response.response.attestationObject,
			),
			clientDataJSON: Proxmox.Utils.bytes_to_base64url(
			    token_response.response.clientDataJSON,
			),
		    },
		};

		msg.close();

		let params = {
		    type: "webauthn",
		    challenge: challenge_str,
		    value: JSON.stringify(response),
		};

		if (values.password) {
		    params.password = values.password;
		}

		await Proxmox.Async.api2({
		    url: `/api2/extjs/access/tfa/${userid}`,
		    method: 'POST',
		    params,
		});
	    } catch (response) {
		let error = response;
		console.error(error); // for debugging if it's not displayable...
		if (typeof error === "object") {
		    // in case it came from an api request:
		    error = error.result?.message;
		}

		Ext.Msg.alert(gettext('Error'), error);
	    }

	    me.getView().close();
	},
    },

    items: [
	{
	    xtype: 'form',
	    reference: 'webauthn_form',
	    layout: 'anchor',
	    border: false,
	    bodyPadding: 10,
	    fieldDefaults: {
		anchor: '100%',
	    },
	    items: [
		{
		    xtype: 'pmxDisplayEditField',
		    name: 'user',
		    cbind: {
			editable: (get) => !get('fixedUser'),
			value: () => Proxmox.UserName,
		    },
		    fieldLabel: gettext('User'),
		    editConfig: {
			xtype: 'pmxUserSelector',
			allowBlank: false,
		    },
		    renderer: Ext.String.htmlEncode,
		    listeners: {
			change: function(field, newValue, oldValue) {
			    let vm = this.up('window').getViewModel();
			    vm.set('userid', newValue);
			},
		    },
		},
		{
		    xtype: 'textfield',
		    fieldLabel: gettext('Description'),
		    allowBlank: false,
		    name: 'description',
		    maxLength: 256,
		    emptyText: gettext('For example: TFA device ID, required to identify multiple factors.'),
		},
		{
		    xtype: 'textfield',
		    name: 'password',
		    reference: 'password',
		    fieldLabel: gettext('Verify Password'),
		    inputType: 'password',
		    minLength: 5,
		    allowBlank: false,
		    validateBlank: true,
		    cbind: {
			hidden: () => Proxmox.UserName === 'root@pam',
			disabled: () => Proxmox.UserName === 'root@pam',
			emptyText: () =>
			    Ext.String.format(gettext("Confirm your ({0}) password"), Proxmox.UserName),
		    },
		},
	    ],
	},
    ],

    buttons: [
	{
	    xtype: 'proxmoxHelpButton',
	},
	'->',
	{
	    xtype: 'button',
	    text: gettext('Register Webauthn Device'),
	    handler: 'registerWebauthn',
	    bind: {
		disabled: '{!valid}',
	    },
	},
    ],
});
Ext.define('Proxmox.window.AddYubico', {
    extend: 'Proxmox.window.Edit',
    alias: 'widget.pmxAddYubico',
    mixins: ['Proxmox.Mixin.CBind'],

    onlineHelp: 'user_mgmt',

    modal: true,
    resizable: false,
    title: gettext('Add a Yubico OTP key'),
    width: 512,

    isAdd: true,
    userid: undefined,
    fixedUser: false,

    initComponent: function() {
	let me = this;
	me.url = '/api2/extjs/access/tfa/';
	me.method = 'POST';
	me.callParent();
    },

    viewModel: {
	data: {
	    valid: false,
	    userid: null,
	},
    },

    controller: {
	xclass: 'Ext.app.ViewController',

	control: {
	    'field': {
		validitychange: function(field, valid) {
		    let me = this;
		    let viewmodel = me.getViewModel();
		    let form = me.lookup('yubico_form');
		    viewmodel.set('valid', form.isValid());
		},
	    },
	    '#': {
		show: function() {
		    let me = this;
		    let view = me.getView();

		    if (Proxmox.UserName === 'root@pam') {
			view.lookup('password').setVisible(false);
			view.lookup('password').setDisabled(true);
		    }
		},
	    },
	},
    },

    items: [
	{
	    xtype: 'form',
	    reference: 'yubico_form',
	    layout: 'anchor',
	    border: false,
	    bodyPadding: 10,
	    fieldDefaults: {
		anchor: '100%',
	    },
	    items: [
		{
		    xtype: 'pmxDisplayEditField',
		    name: 'userid',
		    cbind: {
			editable: (get) => !get('fixedUser'),
			value: () => Proxmox.UserName,
		    },
		    fieldLabel: gettext('User'),
		    editConfig: {
			xtype: 'pmxUserSelector',
			allowBlank: false,
		    },
		    renderer: Ext.String.htmlEncode,
		    listeners: {
			change: function(field, newValue, oldValue) {
			    let vm = this.up('window').getViewModel();
			    vm.set('userid', newValue);
			},
		    },
		},
		{
		    xtype: 'textfield',
		    fieldLabel: gettext('Description'),
		    allowBlank: false,
		    name: 'description',
		    maxLength: 256,
		    emptyText: gettext('For example: TFA device ID, required to identify multiple factors.'),
		},
		{
		    xtype: 'textfield',
		    fieldLabel: gettext('Yubico OTP Key'),
		    emptyText: gettext('A currently valid Yubico OTP value'),
		    name: 'otp_value',
		    maxLength: 44,
		    enforceMaxLength: true,
		    regex: /^[a-zA-Z0-9]{44}$/,
		    regexText: '44 characters',
		    maskRe: /^[a-zA-Z0-9]$/,
		},
		{
		    xtype: 'textfield',
		    name: 'password',
		    reference: 'password',
		    fieldLabel: gettext('Verify Password'),
		    inputType: 'password',
		    minLength: 5,
		    allowBlank: false,
		    validateBlank: true,
		    cbind: {
			hidden: () => Proxmox.UserName === 'root@pam',
			disabled: () => Proxmox.UserName === 'root@pam',
			emptyText: () =>
			    Ext.String.format(gettext("Confirm your ({0}) password"), Proxmox.UserName),
		    },
		},
		{
		    xtype: 'box',
		    html: `<span class='pmx-hint'>${gettext('Tip:')}</span> `
			+ gettext('YubiKeys also support WebAuthn, which is often a better alternative.'),
		},
	    ],
	},
    ],

    getValues: function(dirtyOnly) {
	let me = this;

	let values = me.callParent(arguments);

	let uid = encodeURIComponent(values.userid);
	me.url = `/api2/extjs/access/tfa/${uid}`;
	delete values.userid;

	let data = {
	    description: values.description,
	    type: "yubico",
	    value: values.otp_value,
	};

	if (values.password) {
	    data.password = values.password;
	}

	return data;
    },
});
Ext.define('Proxmox.window.TfaEdit', {
    extend: 'Proxmox.window.Edit',
    alias: 'widget.pmxTfaEdit',
    mixins: ['Proxmox.Mixin.CBind'],

    onlineHelp: 'user_mgmt',

    modal: true,
    resizable: false,
    title: gettext("Modify a TFA entry's description"),
    width: 512,

    layout: {
	type: 'vbox',
	align: 'stretch',
    },

    cbindData: function(initialConfig) {
	let me = this;

	let tfa_id = initialConfig['tfa-id'];
	me.tfa_id = tfa_id;
	me.defaultFocus = 'textfield[name=description]';
	me.url = `/api2/extjs/access/tfa/${tfa_id}`;
	me.method = 'PUT';
	me.autoLoad = true;
	return {};
    },

    initComponent: function() {
	let me = this;
	me.callParent();

	if (Proxmox.UserName === 'root@pam') {
	    me.lookup('password').setVisible(false);
	    me.lookup('password').setDisabled(true);
	}

	let userid = me.tfa_id.split('/')[0];
	me.lookup('userid').setValue(userid);
    },

    items: [
	{
	    xtype: 'displayfield',
	    reference: 'userid',
	    editable: false,
	    fieldLabel: gettext('User'),
	    editConfig: {
		xtype: 'pmxUserSelector',
		allowBlank: false,
	    },
	    cbind: {
		value: () => Proxmox.UserName,
	    },
	},
	{
	    xtype: 'proxmoxtextfield',
	    name: 'description',
	    allowBlank: false,
	    fieldLabel: gettext('Description'),
	},
	{
	    xtype: 'proxmoxcheckbox',
	    fieldLabel: gettext('Enabled'),
	    name: 'enable',
	    uncheckedValue: 0,
	    defaultValue: 1,
	    checked: true,
	},
	{
	    xtype: 'textfield',
	    inputType: 'password',
	    fieldLabel: gettext('Password'),
	    minLength: 5,
	    reference: 'password',
	    name: 'password',
	    allowBlank: false,
	    validateBlank: true,
	    emptyText: gettext('verify current password'),
	},
    ],

    getValues: function() {
	var me = this;

	var values = me.callParent(arguments);

	delete values.userid;

	return values;
    },
});

Ext.define('Proxmox.tfa.confirmRemove', {
    extend: 'Proxmox.window.Edit',
    mixins: ['Proxmox.Mixin.CBind'],

    title: gettext("Confirm TFA Removal"),

    modal: true,
    resizable: false,
    width: 600,
    isCreate: true, // logic
    isRemove: true,

    url: '/access/tfa',

    initComponent: function() {
	let me = this;

	if (typeof me.type !== "string") {
	    throw "missing type";
	}

	if (!me.callback) {
	    throw "missing callback";
	}

	me.callParent();

	if (Proxmox.UserName === 'root@pam') {
	    me.lookup('password').setVisible(false);
	    me.lookup('password').setDisabled(true);
	}
    },

    submit: function() {
	let me = this;
	if (Proxmox.UserName === 'root@pam') {
	    me.callback(null);
	} else {
	    me.callback(me.lookup('password').getValue());
	}
	me.close();
    },

    items: [
	{
	    xtype: 'box',
	    padding: '0 0 10 0',
	    html: Ext.String.format(
	        gettext('Are you sure you want to remove this {0} entry?'),
	        'TFA',
	    ),
	},
	{
	    xtype: 'container',
	    layout: {
		type: 'hbox',
		align: 'begin',
	    },
	    defaults: {
		border: false,
		layout: 'anchor',
		flex: 1,
		padding: 5,
	    },
	    items: [
		{
		    xtype: 'container',
		    layout: {
			type: 'vbox',
		    },
		    padding: '0 10 0 0',
		    items: [
			{
			    xtype: 'displayfield',
			    fieldLabel: gettext('User'),
			    cbind: {
				value: '{userid}',
			    },
			},
			{
			    xtype: 'displayfield',
			    fieldLabel: gettext('Type'),
			    cbind: {
				value: '{type}',
			    },
			},
		    ],
		},
		{
		    xtype: 'container',
		    layout: {
			type: 'vbox',
		    },
		    padding: '0 0 0 10',
		    items: [
			{
			    xtype: 'displayfield',
			    fieldLabel: gettext('Created'),
			    renderer: v => Proxmox.Utils.render_timestamp(v),
			    cbind: {
				value: '{created}',
			    },
			},
			{
			    xtype: 'textfield',
			    fieldLabel: gettext('Description'),
			    cbind: {
				value: '{description}',
			    },
			    emptyText: Proxmox.Utils.NoneText,
			    submitValue: false,
			    editable: false,
			},
		    ],
		},
	    ],
	},
	{
	    xtype: 'textfield',
	    inputType: 'password',
	    fieldLabel: gettext('Password'),
	    minLength: 5,
	    reference: 'password',
	    name: 'password',
	    allowBlank: false,
	    validateBlank: true,
	    padding: '10 0 0 0',
	    cbind: {
		emptyText: () =>
		    Ext.String.format(gettext("Confirm your ({0}) password"), Proxmox.UserName),
	    },
	},
    ],
});
Ext.define('Proxmox.window.NotesEdit', {
    extend: 'Proxmox.window.Edit',

    title: gettext('Notes'),
    onlineHelp: 'markdown_basics',

    width: 800,
    height: 600,

    resizable: true,
    layout: 'fit',

    autoLoad: true,
    defaultButton: undefined,

    setMaxLength: function(maxLength) {
	let me = this;

	let area = me.down('textarea[name="description"]');
	area.maxLength = maxLength;
	area.validate();

	return me;
    },

    items: {
	xtype: 'textarea',
	name: 'description',
	height: '100%',
	value: '',
	hideLabel: true,
	emptyText: gettext('You can use Markdown for rich text formatting.'),
	fieldStyle: {
	    'white-space': 'pre-wrap',
	    'font-family': 'monospace',
	},
    },
});
Ext.define('Proxmox.window.ThemeEditWindow', {
    extend: 'Ext.window.Window',
    alias: 'widget.pmxThemeEditWindow',

    viewModel: {
	parent: null,
	data: {},
    },
    controller: {
	xclass: 'Ext.app.ViewController',
	init: function(view) {
	    let theme = '__default__';

	    let savedTheme = Ext.util.Cookies.get(view.cookieName);
	    if (savedTheme && savedTheme in Proxmox.Utils.theme_map) {
		theme = savedTheme;
	    }
	    this.getViewModel().set('theme', theme);
	},
	applyTheme: function(button) {
	    let view = this.getView();
	    let vm = this.getViewModel();

	    let expire = Ext.Date.add(new Date(), Ext.Date.YEAR, 10);
	    Ext.util.Cookies.set(view.cookieName, vm.get('theme'), expire);
	    view.mask(gettext('Please wait...'), 'x-mask-loading');
	    window.location.reload();
	},
    },

    cookieName: 'PVEThemeCookie',

    title: gettext('Color Theme'),
    modal: true,
    bodyPadding: 10,
    resizable: false,
    items: [
	{
	    xtype: 'proxmoxThemeSelector',
	    fieldLabel: gettext('Color Theme'),
	    bind: {
		value: '{theme}',
	    },
	},
    ],
    buttons: [
	{
	    text: gettext('Apply'),
	    handler: 'applyTheme',
	},
    ],
});
Ext.define('Proxmox.window.SyncWindow', {
    extend: 'Ext.window.Window',

    title: gettext('Realm Sync'),

    width: 600,
    bodyPadding: 10,
    modal: true,
    resizable: false,

    controller: {
	xclass: 'Ext.app.ViewController',

	control: {
	    'form': {
		validitychange: function(field, valid) {
		    this.lookup('preview_btn').setDisabled(!valid);
		    this.lookup('sync_btn').setDisabled(!valid);
		},
	    },
	    'button': {
		click: function(btn) {
		    this.sync_realm(btn.reference === 'preview_btn');
		},
	    },
	},

	sync_realm: function(is_preview) {
	    let view = this.getView();
	    let ipanel = this.lookup('ipanel');
	    let params = ipanel.getValues();

	    let vanished_opts = [];
	    ['acl', 'entry', 'properties'].forEach((prop) => {
		if (params[`remove-vanished-${prop}`]) {
		    vanished_opts.push(prop);
		}
		delete params[`remove-vanished-${prop}`];
	    });
	    if (vanished_opts.length > 0) {
		params['remove-vanished'] = vanished_opts.join(';');
	    }

	    params['dry-run'] = is_preview ? 1 : 0;
	    Proxmox.Utils.API2Request({
		url: `/access/domains/${view.realm}/sync`,
		waitMsgTarget: view,
		method: 'POST',
		params,
		failure: (response) => {
		    view.show();
		    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
		},
		success: (response) => {
		    view.hide();
		    Ext.create('Proxmox.window.TaskViewer', {
			upid: response.result.data,
			listeners: {
			    destroy: () => {
				if (is_preview) {
				    view.show();
				} else {
				    view.close();
				}
			    },
			},
		    }).show();
		},
	    });
	},
    },

    items: [
	{
	    xtype: 'form',
	    reference: 'form',
	    border: false,
	    fieldDefaults: {
		labelWidth: 100,
		anchor: '100%',
	    },
	    items: [{
		xtype: 'inputpanel',
		reference: 'ipanel',
		column1: [
		    {
			xtype: 'proxmoxKVComboBox',
			value: 'true',
			deleteEmpty: false,
			allowBlank: false,
			comboItems: [
			    ['true', Proxmox.Utils.yesText],
			    ['false', Proxmox.Utils.noText],
			],
			name: 'enable-new',
			fieldLabel: gettext('Enable new'),
		    },
		],

		column2: [
		],

		columnB: [
		    {
			xtype: 'fieldset',
			title: gettext('Remove Vanished Options'),
			items: [
			    {
				xtype: 'proxmoxcheckbox',
				fieldLabel: gettext('ACL'),
				name: 'remove-vanished-acl',
				boxLabel: gettext('Remove ACLs of vanished users and groups.'),
			    },
			    {
				xtype: 'proxmoxcheckbox',
				fieldLabel: gettext('Entry'),
				name: 'remove-vanished-entry',
				boxLabel: gettext('Remove vanished user and group entries.'),
			    },
			    {
				xtype: 'proxmoxcheckbox',
				fieldLabel: gettext('Properties'),
				name: 'remove-vanished-properties',
				boxLabel: gettext('Remove vanished properties from synced users.'),
			    },
			],
		    },
		    {
			xtype: 'displayfield',
			reference: 'defaulthint',
			value: gettext('Default sync options can be set by editing the realm.'),
			userCls: 'pmx-hint',
			hidden: true,
		    },
		],
	    }],
	},
    ],

    buttons: [
	'->',
	{
	    text: gettext('Preview'),
	    reference: 'preview_btn',
	},
	{
	    text: gettext('Sync'),
	    reference: 'sync_btn',
	},
    ],

    initComponent: function() {
	if (!this.realm) {
	    throw "no realm defined";
	}

	if (!this.type) {
	    throw "no realm type defined";
	}

	this.callParent();

	Proxmox.Utils.API2Request({
	    url: `/config/access/${this.type}/${this.realm}`,
	    waitMsgTarget: this,
	    method: 'GET',
	    failure: (response) => {
		Ext.Msg.alert(gettext('Error'), response.htmlStatus);
		this.close();
	    },
	    success: (response) => {
		let default_options = response.result.data['sync-defaults-options'];
		if (default_options) {
		    let options = Proxmox.Utils.parsePropertyString(default_options);
		    if (options['remove-vanished']) {
			let opts = options['remove-vanished'].split(';');
			for (const opt of opts) {
			    options[`remove-vanished-${opt}`] = 1;
			}
		    }
		    let ipanel = this.lookup('ipanel');
		    ipanel.setValues(options);
		} else {
		    this.lookup('defaulthint').setVisible(true);
		}

		// check validity for button state
		this.lookup('form').isValid();
	    },
	});
    },
});
Ext.define('apt-pkglist', {
    extend: 'Ext.data.Model',
    fields: [
        'Package', 'Title', 'Description', 'Section', 'Arch', 'Priority', 'Version', 'OldVersion',
        'Origin',
    ],
    idProperty: 'Package',
});

Ext.define('Proxmox.node.APT', {
    extend: 'Ext.grid.GridPanel',

    xtype: 'proxmoxNodeAPT',

    upgradeBtn: undefined,

    columns: [
	{
	    header: gettext('Package'),
	    width: 200,
	    sortable: true,
	    dataIndex: 'Package',
	},
	{
	    text: gettext('Version'),
	    columns: [
		{
		    header: gettext('current'),
		    width: 100,
		    sortable: false,
		    dataIndex: 'OldVersion',
		},
		{
		    header: gettext('new'),
		    width: 100,
		    sortable: false,
		    dataIndex: 'Version',
		},
	    ],
	},
	{
	    header: gettext('Description'),
	    sortable: false,
	    dataIndex: 'Title',
	    flex: 1,
	},
    ],

    initComponent: function() {
	let me = this;

	if (!me.nodename) {
	    throw "no node name specified";
	}

	let store = Ext.create('Ext.data.Store', {
	    model: 'apt-pkglist',
	    groupField: 'Origin',
	    proxy: {
		type: 'proxmox',
		url: `/api2/json/nodes/${me.nodename}/apt/update`,
	    },
	    sorters: [
		{
		    property: 'Package',
		    direction: 'ASC',
		},
	    ],
	});
	Proxmox.Utils.monStoreErrors(me, store, true);

	let groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
            groupHeaderTpl: '{[ "Origin: " + values.name ]} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})',
	    enableGroupingMenu: false,
	});

	let rowBodyFeature = Ext.create('Ext.grid.feature.RowBody', {
            getAdditionalData: function(data, rowIndex, record, orig) {
		let headerCt = this.view.headerCt;
		let colspan = headerCt.getColumnCount();
		return {
		    rowBody: `<div style="padding: 1em">${Ext.htmlEncode(data.Description)}</div>`,
		    rowBodyCls: me.full_description ? '' : Ext.baseCSSPrefix + 'grid-row-body-hidden',
		    rowBodyColspan: colspan,
		};
	    },
	});

	let apt_command = function(cmd) {
	    Proxmox.Utils.API2Request({
		url: `/nodes/${me.nodename}/apt/${cmd}`,
		method: 'POST',
		success: ({ result }) => Ext.create('Proxmox.window.TaskViewer', {
		    autoShow: true,
		    upid: result.data,
		    listeners: {
			close: () => store.load(),
		    },
		}),
	    });
	};

	let sm = Ext.create('Ext.selection.RowModel', {});

	let update_btn = new Ext.Button({
	    text: gettext('Refresh'),
	    handler: () => Proxmox.Utils.checked_command(function() { apt_command('update'); }),
	});

	let show_changelog = function(rec) {
	    if (!rec?.data?.Package) {
		console.debug('cannot show changelog, missing Package', rec);
		return;
	    }

	    let view = Ext.createWidget('component', {
		autoScroll: true,
		style: {
		    'white-space': 'pre',
		    'font-family': 'monospace',
		    padding: '5px',
		},
	    });

	    let win = Ext.create('Ext.window.Window', {
		title: gettext('Changelog') + ": " + rec.data.Package,
		width: 800,
		height: 600,
		layout: 'fit',
		modal: true,
		items: [view],
	    });

	    Proxmox.Utils.API2Request({
		waitMsgTarget: me,
		url: "/nodes/" + me.nodename + "/apt/changelog",
		params: {
		    name: rec.data.Package,
		    version: rec.data.Version,
		},
		method: 'GET',
		failure: function(response, opts) {
		    win.close();
		    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
		},
		success: function(response, opts) {
		    win.show();
		    view.update(Ext.htmlEncode(response.result.data));
		},
	    });
	};

	let changelog_btn = new Proxmox.button.Button({
	    text: gettext('Changelog'),
	    selModel: sm,
	    disabled: true,
	    enableFn: rec => !!rec?.data?.Package,
	    handler: (b, e, rec) => show_changelog(rec),
	});

	let verbose_desc_checkbox = new Ext.form.field.Checkbox({
	    boxLabel: gettext('Show details'),
	    value: false,
	    listeners: {
		change: (f, val) => {
		    me.full_description = val;
		    me.getView().refresh();
		},
	    },
	});

	if (me.upgradeBtn) {
	    me.tbar = [update_btn, me.upgradeBtn, changelog_btn, '->', verbose_desc_checkbox];
	} else {
	    me.tbar = [update_btn, changelog_btn, '->', verbose_desc_checkbox];
	}

	Ext.apply(me, {
	    store: store,
	    stateful: true,
	    stateId: 'grid-update',
	    selModel: sm,
            viewConfig: {
		stripeRows: false,
		emptyText: `<div style="display:flex;justify-content:center;"><p>${gettext('No updates available.')}</p></div>`,
	    },
	    features: [groupingFeature, rowBodyFeature],
	    listeners: {
		activate: () => store.load(),
		itemdblclick: (v, rec) => show_changelog(rec),
	    },
	});

	me.callParent();
    },
});
Ext.define('apt-repolist', {
    extend: 'Ext.data.Model',
    fields: [
	'Path',
	'Index',
	'Origin',
	'FileType',
	'Enabled',
	'Comment',
	'Types',
	'URIs',
	'Suites',
	'Components',
	'Options',
    ],
});

Ext.define('Proxmox.window.APTRepositoryAdd', {
    extend: 'Proxmox.window.Edit',
    alias: 'widget.pmxAPTRepositoryAdd',

    isCreate: true,
    isAdd: true,

    subject: gettext('Repository'),
    width: 600,

    initComponent: function() {
	let me = this;

	if (!me.repoInfo || me.repoInfo.length === 0) {
	    throw "repository information not initialized";
	}

	let description = Ext.create('Ext.form.field.Display', {
	    fieldLabel: gettext('Description'),
	    name: 'description',
	});

	let status = Ext.create('Ext.form.field.Display', {
	    fieldLabel: gettext('Status'),
	    name: 'status',
	    renderer: function(value) {
		let statusText = gettext('Not yet configured');
		if (value !== '') {
		    statusText = Ext.String.format(
			'{0}: {1}',
			gettext('Configured'),
			value ? gettext('enabled') : gettext('disabled'),
		    );
		}

		return statusText;
	    },
	});

	let repoSelector = Ext.create('Proxmox.form.KVComboBox', {
	    fieldLabel: gettext('Repository'),
	    xtype: 'proxmoxKVComboBox',
	    name: 'handle',
	    allowBlank: false,
	    comboItems: me.repoInfo.map(info => [info.handle, info.name]),
	    validator: function(renderedValue) {
		let handle = this.value;
		// we cannot use this.callParent in instantiations
		let valid = Proxmox.form.KVComboBox.prototype.validator.call(this, renderedValue);

		if (!valid || !handle) {
		    return false;
		}

		const info = me.repoInfo.find(elem => elem.handle === handle);
		if (!info) {
		    return false;
		}

		if (info.status) {
		    return Ext.String.format(gettext('{0} is already configured'), renderedValue);
		}
		return valid;
	    },
	    listeners: {
		change: function(f, value) {
		    const info = me.repoInfo.find(elem => elem.handle === value);
		    description.setValue(info.description);
		    status.setValue(info.status);
		},
	    },
	});

	repoSelector.setValue(me.repoInfo[0].handle);

	Ext.apply(me, {
	    items: [
		repoSelector,
		description,
		status,
	    ],
	    repoSelector: repoSelector,
	});

	me.callParent();
    },
});

Ext.define('Proxmox.node.APTRepositoriesErrors', {
    extend: 'Ext.grid.GridPanel',

    xtype: 'proxmoxNodeAPTRepositoriesErrors',

    store: {},

    scrollable: true,

    viewConfig: {
	stripeRows: false,
	getRowClass: (record) => {
	    switch (record.data.status) {
		case 'warning': return 'proxmox-warning-row';
		case 'critical': return 'proxmox-invalid-row';
		default: return '';
	    }
	},
    },

    hideHeaders: true,

    columns: [
	{
	    dataIndex: 'status',
	    renderer: (value) => `<i class="fa fa-fw ${Proxmox.Utils.get_health_icon(value, true)}"></i>`,
	    width: 50,
	},
	{
	    dataIndex: 'message',
	    flex: 1,
	},
    ],
});

Ext.define('Proxmox.node.APTRepositoriesGrid', {
    extend: 'Ext.grid.GridPanel',
    xtype: 'proxmoxNodeAPTRepositoriesGrid',
    mixins: ['Proxmox.Mixin.CBind'],

    title: gettext('APT Repositories'),

    cls: 'proxmox-apt-repos', // to allow applying styling to general components with local effect

    border: false,

    tbar: [
	{
	    text: gettext('Reload'),
	    iconCls: 'fa fa-refresh',
	    handler: function() {
		let me = this;
		me.up('proxmoxNodeAPTRepositories').reload();
	    },
	},
	{
	    text: gettext('Add'),
	    name: 'addRepo',
	    disabled: true,
	    repoInfo: undefined,
	    cbind: {
		onlineHelp: '{onlineHelp}',
	    },
	    handler: function(button, event, record) {
		Proxmox.Utils.checked_command(() => {
		    let me = this;
		    let panel = me.up('proxmoxNodeAPTRepositories');

		    let extraParams = {};
		    if (panel.digest !== undefined) {
		       extraParams.digest = panel.digest;
		    }

		    Ext.create('Proxmox.window.APTRepositoryAdd', {
			repoInfo: me.repoInfo,
			url: `/api2/extjs/nodes/${panel.nodename}/apt/repositories`,
			method: 'PUT',
			extraRequestParams: extraParams,
			onlineHelp: me.onlineHelp,
			listeners: {
			    destroy: function() {
				panel.reload();
			    },
			},
		    }).show();
		});
	    },
	},
	'-',
	{
	    xtype: 'proxmoxAltTextButton',
	    defaultText: gettext('Enable'),
	    altText: gettext('Disable'),
	    name: 'repoEnable',
	    disabled: true,
	    bind: {
		text: '{enableButtonText}',
	    },
	    handler: function(button, event, record) {
		let me = this;
		let panel = me.up('proxmoxNodeAPTRepositories');

		let params = {
		    path: record.data.Path,
		    index: record.data.Index,
		    enabled: record.data.Enabled ? 0 : 1, // invert
		};

		if (panel.digest !== undefined) {
		   params.digest = panel.digest;
		}

		Proxmox.Utils.API2Request({
		    url: `/nodes/${panel.nodename}/apt/repositories`,
		    method: 'POST',
		    params: params,
		    failure: function(response, opts) {
			Ext.Msg.alert(gettext('Error'), response.htmlStatus);
			panel.reload();
		    },
		    success: function(response, opts) {
			panel.reload();
		    },
		});
	    },
	},
    ],

    sortableColumns: false,
    viewConfig: {
	stripeRows: false,
	getRowClass: (record, index) => record.get('Enabled') ? '' : 'proxmox-disabled-row',
    },

    columns: [
	{
	    header: gettext('Enabled'),
	    dataIndex: 'Enabled',
	    align: 'center',
	    renderer: Proxmox.Utils.renderEnabledIcon,
	    width: 90,
	},
	{
	    header: gettext('Types'),
	    dataIndex: 'Types',
	    renderer: function(types, cell, record) {
		return types.join(' ');
	    },
	    width: 100,
	},
	{
	    header: gettext('URIs'),
	    dataIndex: 'URIs',
	    renderer: function(uris, cell, record) {
		return uris.join(' ');
	    },
	    width: 350,
	},
	{
	    header: gettext('Suites'),
	    dataIndex: 'Suites',
	    renderer: function(suites, metaData, record) {
		let err = '';
		if (record.data.warnings && record.data.warnings.length > 0) {
		    let txt = [gettext('Warning')];
		    record.data.warnings.forEach((warning) => {
			if (warning.property === 'Suites') {
			    txt.push(Ext.htmlEncode(warning.message));
			}
		    });
		    metaData.tdAttr = `data-qtip="${Ext.htmlEncode(txt.join('<br>'))}"`;
		    if (record.data.Enabled) {
			metaData.tdCls = 'proxmox-invalid-row';
			err = '<i class="fa fa-fw critical fa-exclamation-circle"></i> ';
		    } else {
			metaData.tdCls = 'proxmox-warning-row';
			err = '<i class="fa fa-fw warning fa-exclamation-circle"></i> ';
		    }
		}
		return suites.join(' ') + err;
	    },
	    width: 130,
	},
	{
	    header: gettext('Components'),
	    dataIndex: 'Components',
	    renderer: function(components, metaData, record) {
		if (components === undefined) {
		    return '';
		}
		let err = '';
		if (components.length === 1) {
		    // FIXME: this should be a flag set to the actual repsotiories, i.e., a tristate
		    // like production-ready = <yes|no|other> (Option<bool>)
		    if (components[0].match(/\w+(-no-subscription|test)\s*$/i)) {
			metaData.tdCls = 'proxmox-warning-row';
			err = '<i class="fa fa-fw warning fa-exclamation-circle"></i> ';

			let qtip = components[0].match(/no-subscription/)
			    ? gettext('The no-subscription repository is NOT production-ready')
			    : gettext('The test repository may contain unstable updates')
			    ;
			    metaData.tdAttr = `data-qtip="${Ext.htmlEncode(Ext.htmlEncode(qtip))}"`;
		    }
		}
		return components.join(' ') + err;
	    },
	    width: 170,
	},
	{
	    header: gettext('Options'),
	    dataIndex: 'Options',
	    renderer: function(options, cell, record) {
		if (!options) {
		    return '';
		}

		let filetype = record.data.FileType;
		let text = '';

		options.forEach(function(option) {
		    let key = option.Key;
		    if (filetype === 'list') {
			let values = option.Values.join(',');
			text += `${key}=${values} `;
		    } else if (filetype === 'sources') {
			let values = option.Values.join(' ');
			text += `${key}: ${values}<br>`;
		    } else {
			throw "unknown file type";
		    }
		});
		return text;
	    },
	    flex: 1,
	},
	{
	    header: gettext('Origin'),
	    dataIndex: 'Origin',
	    width: 120,
	    renderer: function(value, meta, rec) {
		if (typeof value !== 'string' || value.length === 0) {
		    value = gettext('Other');
		}
		let cls = 'fa fa-fw fa-question-circle-o';
		let originType = this.up('proxmoxNodeAPTRepositories').classifyOrigin(value);
		if (originType === 'Proxmox') {
		    cls = 'pmx-itype-icon pmx-itype-icon-proxmox-x';
		} else if (originType === 'Debian') {
		    cls = 'pmx-itype-icon pmx-itype-icon-debian-swirl';
		}
		return `<i class='${cls}'></i> ${value}`;
	    },
	},
	{
	    header: gettext('Comment'),
	    dataIndex: 'Comment',
	    flex: 2,
	    renderer: Ext.String.htmlEncode,
	},
    ],

    features: [
	{
	    ftype: 'grouping',
	    groupHeaderTpl: '{[ "File: " + values.name ]} ({rows.length} repositor{[values.rows.length > 1 ? "ies" : "y"]})',
	    enableGroupingMenu: false,
	},
    ],

    store: {
	model: 'apt-repolist',
	groupField: 'Path',
	sorters: [
	    {
		property: 'Index',
		direction: 'ASC',
	    },
	],
    },

    initComponent: function() {
	let me = this;

	if (!me.nodename) {
	    throw "no node name specified";
	}

	me.callParent();
    },
});

Ext.define('Proxmox.node.APTRepositories', {
    extend: 'Ext.panel.Panel',
    xtype: 'proxmoxNodeAPTRepositories',
    mixins: ['Proxmox.Mixin.CBind'],

    digest: undefined,

    onlineHelp: undefined,

    product: 'Proxmox VE', // default

    classifyOrigin: function(origin) {
	origin ||= '';
	if (origin.match(/^\s*Proxmox\s*$/i)) {
	    return 'Proxmox';
	} else if (origin.match(/^\s*Debian\s*(:?Backports)?$/i)) {
	    return 'Debian';
	}
	return 'Other';
    },

    controller: {
	xclass: 'Ext.app.ViewController',

	selectionChange: function(grid, selection) {
	    let me = this;
	    if (!selection || selection.length < 1) {
		return;
	    }
	    let rec = selection[0];
	    let vm = me.getViewModel();
	    vm.set('selectionenabled', rec.get('Enabled'));
	    vm.notify();
	},

	updateState: function() {
	    let me = this;
	    let vm = me.getViewModel();

	    let store = vm.get('errorstore');
	    store.removeAll();

	    let status = 'good'; // start with best, the helper below will downgrade if needed
	    let text = gettext('All OK, you have production-ready repositories configured!');

	    let addGood = message => store.add({ status: 'good', message });
	    let addWarn = (message, important) => {
		if (status !== 'critical') {
		    status = 'warning';
		    text = important ? message : gettext('Warning');
		}
		store.add({ status: 'warning', message });
	    };
	    let addCritical = (message, important) => {
		status = 'critical';
		text = important ? message : gettext('Error');
		store.add({ status: 'critical', message });
	    };

	    let errors = vm.get('errors');
	    errors.forEach(error => addCritical(`${error.path} - ${error.error}`));

	    let activeSubscription = vm.get('subscriptionActive');
	    let enterprise = vm.get('enterpriseRepo');
	    let nosubscription = vm.get('noSubscriptionRepo');
	    let test = vm.get('testRepo');
	    let cephRepos = {
		enterprise: vm.get('cephEnterpriseRepo'),
		nosubscription: vm.get('cephNoSubscriptionRepo'),
		test: vm.get('cephTestRepo'),
	    };
	    let wrongSuites = vm.get('suitesWarning');
	    let mixedSuites = vm.get('mixedSuites');

	    if (!enterprise && !nosubscription && !test) {
		addCritical(
		    Ext.String.format(gettext('No {0} repository is enabled, you do not get any updates!'), vm.get('product')),
		);
	    } else if (errors.length > 0) {
		// nothing extra, just avoid that we show "get updates"
	    } else if (enterprise && !nosubscription && !test && activeSubscription) {
		addGood(Ext.String.format(gettext('You get supported updates for {0}'), vm.get('product')));
	    } else if (nosubscription || test) {
		addGood(Ext.String.format(gettext('You get updates for {0}'), vm.get('product')));
	    }

	    if (wrongSuites) {
		addWarn(gettext('Some suites are misconfigured'));
	    }

	    if (mixedSuites) {
		addWarn(gettext('Detected mixed suites before upgrade'));
	    }

	    let productionReadyCheck = (repos, type, noSubAlternateName) => {
		if (!activeSubscription && repos.enterprise) {
		    addWarn(Ext.String.format(
			gettext('The {0}enterprise repository is enabled, but there is no active subscription!'),
			type,
		    ));
		}

		if (repos.nosubscription) {
		    addWarn(Ext.String.format(
			gettext('The {0}no-subscription{1} repository is not recommended for production use!'),
			type,
			noSubAlternateName,
		    ));
		}

		if (repos.test) {
		    addWarn(Ext.String.format(
			gettext('The {0}test repository may pull in unstable updates and is not recommended for production use!'),
			type,
		    ));
		}
	    };

	    productionReadyCheck({ enterprise, nosubscription, test }, '', '');
	    // TODO drop alternate 'main' name when no longer relevant
	    productionReadyCheck(cephRepos, 'Ceph ', '/main');

	    if (errors.length > 0) {
		text = gettext('Fatal parsing error for at least one repository');
	    }

	    let iconCls = Proxmox.Utils.get_health_icon(status, true);

	    vm.set('state', {
		iconCls,
		text,
	    });
	},
    },

    viewModel: {
	data: {
	    product: 'Proxmox VE', // default
	    errors: [],
	    suitesWarning: false,
	    mixedSuites: false, // used before major upgrade
	    subscriptionActive: '',
	    noSubscriptionRepo: '',
	    enterpriseRepo: '',
	    testRepo: '',
	    cephEnterpriseRepo: '',
	    cephNoSubscriptionRepo: '',
	    cephTestRepo: '',
	    selectionenabled: false,
	    state: {},
	},
	formulas: {
	    enableButtonText: (get) => get('selectionenabled')
		? gettext('Disable') : gettext('Enable'),
	},
	stores: {
	    errorstore: {
		fields: ['status', 'message'],
	    },
	},
    },

    scrollable: true,
    layout: {
	type: 'vbox',
	align: 'stretch',
    },

    items: [
	{
	    xtype: 'panel',
	    border: false,
	    layout: {
		type: 'hbox',
		align: 'stretch',
	    },
	    height: 200,
	    title: gettext('Status'),
	    items: [
		{
		    xtype: 'box',
		    flex: 2,
		    margin: 10,
		    data: {
			iconCls: Proxmox.Utils.get_health_icon(undefined, true),
			text: '',
		    },
		    bind: {
			data: '{state}',
		    },
		    tpl: [
			'<center class="centered-flex-column" style="font-size:15px;line-height: 25px;">',
			'<i class="fa fa-4x {iconCls}"></i>',
			'{text}',
			'</center>',
		    ],
		},
		{
		    xtype: 'proxmoxNodeAPTRepositoriesErrors',
		    name: 'repositoriesErrors',
		    flex: 7,
		    margin: 10,
		    bind: {
			store: '{errorstore}',
		    },
		},
	    ],
	},
	{
	    xtype: 'proxmoxNodeAPTRepositoriesGrid',
	    name: 'repositoriesGrid',
	    flex: 1,
	    cbind: {
		nodename: '{nodename}',
		onlineHelp: '{onlineHelp}',
	    },
	    majorUpgradeAllowed: false, // TODO get release information from an API call?
	    listeners: {
		selectionchange: 'selectionChange',
	    },
	},
    ],

    check_subscription: function() {
	let me = this;
	let vm = me.getViewModel();

	Proxmox.Utils.API2Request({
	    url: `/nodes/${me.nodename}/subscription`,
	    method: 'GET',
	    failure: (response, opts) => Ext.Msg.alert(gettext('Error'), response.htmlStatus),
	    success: function(response, opts) {
		const res = response.result;
		const subscription = !(!res || !res.data || res.data.status.toLowerCase() !== 'active');
		vm.set('subscriptionActive', subscription);
		me.getController().updateState();
	    },
	});
    },

    updateStandardRepos: function(standardRepos) {
	let me = this;
	let vm = me.getViewModel();

	let addButton = me.down('button[name=addRepo]');

	addButton.repoInfo = [];
	for (const standardRepo of standardRepos) {
	    const handle = standardRepo.handle;
	    const status = standardRepo.status;

	    if (handle === "enterprise") {
		vm.set('enterpriseRepo', status);
	    } else if (handle === "no-subscription") {
		vm.set('noSubscriptionRepo', status);
	    } else if (handle === 'test') {
		vm.set('testRepo', status);
	    } else if (handle.match(/^ceph-[a-zA-Z]+-enterprise$/)) {
		vm.set('cephEnterpriseRepo', status);
	    } else if (handle.match(/^ceph-[a-zA-Z]+-no-subscription$/)) {
		vm.set('cephNoSubscriptionRepo', status);
	    } else if (handle.match(/^ceph-[a-zA-Z]+-test$/)) {
		vm.set('cephTestRepo', status);
	    }
	    me.getController().updateState();

	    addButton.repoInfo.push(standardRepo);
	    addButton.digest = me.digest;
	}

	addButton.setDisabled(false);
    },

    reload: function() {
	let me = this;
	let vm = me.getViewModel();
	let repoGrid = me.down('proxmoxNodeAPTRepositoriesGrid');

	me.store.load(function(records, operation, success) {
	    let gridData = [];
	    let errors = [];
	    let digest;
	    let suitesWarning = false;

	    // Usually different suites will give errors anyways, but before a major upgrade the
	    // current and the next suite are allowed, so it makes sense to check for mixed suites.
	    let checkMixedSuites = false;
	    let mixedSuites = false;

	    if (success && records.length > 0) {
		let data = records[0].data;
		let files = data.files;
		errors = data.errors;
		digest = data.digest;

		let infos = {};
		for (const info of data.infos) {
		    let path = info.path;
		    let idx = info.index;

		    if (!infos[path]) {
			infos[path] = {};
		    }
		    if (!infos[path][idx]) {
			infos[path][idx] = {
			    origin: '',
			    warnings: [],
			    // Used as a heuristic to detect mixed repositories pre-upgrade. The
			    // warning is set on all repositories that do configure the next suite.
			    gotIgnorePreUpgradeWarning: false,
			};
		    }

		    if (info.kind === 'origin') {
			infos[path][idx].origin = info.message;
		    } else if (info.kind === 'warning') {
			infos[path][idx].warnings.push(info);
		    } else if (info.kind === 'ignore-pre-upgrade-warning') {
			infos[path][idx].gotIgnorePreUpgradeWarning = true;
			if (!repoGrid.majorUpgradeAllowed) {
			    infos[path][idx].warnings.push(info);
			} else {
			    checkMixedSuites = true;
			}
		    }
		}


		files.forEach(function(file) {
		    for (let n = 0; n < file.repositories.length; n++) {
			let repo = file.repositories[n];
			repo.Path = file.path;
			repo.Index = n;
			if (infos[file.path] && infos[file.path][n]) {
			    repo.Origin = infos[file.path][n].origin || Proxmox.Utils.unknownText;
			    repo.warnings = infos[file.path][n].warnings || [];

			    if (repo.Enabled) {
				if (repo.warnings.some(w => w.property === 'Suites')) {
				    suitesWarning = true;
				}

				let originType = me.classifyOrigin(repo.Origin);
				// Only Proxmox and Debian repositories checked here, because the
				// warning can be missing for others for a different reason (e.g.
				// using 'stable' or non-Debian code names).
				if (checkMixedSuites && repo.Types.includes('deb') &&
				    (originType === 'Proxmox' || originType === 'Debian') &&
				    !infos[file.path][n].gotIgnorePreUpgradeWarning
				) {
				    mixedSuites = true;
				}
			    }
			}
			gridData.push(repo);
		    }
		});

		repoGrid.store.loadData(gridData);

		me.updateStandardRepos(data['standard-repos']);
	    }

	    me.digest = digest;

	    vm.set('errors', errors);
	    vm.set('suitesWarning', suitesWarning);
	    vm.set('mixedSuites', mixedSuites);
	    me.getController().updateState();
	});

	me.check_subscription();
    },

    listeners: {
	activate: function() {
	    let me = this;
	    me.reload();
	},
    },

    initComponent: function() {
	let me = this;

	if (!me.nodename) {
	    throw "no node name specified";
	}

	let store = Ext.create('Ext.data.Store', {
	    proxy: {
		type: 'proxmox',
		url: `/api2/json/nodes/${me.nodename}/apt/repositories`,
	    },
	});

	Ext.apply(me, { store: store });

	Proxmox.Utils.monStoreErrors(me, me.store, true);

	me.callParent();

	me.getViewModel().set('product', me.product);
    },
});
Ext.define('Proxmox.node.NetworkEdit', {
    extend: 'Proxmox.window.Edit',
    alias: ['widget.proxmoxNodeNetworkEdit'],

    // Enable to show the VLAN ID field
    enableBridgeVlanIds: false,

    initComponent: function() {
	let me = this;

	if (!me.nodename) {
	    throw "no node name specified";
	}

	if (!me.iftype) {
	    throw "no network device type specified";
	}

	me.isCreate = !me.iface;

	let iface_vtype;

	if (me.iftype === 'bridge') {
	    iface_vtype = 'BridgeName';
	} else if (me.iftype === 'bond') {
	    iface_vtype = 'BondName';
	} else if (me.iftype === 'eth' && !me.isCreate) {
	    iface_vtype = 'InterfaceName';
	} else if (me.iftype === 'vlan') {
	    iface_vtype = 'VlanName';
	} else if (me.iftype === 'OVSBridge') {
	    iface_vtype = 'BridgeName';
	} else if (me.iftype === 'OVSBond') {
	    iface_vtype = 'BondName';
	} else if (me.iftype === 'OVSIntPort') {
	    iface_vtype = 'InterfaceName';
	} else if (me.iftype === 'OVSPort') {
	    iface_vtype = 'InterfaceName';
	} else {
	    console.log(me.iftype);
	    throw "unknown network device type specified";
	}

	me.subject = Proxmox.Utils.render_network_iface_type(me.iftype);

	let column1 = [],
	    column2 = [],
	    columnB = [],
	    advancedColumn1 = [],
	    advancedColumn2 = [];

	if (!(me.iftype === 'OVSIntPort' || me.iftype === 'OVSPort' || me.iftype === 'OVSBond')) {
	    column2.push({
		xtype: 'proxmoxcheckbox',
		fieldLabel: gettext('Autostart'),
		name: 'autostart',
		uncheckedValue: 0,
		checked: me.isCreate ? true : undefined,
	    });
	}

	if (me.iftype === 'bridge') {
	    let vlanIdsField = !me.enableBridgeVlanIds ? undefined : Ext.create('Ext.form.field.Text', {
		fieldLabel: gettext('VLAN IDs'),
		name: 'bridge_vids',
		emptyText: '2-4094',
		disabled: true,
		autoEl: {
		    tag: 'div',
		    'data-qtip': gettext("List of VLAN IDs and ranges, useful for NICs with restricted VLAN offloading support. For example: '2 4 100-200'"),
		},
		validator: function(value) {
		    if (!value) { // empty
			return true;
		    }

		    for (const vid of value.split(/\s+[,;]?/)) {
			if (!vid) {
			    continue;
			}
			let res = vid.match(/^(\d+)(?:-(\d+))?$/);
			if (!res) {
			    return Ext.String.format(gettext("not a valid bridge VLAN ID entry: {0}"), vid);
			}
			let start = Number(res[1]), end = Number(res[2] ?? res[1]); // end=start for single IDs

			if (Number.isNaN(start) || Number.isNaN(end)) {
			    return Ext.String.format(gettext('VID range includes not-a-number: {0}'), vid);
			} else if (start > end) {
			    return Ext.String.format(gettext('VID range must go from lower to higher tag: {0}'), vid);
			} else if (start < 2 || end > 4094) { // check just one each, we already ensured start < end
			    return Ext.String.format(gettext('VID range outside of allowed 2 and 4094 limit: {0}'), vid);
			}
		    }
		    return true;
		},
	    });
	    column2.push({
		xtype: 'proxmoxcheckbox',
		fieldLabel: gettext('VLAN aware'),
		name: 'bridge_vlan_aware',
		deleteEmpty: !me.isCreate,
		listeners: {
		    change: function(f, newVal) {
			if (vlanIdsField) {
			    vlanIdsField.setDisabled(!newVal);
			}
		    },
		},
	    });
	    column2.push({
		xtype: 'textfield',
		fieldLabel: gettext('Bridge ports'),
		name: 'bridge_ports',
		autoEl: {
		    tag: 'div',
		    'data-qtip': gettext('Space-separated list of interfaces, for example: enp0s0 enp1s0'),
		},
	    });
	    if (vlanIdsField) {
		advancedColumn2.push(vlanIdsField);
	    }
	} else if (me.iftype === 'OVSBridge') {
	    column2.push({
		xtype: 'textfield',
		fieldLabel: gettext('Bridge ports'),
		name: 'ovs_ports',
		autoEl: {
		    tag: 'div',
		    'data-qtip': gettext('Space-separated list of interfaces, for example: enp0s0 enp1s0'),
		},
	    });
	    column2.push({
		xtype: 'textfield',
		fieldLabel: gettext('OVS options'),
		name: 'ovs_options',
	    });
	} else if (me.iftype === 'OVSPort' || me.iftype === 'OVSIntPort') {
	    column2.push({
		xtype: me.isCreate ? 'PVE.form.BridgeSelector' : 'displayfield',
		fieldLabel: Proxmox.Utils.render_network_iface_type('OVSBridge'),
		allowBlank: false,
		nodename: me.nodename,
		bridgeType: 'OVSBridge',
		name: 'ovs_bridge',
	    });
	    column2.push({
		xtype: 'proxmoxvlanfield',
		deleteEmpty: !me.isCreate,
		name: 'ovs_tag',
		value: '',
	    });
	    column2.push({
		xtype: 'textfield',
		fieldLabel: gettext('OVS options'),
		name: 'ovs_options',
	    });
	} else if (me.iftype === 'vlan') {
	    if (!me.isCreate) {
		me.disablevlanid = false;
		me.disablevlanrawdevice = false;
		me.vlanrawdevicevalue = '';
		me.vlanidvalue = '';

		if (Proxmox.Utils.VlanInterface_match.test(me.iface)) {
		   me.disablevlanid = true;
		   me.disablevlanrawdevice = true;
		   let arr = Proxmox.Utils.VlanInterface_match.exec(me.iface);
		   me.vlanrawdevicevalue = arr[1];
		   me.vlanidvalue = arr[2];
		} else if (Proxmox.Utils.Vlan_match.test(me.iface)) {
		   me.disablevlanid = true;
		   let arr = Proxmox.Utils.Vlan_match.exec(me.iface);
		   me.vlanidvalue = arr[1];
		}
	    } else {
		me.disablevlanid = true;
		me.disablevlanrawdevice = true;
           }

	    column2.push({
		xtype: 'textfield',
		fieldLabel: gettext('Vlan raw device'),
		name: 'vlan-raw-device',
		value: me.vlanrawdevicevalue,
		disabled: me.disablevlanrawdevice,
		allowBlank: false,
	    });

	    column2.push({
		xtype: 'proxmoxvlanfield',
		name: 'vlan-id',
		value: me.vlanidvalue,
		disabled: me.disablevlanid,
	    });

	    columnB.push({
		xtype: 'label',
		userCls: 'pmx-hint',
		text: 'Either add the VLAN number to an existing interface name, or choose your own name and set the VLAN raw device (for the latter ifupdown1 supports vlanXY naming only)',
	    });
	} else if (me.iftype === 'bond') {
	    column2.push({
		xtype: 'textfield',
		fieldLabel: gettext('Slaves'),
		name: 'slaves',
	    });

	    let policySelector = Ext.createWidget('bondPolicySelector', {
		fieldLabel: gettext('Hash policy'),
		name: 'bond_xmit_hash_policy',
		deleteEmpty: !me.isCreate,
		disabled: true,
	    });

	    let primaryfield = Ext.createWidget('textfield', {
		fieldLabel: 'bond-primary',
		name: 'bond-primary',
		value: '',
		disabled: true,
	    });

	    column2.push({
		xtype: 'bondModeSelector',
		fieldLabel: gettext('Mode'),
		name: 'bond_mode',
		value: me.isCreate ? 'balance-rr' : undefined,
		listeners: {
		    change: function(f, value) {
			if (value === 'balance-xor' ||
			    value === '802.3ad') {
			    policySelector.setDisabled(false);
			    primaryfield.setDisabled(true);
			    primaryfield.setValue('');
			} else if (value === 'active-backup') {
			    primaryfield.setDisabled(false);
			    policySelector.setDisabled(true);
			    policySelector.setValue('');
			} else {
			    policySelector.setDisabled(true);
			    policySelector.setValue('');
			    primaryfield.setDisabled(true);
			    primaryfield.setValue('');
			}
		    },
		},
		allowBlank: false,
	    });

	    column2.push(policySelector);
	    column2.push(primaryfield);
	} else if (me.iftype === 'OVSBond') {
	    column2.push({
		xtype: me.isCreate ? 'PVE.form.BridgeSelector' : 'displayfield',
		fieldLabel: Proxmox.Utils.render_network_iface_type('OVSBridge'),
		allowBlank: false,
		nodename: me.nodename,
		bridgeType: 'OVSBridge',
		name: 'ovs_bridge',
	    });
	    column2.push({
		xtype: 'proxmoxvlanfield',
		deleteEmpty: !me.isCreate,
		name: 'ovs_tag',
		value: '',
	    });
	    column2.push({
		xtype: 'textfield',
		fieldLabel: gettext('OVS options'),
		name: 'ovs_options',
	    });
	}

	column2.push({
	    xtype: 'textfield',
	    fieldLabel: gettext('Comment'),
	    allowBlank: true,
	    nodename: me.nodename,
	    name: 'comments',
	});

	let url;
	let method;

	if (me.isCreate) {
	    url = "/api2/extjs/nodes/" + me.nodename + "/network";
	    method = 'POST';
	} else {
	    url = "/api2/extjs/nodes/" + me.nodename + "/network/" + me.iface;
	    method = 'PUT';
	}

	column1.push({
	    xtype: 'hiddenfield',
	    name: 'type',
	    value: me.iftype,
	},
	{
	    xtype: me.isCreate ? 'textfield' : 'displayfield',
	    fieldLabel: gettext('Name'),
	    name: 'iface',
	    value: me.iface,
	    vtype: iface_vtype,
	    allowBlank: false,
	    maxLength: iface_vtype === 'BridgeName' ? 10 : 15,
	    autoEl: {
		tag: 'div',
		 'data-qtip': gettext('For example, vmbr0.100, vmbr0, vlan0.100, vlan0'),
	    },
	    listeners: {
		change: function(f, value) {
		    if (me.isCreate && iface_vtype === 'VlanName') {
			let vlanidField = me.down('field[name=vlan-id]');
			let vlanrawdeviceField = me.down('field[name=vlan-raw-device]');
			if (Proxmox.Utils.VlanInterface_match.test(value)) {
			    vlanidField.setDisabled(true);
			    vlanrawdeviceField.setDisabled(true);
			    // User defined those values in the `iface` (Name)
			    // field. Match them (instead of leaving the
			    // previous value) to make clear what is submitted
			    // and how the fields `iface`, `vlan-id` and
			    // `vlan-raw-device` are connected
			    vlanidField.setValue(
				value.match(Proxmox.Utils.VlanInterface_match)[2],
			    );
			    vlanrawdeviceField.setValue(
				value.match(Proxmox.Utils.VlanInterface_match)[1],
			    );
			} else if (Proxmox.Utils.Vlan_match.test(value)) {
			    vlanidField.setDisabled(true);
			    vlanidField.setValue(
				value.match(Proxmox.Utils.Vlan_match)[1],
			    );
			    vlanrawdeviceField.setDisabled(false);
			} else {
			    vlanidField.setDisabled(false);
			    vlanrawdeviceField.setDisabled(false);
			}
		    }
		},
	    },
	});

	if (me.iftype === 'OVSBond') {
	    column1.push(
		{
		    xtype: 'bondModeSelector',
		    fieldLabel: gettext('Mode'),
		    name: 'bond_mode',
		    openvswitch: true,
		    value: me.isCreate ? 'active-backup' : undefined,
		    allowBlank: false,
		},
		{
		    xtype: 'textfield',
		    fieldLabel: gettext('Slaves'),
		    name: 'ovs_bonds',
		},
	    );
	} else {
	    column1.push(
		{
		    xtype: 'proxmoxtextfield',
		    deleteEmpty: !me.isCreate,
		    fieldLabel: 'IPv4/CIDR',
		    vtype: 'IPCIDRAddress',
		    name: 'cidr',
		},
		{
		    xtype: 'proxmoxtextfield',
		    deleteEmpty: !me.isCreate,
		    fieldLabel: gettext('Gateway') + ' (IPv4)',
		    vtype: 'IPAddress',
		    name: 'gateway',
		},
		{
		    xtype: 'proxmoxtextfield',
		    deleteEmpty: !me.isCreate,
		    fieldLabel: 'IPv6/CIDR',
		    vtype: 'IP6CIDRAddress',
		    name: 'cidr6',
		},
		{
		    xtype: 'proxmoxtextfield',
		    deleteEmpty: !me.isCreate,
		    fieldLabel: gettext('Gateway') + ' (IPv6)',
		    vtype: 'IP6Address',
		    name: 'gateway6',
		},
	    );
	}
	advancedColumn1.push(
	    {
		xtype: 'proxmoxintegerfield',
		minValue: 1280,
		maxValue: 65520,
		deleteEmpty: !me.isCreate,
		emptyText: 1500,
		fieldLabel: 'MTU',
		name: 'mtu',
	    },
	);

	Ext.applyIf(me, {
	    url: url,
	    method: method,
	    items: {
                xtype: 'inputpanel',
		column1: column1,
		column2: column2,
		columnB: columnB,
		advancedColumn1: advancedColumn1,
		advancedColumn2: advancedColumn2,
	    },
	});

	me.callParent();

	if (me.isCreate) {
	    me.down('field[name=iface]').setValue(me.iface_default);
	} else {
	    me.load({
		success: function(response, options) {
		    let data = response.result.data;
		    if (data.type !== me.iftype) {
			let msg = "Got unexpected device type";
			Ext.Msg.alert(gettext('Error'), msg, function() {
			    me.close();
			});
			return;
		    }
		    me.setValues(data);
		    me.isValid(); // trigger validation
		},
	    });
	}
    },
});
Ext.define('proxmox-networks', {
    extend: 'Ext.data.Model',
    fields: [
	'active',
	'address',
	'address6',
	'autostart',
	'bridge_ports',
	'cidr',
	'cidr6',
	'comments',
	'gateway',
	'gateway6',
	'iface',
	'netmask',
	'netmask6',
	'slaves',
	'type',
	'vlan-id',
	'vlan-raw-device',
    ],
    idProperty: 'iface',
});

Ext.define('Proxmox.node.NetworkView', {
    extend: 'Ext.panel.Panel',

    alias: ['widget.proxmoxNodeNetworkView'],

    // defines what types of network devices we want to create
    // order is always the same
    types: ['bridge', 'bond', 'vlan', 'ovs'],

    showApplyBtn: false,

    // for options passed down to the network edit window
    editOptions: {},

    initComponent: function() {
	let me = this;

	if (!me.nodename) {
	    throw "no node name specified";
	}

	let baseUrl = `/nodes/${me.nodename}/network`;

	let store = Ext.create('Ext.data.Store', {
	    model: 'proxmox-networks',
	    proxy: {
                type: 'proxmox',
                url: '/api2/json' + baseUrl,
	    },
	    sorters: [
		{
		    property: 'iface',
		    direction: 'ASC',
		},
	    ],
	});

	let reload = function() {
	    let changeitem = me.down('#changes');
	    let apply_btn = me.down('#apply');
	    let revert_btn = me.down('#revert');
	    Proxmox.Utils.API2Request({
		url: baseUrl,
		failure: function(response, opts) {
		    store.loadData({});
		    Proxmox.Utils.setErrorMask(me, response.htmlStatus);
		    changeitem.update('');
		    changeitem.setHidden(true);
		},
		success: function(response, opts) {
		    let result = Ext.decode(response.responseText);
		    store.loadData(result.data);
		    let changes = result.changes;
		    if (changes === undefined || changes === '') {
			changes = gettext("No changes");
			changeitem.setHidden(true);
			apply_btn.setDisabled(true);
			revert_btn.setDisabled(true);
		    } else {
			changeitem.update("<pre>" + Ext.htmlEncode(changes) + "</pre>");
			changeitem.setHidden(false);
			apply_btn.setDisabled(false);
			revert_btn.setDisabled(false);
		    }
		},
	    });
	};

	let run_editor = function() {
	    let grid = me.down('gridpanel');
	    let sm = grid.getSelectionModel();
	    let rec = sm.getSelection()[0];
	    if (!rec) {
		return;
	    }

	    Ext.create('Proxmox.node.NetworkEdit', {
		autoShow: true,
		nodename: me.nodename,
		iface: rec.data.iface,
		iftype: rec.data.type,
		...me.editOptions,
		listeners: {
		    destroy: () => reload(),
		},
	    });
	};

	let edit_btn = new Ext.Button({
	    text: gettext('Edit'),
	    disabled: true,
	    handler: run_editor,
	});

	let sm = Ext.create('Ext.selection.RowModel', {});

	let del_btn = new Proxmox.button.StdRemoveButton({
	    selModel: sm,
	    getUrl: ({ data }) => `${baseUrl}/${data.iface}`,
	    callback: () => reload(),
	});

	let apply_btn = Ext.create('Proxmox.button.Button', {
	    text: gettext('Apply Configuration'),
	    itemId: 'apply',
	    disabled: true,
	    confirmMsg: 'Do you want to apply pending network changes?',
	    hidden: !me.showApplyBtn,
	    handler: function() {
		Proxmox.Utils.API2Request({
		    url: baseUrl,
		    method: 'PUT',
		    waitMsgTarget: me,
		    success: function({ result }, opts) {
			Ext.create('Proxmox.window.TaskProgress', {
			    autoShow: true,
			    taskDone: reload,
			    upid: result.data,
			});
		    },
		    failure: response => Ext.Msg.alert(gettext('Error'), response.htmlStatus),
		});
	    },
	});

	let set_button_status = function() {
	    let rec = sm.getSelection()[0];

	    edit_btn.setDisabled(!rec);
	    del_btn.setDisabled(!rec);
	};

	let findNextFreeInterfaceId = function(prefix) {
	    for (let next = 0; next <= 9999; next++) {
		let id = `${prefix}${next.toString()}`;
		if (!store.getById(id)) {
		    return id;
		}
	    }
	    Ext.Msg.alert('Error', `No free ID for ${prefix} found!`);
	    return '';
	};

	let menu_items = [];
	let addEditWindowToMenu = (iType, iDefault) => {
	    menu_items.push({
		text: Proxmox.Utils.render_network_iface_type(iType),
		handler: () => Ext.create('Proxmox.node.NetworkEdit', {
		    autoShow: true,
		    nodename: me.nodename,
		    iftype: iType,
		    iface_default: findNextFreeInterfaceId(iDefault ?? iType),
		    ...me.editOptions,
		    onlineHelp: 'sysadmin_network_configuration',
		    listeners: {
			destroy: () => reload(),
		    },
		}),
	    });
	};

	if (me.types.indexOf('bridge') !== -1) {
	    addEditWindowToMenu('bridge', 'vmbr');
	}

	if (me.types.indexOf('bond') !== -1) {
	    addEditWindowToMenu('bond');
	}

	if (me.types.indexOf('vlan') !== -1) {
	    addEditWindowToMenu('vlan');
	}

	if (me.types.indexOf('ovs') !== -1) {
	    if (menu_items.length > 0) {
		menu_items.push({ xtype: 'menuseparator' });
	    }

	    addEditWindowToMenu('OVSBridge', 'vmbr');
	    addEditWindowToMenu('OVSBond', 'bond');

	    menu_items.push({
		text: Proxmox.Utils.render_network_iface_type('OVSIntPort'),
		handler: () => Ext.create('Proxmox.node.NetworkEdit', {
		    autoShow: true,
		    nodename: me.nodename,
		    iftype: 'OVSIntPort',
		    listeners: {
			destroy: () => reload(),
		    },
		}),
	    });
	}

	let renderer_generator = function(fieldname) {
	    return function(val, metaData, rec) {
		let tmp = [];
		if (rec.data[fieldname]) {
		    tmp.push(rec.data[fieldname]);
		}
		if (rec.data[fieldname + '6']) {
		    tmp.push(rec.data[fieldname + '6']);
		}
		return tmp.join('<br>') || '';
	    };
	};

	Ext.apply(me, {
	    layout: 'border',
	    tbar: [
		{
		    text: gettext('Create'),
		    menu: {
			plain: true,
			items: menu_items,
		    },
		}, '-',
		{
		    text: gettext('Revert'),
		    itemId: 'revert',
		    handler: function() {
			Proxmox.Utils.API2Request({
			    url: baseUrl,
			    method: 'DELETE',
			    waitMsgTarget: me,
			    callback: function() {
				reload();
			    },
			    failure: response => Ext.Msg.alert(gettext('Error'), response.htmlStatus),
			});
		    },
		},
		edit_btn,
		del_btn,
		'-',
		apply_btn,
	    ],
	    items: [
		{
		    xtype: 'gridpanel',
		    stateful: true,
		    stateId: 'grid-node-network',
		    store: store,
		    selModel: sm,
		    region: 'center',
		    border: false,
		    columns: [
			{
			    header: gettext('Name'),
			    sortable: true,
			    dataIndex: 'iface',
			},
			{
			    header: gettext('Type'),
			    sortable: true,
			    width: 120,
			    renderer: Proxmox.Utils.render_network_iface_type,
			    dataIndex: 'type',
			},
			{
			    xtype: 'booleancolumn',
			    header: gettext('Active'),
			    width: 80,
			    sortable: true,
			    dataIndex: 'active',
			    trueText: Proxmox.Utils.yesText,
			    falseText: Proxmox.Utils.noText,
			    undefinedText: Proxmox.Utils.noText,
			},
			{
			    xtype: 'booleancolumn',
			    header: gettext('Autostart'),
			    width: 80,
			    sortable: true,
			    dataIndex: 'autostart',
			    trueText: Proxmox.Utils.yesText,
			    falseText: Proxmox.Utils.noText,
			    undefinedText: Proxmox.Utils.noText,
			},
			{
			    xtype: 'booleancolumn',
			    header: gettext('VLAN aware'),
			    width: 80,
			    sortable: true,
			    dataIndex: 'bridge_vlan_aware',
			    trueText: Proxmox.Utils.yesText,
			    falseText: Proxmox.Utils.noText,
			    undefinedText: Proxmox.Utils.noText,
			},
			{
			    header: gettext('Ports/Slaves'),
			    dataIndex: 'type',
			    renderer: (value, metaData, { data }) => {
				if (value === 'bridge') {
				    return data.bridge_ports;
				} else if (value === 'bond') {
				    return data.slaves;
				} else if (value === 'OVSBridge') {
				    return data.ovs_ports;
				} else if (value === 'OVSBond') {
				    return data.ovs_bonds;
				}
				return '';
			    },
			},
			{
			    header: gettext('Bond Mode'),
			    dataIndex: 'bond_mode',
			    renderer: Proxmox.Utils.render_bond_mode,
			},
			{
			    header: gettext('Hash Policy'),
			    hidden: true,
			    dataIndex: 'bond_xmit_hash_policy',
			},
			{
			    header: gettext('IP address'),
			    sortable: true,
			    width: 120,
			    hidden: true,
			    dataIndex: 'address',
			    renderer: renderer_generator('address'),
			},
			{
			    header: gettext('Subnet mask'),
			    width: 120,
			    sortable: true,
			    hidden: true,
			    dataIndex: 'netmask',
			    renderer: renderer_generator('netmask'),
			},
			{
			    header: gettext('CIDR'),
			    width: 150,
			    sortable: true,
			    dataIndex: 'cidr',
			    renderer: renderer_generator('cidr'),
			},
			{
			    header: gettext('Gateway'),
			    width: 150,
			    sortable: true,
			    dataIndex: 'gateway',
			    renderer: renderer_generator('gateway'),
			},
			{
			    header: gettext('VLAN ID'),
			    hidden: true,
			    sortable: true,
			    dataIndex: 'vlan-id',
			},
			{
			    header: gettext('VLAN raw device'),
			    hidden: true,
			    sortable: true,
			    dataIndex: 'vlan-raw-device',
			},
			{
			    header: 'MTU',
			    hidden: true,
			    sortable: true,
			    dataIndex: 'mtu',
			},
			{
			    header: gettext('Comment'),
			    dataIndex: 'comments',
			    flex: 1,
			    renderer: Ext.String.htmlEncode,
			},
		    ],
		    listeners: {
			selectionchange: set_button_status,
			itemdblclick: run_editor,
		    },
		},
		{
		    border: false,
		    region: 'south',
		    autoScroll: true,
		    hidden: true,
		    itemId: 'changes',
		    tbar: [
			gettext('Pending changes') + ' (' +
			    gettext("Either reboot or use 'Apply Configuration' (needs ifupdown2) to activate") + ')',
		    ],
		    split: true,
		    bodyPadding: 5,
		    flex: 0.6,
		    html: gettext("No changes"),
		},
	    ],
	});

	me.callParent();
	reload();
    },
});
Ext.define('Proxmox.node.DNSEdit', {
    extend: 'Proxmox.window.Edit',
    alias: ['widget.proxmoxNodeDNSEdit'],

    // Some longer existing APIs use a brittle "replace whole config" style, you can set this option
    // if the DNSEdit component is used in an API that has more modern, granular update semantics.
    deleteEmpty: false,

    initComponent: function() {
	let me = this;

	if (!me.nodename) {
	    throw "no node name specified";
	}

	me.items = [
	    {
		xtype: 'textfield',
                fieldLabel: gettext('Search domain'),
                name: 'search',
                allowBlank: false,
	    },
	    {
		xtype: 'proxmoxtextfield',
                fieldLabel: gettext('DNS server') + " 1",
		vtype: 'IP64Address',
		skipEmptyText: true,
		deleteEmpty: me.deleteEmpty,
                name: 'dns1',
	    },
	    {
		xtype: 'proxmoxtextfield',
		fieldLabel: gettext('DNS server') + " 2",
		vtype: 'IP64Address',
		skipEmptyText: true,
		deleteEmpty: me.deleteEmpty,
                name: 'dns2',
	    },
	    {
		xtype: 'proxmoxtextfield',
                fieldLabel: gettext('DNS server') + " 3",
		vtype: 'IP64Address',
		skipEmptyText: true,
		deleteEmpty: me.deleteEmpty,
                name: 'dns3',
	    },
	];

	Ext.applyIf(me, {
	    subject: gettext('DNS'),
	    url: "/api2/extjs/nodes/" + me.nodename + "/dns",
	    fieldDefaults: {
		labelWidth: 120,
	    },
	});

	me.callParent();

	me.load();
    },
});
Ext.define('Proxmox.node.HostsView', {
    extend: 'Ext.panel.Panel',
    xtype: 'proxmoxNodeHostsView',

    reload: function() {
	let me = this;
	me.store.load();
    },

    tbar: [
	{
	    text: gettext('Save'),
	    disabled: true,
	    itemId: 'savebtn',
	    handler: function() {
		let view = this.up('panel');
		Proxmox.Utils.API2Request({
		    params: {
			digest: view.digest,
			data: view.down('#hostsfield').getValue(),
		    },
		    method: 'POST',
		    url: '/nodes/' + view.nodename + '/hosts',
		    waitMsgTarget: view,
		    success: function(response, opts) {
			view.reload();
		    },
		    failure: function(response, opts) {
			Ext.Msg.alert('Error', response.htmlStatus);
		    },
		});
	    },
	},
	{
	    text: gettext('Revert'),
	    disabled: true,
	    itemId: 'resetbtn',
	    handler: function() {
		let view = this.up('panel');
		view.down('#hostsfield').reset();
	    },
	},
    ],

	    layout: 'fit',

    items: [
	{
	    xtype: 'textarea',
	    itemId: 'hostsfield',
	    fieldStyle: {
		'font-family': 'monospace',
		'white-space': 'pre',
	    },
	    listeners: {
		dirtychange: function(ta, dirty) {
		    let view = this.up('panel');
		    view.down('#savebtn').setDisabled(!dirty);
		    view.down('#resetbtn').setDisabled(!dirty);
		},
	    },
	},
    ],

    initComponent: function() {
	let me = this;

	if (!me.nodename) {
	    throw "no node name specified";
	}

	me.store = Ext.create('Ext.data.Store', {
	    proxy: {
		type: 'proxmox',
		url: "/api2/json/nodes/" + me.nodename + "/hosts",
	    },
	});

	me.callParent();

	Proxmox.Utils.monStoreErrors(me, me.store);

	me.mon(me.store, 'load', function(store, records, success) {
	    if (!success || records.length < 1) {
		return;
	    }
	    me.digest = records[0].data.digest;
	    let data = records[0].data.data;
	    me.down('#hostsfield').setValue(data);
	    me.down('#hostsfield').resetOriginalValue();
	});

	me.reload();
    },
});
Ext.define('Proxmox.node.DNSView', {
    extend: 'Proxmox.grid.ObjectGrid',
    alias: ['widget.proxmoxNodeDNSView'],

    // Some longer existing APIs use a brittle "replace whole config" style, you can set this option
    // if the DNSView component is used in an API that has more modern, granular update semantics.
    deleteEmpty: false,

    initComponent: function() {
	let me = this;

	if (!me.nodename) {
	    throw "no node name specified";
	}

	let run_editor = () => Ext.create('Proxmox.node.DNSEdit', {
	    autoShow: true,
	    nodename: me.nodename,
	    deleteEmpty: me.deleteEmpty,
	});

	Ext.apply(me, {
	    url: `/api2/json/nodes/${me.nodename}/dns`,
	    cwidth1: 130,
	    interval: 10 * 1000,
	    run_editor: run_editor,
	    rows: {
		search: {
		    header: gettext('Search domain'),
		    required: true,
		    renderer: Ext.htmlEncode,
		},
		dns1: {
		    header: gettext('DNS server') + " 1",
		    required: true,
		    renderer: Ext.htmlEncode,
		},
		dns2: {
		    header: gettext('DNS server') + " 2",
		    renderer: Ext.htmlEncode,
		},
		dns3: {
		    header: gettext('DNS server') + " 3",
		    renderer: Ext.htmlEncode,
		},
	    },
	    tbar: [
		{
		    text: gettext("Edit"),
		    handler: run_editor,
		},
	    ],
	    listeners: {
		itemdblclick: run_editor,
	    },
	});

	me.callParent();

	me.on('activate', me.rstore.startUpdate);
	me.on('deactivate', me.rstore.stopUpdate);
	me.on('destroy', me.rstore.stopUpdate);
    },
});
Ext.define('Proxmox.node.Tasks', {
    extend: 'Ext.grid.GridPanel',

    alias: 'widget.proxmoxNodeTasks',

    stateful: true,
    stateId: 'pve-grid-node-tasks',

    loadMask: true,
    sortableColumns: false,

    // set extra filter components, must have a 'name' property for the parameter, and must
    // trigger a 'change' event if the value is 'undefined', it will not be sent to the api
    extraFilter: [],


    // fixed filters which cannot be changed after instantiation, for example:
    // { vmid: 100 }
    preFilter: {},

    controller: {
	xclass: 'Ext.app.ViewController',

	showTaskLog: function() {
	    let me = this;
	    let selection = me.getView().getSelection();
	    if (selection.length < 1) {
		return;
	    }

	    let rec = selection[0];

	    Ext.create('Proxmox.window.TaskViewer', {
		upid: rec.data.upid,
		endtime: rec.data.endtime,
	    }).show();
	},

	updateLayout: function(store, records, success, operation) {
	    let me = this;
	    let view = me.getView().getView(); // the table view, not the whole grid
	    Proxmox.Utils.setErrorMask(view, false);
	    // update the scrollbar on every store load since the total count might be different.
	    // the buffered grid plugin does this only on (user) scrolling itself and even reduces
	    // the scrollheight again when scrolling up
	    me.getView().updateLayout();

	    if (!success) {
		Proxmox.Utils.setErrorMask(view, Proxmox.Utils.getResponseErrorMessage(operation.getError()));
	    }
	},

	refresh: function() {
	    let me = this;
	    let view = me.getView();

	    let selection = view.getSelection();
	    let store = me.getViewModel().get('bufferedstore');
	    if (selection && selection.length > 0) {
		// deselect if selection is not there anymore
		if (!store.contains(selection[0])) {
		    view.setSelection(undefined);
		}
	    }
	},

	sinceChange: function(field, newval) {
	    let me = this;
	    let vm = me.getViewModel();

	    vm.set('since', newval);
	},

	untilChange: function(field, newval, oldval) {
	    let me = this;
	    let vm = me.getViewModel();

	    vm.set('until', newval);
	},

	reload: function() {
	    let me = this;
	    let view = me.getView();
	    view.getStore().load();
	},

	showFilter: function(btn, pressed) {
	    let me = this;
	    let vm = me.getViewModel();
	    vm.set('showFilter', pressed);
	},

	clearFilter: function() {
	    let me = this;
	    me.lookup('filtertoolbar').query('field').forEach((field) => {
		field.setValue(undefined);
	    });
	},
    },

    listeners: {
	itemdblclick: 'showTaskLog',
    },

    viewModel: {
	data: {
	    typefilter: '',
	    statusfilter: '',
	    showFilter: false,
	    extraFilter: {},
	    since: null,
	    until: null,
	},

	formulas: {
	    filterIcon: (get) => 'fa fa-filter' + (get('showFilter') ? ' info-blue' : ''),
	    extraParams: function(get) {
		let me = this;
		let params = {};
		if (get('typefilter')) {
		    params.typefilter = get('typefilter');
		}
		if (get('statusfilter')) {
		    params.statusfilter = get('statusfilter');
		}

		if (get('extraFilter')) {
		    let extraFilter = get('extraFilter');
		    for (const [name, value] of Object.entries(extraFilter)) {
			if (value !== undefined && value !== null && value !== "") {
			    params[name] = value;
			}
		    }
		}

		if (get('since')) {
		    params.since = get('since').valueOf()/1000;
		}

		if (get('until')) {
		    let until = new Date(get('until').getTime()); // copy object
		    until.setDate(until.getDate() + 1); // end of the day
		    params.until = until.valueOf()/1000;
		}

		me.getView().getStore().load();

		return params;
	    },
	    filterCount: function(get) {
		let count = 0;
		if (get('typefilter')) {
		    count++;
		}
		let status = get('statusfilter');
		if ((Ext.isArray(status) && status.length > 0) ||
		    (!Ext.isArray(status) && status)) {
		    count++;
		}
		if (get('since')) {
		    count++;
		}
		if (get('until')) {
		    count++;
		}

		if (get('extraFilter')) {
		    let preFilter = get('preFilter') || {};
		    let extraFilter = get('extraFilter');
		    for (const [name, value] of Object.entries(extraFilter)) {
			if (value !== undefined && value !== null && value !== "" &&
			    preFilter[name] === undefined
			) {
			    count++;
			}
		    }
		}

		return count;
	    },
	    clearFilterText: function(get) {
		let count = get('filterCount');
		let fieldMsg = '';
		if (count > 1) {
		    fieldMsg = ` (${count} ${gettext('Fields')})`;
		} else if (count > 0) {
		    fieldMsg = ` (1 ${gettext('Field')})`;
		}
		return gettext('Clear Filter') + fieldMsg;
	    },
	},

	stores: {
	    bufferedstore: {
		type: 'buffered',
		pageSize: 500,
		autoLoad: true,
		remoteFilter: true,
		model: 'proxmox-tasks',
		proxy: {
		    type: 'proxmox',
		    startParam: 'start',
		    limitParam: 'limit',
		    extraParams: '{extraParams}',
		    url: '{url}',
		},
		listeners: {
		    prefetch: 'updateLayout',
		    refresh: 'refresh',
		},
	    },
	},
    },

    bind: {
	store: '{bufferedstore}',
    },

    dockedItems: [
	{
	    xtype: 'toolbar',
	    items: [
		{
		    xtype: 'proxmoxButton',
		    text: gettext('View'),
		    iconCls: 'fa fa-window-restore',
		    disabled: true,
		    handler: 'showTaskLog',
		},
		{
		    xtype: 'button',
		    text: gettext('Reload'),
		    iconCls: 'fa fa-refresh',
		    handler: 'reload',
		},
		'->',
		{
		    xtype: 'button',
		    bind: {
			text: '{clearFilterText}',
			disabled: '{!filterCount}',
		    },
		    text: gettext('Clear Filter'),
		    enabled: false,
		    handler: 'clearFilter',
		},
		{
		    xtype: 'button',
		    enableToggle: true,
		    bind: {
			iconCls: '{filterIcon}',
		    },
		    text: gettext('Filter'),
		    stateful: true,
		    stateId: 'task-showfilter',
		    stateEvents: ['toggle'],
		    applyState: function(state) {
			if (state.pressed !== undefined) {
			    this.setPressed(state.pressed);
			}
		    },
		    getState: function() {
			return {
			    pressed: this.pressed,
			};
		    },
		    listeners: {
			toggle: 'showFilter',
		    },
		},
	    ],
	},
	{
	    xtype: 'toolbar',
	    dock: 'top',
	    reference: 'filtertoolbar',
	    layout: {
		type: 'hbox',
		align: 'top',
	    },
	    bind: {
		hidden: '{!showFilter}',
	    },
	    items: [
		{
		    xtype: 'container',
		    padding: 10,
		    layout: {
			type: 'vbox',
			align: 'stretch',
		    },
		    defaults: {
			labelWidth: 80,
		    },
		    // cannot bind the values directly, as it then changes also
		    // on blur, causing wrong reloads of the store
		    items: [
			{
			    xtype: 'datefield',
			    fieldLabel: gettext('Since'),
			    format: 'Y-m-d',
			    bind: {
				maxValue: '{until}',
			    },
			    listeners: {
				change: 'sinceChange',
			    },
			},
			{
			    xtype: 'datefield',
			    fieldLabel: gettext('Until'),
			    format: 'Y-m-d',
			    bind: {
				minValue: '{since}',
			    },
			    listeners: {
				change: 'untilChange',
			    },
			},
		    ],
		},
		{
		    xtype: 'container',
		    padding: 10,
		    layout: {
			type: 'vbox',
			align: 'stretch',
		    },
		    defaults: {
			labelWidth: 80,
		    },
		    items: [
			{
			    xtype: 'pmxTaskTypeSelector',
			    fieldLabel: gettext('Task Type'),
			    emptyText: gettext('All'),
			    bind: {
				value: '{typefilter}',
			    },
			},
			{
			    xtype: 'combobox',
			    fieldLabel: gettext('Task Result'),
			    emptyText: gettext('All'),
			    multiSelect: true,
			    store: [
				['ok', gettext('OK')],
				['unknown', Proxmox.Utils.unknownText],
				['warning', gettext('Warnings')],
				['error', gettext('Errors')],
			    ],
			    bind: {
				value: '{statusfilter}',
			    },
			},
		    ],
		},
	    ],
	},
    ],

    viewConfig: {
	trackOver: false,
	stripeRows: false, // does not work with getRowClass()
	emptyText: gettext('No Tasks found'),

	getRowClass: function(record, index) {
	    let status = record.get('status');

	    if (status) {
		let parsed = Proxmox.Utils.parse_task_status(status);
		if (parsed === 'error') {
		    return "proxmox-invalid-row";
		} else if (parsed === 'warning') {
		    return "proxmox-warning-row";
		}
	    }
	    return '';
	},
    },

    columns: [
	{
	    header: gettext("Start Time"),
	    dataIndex: 'starttime',
	    width: 130,
	    renderer: function(value) {
		return Ext.Date.format(value, "M d H:i:s");
	    },
	},
	{
	    header: gettext("End Time"),
	    dataIndex: 'endtime',
	    width: 130,
	    renderer: function(value, metaData, record) {
		if (!value) {
		    metaData.tdCls = "x-grid-row-loading";
		    return '';
		}
		return Ext.Date.format(value, "M d H:i:s");
	    },
	},
	{
	    header: gettext("Duration"),
	    hidden: true,
	    width: 80,
	    renderer: function(value, metaData, record) {
		let start = record.data.starttime;
		if (start) {
		    let end = record.data.endtime || Date.now();
		    let duration = end - start;
		    if (duration > 0) {
			duration /= 1000;
		    }
		    return Proxmox.Utils.format_duration_human(duration);
		}
		return Proxmox.Utils.unknownText;
	    },
	},
	{
	    header: gettext("User name"),
	    dataIndex: 'user',
	    width: 150,
	},
	{
	    header: gettext("Description"),
	    dataIndex: 'upid',
	    flex: 1,
	    renderer: Proxmox.Utils.render_upid,
	},
	{
	    header: gettext("Status"),
	    dataIndex: 'status',
	    width: 200,
	    renderer: function(value, metaData, record) {
		if (value === undefined && !record.data.endtime) {
		    metaData.tdCls = "x-grid-row-loading";
		    return '';
		}

		return Proxmox.Utils.format_task_status(value);
	    },
	},
    ],

    initComponent: function() {
	const me = this;

	let nodename = me.nodename || 'localhost';
	let url = me.url || `/api2/json/nodes/${nodename}/tasks`;
	me.getViewModel().set('url', url);

	let updateExtraFilters = function(name, value) {
	    let vm = me.getViewModel();
	    let extraFilter = Ext.clone(vm.get('extraFilter'));
	    extraFilter[name] = value;
	    vm.set('extraFilter', extraFilter);
	};

	for (const [name, value] of Object.entries(me.preFilter)) {
	    updateExtraFilters(name, value);
	}

	me.getViewModel().set('preFilter', me.preFilter);

	me.callParent();

	let addFields = function(items) {
	    me.lookup('filtertoolbar').add({
		xtype: 'container',
		padding: 10,
		layout: {
		    type: 'vbox',
		    align: 'stretch',
		},
		defaults: {
		    labelWidth: 80,
		},
		items,
	    });
	};

	// start with a userfilter
	me.extraFilter = [
	    {
		xtype: 'textfield',
		fieldLabel: gettext('User name'),
		changeOptions: {
		    buffer: 500,
		},
		name: 'userfilter',
	    },
	    ...me.extraFilter,
	];
	let items = [];
	for (const filterTemplate of me.extraFilter) {
	    let filter = Ext.clone(filterTemplate);

	    filter.listeners = filter.listeners || {};
	    filter.listeners.change = Ext.apply(filter.changeOptions || {}, {
		fn: function(field, value) {
		    updateExtraFilters(filter.name, value);
		},
	    });

	    items.push(filter);
	    if (items.length === 2) {
		addFields(items);
		items = [];
	    }
	}

	addFields(items);
    },
});
Ext.define('proxmox-services', {
    extend: 'Ext.data.Model',
    fields: ['service', 'name', 'desc', 'state', 'unit-state', 'active-state'],
    idProperty: 'service',
});

Ext.define('Proxmox.node.ServiceView', {
    extend: 'Ext.grid.GridPanel',

    alias: ['widget.proxmoxNodeServiceView'],

    startOnlyServices: {},

    restartCommand: "restart", // TODO: default to reload once everywhere supported

    initComponent: function() {
	let me = this;

	if (!me.nodename) {
	    throw "no node name specified";
	}

	let rstore = Ext.create('Proxmox.data.UpdateStore', {
	    interval: 1000,
	    model: 'proxmox-services',
	    proxy: {
		type: 'proxmox',
		url: `/api2/json/nodes/${me.nodename}/services`,
	    },
	});

	let filterInstalledOnly = record => record.get('unit-state') !== 'not-found';

	let store = Ext.create('Proxmox.data.DiffStore', {
	    rstore: rstore,
	    sortAfterUpdate: true,
	    sorters: [
		{
		    property: 'name',
		    direction: 'ASC',
		},
	    ],
	    filters: [
		filterInstalledOnly,
	    ],
	});

	let unHideCB = Ext.create('Ext.form.field.Checkbox', {
	    boxLabel: gettext('Show only installed services'),
	    value: true,
	    boxLabelAlign: 'before',
	    listeners: {
		change: function(_cb, value) {
		    if (value) {
			store.addFilter([filterInstalledOnly]);
		    } else {
			store.clearFilter();
		    }
		},
	    },
	});

	let view_service_log = function() {
	    let { data: { service } } = me.getSelectionModel().getSelection()[0];
	    Ext.create('Ext.window.Window', {
		title: gettext('Syslog') + ': ' + service,
		modal: true,
		width: 800,
		height: 400,
		layout: 'fit',
		items: {
		    xtype: 'proxmoxLogView',
		    url: `/api2/extjs/nodes/${me.nodename}/syslog?service=${service}`,
		    log_select_timespan: 1,
		},
		autoShow: true,
	    });
	};

	let service_cmd = function(cmd) {
	    let { data: { service } } = me.getSelectionModel().getSelection()[0];
	    Proxmox.Utils.API2Request({
		url: `/nodes/${me.nodename}/services/${service}/${cmd}`,
		method: 'POST',
		failure: function(response, opts) {
		    Ext.Msg.alert(gettext('Error'), response.htmlStatus);
		    me.loading = true;
		},
		success: function(response, opts) {
		    rstore.startUpdate();
		    Ext.create('Proxmox.window.TaskProgress', {
			upid: response.result.data,
			autoShow: true,
		    });
		},
	    });
	};

	let start_btn = new Ext.Button({
	    text: gettext('Start'),
	    disabled: true,
	    handler: () => service_cmd("start"),
	});
	let stop_btn = new Ext.Button({
	    text: gettext('Stop'),
	    disabled: true,
	    handler: () => service_cmd("stop"),
	});
	let restart_btn = new Ext.Button({
	    text: gettext('Restart'),
	    disabled: true,
	    handler: () => service_cmd(me.restartCommand || "restart"),
	});
	let syslog_btn = new Ext.Button({
	    text: gettext('Syslog'),
	    disabled: true,
	    handler: view_service_log,
	});

	let set_button_status = function() {
	    let sm = me.getSelectionModel();
	    let rec = sm.getSelection()[0];

	    if (!rec) {
		start_btn.disable();
		stop_btn.disable();
		restart_btn.disable();
		syslog_btn.disable();
		return;
	    }
	    let service = rec.data.service;
	    let state = rec.data.state;
	    let unit = rec.data['unit-state'];

	    syslog_btn.enable();

	    if (state === 'running') {
		if (me.startOnlyServices[service]) {
		    stop_btn.disable();
		    restart_btn.enable();
		} else {
		    stop_btn.enable();
		    restart_btn.enable();
		    start_btn.disable();
		}
	    } else if (unit !== undefined && (unit === 'masked' || unit === 'unknown' || unit === 'not-found')) {
		start_btn.disable();
		restart_btn.disable();
		stop_btn.disable();
	    } else {
		start_btn.enable();
		stop_btn.disable();
		restart_btn.disable();
	    }
	};

	me.mon(store, 'refresh', set_button_status);

	Proxmox.Utils.monStoreErrors(me, rstore);

	Ext.apply(me, {
	    viewConfig: {
		trackOver: false,
		stripeRows: false, // does not work with getRowClass()
		getRowClass: function(record, index) {
		    let unitState = record.get('unit-state');
		    if (!unitState) {
			return '';
		    }
		    if (unitState === 'masked' || unitState === 'not-found') {
			return "proxmox-disabled-row";
		    } else if (unitState === 'unknown') {
			if (record.get('name') === 'syslog') {
			    return "proxmox-disabled-row"; // replaced by journal on most hosts
			}
			return "proxmox-warning-row";
		    }
		    return '';
		},
	    },
	    store: store,
	    stateful: false,
	    tbar: [
		start_btn,
		stop_btn,
		restart_btn,
		'-',
		syslog_btn,
		'->',
		unHideCB,
	    ],
	    columns: [
		{
		    header: gettext('Name'),
		    flex: 1,
		    sortable: true,
		    dataIndex: 'name',
		},
		{
		    header: gettext('Status'),
		    width: 100,
		    sortable: true,
		    dataIndex: 'state',
		    renderer: (value, meta, rec) => {
			const unitState = rec.get('unit-state');
			if (unitState === 'masked') {
			    return gettext('disabled');
			} else if (unitState === 'not-found') {
			    return gettext('not installed');
			} else {
			    return value;
			}
		    },
		},
		{
		    header: gettext('Active'),
		    width: 100,
		    sortable: true,
		    hidden: true,
		    dataIndex: 'active-state',
		},
		{
		    header: gettext('Unit'),
		    width: 120,
		    sortable: true,
		    hidden: !Ext.Array.contains(['PVEAuthCookie', 'PBSAuthCookie'], Proxmox?.Setup?.auth_cookie_name),
		    dataIndex: 'unit-state',
		},
		{
		    header: gettext('Description'),
		    renderer: Ext.String.htmlEncode,
		    dataIndex: 'desc',
		    flex: 2,
		},
	    ],
	    listeners: {
		selectionchange: set_button_status,
		itemdblclick: view_service_log,
		activate: rstore.startUpdate,
		destroy: rstore.stopUpdate,
	    },
	});

	me.callParent();
    },
});
Ext.define('Proxmox.node.TimeEdit', {
    extend: 'Proxmox.window.Edit',
    alias: ['widget.proxmoxNodeTimeEdit'],

    subject: gettext('Time zone'),

    width: 400,

    autoLoad: true,

    fieldDefaults: {
	labelWidth: 70,
    },

    items: {
	xtype: 'combo',
	fieldLabel: gettext('Time zone'),
	name: 'timezone',
	queryMode: 'local',
	store: Ext.create('Proxmox.data.TimezoneStore'),
	displayField: 'zone',
	editable: true,
	anyMatch: true,
	forceSelection: true,
	allowBlank: false,
    },

    initComponent: function() {
	let me = this;

	if (!me.nodename) {
	    throw "no node name specified";
	}
	me.url = "/api2/extjs/nodes/" + me.nodename + "/time";

	me.callParent();
    },
});
Ext.define('Proxmox.node.TimeView', {
    extend: 'Proxmox.grid.ObjectGrid',
    alias: ['widget.proxmoxNodeTimeView'],

    initComponent: function() {
	let me = this;

	if (!me.nodename) {
	    throw "no node name specified";
	}

	let tzOffset = new Date().getTimezoneOffset() * 60000;
	let renderLocaltime = function(value) {
	    let servertime = new Date((value * 1000) + tzOffset);
	    return Ext.Date.format(servertime, 'Y-m-d H:i:s');
	};

	let run_editor = () => Ext.create('Proxmox.node.TimeEdit', {
	    autoShow: true,
	    nodename: me.nodename,
	});

	Ext.apply(me, {
	    url: `/api2/json/nodes/${me.nodename}/time`,
	    cwidth1: 150,
	    interval: 1000,
	    run_editor: run_editor,
	    rows: {
		timezone: {
		    header: gettext('Time zone'),
		    required: true,
		},
		localtime: {
		    header: gettext('Server time'),
		    required: true,
		    renderer: renderLocaltime,
		},
	    },
	    tbar: [
		{
		    text: gettext("Edit"),
		    handler: run_editor,
		},
	    ],
	    listeners: {
		itemdblclick: run_editor,
	    },
	});

	me.callParent();

	me.on('activate', me.rstore.startUpdate);
	me.on('deactivate', me.rstore.stopUpdate);
	me.on('destroy', me.rstore.stopUpdate);
    },
});
/**
 * marked - a markdown parser
 * Copyright (c) 2011-2022, Christopher Jeffrey. (MIT Licensed)
 * https://github.com/markedjs/marked
 */

/**
 * DO NOT EDIT THIS FILE
 * The code in this file is generated from files in ./src/
 */

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.marked = {}));
})(this, (function (exports) { 'use strict';

  function _defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i];
      descriptor.enumerable = descriptor.enumerable || false;
      descriptor.configurable = true;
      if ("value" in descriptor) descriptor.writable = true;
      Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
    }
  }
  function _createClass(Constructor, protoProps, staticProps) {
    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
    if (staticProps) _defineProperties(Constructor, staticProps);
    Object.defineProperty(Constructor, "prototype", {
      writable: false
    });
    return Constructor;
  }
  function _unsupportedIterableToArray(o, minLen) {
    if (!o) return;
    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
    var n = Object.prototype.toString.call(o).slice(8, -1);
    if (n === "Object" && o.constructor) n = o.constructor.name;
    if (n === "Map" || n === "Set") return Array.from(o);
    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
  }
  function _arrayLikeToArray(arr, len) {
    if (len == null || len > arr.length) len = arr.length;
    for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
    return arr2;
  }
  function _createForOfIteratorHelperLoose(o, allowArrayLike) {
    var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
    if (it) return (it = it.call(o)).next.bind(it);
    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
      if (it) o = it;
      var i = 0;
      return function () {
        if (i >= o.length) return {
          done: true
        };
        return {
          done: false,
          value: o[i++]
        };
      };
    }
    throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
  }
  function _toPrimitive(input, hint) {
    if (typeof input !== "object" || input === null) return input;
    var prim = input[Symbol.toPrimitive];
    if (prim !== undefined) {
      var res = prim.call(input, hint || "default");
      if (typeof res !== "object") return res;
      throw new TypeError("@@toPrimitive must return a primitive value.");
    }
    return (hint === "string" ? String : Number)(input);
  }
  function _toPropertyKey(arg) {
    var key = _toPrimitive(arg, "string");
    return typeof key === "symbol" ? key : String(key);
  }

  function getDefaults() {
    return {
      async: false,
      baseUrl: null,
      breaks: false,
      extensions: null,
      gfm: true,
      headerIds: true,
      headerPrefix: '',
      highlight: null,
      langPrefix: 'language-',
      mangle: true,
      pedantic: false,
      renderer: null,
      sanitize: false,
      sanitizer: null,
      silent: false,
      smartypants: false,
      tokenizer: null,
      walkTokens: null,
      xhtml: false
    };
  }
  exports.defaults = getDefaults();
  function changeDefaults(newDefaults) {
    exports.defaults = newDefaults;
  }

  /**
   * Helpers
   */
  var escapeTest = /[&<>"']/;
  var escapeReplace = new RegExp(escapeTest.source, 'g');
  var escapeTestNoEncode = /[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/;
  var escapeReplaceNoEncode = new RegExp(escapeTestNoEncode.source, 'g');
  var escapeReplacements = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
  };
  var getEscapeReplacement = function getEscapeReplacement(ch) {
    return escapeReplacements[ch];
  };
  function escape(html, encode) {
    if (encode) {
      if (escapeTest.test(html)) {
        return html.replace(escapeReplace, getEscapeReplacement);
      }
    } else {
      if (escapeTestNoEncode.test(html)) {
        return html.replace(escapeReplaceNoEncode, getEscapeReplacement);
      }
    }
    return html;
  }
  var unescapeTest = /&(#(?:\d+)|(?:#x[0-9A-Fa-f]+)|(?:\w+));?/ig;

  /**
   * @param {string} html
   */
  function unescape(html) {
    // explicitly match decimal, hex, and named HTML entities
    return html.replace(unescapeTest, function (_, n) {
      n = n.toLowerCase();
      if (n === 'colon') return ':';
      if (n.charAt(0) === '#') {
        return n.charAt(1) === 'x' ? String.fromCharCode(parseInt(n.substring(2), 16)) : String.fromCharCode(+n.substring(1));
      }
      return '';
    });
  }
  var caret = /(^|[^\[])\^/g;

  /**
   * @param {string | RegExp} regex
   * @param {string} opt
   */
  function edit(regex, opt) {
    regex = typeof regex === 'string' ? regex : regex.source;
    opt = opt || '';
    var obj = {
      replace: function replace(name, val) {
        val = val.source || val;
        val = val.replace(caret, '$1');
        regex = regex.replace(name, val);
        return obj;
      },
      getRegex: function getRegex() {
        return new RegExp(regex, opt);
      }
    };
    return obj;
  }
  var nonWordAndColonTest = /[^\w:]/g;
  var originIndependentUrl = /^$|^[a-z][a-z0-9+.-]*:|^[?#]/i;

  /**
   * @param {boolean} sanitize
   * @param {string} base
   * @param {string} href
   */
  function cleanUrl(sanitize, base, href) {
    if (sanitize) {
      var prot;
      try {
        prot = decodeURIComponent(unescape(href)).replace(nonWordAndColonTest, '').toLowerCase();
      } catch (e) {
        return null;
      }
      if (prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0 || prot.indexOf('data:') === 0) {
        return null;
      }
    }
    if (base && !originIndependentUrl.test(href)) {
      href = resolveUrl(base, href);
    }
    try {
      href = encodeURI(href).replace(/%25/g, '%');
    } catch (e) {
      return null;
    }
    return href;
  }
  var baseUrls = {};
  var justDomain = /^[^:]+:\/*[^/]*$/;
  var protocol = /^([^:]+:)[\s\S]*$/;
  var domain = /^([^:]+:\/*[^/]*)[\s\S]*$/;

  /**
   * @param {string} base
   * @param {string} href
   */
  function resolveUrl(base, href) {
    if (!baseUrls[' ' + base]) {
      // we can ignore everything in base after the last slash of its path component,
      // but we might need to add _that_
      // https://tools.ietf.org/html/rfc3986#section-3
      if (justDomain.test(base)) {
        baseUrls[' ' + base] = base + '/';
      } else {
        baseUrls[' ' + base] = rtrim(base, '/', true);
      }
    }
    base = baseUrls[' ' + base];
    var relativeBase = base.indexOf(':') === -1;
    if (href.substring(0, 2) === '//') {
      if (relativeBase) {
        return href;
      }
      return base.replace(protocol, '$1') + href;
    } else if (href.charAt(0) === '/') {
      if (relativeBase) {
        return href;
      }
      return base.replace(domain, '$1') + href;
    } else {
      return base + href;
    }
  }
  var noopTest = {
    exec: function noopTest() {}
  };
  function merge(obj) {
    var i = 1,
      target,
      key;
    for (; i < arguments.length; i++) {
      target = arguments[i];
      for (key in target) {
        if (Object.prototype.hasOwnProperty.call(target, key)) {
          obj[key] = target[key];
        }
      }
    }
    return obj;
  }
  function splitCells(tableRow, count) {
    // ensure that every cell-delimiting pipe has a space
    // before it to distinguish it from an escaped pipe
    var row = tableRow.replace(/\|/g, function (match, offset, str) {
        var escaped = false,
          curr = offset;
        while (--curr >= 0 && str[curr] === '\\') {
          escaped = !escaped;
        }
        if (escaped) {
          // odd number of slashes means | is escaped
          // so we leave it alone
          return '|';
        } else {
          // add space before unescaped |
          return ' |';
        }
      }),
      cells = row.split(/ \|/);
    var i = 0;

    // First/last cell in a row cannot be empty if it has no leading/trailing pipe
    if (!cells[0].trim()) {
      cells.shift();
    }
    if (cells.length > 0 && !cells[cells.length - 1].trim()) {
      cells.pop();
    }
    if (cells.length > count) {
      cells.splice(count);
    } else {
      while (cells.length < count) {
        cells.push('');
      }
    }
    for (; i < cells.length; i++) {
      // leading or trailing whitespace is ignored per the gfm spec
      cells[i] = cells[i].trim().replace(/\\\|/g, '|');
    }
    return cells;
  }

  /**
   * Remove trailing 'c's. Equivalent to str.replace(/c*$/, '').
   * /c*$/ is vulnerable to REDOS.
   *
   * @param {string} str
   * @param {string} c
   * @param {boolean} invert Remove suffix of non-c chars instead. Default falsey.
   */
  function rtrim(str, c, invert) {
    var l = str.length;
    if (l === 0) {
      return '';
    }

    // Length of suffix matching the invert condition.
    var suffLen = 0;

    // Step left until we fail to match the invert condition.
    while (suffLen < l) {
      var currChar = str.charAt(l - suffLen - 1);
      if (currChar === c && !invert) {
        suffLen++;
      } else if (currChar !== c && invert) {
        suffLen++;
      } else {
        break;
      }
    }
    return str.slice(0, l - suffLen);
  }
  function findClosingBracket(str, b) {
    if (str.indexOf(b[1]) === -1) {
      return -1;
    }
    var l = str.length;
    var level = 0,
      i = 0;
    for (; i < l; i++) {
      if (str[i] === '\\') {
        i++;
      } else if (str[i] === b[0]) {
        level++;
      } else if (str[i] === b[1]) {
        level--;
        if (level < 0) {
          return i;
        }
      }
    }
    return -1;
  }
  function checkSanitizeDeprecation(opt) {
    if (opt && opt.sanitize && !opt.silent) {
      console.warn('marked(): sanitize and sanitizer parameters are deprecated since version 0.7.0, should not be used and will be removed in the future. Read more here: https://marked.js.org/#/USING_ADVANCED.md#options');
    }
  }

  // copied from https://stackoverflow.com/a/5450113/806777
  /**
   * @param {string} pattern
   * @param {number} count
   */
  function repeatString(pattern, count) {
    if (count < 1) {
      return '';
    }
    var result = '';
    while (count > 1) {
      if (count & 1) {
        result += pattern;
      }
      count >>= 1;
      pattern += pattern;
    }
    return result + pattern;
  }

  function outputLink(cap, link, raw, lexer) {
    var href = link.href;
    var title = link.title ? escape(link.title) : null;
    var text = cap[1].replace(/\\([\[\]])/g, '$1');
    if (cap[0].charAt(0) !== '!') {
      lexer.state.inLink = true;
      var token = {
        type: 'link',
        raw: raw,
        href: href,
        title: title,
        text: text,
        tokens: lexer.inlineTokens(text)
      };
      lexer.state.inLink = false;
      return token;
    }
    return {
      type: 'image',
      raw: raw,
      href: href,
      title: title,
      text: escape(text)
    };
  }
  function indentCodeCompensation(raw, text) {
    var matchIndentToCode = raw.match(/^(\s+)(?:```)/);
    if (matchIndentToCode === null) {
      return text;
    }
    var indentToCode = matchIndentToCode[1];
    return text.split('\n').map(function (node) {
      var matchIndentInNode = node.match(/^\s+/);
      if (matchIndentInNode === null) {
        return node;
      }
      var indentInNode = matchIndentInNode[0];
      if (indentInNode.length >= indentToCode.length) {
        return node.slice(indentToCode.length);
      }
      return node;
    }).join('\n');
  }

  /**
   * Tokenizer
   */
  var Tokenizer = /*#__PURE__*/function () {
    function Tokenizer(options) {
      this.options = options || exports.defaults;
    }
    var _proto = Tokenizer.prototype;
    _proto.space = function space(src) {
      var cap = this.rules.block.newline.exec(src);
      if (cap && cap[0].length > 0) {
        return {
          type: 'space',
          raw: cap[0]
        };
      }
    };
    _proto.code = function code(src) {
      var cap = this.rules.block.code.exec(src);
      if (cap) {
        var text = cap[0].replace(/^ {1,4}/gm, '');
        return {
          type: 'code',
          raw: cap[0],
          codeBlockStyle: 'indented',
          text: !this.options.pedantic ? rtrim(text, '\n') : text
        };
      }
    };
    _proto.fences = function fences(src) {
      var cap = this.rules.block.fences.exec(src);
      if (cap) {
        var raw = cap[0];
        var text = indentCodeCompensation(raw, cap[3] || '');
        return {
          type: 'code',
          raw: raw,
          lang: cap[2] ? cap[2].trim().replace(this.rules.inline._escapes, '$1') : cap[2],
          text: text
        };
      }
    };
    _proto.heading = function heading(src) {
      var cap = this.rules.block.heading.exec(src);
      if (cap) {
        var text = cap[2].trim();

        // remove trailing #s
        if (/#$/.test(text)) {
          var trimmed = rtrim(text, '#');
          if (this.options.pedantic) {
            text = trimmed.trim();
          } else if (!trimmed || / $/.test(trimmed)) {
            // CommonMark requires space before trailing #s
            text = trimmed.trim();
          }
        }
        return {
          type: 'heading',
          raw: cap[0],
          depth: cap[1].length,
          text: text,
          tokens: this.lexer.inline(text)
        };
      }
    };
    _proto.hr = function hr(src) {
      var cap = this.rules.block.hr.exec(src);
      if (cap) {
        return {
          type: 'hr',
          raw: cap[0]
        };
      }
    };
    _proto.blockquote = function blockquote(src) {
      var cap = this.rules.block.blockquote.exec(src);
      if (cap) {
        var text = cap[0].replace(/^ *>[ \t]?/gm, '');
        return {
          type: 'blockquote',
          raw: cap[0],
          tokens: this.lexer.blockTokens(text, []),
          text: text
        };
      }
    };
    _proto.list = function list(src) {
      var cap = this.rules.block.list.exec(src);
      if (cap) {
        var raw, istask, ischecked, indent, i, blankLine, endsWithBlankLine, line, nextLine, rawLine, itemContents, endEarly;
        var bull = cap[1].trim();
        var isordered = bull.length > 1;
        var list = {
          type: 'list',
          raw: '',
          ordered: isordered,
          start: isordered ? +bull.slice(0, -1) : '',
          loose: false,
          items: []
        };
        bull = isordered ? "\\d{1,9}\\" + bull.slice(-1) : "\\" + bull;
        if (this.options.pedantic) {
          bull = isordered ? bull : '[*+-]';
        }

        // Get next list item
        var itemRegex = new RegExp("^( {0,3}" + bull + ")((?:[\t ][^\\n]*)?(?:\\n|$))");

        // Check if current bullet point can start a new List Item
        while (src) {
          endEarly = false;
          if (!(cap = itemRegex.exec(src))) {
            break;
          }
          if (this.rules.block.hr.test(src)) {
            // End list if bullet was actually HR (possibly move into itemRegex?)
            break;
          }
          raw = cap[0];
          src = src.substring(raw.length);
          line = cap[2].split('\n', 1)[0];
          nextLine = src.split('\n', 1)[0];
          if (this.options.pedantic) {
            indent = 2;
            itemContents = line.trimLeft();
          } else {
            indent = cap[2].search(/[^ ]/); // Find first non-space char
            indent = indent > 4 ? 1 : indent; // Treat indented code blocks (> 4 spaces) as having only 1 indent
            itemContents = line.slice(indent);
            indent += cap[1].length;
          }
          blankLine = false;
          if (!line && /^ *$/.test(nextLine)) {
            // Items begin with at most one blank line
            raw += nextLine + '\n';
            src = src.substring(nextLine.length + 1);
            endEarly = true;
          }
          if (!endEarly) {
            var nextBulletRegex = new RegExp("^ {0," + Math.min(3, indent - 1) + "}(?:[*+-]|\\d{1,9}[.)])((?: [^\\n]*)?(?:\\n|$))");
            var hrRegex = new RegExp("^ {0," + Math.min(3, indent - 1) + "}((?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$)");
            var fencesBeginRegex = new RegExp("^ {0," + Math.min(3, indent - 1) + "}(?:```|~~~)");
            var headingBeginRegex = new RegExp("^ {0," + Math.min(3, indent - 1) + "}#");

            // Check if following lines should be included in List Item
            while (src) {
              rawLine = src.split('\n', 1)[0];
              line = rawLine;

              // Re-align to follow commonmark nesting rules
              if (this.options.pedantic) {
                line = line.replace(/^ {1,4}(?=( {4})*[^ ])/g, '  ');
              }

              // End list item if found code fences
              if (fencesBeginRegex.test(line)) {
                break;
              }

              // End list item if found start of new heading
              if (headingBeginRegex.test(line)) {
                break;
              }

              // End list item if found start of new bullet
              if (nextBulletRegex.test(line)) {
                break;
              }

              // Horizontal rule found
              if (hrRegex.test(src)) {
                break;
              }
              if (line.search(/[^ ]/) >= indent || !line.trim()) {
                // Dedent if possible
                itemContents += '\n' + line.slice(indent);
              } else if (!blankLine) {
                // Until blank line, item doesn't need indentation
                itemContents += '\n' + line;
              } else {
                // Otherwise, improper indentation ends this item
                break;
              }
              if (!blankLine && !line.trim()) {
                // Check if current line is blank
                blankLine = true;
              }
              raw += rawLine + '\n';
              src = src.substring(rawLine.length + 1);
            }
          }
          if (!list.loose) {
            // If the previous item ended with a blank line, the list is loose
            if (endsWithBlankLine) {
              list.loose = true;
            } else if (/\n *\n *$/.test(raw)) {
              endsWithBlankLine = true;
            }
          }

          // Check for task list items
          if (this.options.gfm) {
            istask = /^\[[ xX]\] /.exec(itemContents);
            if (istask) {
              ischecked = istask[0] !== '[ ] ';
              itemContents = itemContents.replace(/^\[[ xX]\] +/, '');
            }
          }
          list.items.push({
            type: 'list_item',
            raw: raw,
            task: !!istask,
            checked: ischecked,
            loose: false,
            text: itemContents
          });
          list.raw += raw;
        }

        // Do not consume newlines at end of final item. Alternatively, make itemRegex *start* with any newlines to simplify/speed up endsWithBlankLine logic
        list.items[list.items.length - 1].raw = raw.trimRight();
        list.items[list.items.length - 1].text = itemContents.trimRight();
        list.raw = list.raw.trimRight();
        var l = list.items.length;

        // Item child tokens handled here at end because we needed to have the final item to trim it first
        for (i = 0; i < l; i++) {
          this.lexer.state.top = false;
          list.items[i].tokens = this.lexer.blockTokens(list.items[i].text, []);
          var spacers = list.items[i].tokens.filter(function (t) {
            return t.type === 'space';
          });
          var hasMultipleLineBreaks = spacers.every(function (t) {
            var chars = t.raw.split('');
            var lineBreaks = 0;
            for (var _iterator = _createForOfIteratorHelperLoose(chars), _step; !(_step = _iterator()).done;) {
              var _char = _step.value;
              if (_char === '\n') {
                lineBreaks += 1;
              }
              if (lineBreaks > 1) {
                return true;
              }
            }
            return false;
          });
          if (!list.loose && spacers.length && hasMultipleLineBreaks) {
            // Having a single line break doesn't mean a list is loose. A single line break is terminating the last list item
            list.loose = true;
            list.items[i].loose = true;
          }
        }
        return list;
      }
    };
    _proto.html = function html(src) {
      var cap = this.rules.block.html.exec(src);
      if (cap) {
        var token = {
          type: 'html',
          raw: cap[0],
          pre: !this.options.sanitizer && (cap[1] === 'pre' || cap[1] === 'script' || cap[1] === 'style'),
          text: cap[0]
        };
        if (this.options.sanitize) {
          var text = this.options.sanitizer ? this.options.sanitizer(cap[0]) : escape(cap[0]);
          token.type = 'paragraph';
          token.text = text;
          token.tokens = this.lexer.inline(text);
        }
        return token;
      }
    };
    _proto.def = function def(src) {
      var cap = this.rules.block.def.exec(src);
      if (cap) {
        var tag = cap[1].toLowerCase().replace(/\s+/g, ' ');
        var href = cap[2] ? cap[2].replace(/^<(.*)>$/, '$1').replace(this.rules.inline._escapes, '$1') : '';
        var title = cap[3] ? cap[3].substring(1, cap[3].length - 1).replace(this.rules.inline._escapes, '$1') : cap[3];
        return {
          type: 'def',
          tag: tag,
          raw: cap[0],
          href: href,
          title: title
        };
      }
    };
    _proto.table = function table(src) {
      var cap = this.rules.block.table.exec(src);
      if (cap) {
        var item = {
          type: 'table',
          header: splitCells(cap[1]).map(function (c) {
            return {
              text: c
            };
          }),
          align: cap[2].replace(/^ *|\| *$/g, '').split(/ *\| */),
          rows: cap[3] && cap[3].trim() ? cap[3].replace(/\n[ \t]*$/, '').split('\n') : []
        };
        if (item.header.length === item.align.length) {
          item.raw = cap[0];
          var l = item.align.length;
          var i, j, k, row;
          for (i = 0; i < l; i++) {
            if (/^ *-+: *$/.test(item.align[i])) {
              item.align[i] = 'right';
            } else if (/^ *:-+: *$/.test(item.align[i])) {
              item.align[i] = 'center';
            } else if (/^ *:-+ *$/.test(item.align[i])) {
              item.align[i] = 'left';
            } else {
              item.align[i] = null;
            }
          }
          l = item.rows.length;
          for (i = 0; i < l; i++) {
            item.rows[i] = splitCells(item.rows[i], item.header.length).map(function (c) {
              return {
                text: c
              };
            });
          }

          // parse child tokens inside headers and cells

          // header child tokens
          l = item.header.length;
          for (j = 0; j < l; j++) {
            item.header[j].tokens = this.lexer.inline(item.header[j].text);
          }

          // cell child tokens
          l = item.rows.length;
          for (j = 0; j < l; j++) {
            row = item.rows[j];
            for (k = 0; k < row.length; k++) {
              row[k].tokens = this.lexer.inline(row[k].text);
            }
          }
          return item;
        }
      }
    };
    _proto.lheading = function lheading(src) {
      var cap = this.rules.block.lheading.exec(src);
      if (cap) {
        return {
          type: 'heading',
          raw: cap[0],
          depth: cap[2].charAt(0) === '=' ? 1 : 2,
          text: cap[1],
          tokens: this.lexer.inline(cap[1])
        };
      }
    };
    _proto.paragraph = function paragraph(src) {
      var cap = this.rules.block.paragraph.exec(src);
      if (cap) {
        var text = cap[1].charAt(cap[1].length - 1) === '\n' ? cap[1].slice(0, -1) : cap[1];
        return {
          type: 'paragraph',
          raw: cap[0],
          text: text,
          tokens: this.lexer.inline(text)
        };
      }
    };
    _proto.text = function text(src) {
      var cap = this.rules.block.text.exec(src);
      if (cap) {
        return {
          type: 'text',
          raw: cap[0],
          text: cap[0],
          tokens: this.lexer.inline(cap[0])
        };
      }
    };
    _proto.escape = function escape$1(src) {
      var cap = this.rules.inline.escape.exec(src);
      if (cap) {
        return {
          type: 'escape',
          raw: cap[0],
          text: escape(cap[1])
        };
      }
    };
    _proto.tag = function tag(src) {
      var cap = this.rules.inline.tag.exec(src);
      if (cap) {
        if (!this.lexer.state.inLink && /^<a /i.test(cap[0])) {
          this.lexer.state.inLink = true;
        } else if (this.lexer.state.inLink && /^<\/a>/i.test(cap[0])) {
          this.lexer.state.inLink = false;
        }
        if (!this.lexer.state.inRawBlock && /^<(pre|code|kbd|script)(\s|>)/i.test(cap[0])) {
          this.lexer.state.inRawBlock = true;
        } else if (this.lexer.state.inRawBlock && /^<\/(pre|code|kbd|script)(\s|>)/i.test(cap[0])) {
          this.lexer.state.inRawBlock = false;
        }
        return {
          type: this.options.sanitize ? 'text' : 'html',
          raw: cap[0],
          inLink: this.lexer.state.inLink,
          inRawBlock: this.lexer.state.inRawBlock,
          text: this.options.sanitize ? this.options.sanitizer ? this.options.sanitizer(cap[0]) : escape(cap[0]) : cap[0]
        };
      }
    };
    _proto.link = function link(src) {
      var cap = this.rules.inline.link.exec(src);
      if (cap) {
        var trimmedUrl = cap[2].trim();
        if (!this.options.pedantic && /^</.test(trimmedUrl)) {
          // commonmark requires matching angle brackets
          if (!/>$/.test(trimmedUrl)) {
            return;
          }

          // ending angle bracket cannot be escaped
          var rtrimSlash = rtrim(trimmedUrl.slice(0, -1), '\\');
          if ((trimmedUrl.length - rtrimSlash.length) % 2 === 0) {
            return;
          }
        } else {
          // find closing parenthesis
          var lastParenIndex = findClosingBracket(cap[2], '()');
          if (lastParenIndex > -1) {
            var start = cap[0].indexOf('!') === 0 ? 5 : 4;
            var linkLen = start + cap[1].length + lastParenIndex;
            cap[2] = cap[2].substring(0, lastParenIndex);
            cap[0] = cap[0].substring(0, linkLen).trim();
            cap[3] = '';
          }
        }
        var href = cap[2];
        var title = '';
        if (this.options.pedantic) {
          // split pedantic href and title
          var link = /^([^'"]*[^\s])\s+(['"])(.*)\2/.exec(href);
          if (link) {
            href = link[1];
            title = link[3];
          }
        } else {
          title = cap[3] ? cap[3].slice(1, -1) : '';
        }
        href = href.trim();
        if (/^</.test(href)) {
          if (this.options.pedantic && !/>$/.test(trimmedUrl)) {
            // pedantic allows starting angle bracket without ending angle bracket
            href = href.slice(1);
          } else {
            href = href.slice(1, -1);
          }
        }
        return outputLink(cap, {
          href: href ? href.replace(this.rules.inline._escapes, '$1') : href,
          title: title ? title.replace(this.rules.inline._escapes, '$1') : title
        }, cap[0], this.lexer);
      }
    };
    _proto.reflink = function reflink(src, links) {
      var cap;
      if ((cap = this.rules.inline.reflink.exec(src)) || (cap = this.rules.inline.nolink.exec(src))) {
        var link = (cap[2] || cap[1]).replace(/\s+/g, ' ');
        link = links[link.toLowerCase()];
        if (!link) {
          var text = cap[0].charAt(0);
          return {
            type: 'text',
            raw: text,
            text: text
          };
        }
        return outputLink(cap, link, cap[0], this.lexer);
      }
    };
    _proto.emStrong = function emStrong(src, maskedSrc, prevChar) {
      if (prevChar === void 0) {
        prevChar = '';
      }
      var match = this.rules.inline.emStrong.lDelim.exec(src);
      if (!match) return;

      // _ can't be between two alphanumerics. \p{L}\p{N} includes non-english alphabet/numbers as well
      if (match[3] && prevChar.match(/(?:[0-9A-Za-z\xAA\xB2\xB3\xB5\xB9\xBA\xBC-\xBE\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0560-\u0588\u05D0-\u05EA\u05EF-\u05F2\u0620-\u064A\u0660-\u0669\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07C0-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u0860-\u086A\u0870-\u0887\u0889-\u088E\u08A0-\u08C9\u0904-\u0939\u093D\u0950\u0958-\u0961\u0966-\u096F\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09E6-\u09F1\u09F4-\u09F9\u09FC\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A66-\u0A6F\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AE6-\u0AEF\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B66-\u0B6F\u0B71-\u0B77\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0BE6-\u0BF2\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C5D\u0C60\u0C61\u0C66-\u0C6F\u0C78-\u0C7E\u0C80\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDD\u0CDE\u0CE0\u0CE1\u0CE6-\u0CEF\u0CF1\u0CF2\u0D04-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D54-\u0D56\u0D58-\u0D61\u0D66-\u0D78\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0DE6-\u0DEF\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E50-\u0E59\u0E81\u0E82\u0E84\u0E86-\u0E8A\u0E8C-\u0EA3\u0EA5\u0EA7-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0ED0-\u0ED9\u0EDC-\u0EDF\u0F00\u0F20-\u0F33\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F-\u1049\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u1090-\u1099\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1369-\u137C\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u1711\u171F-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u17E0-\u17E9\u17F0-\u17F9\u1810-\u1819\u1820-\u1878\u1880-\u1884\u1887-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1946-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u19D0-\u19DA\u1A00-\u1A16\u1A20-\u1A54\u1A80-\u1A89\u1A90-\u1A99\u1AA7\u1B05-\u1B33\u1B45-\u1B4C\u1B50-\u1B59\u1B83-\u1BA0\u1BAE-\u1BE5\u1C00-\u1C23\u1C40-\u1C49\u1C4D-\u1C7D\u1C80-\u1C88\u1C90-\u1CBA\u1CBD-\u1CBF\u1CE9-\u1CEC\u1CEE-\u1CF3\u1CF5\u1CF6\u1CFA\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2070\u2071\u2074-\u2079\u207F-\u2089\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2150-\u2189\u2460-\u249B\u24EA-\u24FF\u2776-\u2793\u2C00-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2CFD\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005-\u3007\u3021-\u3029\u3031-\u3035\u3038-\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312F\u3131-\u318E\u3192-\u3195\u31A0-\u31BF\u31F0-\u31FF\u3220-\u3229\u3248-\u324F\u3251-\u325F\u3280-\u3289\u32B1-\u32BF\u3400-\u4DBF\u4E00-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6EF\uA717-\uA71F\uA722-\uA788\uA78B-\uA7CA\uA7D0\uA7D1\uA7D3\uA7D5-\uA7D9\uA7F2-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA830-\uA835\uA840-\uA873\uA882-\uA8B3\uA8D0-\uA8D9\uA8F2-\uA8F7\uA8FB\uA8FD\uA8FE\uA900-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF-\uA9D9\uA9E0-\uA9E4\uA9E6-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA50-\uAA59\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB69\uAB70-\uABE2\uABF0-\uABF9\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF10-\uFF19\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDD07-\uDD33\uDD40-\uDD78\uDD8A\uDD8B\uDE80-\uDE9C\uDEA0-\uDED0\uDEE1-\uDEFB\uDF00-\uDF23\uDF2D-\uDF4A\uDF50-\uDF75\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF\uDFD1-\uDFD5]|\uD801[\uDC00-\uDC9D\uDCA0-\uDCA9\uDCB0-\uDCD3\uDCD8-\uDCFB\uDD00-\uDD27\uDD30-\uDD63\uDD70-\uDD7A\uDD7C-\uDD8A\uDD8C-\uDD92\uDD94\uDD95\uDD97-\uDDA1\uDDA3-\uDDB1\uDDB3-\uDDB9\uDDBB\uDDBC\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67\uDF80-\uDF85\uDF87-\uDFB0\uDFB2-\uDFBA]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC58-\uDC76\uDC79-\uDC9E\uDCA7-\uDCAF\uDCE0-\uDCF2\uDCF4\uDCF5\uDCFB-\uDD1B\uDD20-\uDD39\uDD80-\uDDB7\uDDBC-\uDDCF\uDDD2-\uDE00\uDE10-\uDE13\uDE15-\uDE17\uDE19-\uDE35\uDE40-\uDE48\uDE60-\uDE7E\uDE80-\uDE9F\uDEC0-\uDEC7\uDEC9-\uDEE4\uDEEB-\uDEEF\uDF00-\uDF35\uDF40-\uDF55\uDF58-\uDF72\uDF78-\uDF91\uDFA9-\uDFAF]|\uD803[\uDC00-\uDC48\uDC80-\uDCB2\uDCC0-\uDCF2\uDCFA-\uDD23\uDD30-\uDD39\uDE60-\uDE7E\uDE80-\uDEA9\uDEB0\uDEB1\uDF00-\uDF27\uDF30-\uDF45\uDF51-\uDF54\uDF70-\uDF81\uDFB0-\uDFCB\uDFE0-\uDFF6]|\uD804[\uDC03-\uDC37\uDC52-\uDC6F\uDC71\uDC72\uDC75\uDC83-\uDCAF\uDCD0-\uDCE8\uDCF0-\uDCF9\uDD03-\uDD26\uDD36-\uDD3F\uDD44\uDD47\uDD50-\uDD72\uDD76\uDD83-\uDDB2\uDDC1-\uDDC4\uDDD0-\uDDDA\uDDDC\uDDE1-\uDDF4\uDE00-\uDE11\uDE13-\uDE2B\uDE3F\uDE40\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEDE\uDEF0-\uDEF9\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3D\uDF50\uDF5D-\uDF61]|\uD805[\uDC00-\uDC34\uDC47-\uDC4A\uDC50-\uDC59\uDC5F-\uDC61\uDC80-\uDCAF\uDCC4\uDCC5\uDCC7\uDCD0-\uDCD9\uDD80-\uDDAE\uDDD8-\uDDDB\uDE00-\uDE2F\uDE44\uDE50-\uDE59\uDE80-\uDEAA\uDEB8\uDEC0-\uDEC9\uDF00-\uDF1A\uDF30-\uDF3B\uDF40-\uDF46]|\uD806[\uDC00-\uDC2B\uDCA0-\uDCF2\uDCFF-\uDD06\uDD09\uDD0C-\uDD13\uDD15\uDD16\uDD18-\uDD2F\uDD3F\uDD41\uDD50-\uDD59\uDDA0-\uDDA7\uDDAA-\uDDD0\uDDE1\uDDE3\uDE00\uDE0B-\uDE32\uDE3A\uDE50\uDE5C-\uDE89\uDE9D\uDEB0-\uDEF8]|\uD807[\uDC00-\uDC08\uDC0A-\uDC2E\uDC40\uDC50-\uDC6C\uDC72-\uDC8F\uDD00-\uDD06\uDD08\uDD09\uDD0B-\uDD30\uDD46\uDD50-\uDD59\uDD60-\uDD65\uDD67\uDD68\uDD6A-\uDD89\uDD98\uDDA0-\uDDA9\uDEE0-\uDEF2\uDF02\uDF04-\uDF10\uDF12-\uDF33\uDF50-\uDF59\uDFB0\uDFC0-\uDFD4]|\uD808[\uDC00-\uDF99]|\uD809[\uDC00-\uDC6E\uDC80-\uDD43]|\uD80B[\uDF90-\uDFF0]|[\uD80C\uD81C-\uD820\uD822\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879\uD880-\uD883\uD885-\uD887][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2F\uDC41-\uDC46]|\uD811[\uDC00-\uDE46]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDE60-\uDE69\uDE70-\uDEBE\uDEC0-\uDEC9\uDED0-\uDEED\uDF00-\uDF2F\uDF40-\uDF43\uDF50-\uDF59\uDF5B-\uDF61\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDE40-\uDE96\uDF00-\uDF4A\uDF50\uDF93-\uDF9F\uDFE0\uDFE1\uDFE3]|\uD821[\uDC00-\uDFF7]|\uD823[\uDC00-\uDCD5\uDD00-\uDD08]|\uD82B[\uDFF0-\uDFF3\uDFF5-\uDFFB\uDFFD\uDFFE]|\uD82C[\uDC00-\uDD22\uDD32\uDD50-\uDD52\uDD55\uDD64-\uDD67\uDD70-\uDEFB]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99]|\uD834[\uDEC0-\uDED3\uDEE0-\uDEF3\uDF60-\uDF78]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB\uDFCE-\uDFFF]|\uD837[\uDF00-\uDF1E\uDF25-\uDF2A]|\uD838[\uDC30-\uDC6D\uDD00-\uDD2C\uDD37-\uDD3D\uDD40-\uDD49\uDD4E\uDE90-\uDEAD\uDEC0-\uDEEB\uDEF0-\uDEF9]|\uD839[\uDCD0-\uDCEB\uDCF0-\uDCF9\uDFE0-\uDFE6\uDFE8-\uDFEB\uDFED\uDFEE\uDFF0-\uDFFE]|\uD83A[\uDC00-\uDCC4\uDCC7-\uDCCF\uDD00-\uDD43\uDD4B\uDD50-\uDD59]|\uD83B[\uDC71-\uDCAB\uDCAD-\uDCAF\uDCB1-\uDCB4\uDD01-\uDD2D\uDD2F-\uDD3D\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD83C[\uDD00-\uDD0C]|\uD83E[\uDFF0-\uDFF9]|\uD869[\uDC00-\uDEDF\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF39\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0]|\uD87E[\uDC00-\uDE1D]|\uD884[\uDC00-\uDF4A\uDF50-\uDFFF]|\uD888[\uDC00-\uDFAF])/)) return;
      var nextChar = match[1] || match[2] || '';
      if (!nextChar || nextChar && (prevChar === '' || this.rules.inline.punctuation.exec(prevChar))) {
        var lLength = match[0].length - 1;
        var rDelim,
          rLength,
          delimTotal = lLength,
          midDelimTotal = 0;
        var endReg = match[0][0] === '*' ? this.rules.inline.emStrong.rDelimAst : this.rules.inline.emStrong.rDelimUnd;
        endReg.lastIndex = 0;

        // Clip maskedSrc to same section of string as src (move to lexer?)
        maskedSrc = maskedSrc.slice(-1 * src.length + lLength);
        while ((match = endReg.exec(maskedSrc)) != null) {
          rDelim = match[1] || match[2] || match[3] || match[4] || match[5] || match[6];
          if (!rDelim) continue; // skip single * in __abc*abc__

          rLength = rDelim.length;
          if (match[3] || match[4]) {
            // found another Left Delim
            delimTotal += rLength;
            continue;
          } else if (match[5] || match[6]) {
            // either Left or Right Delim
            if (lLength % 3 && !((lLength + rLength) % 3)) {
              midDelimTotal += rLength;
              continue; // CommonMark Emphasis Rules 9-10
            }
          }

          delimTotal -= rLength;
          if (delimTotal > 0) continue; // Haven't found enough closing delimiters

          // Remove extra characters. *a*** -> *a*
          rLength = Math.min(rLength, rLength + delimTotal + midDelimTotal);
          var raw = src.slice(0, lLength + match.index + (match[0].length - rDelim.length) + rLength);

          // Create `em` if smallest delimiter has odd char count. *a***
          if (Math.min(lLength, rLength) % 2) {
            var _text = raw.slice(1, -1);
            return {
              type: 'em',
              raw: raw,
              text: _text,
              tokens: this.lexer.inlineTokens(_text)
            };
          }

          // Create 'strong' if smallest delimiter has even char count. **a***
          var text = raw.slice(2, -2);
          return {
            type: 'strong',
            raw: raw,
            text: text,
            tokens: this.lexer.inlineTokens(text)
          };
        }
      }
    };
    _proto.codespan = function codespan(src) {
      var cap = this.rules.inline.code.exec(src);
      if (cap) {
        var text = cap[2].replace(/\n/g, ' ');
        var hasNonSpaceChars = /[^ ]/.test(text);
        var hasSpaceCharsOnBothEnds = /^ /.test(text) && / $/.test(text);
        if (hasNonSpaceChars && hasSpaceCharsOnBothEnds) {
          text = text.substring(1, text.length - 1);
        }
        text = escape(text, true);
        return {
          type: 'codespan',
          raw: cap[0],
          text: text
        };
      }
    };
    _proto.br = function br(src) {
      var cap = this.rules.inline.br.exec(src);
      if (cap) {
        return {
          type: 'br',
          raw: cap[0]
        };
      }
    };
    _proto.del = function del(src) {
      var cap = this.rules.inline.del.exec(src);
      if (cap) {
        return {
          type: 'del',
          raw: cap[0],
          text: cap[2],
          tokens: this.lexer.inlineTokens(cap[2])
        };
      }
    };
    _proto.autolink = function autolink(src, mangle) {
      var cap = this.rules.inline.autolink.exec(src);
      if (cap) {
        var text, href;
        if (cap[2] === '@') {
          text = escape(this.options.mangle ? mangle(cap[1]) : cap[1]);
          href = 'mailto:' + text;
        } else {
          text = escape(cap[1]);
          href = text;
        }
        return {
          type: 'link',
          raw: cap[0],
          text: text,
          href: href,
          tokens: [{
            type: 'text',
            raw: text,
            text: text
          }]
        };
      }
    };
    _proto.url = function url(src, mangle) {
      var cap;
      if (cap = this.rules.inline.url.exec(src)) {
        var text, href;
        if (cap[2] === '@') {
          text = escape(this.options.mangle ? mangle(cap[0]) : cap[0]);
          href = 'mailto:' + text;
        } else {
          // do extended autolink path validation
          var prevCapZero;
          do {
            prevCapZero = cap[0];
            cap[0] = this.rules.inline._backpedal.exec(cap[0])[0];
          } while (prevCapZero !== cap[0]);
          text = escape(cap[0]);
          if (cap[1] === 'www.') {
            href = 'http://' + text;
          } else {
            href = text;
          }
        }
        return {
          type: 'link',
          raw: cap[0],
          text: text,
          href: href,
          tokens: [{
            type: 'text',
            raw: text,
            text: text
          }]
        };
      }
    };
    _proto.inlineText = function inlineText(src, smartypants) {
      var cap = this.rules.inline.text.exec(src);
      if (cap) {
        var text;
        if (this.lexer.state.inRawBlock) {
          text = this.options.sanitize ? this.options.sanitizer ? this.options.sanitizer(cap[0]) : escape(cap[0]) : cap[0];
        } else {
          text = escape(this.options.smartypants ? smartypants(cap[0]) : cap[0]);
        }
        return {
          type: 'text',
          raw: cap[0],
          text: text
        };
      }
    };
    return Tokenizer;
  }();

  /**
   * Block-Level Grammar
   */
  var block = {
    newline: /^(?: *(?:\n|$))+/,
    code: /^( {4}[^\n]+(?:\n(?: *(?:\n|$))*)?)+/,
    fences: /^ {0,3}(`{3,}(?=[^`\n]*\n)|~{3,})([^\n]*)\n(?:|([\s\S]*?)\n)(?: {0,3}\1[~`]* *(?=\n|$)|$)/,
    hr: /^ {0,3}((?:-[\t ]*){3,}|(?:_[ \t]*){3,}|(?:\*[ \t]*){3,})(?:\n+|$)/,
    heading: /^ {0,3}(#{1,6})(?=\s|$)(.*)(?:\n+|$)/,
    blockquote: /^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/,
    list: /^( {0,3}bull)([ \t][^\n]+?)?(?:\n|$)/,
    html: '^ {0,3}(?:' // optional indentation
    + '<(script|pre|style|textarea)[\\s>][\\s\\S]*?(?:</\\1>[^\\n]*\\n+|$)' // (1)
    + '|comment[^\\n]*(\\n+|$)' // (2)
    + '|<\\?[\\s\\S]*?(?:\\?>\\n*|$)' // (3)
    + '|<![A-Z][\\s\\S]*?(?:>\\n*|$)' // (4)
    + '|<!\\[CDATA\\[[\\s\\S]*?(?:\\]\\]>\\n*|$)' // (5)
    + '|</?(tag)(?: +|\\n|/?>)[\\s\\S]*?(?:(?:\\n *)+\\n|$)' // (6)
    + '|<(?!script|pre|style|textarea)([a-z][\\w-]*)(?:attribute)*? */?>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n *)+\\n|$)' // (7) open tag
    + '|</(?!script|pre|style|textarea)[a-z][\\w-]*\\s*>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n *)+\\n|$)' // (7) closing tag
    + ')',
    def: /^ {0,3}\[(label)\]: *(?:\n *)?([^<\s][^\s]*|<.*?>)(?:(?: +(?:\n *)?| *\n *)(title))? *(?:\n+|$)/,
    table: noopTest,
    lheading: /^((?:.|\n(?!\n))+?)\n {0,3}(=+|-+) *(?:\n+|$)/,
    // regex template, placeholders will be replaced according to different paragraph
    // interruption rules of commonmark and the original markdown spec:
    _paragraph: /^([^\n]+(?:\n(?!hr|heading|lheading|blockquote|fences|list|html|table| +\n)[^\n]+)*)/,
    text: /^[^\n]+/
  };
  block._label = /(?!\s*\])(?:\\.|[^\[\]\\])+/;
  block._title = /(?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))/;
  block.def = edit(block.def).replace('label', block._label).replace('title', block._title).getRegex();
  block.bullet = /(?:[*+-]|\d{1,9}[.)])/;
  block.listItemStart = edit(/^( *)(bull) */).replace('bull', block.bullet).getRegex();
  block.list = edit(block.list).replace(/bull/g, block.bullet).replace('hr', '\\n+(?=\\1?(?:(?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$))').replace('def', '\\n+(?=' + block.def.source + ')').getRegex();
  block._tag = 'address|article|aside|base|basefont|blockquote|body|caption' + '|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption' + '|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe' + '|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option' + '|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr' + '|track|ul';
  block._comment = /<!--(?!-?>)[\s\S]*?(?:-->|$)/;
  block.html = edit(block.html, 'i').replace('comment', block._comment).replace('tag', block._tag).replace('attribute', / +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/).getRegex();
  block.paragraph = edit(block._paragraph).replace('hr', block.hr).replace('heading', ' {0,3}#{1,6} ').replace('|lheading', '') // setex headings don't interrupt commonmark paragraphs
  .replace('|table', '').replace('blockquote', ' {0,3}>').replace('fences', ' {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n').replace('list', ' {0,3}(?:[*+-]|1[.)]) ') // only lists starting from 1 can interrupt
  .replace('html', '</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)').replace('tag', block._tag) // pars can be interrupted by type (6) html blocks
  .getRegex();
  block.blockquote = edit(block.blockquote).replace('paragraph', block.paragraph).getRegex();

  /**
   * Normal Block Grammar
   */

  block.normal = merge({}, block);

  /**
   * GFM Block Grammar
   */

  block.gfm = merge({}, block.normal, {
    table: '^ *([^\\n ].*\\|.*)\\n' // Header
    + ' {0,3}(?:\\| *)?(:?-+:? *(?:\\| *:?-+:? *)*)(?:\\| *)?' // Align
    + '(?:\\n((?:(?! *\\n|hr|heading|blockquote|code|fences|list|html).*(?:\\n|$))*)\\n*|$)' // Cells
  });

  block.gfm.table = edit(block.gfm.table).replace('hr', block.hr).replace('heading', ' {0,3}#{1,6} ').replace('blockquote', ' {0,3}>').replace('code', ' {4}[^\\n]').replace('fences', ' {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n').replace('list', ' {0,3}(?:[*+-]|1[.)]) ') // only lists starting from 1 can interrupt
  .replace('html', '</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)').replace('tag', block._tag) // tables can be interrupted by type (6) html blocks
  .getRegex();
  block.gfm.paragraph = edit(block._paragraph).replace('hr', block.hr).replace('heading', ' {0,3}#{1,6} ').replace('|lheading', '') // setex headings don't interrupt commonmark paragraphs
  .replace('table', block.gfm.table) // interrupt paragraphs with table
  .replace('blockquote', ' {0,3}>').replace('fences', ' {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n').replace('list', ' {0,3}(?:[*+-]|1[.)]) ') // only lists starting from 1 can interrupt
  .replace('html', '</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)').replace('tag', block._tag) // pars can be interrupted by type (6) html blocks
  .getRegex();
  /**
   * Pedantic grammar (original John Gruber's loose markdown specification)
   */

  block.pedantic = merge({}, block.normal, {
    html: edit('^ *(?:comment *(?:\\n|\\s*$)' + '|<(tag)[\\s\\S]+?</\\1> *(?:\\n{2,}|\\s*$)' // closed tag
    + '|<tag(?:"[^"]*"|\'[^\']*\'|\\s[^\'"/>\\s]*)*?/?> *(?:\\n{2,}|\\s*$))').replace('comment', block._comment).replace(/tag/g, '(?!(?:' + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub' + '|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)' + '\\b)\\w+(?!:|[^\\w\\s@]*@)\\b').getRegex(),
    def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +(["(][^\n]+[")]))? *(?:\n+|$)/,
    heading: /^(#{1,6})(.*)(?:\n+|$)/,
    fences: noopTest,
    // fences not supported
    lheading: /^(.+?)\n {0,3}(=+|-+) *(?:\n+|$)/,
    paragraph: edit(block.normal._paragraph).replace('hr', block.hr).replace('heading', ' *#{1,6} *[^\n]').replace('lheading', block.lheading).replace('blockquote', ' {0,3}>').replace('|fences', '').replace('|list', '').replace('|html', '').getRegex()
  });

  /**
   * Inline-Level Grammar
   */
  var inline = {
    escape: /^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/,
    autolink: /^<(scheme:[^\s\x00-\x1f<>]*|email)>/,
    url: noopTest,
    tag: '^comment' + '|^</[a-zA-Z][\\w:-]*\\s*>' // self-closing tag
    + '|^<[a-zA-Z][\\w-]*(?:attribute)*?\\s*/?>' // open tag
    + '|^<\\?[\\s\\S]*?\\?>' // processing instruction, e.g. <?php ?>
    + '|^<![a-zA-Z]+\\s[\\s\\S]*?>' // declaration, e.g. <!DOCTYPE html>
    + '|^<!\\[CDATA\\[[\\s\\S]*?\\]\\]>',
    // CDATA section
    link: /^!?\[(label)\]\(\s*(href)(?:\s+(title))?\s*\)/,
    reflink: /^!?\[(label)\]\[(ref)\]/,
    nolink: /^!?\[(ref)\](?:\[\])?/,
    reflinkSearch: 'reflink|nolink(?!\\()',
    emStrong: {
      lDelim: /^(?:\*+(?:([punct_])|[^\s*]))|^_+(?:([punct*])|([^\s_]))/,
      //        (1) and (2) can only be a Right Delimiter. (3) and (4) can only be Left.  (5) and (6) can be either Left or Right.
      //          () Skip orphan inside strong                                      () Consume to delim     (1) #***                (2) a***#, a***                             (3) #***a, ***a                 (4) ***#              (5) #***#                 (6) a***a
      rDelimAst: /^(?:[^_*\\]|\\.)*?\_\_(?:[^_*\\]|\\.)*?\*(?:[^_*\\]|\\.)*?(?=\_\_)|(?:[^*\\]|\\.)+(?=[^*])|[punct_](\*+)(?=[\s]|$)|(?:[^punct*_\s\\]|\\.)(\*+)(?=[punct_\s]|$)|[punct_\s](\*+)(?=[^punct*_\s])|[\s](\*+)(?=[punct_])|[punct_](\*+)(?=[punct_])|(?:[^punct*_\s\\]|\\.)(\*+)(?=[^punct*_\s])/,
      rDelimUnd: /^(?:[^_*\\]|\\.)*?\*\*(?:[^_*\\]|\\.)*?\_(?:[^_*\\]|\\.)*?(?=\*\*)|(?:[^_\\]|\\.)+(?=[^_])|[punct*](\_+)(?=[\s]|$)|(?:[^punct*_\s\\]|\\.)(\_+)(?=[punct*\s]|$)|[punct*\s](\_+)(?=[^punct*_\s])|[\s](\_+)(?=[punct*])|[punct*](\_+)(?=[punct*])/ // ^- Not allowed for _
    },

    code: /^(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)/,
    br: /^( {2,}|\\)\n(?!\s*$)/,
    del: noopTest,
    text: /^(`+|[^`])(?:(?= {2,}\n)|[\s\S]*?(?:(?=[\\<!\[`*_]|\b_|$)|[^ ](?= {2,}\n)))/,
    punctuation: /^([\spunctuation])/
  };

  // list of punctuation marks from CommonMark spec
  // without * and _ to handle the different emphasis markers * and _
  inline._punctuation = '!"#$%&\'()+\\-.,/:;<=>?@\\[\\]`^{|}~';
  inline.punctuation = edit(inline.punctuation).replace(/punctuation/g, inline._punctuation).getRegex();

  // sequences em should skip over [title](link), `code`, <html>
  inline.blockSkip = /\[[^\]]*?\]\([^\)]*?\)|`[^`]*?`|<[^>]*?>/g;
  // lookbehind is not available on Safari as of version 16
  // inline.escapedEmSt = /(?<=(?:^|[^\\)(?:\\[^])*)\\[*_]/g;
  inline.escapedEmSt = /(?:^|[^\\])(?:\\\\)*\\[*_]/g;
  inline._comment = edit(block._comment).replace('(?:-->|$)', '-->').getRegex();
  inline.emStrong.lDelim = edit(inline.emStrong.lDelim).replace(/punct/g, inline._punctuation).getRegex();
  inline.emStrong.rDelimAst = edit(inline.emStrong.rDelimAst, 'g').replace(/punct/g, inline._punctuation).getRegex();
  inline.emStrong.rDelimUnd = edit(inline.emStrong.rDelimUnd, 'g').replace(/punct/g, inline._punctuation).getRegex();
  inline._escapes = /\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/g;
  inline._scheme = /[a-zA-Z][a-zA-Z0-9+.-]{1,31}/;
  inline._email = /[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_])/;
  inline.autolink = edit(inline.autolink).replace('scheme', inline._scheme).replace('email', inline._email).getRegex();
  inline._attribute = /\s+[a-zA-Z:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?/;
  inline.tag = edit(inline.tag).replace('comment', inline._comment).replace('attribute', inline._attribute).getRegex();
  inline._label = /(?:\[(?:\\.|[^\[\]\\])*\]|\\.|`[^`]*`|[^\[\]\\`])*?/;
  inline._href = /<(?:\\.|[^\n<>\\])+>|[^\s\x00-\x1f]*/;
  inline._title = /"(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)/;
  inline.link = edit(inline.link).replace('label', inline._label).replace('href', inline._href).replace('title', inline._title).getRegex();
  inline.reflink = edit(inline.reflink).replace('label', inline._label).replace('ref', block._label).getRegex();
  inline.nolink = edit(inline.nolink).replace('ref', block._label).getRegex();
  inline.reflinkSearch = edit(inline.reflinkSearch, 'g').replace('reflink', inline.reflink).replace('nolink', inline.nolink).getRegex();

  /**
   * Normal Inline Grammar
   */

  inline.normal = merge({}, inline);

  /**
   * Pedantic Inline Grammar
   */

  inline.pedantic = merge({}, inline.normal, {
    strong: {
      start: /^__|\*\*/,
      middle: /^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/,
      endAst: /\*\*(?!\*)/g,
      endUnd: /__(?!_)/g
    },
    em: {
      start: /^_|\*/,
      middle: /^()\*(?=\S)([\s\S]*?\S)\*(?!\*)|^_(?=\S)([\s\S]*?\S)_(?!_)/,
      endAst: /\*(?!\*)/g,
      endUnd: /_(?!_)/g
    },
    link: edit(/^!?\[(label)\]\((.*?)\)/).replace('label', inline._label).getRegex(),
    reflink: edit(/^!?\[(label)\]\s*\[([^\]]*)\]/).replace('label', inline._label).getRegex()
  });

  /**
   * GFM Inline Grammar
   */

  inline.gfm = merge({}, inline.normal, {
    escape: edit(inline.escape).replace('])', '~|])').getRegex(),
    _extended_email: /[A-Za-z0-9._+-]+(@)[a-zA-Z0-9-_]+(?:\.[a-zA-Z0-9-_]*[a-zA-Z0-9])+(?![-_])/,
    url: /^((?:ftp|https?):\/\/|www\.)(?:[a-zA-Z0-9\-]+\.?)+[^\s<]*|^email/,
    _backpedal: /(?:[^?!.,:;*_~()&]+|\([^)]*\)|&(?![a-zA-Z0-9]+;$)|[?!.,:;*_~)]+(?!$))+/,
    del: /^(~~?)(?=[^\s~])([\s\S]*?[^\s~])\1(?=[^~]|$)/,
    text: /^([`~]+|[^`~])(?:(?= {2,}\n)|(?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)|[\s\S]*?(?:(?=[\\<!\[`*~_]|\b_|https?:\/\/|ftp:\/\/|www\.|$)|[^ ](?= {2,}\n)|[^a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-](?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)))/
  });
  inline.gfm.url = edit(inline.gfm.url, 'i').replace('email', inline.gfm._extended_email).getRegex();
  /**
   * GFM + Line Breaks Inline Grammar
   */

  inline.breaks = merge({}, inline.gfm, {
    br: edit(inline.br).replace('{2,}', '*').getRegex(),
    text: edit(inline.gfm.text).replace('\\b_', '\\b_| {2,}\\n').replace(/\{2,\}/g, '*').getRegex()
  });

  /**
   * smartypants text replacement
   * @param {string} text
   */
  function smartypants(text) {
    return text
    // em-dashes
    .replace(/---/g, "\u2014")
    // en-dashes
    .replace(/--/g, "\u2013")
    // opening singles
    .replace(/(^|[-\u2014/(\[{"\s])'/g, "$1\u2018")
    // closing singles & apostrophes
    .replace(/'/g, "\u2019")
    // opening doubles
    .replace(/(^|[-\u2014/(\[{\u2018\s])"/g, "$1\u201C")
    // closing doubles
    .replace(/"/g, "\u201D")
    // ellipses
    .replace(/\.{3}/g, "\u2026");
  }

  /**
   * mangle email addresses
   * @param {string} text
   */
  function mangle(text) {
    var out = '',
      i,
      ch;
    var l = text.length;
    for (i = 0; i < l; i++) {
      ch = text.charCodeAt(i);
      if (Math.random() > 0.5) {
        ch = 'x' + ch.toString(16);
      }
      out += '&#' + ch + ';';
    }
    return out;
  }

  /**
   * Block Lexer
   */
  var Lexer = /*#__PURE__*/function () {
    function Lexer(options) {
      this.tokens = [];
      this.tokens.links = Object.create(null);
      this.options = options || exports.defaults;
      this.options.tokenizer = this.options.tokenizer || new Tokenizer();
      this.tokenizer = this.options.tokenizer;
      this.tokenizer.options = this.options;
      this.tokenizer.lexer = this;
      this.inlineQueue = [];
      this.state = {
        inLink: false,
        inRawBlock: false,
        top: true
      };
      var rules = {
        block: block.normal,
        inline: inline.normal
      };
      if (this.options.pedantic) {
        rules.block = block.pedantic;
        rules.inline = inline.pedantic;
      } else if (this.options.gfm) {
        rules.block = block.gfm;
        if (this.options.breaks) {
          rules.inline = inline.breaks;
        } else {
          rules.inline = inline.gfm;
        }
      }
      this.tokenizer.rules = rules;
    }

    /**
     * Expose Rules
     */
    /**
     * Static Lex Method
     */
    Lexer.lex = function lex(src, options) {
      var lexer = new Lexer(options);
      return lexer.lex(src);
    }

    /**
     * Static Lex Inline Method
     */;
    Lexer.lexInline = function lexInline(src, options) {
      var lexer = new Lexer(options);
      return lexer.inlineTokens(src);
    }

    /**
     * Preprocessing
     */;
    var _proto = Lexer.prototype;
    _proto.lex = function lex(src) {
      src = src.replace(/\r\n|\r/g, '\n');
      this.blockTokens(src, this.tokens);
      var next;
      while (next = this.inlineQueue.shift()) {
        this.inlineTokens(next.src, next.tokens);
      }
      return this.tokens;
    }

    /**
     * Lexing
     */;
    _proto.blockTokens = function blockTokens(src, tokens) {
      var _this = this;
      if (tokens === void 0) {
        tokens = [];
      }
      if (this.options.pedantic) {
        src = src.replace(/\t/g, '    ').replace(/^ +$/gm, '');
      } else {
        src = src.replace(/^( *)(\t+)/gm, function (_, leading, tabs) {
          return leading + '    '.repeat(tabs.length);
        });
      }
      var token, lastToken, cutSrc, lastParagraphClipped;
      while (src) {
        if (this.options.extensions && this.options.extensions.block && this.options.extensions.block.some(function (extTokenizer) {
          if (token = extTokenizer.call({
            lexer: _this
          }, src, tokens)) {
            src = src.substring(token.raw.length);
            tokens.push(token);
            return true;
          }
          return false;
        })) {
          continue;
        }

        // newline
        if (token = this.tokenizer.space(src)) {
          src = src.substring(token.raw.length);
          if (token.raw.length === 1 && tokens.length > 0) {
            // if there's a single \n as a spacer, it's terminating the last line,
            // so move it there so that we don't get unecessary paragraph tags
            tokens[tokens.length - 1].raw += '\n';
          } else {
            tokens.push(token);
          }
          continue;
        }

        // code
        if (token = this.tokenizer.code(src)) {
          src = src.substring(token.raw.length);
          lastToken = tokens[tokens.length - 1];
          // An indented code block cannot interrupt a paragraph.
          if (lastToken && (lastToken.type === 'paragraph' || lastToken.type === 'text')) {
            lastToken.raw += '\n' + token.raw;
            lastToken.text += '\n' + token.text;
            this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text;
          } else {
            tokens.push(token);
          }
          continue;
        }

        // fences
        if (token = this.tokenizer.fences(src)) {
          src = src.substring(token.raw.length);
          tokens.push(token);
          continue;
        }

        // heading
        if (token = this.tokenizer.heading(src)) {
          src = src.substring(token.raw.length);
          tokens.push(token);
          continue;
        }

        // hr
        if (token = this.tokenizer.hr(src)) {
          src = src.substring(token.raw.length);
          tokens.push(token);
          continue;
        }

        // blockquote
        if (token = this.tokenizer.blockquote(src)) {
          src = src.substring(token.raw.length);
          tokens.push(token);
          continue;
        }

        // list
        if (token = this.tokenizer.list(src)) {
          src = src.substring(token.raw.length);
          tokens.push(token);
          continue;
        }

        // html
        if (token = this.tokenizer.html(src)) {
          src = src.substring(token.raw.length);
          tokens.push(token);
          continue;
        }

        // def
        if (token = this.tokenizer.def(src)) {
          src = src.substring(token.raw.length);
          lastToken = tokens[tokens.length - 1];
          if (lastToken && (lastToken.type === 'paragraph' || lastToken.type === 'text')) {
            lastToken.raw += '\n' + token.raw;
            lastToken.text += '\n' + token.raw;
            this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text;
          } else if (!this.tokens.links[token.tag]) {
            this.tokens.links[token.tag] = {
              href: token.href,
              title: token.title
            };
          }
          continue;
        }

        // table (gfm)
        if (token = this.tokenizer.table(src)) {
          src = src.substring(token.raw.length);
          tokens.push(token);
          continue;
        }

        // lheading
        if (token = this.tokenizer.lheading(src)) {
          src = src.substring(token.raw.length);
          tokens.push(token);
          continue;
        }

        // top-level paragraph
        // prevent paragraph consuming extensions by clipping 'src' to extension start
        cutSrc = src;
        if (this.options.extensions && this.options.extensions.startBlock) {
          (function () {
            var startIndex = Infinity;
            var tempSrc = src.slice(1);
            var tempStart = void 0;
            _this.options.extensions.startBlock.forEach(function (getStartIndex) {
              tempStart = getStartIndex.call({
                lexer: this
              }, tempSrc);
              if (typeof tempStart === 'number' && tempStart >= 0) {
                startIndex = Math.min(startIndex, tempStart);
              }
            });
            if (startIndex < Infinity && startIndex >= 0) {
              cutSrc = src.substring(0, startIndex + 1);
            }
          })();
        }
        if (this.state.top && (token = this.tokenizer.paragraph(cutSrc))) {
          lastToken = tokens[tokens.length - 1];
          if (lastParagraphClipped && lastToken.type === 'paragraph') {
            lastToken.raw += '\n' + token.raw;
            lastToken.text += '\n' + token.text;
            this.inlineQueue.pop();
            this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text;
          } else {
            tokens.push(token);
          }
          lastParagraphClipped = cutSrc.length !== src.length;
          src = src.substring(token.raw.length);
          continue;
        }

        // text
        if (token = this.tokenizer.text(src)) {
          src = src.substring(token.raw.length);
          lastToken = tokens[tokens.length - 1];
          if (lastToken && lastToken.type === 'text') {
            lastToken.raw += '\n' + token.raw;
            lastToken.text += '\n' + token.text;
            this.inlineQueue.pop();
            this.inlineQueue[this.inlineQueue.length - 1].src = lastToken.text;
          } else {
            tokens.push(token);
          }
          continue;
        }
        if (src) {
          var errMsg = 'Infinite loop on byte: ' + src.charCodeAt(0);
          if (this.options.silent) {
            console.error(errMsg);
            break;
          } else {
            throw new Error(errMsg);
          }
        }
      }
      this.state.top = true;
      return tokens;
    };
    _proto.inline = function inline(src, tokens) {
      if (tokens === void 0) {
        tokens = [];
      }
      this.inlineQueue.push({
        src: src,
        tokens: tokens
      });
      return tokens;
    }

    /**
     * Lexing/Compiling
     */;
    _proto.inlineTokens = function inlineTokens(src, tokens) {
      var _this2 = this;
      if (tokens === void 0) {
        tokens = [];
      }
      var token, lastToken, cutSrc;

      // String with links masked to avoid interference with em and strong
      var maskedSrc = src;
      var match;
      var keepPrevChar, prevChar;

      // Mask out reflinks
      if (this.tokens.links) {
        var links = Object.keys(this.tokens.links);
        if (links.length > 0) {
          while ((match = this.tokenizer.rules.inline.reflinkSearch.exec(maskedSrc)) != null) {
            if (links.includes(match[0].slice(match[0].lastIndexOf('[') + 1, -1))) {
              maskedSrc = maskedSrc.slice(0, match.index) + '[' + repeatString('a', match[0].length - 2) + ']' + maskedSrc.slice(this.tokenizer.rules.inline.reflinkSearch.lastIndex);
            }
          }
        }
      }
      // Mask out other blocks
      while ((match = this.tokenizer.rules.inline.blockSkip.exec(maskedSrc)) != null) {
        maskedSrc = maskedSrc.slice(0, match.index) + '[' + repeatString('a', match[0].length - 2) + ']' + maskedSrc.slice(this.tokenizer.rules.inline.blockSkip.lastIndex);
      }

      // Mask out escaped em & strong delimiters
      while ((match = this.tokenizer.rules.inline.escapedEmSt.exec(maskedSrc)) != null) {
        maskedSrc = maskedSrc.slice(0, match.index + match[0].length - 2) + '++' + maskedSrc.slice(this.tokenizer.rules.inline.escapedEmSt.lastIndex);
        this.tokenizer.rules.inline.escapedEmSt.lastIndex--;
      }
      while (src) {
        if (!keepPrevChar) {
          prevChar = '';
        }
        keepPrevChar = false;

        // extensions
        if (this.options.extensions && this.options.extensions.inline && this.options.extensions.inline.some(function (extTokenizer) {
          if (token = extTokenizer.call({
            lexer: _this2
          }, src, tokens)) {
            src = src.substring(token.raw.length);
            tokens.push(token);
            return true;
          }
          return false;
        })) {
          continue;
        }

        // escape
        if (token = this.tokenizer.escape(src)) {
          src = src.substring(token.raw.length);
          tokens.push(token);
          continue;
        }

        // tag
        if (token = this.tokenizer.tag(src)) {
          src = src.substring(token.raw.length);
          lastToken = tokens[tokens.length - 1];
          if (lastToken && token.type === 'text' && lastToken.type === 'text') {
            lastToken.raw += token.raw;
            lastToken.text += token.text;
          } else {
            tokens.push(token);
          }
          continue;
        }

        // link
        if (token = this.tokenizer.link(src)) {
          src = src.substring(token.raw.length);
          tokens.push(token);
          continue;
        }

        // reflink, nolink
        if (token = this.tokenizer.reflink(src, this.tokens.links)) {
          src = src.substring(token.raw.length);
          lastToken = tokens[tokens.length - 1];
          if (lastToken && token.type === 'text' && lastToken.type === 'text') {
            lastToken.raw += token.raw;
            lastToken.text += token.text;
          } else {
            tokens.push(token);
          }
          continue;
        }

        // em & strong
        if (token = this.tokenizer.emStrong(src, maskedSrc, prevChar)) {
          src = src.substring(token.raw.length);
          tokens.push(token);
          continue;
        }

        // code
        if (token = this.tokenizer.codespan(src)) {
          src = src.substring(token.raw.length);
          tokens.push(token);
          continue;
        }

        // br
        if (token = this.tokenizer.br(src)) {
          src = src.substring(token.raw.length);
          tokens.push(token);
          continue;
        }

        // del (gfm)
        if (token = this.tokenizer.del(src)) {
          src = src.substring(token.raw.length);
          tokens.push(token);
          continue;
        }

        // autolink
        if (token = this.tokenizer.autolink(src, mangle)) {
          src = src.substring(token.raw.length);
          tokens.push(token);
          continue;
        }

        // url (gfm)
        if (!this.state.inLink && (token = this.tokenizer.url(src, mangle))) {
          src = src.substring(token.raw.length);
          tokens.push(token);
          continue;
        }

        // text
        // prevent inlineText consuming extensions by clipping 'src' to extension start
        cutSrc = src;
        if (this.options.extensions && this.options.extensions.startInline) {
          (function () {
            var startIndex = Infinity;
            var tempSrc = src.slice(1);
            var tempStart = void 0;
            _this2.options.extensions.startInline.forEach(function (getStartIndex) {
              tempStart = getStartIndex.call({
                lexer: this
              }, tempSrc);
              if (typeof tempStart === 'number' && tempStart >= 0) {
                startIndex = Math.min(startIndex, tempStart);
              }
            });
            if (startIndex < Infinity && startIndex >= 0) {
              cutSrc = src.substring(0, startIndex + 1);
            }
          })();
        }
        if (token = this.tokenizer.inlineText(cutSrc, smartypants)) {
          src = src.substring(token.raw.length);
          if (token.raw.slice(-1) !== '_') {
            // Track prevChar before string of ____ started
            prevChar = token.raw.slice(-1);
          }
          keepPrevChar = true;
          lastToken = tokens[tokens.length - 1];
          if (lastToken && lastToken.type === 'text') {
            lastToken.raw += token.raw;
            lastToken.text += token.text;
          } else {
            tokens.push(token);
          }
          continue;
        }
        if (src) {
          var errMsg = 'Infinite loop on byte: ' + src.charCodeAt(0);
          if (this.options.silent) {
            console.error(errMsg);
            break;
          } else {
            throw new Error(errMsg);
          }
        }
      }
      return tokens;
    };
    _createClass(Lexer, null, [{
      key: "rules",
      get: function get() {
        return {
          block: block,
          inline: inline
        };
      }
    }]);
    return Lexer;
  }();

  /**
   * Renderer
   */
  var Renderer = /*#__PURE__*/function () {
    function Renderer(options) {
      this.options = options || exports.defaults;
    }
    var _proto = Renderer.prototype;
    _proto.code = function code(_code, infostring, escaped) {
      var lang = (infostring || '').match(/\S*/)[0];
      if (this.options.highlight) {
        var out = this.options.highlight(_code, lang);
        if (out != null && out !== _code) {
          escaped = true;
          _code = out;
        }
      }
      _code = _code.replace(/\n$/, '') + '\n';
      if (!lang) {
        return '<pre><code>' + (escaped ? _code : escape(_code, true)) + '</code></pre>\n';
      }
      return '<pre><code class="' + this.options.langPrefix + escape(lang) + '">' + (escaped ? _code : escape(_code, true)) + '</code></pre>\n';
    }

    /**
     * @param {string} quote
     */;
    _proto.blockquote = function blockquote(quote) {
      return "<blockquote>\n" + quote + "</blockquote>\n";
    };
    _proto.html = function html(_html) {
      return _html;
    }

    /**
     * @param {string} text
     * @param {string} level
     * @param {string} raw
     * @param {any} slugger
     */;
    _proto.heading = function heading(text, level, raw, slugger) {
      if (this.options.headerIds) {
        var id = this.options.headerPrefix + slugger.slug(raw);
        return "<h" + level + " id=\"" + id + "\">" + text + "</h" + level + ">\n";
      }

      // ignore IDs
      return "<h" + level + ">" + text + "</h" + level + ">\n";
    };
    _proto.hr = function hr() {
      return this.options.xhtml ? '<hr/>\n' : '<hr>\n';
    };
    _proto.list = function list(body, ordered, start) {
      var type = ordered ? 'ol' : 'ul',
        startatt = ordered && start !== 1 ? ' start="' + start + '"' : '';
      return '<' + type + startatt + '>\n' + body + '</' + type + '>\n';
    }

    /**
     * @param {string} text
     */;
    _proto.listitem = function listitem(text) {
      return "<li>" + text + "</li>\n";
    };
    _proto.checkbox = function checkbox(checked) {
      return '<input ' + (checked ? 'checked="" ' : '') + 'disabled="" type="checkbox"' + (this.options.xhtml ? ' /' : '') + '> ';
    }

    /**
     * @param {string} text
     */;
    _proto.paragraph = function paragraph(text) {
      return "<p>" + text + "</p>\n";
    }

    /**
     * @param {string} header
     * @param {string} body
     */;
    _proto.table = function table(header, body) {
      if (body) body = "<tbody>" + body + "</tbody>";
      return '<table>\n' + '<thead>\n' + header + '</thead>\n' + body + '</table>\n';
    }

    /**
     * @param {string} content
     */;
    _proto.tablerow = function tablerow(content) {
      return "<tr>\n" + content + "</tr>\n";
    };
    _proto.tablecell = function tablecell(content, flags) {
      var type = flags.header ? 'th' : 'td';
      var tag = flags.align ? "<" + type + " align=\"" + flags.align + "\">" : "<" + type + ">";
      return tag + content + ("</" + type + ">\n");
    }

    /**
     * span level renderer
     * @param {string} text
     */;
    _proto.strong = function strong(text) {
      return "<strong>" + text + "</strong>";
    }

    /**
     * @param {string} text
     */;
    _proto.em = function em(text) {
      return "<em>" + text + "</em>";
    }

    /**
     * @param {string} text
     */;
    _proto.codespan = function codespan(text) {
      return "<code>" + text + "</code>";
    };
    _proto.br = function br() {
      return this.options.xhtml ? '<br/>' : '<br>';
    }

    /**
     * @param {string} text
     */;
    _proto.del = function del(text) {
      return "<del>" + text + "</del>";
    }

    /**
     * @param {string} href
     * @param {string} title
     * @param {string} text
     */;
    _proto.link = function link(href, title, text) {
      href = cleanUrl(this.options.sanitize, this.options.baseUrl, href);
      if (href === null) {
        return text;
      }
      var out = '<a href="' + href + '"';
      if (title) {
        out += ' title="' + title + '"';
      }
      out += '>' + text + '</a>';
      return out;
    }

    /**
     * @param {string} href
     * @param {string} title
     * @param {string} text
     */;
    _proto.image = function image(href, title, text) {
      href = cleanUrl(this.options.sanitize, this.options.baseUrl, href);
      if (href === null) {
        return text;
      }
      var out = "<img src=\"" + href + "\" alt=\"" + text + "\"";
      if (title) {
        out += " title=\"" + title + "\"";
      }
      out += this.options.xhtml ? '/>' : '>';
      return out;
    };
    _proto.text = function text(_text) {
      return _text;
    };
    return Renderer;
  }();

  /**
   * TextRenderer
   * returns only the textual part of the token
   */
  var TextRenderer = /*#__PURE__*/function () {
    function TextRenderer() {}
    var _proto = TextRenderer.prototype;
    // no need for block level renderers
    _proto.strong = function strong(text) {
      return text;
    };
    _proto.em = function em(text) {
      return text;
    };
    _proto.codespan = function codespan(text) {
      return text;
    };
    _proto.del = function del(text) {
      return text;
    };
    _proto.html = function html(text) {
      return text;
    };
    _proto.text = function text(_text) {
      return _text;
    };
    _proto.link = function link(href, title, text) {
      return '' + text;
    };
    _proto.image = function image(href, title, text) {
      return '' + text;
    };
    _proto.br = function br() {
      return '';
    };
    return TextRenderer;
  }();

  /**
   * Slugger generates header id
   */
  var Slugger = /*#__PURE__*/function () {
    function Slugger() {
      this.seen = {};
    }

    /**
     * @param {string} value
     */
    var _proto = Slugger.prototype;
    _proto.serialize = function serialize(value) {
      return value.toLowerCase().trim()
      // remove html tags
      .replace(/<[!\/a-z].*?>/ig, '')
      // remove unwanted chars
      .replace(/[\u2000-\u206F\u2E00-\u2E7F\\'!"#$%&()*+,./:;<=>?@[\]^`{|}~]/g, '').replace(/\s/g, '-');
    }

    /**
     * Finds the next safe (unique) slug to use
     * @param {string} originalSlug
     * @param {boolean} isDryRun
     */;
    _proto.getNextSafeSlug = function getNextSafeSlug(originalSlug, isDryRun) {
      var slug = originalSlug;
      var occurenceAccumulator = 0;
      if (this.seen.hasOwnProperty(slug)) {
        occurenceAccumulator = this.seen[originalSlug];
        do {
          occurenceAccumulator++;
          slug = originalSlug + '-' + occurenceAccumulator;
        } while (this.seen.hasOwnProperty(slug));
      }
      if (!isDryRun) {
        this.seen[originalSlug] = occurenceAccumulator;
        this.seen[slug] = 0;
      }
      return slug;
    }

    /**
     * Convert string to unique id
     * @param {object} [options]
     * @param {boolean} [options.dryrun] Generates the next unique slug without
     * updating the internal accumulator.
     */;
    _proto.slug = function slug(value, options) {
      if (options === void 0) {
        options = {};
      }
      var slug = this.serialize(value);
      return this.getNextSafeSlug(slug, options.dryrun);
    };
    return Slugger;
  }();

  /**
   * Parsing & Compiling
   */
  var Parser = /*#__PURE__*/function () {
    function Parser(options) {
      this.options = options || exports.defaults;
      this.options.renderer = this.options.renderer || new Renderer();
      this.renderer = this.options.renderer;
      this.renderer.options = this.options;
      this.textRenderer = new TextRenderer();
      this.slugger = new Slugger();
    }

    /**
     * Static Parse Method
     */
    Parser.parse = function parse(tokens, options) {
      var parser = new Parser(options);
      return parser.parse(tokens);
    }

    /**
     * Static Parse Inline Method
     */;
    Parser.parseInline = function parseInline(tokens, options) {
      var parser = new Parser(options);
      return parser.parseInline(tokens);
    }

    /**
     * Parse Loop
     */;
    var _proto = Parser.prototype;
    _proto.parse = function parse(tokens, top) {
      if (top === void 0) {
        top = true;
      }
      var out = '',
        i,
        j,
        k,
        l2,
        l3,
        row,
        cell,
        header,
        body,
        token,
        ordered,
        start,
        loose,
        itemBody,
        item,
        checked,
        task,
        checkbox,
        ret;
      var l = tokens.length;
      for (i = 0; i < l; i++) {
        token = tokens[i];

        // Run any renderer extensions
        if (this.options.extensions && this.options.extensions.renderers && this.options.extensions.renderers[token.type]) {
          ret = this.options.extensions.renderers[token.type].call({
            parser: this
          }, token);
          if (ret !== false || !['space', 'hr', 'heading', 'code', 'table', 'blockquote', 'list', 'html', 'paragraph', 'text'].includes(token.type)) {
            out += ret || '';
            continue;
          }
        }
        switch (token.type) {
          case 'space':
            {
              continue;
            }
          case 'hr':
            {
              out += this.renderer.hr();
              continue;
            }
          case 'heading':
            {
              out += this.renderer.heading(this.parseInline(token.tokens), token.depth, unescape(this.parseInline(token.tokens, this.textRenderer)), this.slugger);
              continue;
            }
          case 'code':
            {
              out += this.renderer.code(token.text, token.lang, token.escaped);
              continue;
            }
          case 'table':
            {
              header = '';

              // header
              cell = '';
              l2 = token.header.length;
              for (j = 0; j < l2; j++) {
                cell += this.renderer.tablecell(this.parseInline(token.header[j].tokens), {
                  header: true,
                  align: token.align[j]
                });
              }
              header += this.renderer.tablerow(cell);
              body = '';
              l2 = token.rows.length;
              for (j = 0; j < l2; j++) {
                row = token.rows[j];
                cell = '';
                l3 = row.length;
                for (k = 0; k < l3; k++) {
                  cell += this.renderer.tablecell(this.parseInline(row[k].tokens), {
                    header: false,
                    align: token.align[k]
                  });
                }
                body += this.renderer.tablerow(cell);
              }
              out += this.renderer.table(header, body);
              continue;
            }
          case 'blockquote':
            {
              body = this.parse(token.tokens);
              out += this.renderer.blockquote(body);
              continue;
            }
          case 'list':
            {
              ordered = token.ordered;
              start = token.start;
              loose = token.loose;
              l2 = token.items.length;
              body = '';
              for (j = 0; j < l2; j++) {
                item = token.items[j];
                checked = item.checked;
                task = item.task;
                itemBody = '';
                if (item.task) {
                  checkbox = this.renderer.checkbox(checked);
                  if (loose) {
                    if (item.tokens.length > 0 && item.tokens[0].type === 'paragraph') {
                      item.tokens[0].text = checkbox + ' ' + item.tokens[0].text;
                      if (item.tokens[0].tokens && item.tokens[0].tokens.length > 0 && item.tokens[0].tokens[0].type === 'text') {
                        item.tokens[0].tokens[0].text = checkbox + ' ' + item.tokens[0].tokens[0].text;
                      }
                    } else {
                      item.tokens.unshift({
                        type: 'text',
                        text: checkbox
                      });
                    }
                  } else {
                    itemBody += checkbox;
                  }
                }
                itemBody += this.parse(item.tokens, loose);
                body += this.renderer.listitem(itemBody, task, checked);
              }
              out += this.renderer.list(body, ordered, start);
              continue;
            }
          case 'html':
            {
              // TODO parse inline content if parameter markdown=1
              out += this.renderer.html(token.text);
              continue;
            }
          case 'paragraph':
            {
              out += this.renderer.paragraph(this.parseInline(token.tokens));
              continue;
            }
          case 'text':
            {
              body = token.tokens ? this.parseInline(token.tokens) : token.text;
              while (i + 1 < l && tokens[i + 1].type === 'text') {
                token = tokens[++i];
                body += '\n' + (token.tokens ? this.parseInline(token.tokens) : token.text);
              }
              out += top ? this.renderer.paragraph(body) : body;
              continue;
            }
          default:
            {
              var errMsg = 'Token with "' + token.type + '" type was not found.';
              if (this.options.silent) {
                console.error(errMsg);
                return;
              } else {
                throw new Error(errMsg);
              }
            }
        }
      }
      return out;
    }

    /**
     * Parse Inline Tokens
     */;
    _proto.parseInline = function parseInline(tokens, renderer) {
      renderer = renderer || this.renderer;
      var out = '',
        i,
        token,
        ret;
      var l = tokens.length;
      for (i = 0; i < l; i++) {
        token = tokens[i];

        // Run any renderer extensions
        if (this.options.extensions && this.options.extensions.renderers && this.options.extensions.renderers[token.type]) {
          ret = this.options.extensions.renderers[token.type].call({
            parser: this
          }, token);
          if (ret !== false || !['escape', 'html', 'link', 'image', 'strong', 'em', 'codespan', 'br', 'del', 'text'].includes(token.type)) {
            out += ret || '';
            continue;
          }
        }
        switch (token.type) {
          case 'escape':
            {
              out += renderer.text(token.text);
              break;
            }
          case 'html':
            {
              out += renderer.html(token.text);
              break;
            }
          case 'link':
            {
              out += renderer.link(token.href, token.title, this.parseInline(token.tokens, renderer));
              break;
            }
          case 'image':
            {
              out += renderer.image(token.href, token.title, token.text);
              break;
            }
          case 'strong':
            {
              out += renderer.strong(this.parseInline(token.tokens, renderer));
              break;
            }
          case 'em':
            {
              out += renderer.em(this.parseInline(token.tokens, renderer));
              break;
            }
          case 'codespan':
            {
              out += renderer.codespan(token.text);
              break;
            }
          case 'br':
            {
              out += renderer.br();
              break;
            }
          case 'del':
            {
              out += renderer.del(this.parseInline(token.tokens, renderer));
              break;
            }
          case 'text':
            {
              out += renderer.text(token.text);
              break;
            }
          default:
            {
              var errMsg = 'Token with "' + token.type + '" type was not found.';
              if (this.options.silent) {
                console.error(errMsg);
                return;
              } else {
                throw new Error(errMsg);
              }
            }
        }
      }
      return out;
    };
    return Parser;
  }();

  /**
   * Marked
   */
  function marked(src, opt, callback) {
    // throw error in case of non string input
    if (typeof src === 'undefined' || src === null) {
      throw new Error('marked(): input parameter is undefined or null');
    }
    if (typeof src !== 'string') {
      throw new Error('marked(): input parameter is of type ' + Object.prototype.toString.call(src) + ', string expected');
    }
    if (typeof opt === 'function') {
      callback = opt;
      opt = null;
    }
    opt = merge({}, marked.defaults, opt || {});
    checkSanitizeDeprecation(opt);
    if (callback) {
      var highlight = opt.highlight;
      var tokens;
      try {
        tokens = Lexer.lex(src, opt);
      } catch (e) {
        return callback(e);
      }
      var done = function done(err) {
        var out;
        if (!err) {
          try {
            if (opt.walkTokens) {
              marked.walkTokens(tokens, opt.walkTokens);
            }
            out = Parser.parse(tokens, opt);
          } catch (e) {
            err = e;
          }
        }
        opt.highlight = highlight;
        return err ? callback(err) : callback(null, out);
      };
      if (!highlight || highlight.length < 3) {
        return done();
      }
      delete opt.highlight;
      if (!tokens.length) return done();
      var pending = 0;
      marked.walkTokens(tokens, function (token) {
        if (token.type === 'code') {
          pending++;
          setTimeout(function () {
            highlight(token.text, token.lang, function (err, code) {
              if (err) {
                return done(err);
              }
              if (code != null && code !== token.text) {
                token.text = code;
                token.escaped = true;
              }
              pending--;
              if (pending === 0) {
                done();
              }
            });
          }, 0);
        }
      });
      if (pending === 0) {
        done();
      }
      return;
    }
    function onError(e) {
      e.message += '\nPlease report this to https://github.com/markedjs/marked.';
      if (opt.silent) {
        return '<p>An error occurred:</p><pre>' + escape(e.message + '', true) + '</pre>';
      }
      throw e;
    }
    try {
      var _tokens = Lexer.lex(src, opt);
      if (opt.walkTokens) {
        if (opt.async) {
          return Promise.all(marked.walkTokens(_tokens, opt.walkTokens)).then(function () {
            return Parser.parse(_tokens, opt);
          })["catch"](onError);
        }
        marked.walkTokens(_tokens, opt.walkTokens);
      }
      return Parser.parse(_tokens, opt);
    } catch (e) {
      onError(e);
    }
  }

  /**
   * Options
   */

  marked.options = marked.setOptions = function (opt) {
    merge(marked.defaults, opt);
    changeDefaults(marked.defaults);
    return marked;
  };
  marked.getDefaults = getDefaults;
  marked.defaults = exports.defaults;

  /**
   * Use Extension
   */

  marked.use = function () {
    var extensions = marked.defaults.extensions || {
      renderers: {},
      childTokens: {}
    };
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    args.forEach(function (pack) {
      // copy options to new object
      var opts = merge({}, pack);

      // set async to true if it was set to true before
      opts.async = marked.defaults.async || opts.async;

      // ==-- Parse "addon" extensions --== //
      if (pack.extensions) {
        pack.extensions.forEach(function (ext) {
          if (!ext.name) {
            throw new Error('extension name required');
          }
          if (ext.renderer) {
            // Renderer extensions
            var prevRenderer = extensions.renderers[ext.name];
            if (prevRenderer) {
              // Replace extension with func to run new extension but fall back if false
              extensions.renderers[ext.name] = function () {
                for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
                  args[_key2] = arguments[_key2];
                }
                var ret = ext.renderer.apply(this, args);
                if (ret === false) {
                  ret = prevRenderer.apply(this, args);
                }
                return ret;
              };
            } else {
              extensions.renderers[ext.name] = ext.renderer;
            }
          }
          if (ext.tokenizer) {
            // Tokenizer Extensions
            if (!ext.level || ext.level !== 'block' && ext.level !== 'inline') {
              throw new Error("extension level must be 'block' or 'inline'");
            }
            if (extensions[ext.level]) {
              extensions[ext.level].unshift(ext.tokenizer);
            } else {
              extensions[ext.level] = [ext.tokenizer];
            }
            if (ext.start) {
              // Function to check for start of token
              if (ext.level === 'block') {
                if (extensions.startBlock) {
                  extensions.startBlock.push(ext.start);
                } else {
                  extensions.startBlock = [ext.start];
                }
              } else if (ext.level === 'inline') {
                if (extensions.startInline) {
                  extensions.startInline.push(ext.start);
                } else {
                  extensions.startInline = [ext.start];
                }
              }
            }
          }
          if (ext.childTokens) {
            // Child tokens to be visited by walkTokens
            extensions.childTokens[ext.name] = ext.childTokens;
          }
        });
        opts.extensions = extensions;
      }

      // ==-- Parse "overwrite" extensions --== //
      if (pack.renderer) {
        (function () {
          var renderer = marked.defaults.renderer || new Renderer();
          var _loop = function _loop(prop) {
            var prevRenderer = renderer[prop];
            // Replace renderer with func to run extension, but fall back if false
            renderer[prop] = function () {
              for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
                args[_key3] = arguments[_key3];
              }
              var ret = pack.renderer[prop].apply(renderer, args);
              if (ret === false) {
                ret = prevRenderer.apply(renderer, args);
              }
              return ret;
            };
          };
          for (var prop in pack.renderer) {
            _loop(prop);
          }
          opts.renderer = renderer;
        })();
      }
      if (pack.tokenizer) {
        (function () {
          var tokenizer = marked.defaults.tokenizer || new Tokenizer();
          var _loop2 = function _loop2(prop) {
            var prevTokenizer = tokenizer[prop];
            // Replace tokenizer with func to run extension, but fall back if false
            tokenizer[prop] = function () {
              for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
                args[_key4] = arguments[_key4];
              }
              var ret = pack.tokenizer[prop].apply(tokenizer, args);
              if (ret === false) {
                ret = prevTokenizer.apply(tokenizer, args);
              }
              return ret;
            };
          };
          for (var prop in pack.tokenizer) {
            _loop2(prop);
          }
          opts.tokenizer = tokenizer;
        })();
      }

      // ==-- Parse WalkTokens extensions --== //
      if (pack.walkTokens) {
        var _walkTokens = marked.defaults.walkTokens;
        opts.walkTokens = function (token) {
          var values = [];
          values.push(pack.walkTokens.call(this, token));
          if (_walkTokens) {
            values = values.concat(_walkTokens.call(this, token));
          }
          return values;
        };
      }
      marked.setOptions(opts);
    });
  };

  /**
   * Run callback for every token
   */

  marked.walkTokens = function (tokens, callback) {
    var values = [];
    var _loop3 = function _loop3() {
      var token = _step.value;
      values = values.concat(callback.call(marked, token));
      switch (token.type) {
        case 'table':
          {
            for (var _iterator2 = _createForOfIteratorHelperLoose(token.header), _step2; !(_step2 = _iterator2()).done;) {
              var cell = _step2.value;
              values = values.concat(marked.walkTokens(cell.tokens, callback));
            }
            for (var _iterator3 = _createForOfIteratorHelperLoose(token.rows), _step3; !(_step3 = _iterator3()).done;) {
              var row = _step3.value;
              for (var _iterator4 = _createForOfIteratorHelperLoose(row), _step4; !(_step4 = _iterator4()).done;) {
                var _cell = _step4.value;
                values = values.concat(marked.walkTokens(_cell.tokens, callback));
              }
            }
            break;
          }
        case 'list':
          {
            values = values.concat(marked.walkTokens(token.items, callback));
            break;
          }
        default:
          {
            if (marked.defaults.extensions && marked.defaults.extensions.childTokens && marked.defaults.extensions.childTokens[token.type]) {
              // Walk any extensions
              marked.defaults.extensions.childTokens[token.type].forEach(function (childTokens) {
                values = values.concat(marked.walkTokens(token[childTokens], callback));
              });
            } else if (token.tokens) {
              values = values.concat(marked.walkTokens(token.tokens, callback));
            }
          }
      }
    };
    for (var _iterator = _createForOfIteratorHelperLoose(tokens), _step; !(_step = _iterator()).done;) {
      _loop3();
    }
    return values;
  };

  /**
   * Parse Inline
   * @param {string} src
   */
  marked.parseInline = function (src, opt) {
    // throw error in case of non string input
    if (typeof src === 'undefined' || src === null) {
      throw new Error('marked.parseInline(): input parameter is undefined or null');
    }
    if (typeof src !== 'string') {
      throw new Error('marked.parseInline(): input parameter is of type ' + Object.prototype.toString.call(src) + ', string expected');
    }
    opt = merge({}, marked.defaults, opt || {});
    checkSanitizeDeprecation(opt);
    try {
      var tokens = Lexer.lexInline(src, opt);
      if (opt.walkTokens) {
        marked.walkTokens(tokens, opt.walkTokens);
      }
      return Parser.parseInline(tokens, opt);
    } catch (e) {
      e.message += '\nPlease report this to https://github.com/markedjs/marked.';
      if (opt.silent) {
        return '<p>An error occurred:</p><pre>' + escape(e.message + '', true) + '</pre>';
      }
      throw e;
    }
  };

  /**
   * Expose
   */
  marked.Parser = Parser;
  marked.parser = Parser.parse;
  marked.Renderer = Renderer;
  marked.TextRenderer = TextRenderer;
  marked.Lexer = Lexer;
  marked.lexer = Lexer.lex;
  marked.Tokenizer = Tokenizer;
  marked.Slugger = Slugger;
  marked.parse = marked;
  var options = marked.options;
  var setOptions = marked.setOptions;
  var use = marked.use;
  var walkTokens = marked.walkTokens;
  var parseInline = marked.parseInline;
  var parse = marked;
  var parser = Parser.parse;
  var lexer = Lexer.lex;

  exports.Lexer = Lexer;
  exports.Parser = Parser;
  exports.Renderer = Renderer;
  exports.Slugger = Slugger;
  exports.TextRenderer = TextRenderer;
  exports.Tokenizer = Tokenizer;
  exports.getDefaults = getDefaults;
  exports.lexer = lexer;
  exports.marked = marked;
  exports.options = options;
  exports.parse = parse;
  exports.parseInline = parseInline;
  exports.parser = parser;
  exports.setOptions = setOptions;
  exports.use = use;
  exports.walkTokens = walkTokens;

}));