influxframework.provide("influxframework.ui.misc");
influxframework.ui.misc.about = function () {
	if (!influxframework.ui.misc.about_dialog) {
		var d = new influxframework.ui.Dialog({ title: __("InfluxFramework Framework") });

		$(d.body).html(
			repl(
				"<div>\
		<p>" +
					__("Open Source Applications for the Web") +
					"</p>  \
		<p><i class='fa fa-globe fa-fw'></i>\
			Website: <a href='https://influxframework.com' target='_blank'>https://influxframework.com</a></p>\
		<p><i class='fa fa-github fa-fw'></i>\
			Source: <a href='https://github.com/influxframework' target='_blank'>https://github.com/influxframework</a></p>\
		<p><i class='fa fa-linkedin fa-fw'></i>\
			Linkedin: <a href='https://linkedin.com/company/influxframework-tech' target='_blank'>https://linkedin.com/company/influxframework-tech</a></p>\
		<p><i class='fa fa-facebook fa-fw'></i>\
			Facebook: <a href='https://facebook.com/influxerp' target='_blank'>https://facebook.com/influxerp</a></p>\
		<p><i class='fa fa-twitter fa-fw'></i>\
			Twitter: <a href='https://twitter.com/influxerp' target='_blank'>https://twitter.com/influxerp</a></p>\
		<hr>\
		<h4>Installed Apps</h4>\
		<div id='about-app-versions'>Loading versions...</div>\
		<hr>\
		<p class='text-muted'>&copy; InfluxFramework LLC </p> \
		</div>",
				influxframework.app
			)
		);

		influxframework.ui.misc.about_dialog = d;

		influxframework.ui.misc.about_dialog.on_page_show = function () {
			if (!influxframework.versions) {
				influxframework.call({
					method: "influxframework.utils.change_log.get_versions",
					callback: function (r) {
						show_versions(r.message);
					},
				});
			} else {
				show_versions(influxframework.versions);
			}
		};

		var show_versions = function (versions) {
			var $wrap = $("#about-app-versions").empty();
			$.each(Object.keys(versions).sort(), function (i, key) {
				var v = versions[key];
				if (v.branch) {
					var text = $.format("<p><b>{0}:</b> v{1} ({2})<br></p>", [
						v.title,
						v.branch_version || v.version,
						v.branch,
					]);
				} else {
					var text = $.format("<p><b>{0}:</b> v{1}<br></p>", [v.title, v.version]);
				}
				$(text).appendTo($wrap);
			});

			influxframework.versions = versions;
		};
	}

	influxframework.ui.misc.about_dialog.show();
};
