<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			const UIBundle = require('../assets/js/language/bundle.js');

			// setup language
			const locale = require('electron').remote.getGlobal('locale');
			const bundle = UIBundle.getInstance(locale);
		</script>

		<meta charset="UTF-8">

		<link rel="stylesheet" href="../node_modules/@fortawesome/fontawesome-free/css/all.css">
		<link rel="stylesheet" href="../node_modules/codemirror/lib/codemirror.css">
		<link rel="stylesheet" href="../assets/css/bootstrap.min.css">
		<link rel="stylesheet" href="../assets/css/main.css">
		<link rel="stylesheet" href="../assets/css/dark.css">

		<!-- Insert this line above script imports  -->
		<script type="text/javascript">
			if (typeof module === 'object') {
				window.module = module;
				module = undefined;
			}
		</script>

		<script src="../assets/js/jquery.min.js"></script>
		<script src="../assets/js/bootstrap.min.js"></script>

		<!-- Insert this line after script imports -->
		<script type="text/javascript">
			if (window.module) {
				module = window.module;
			}
		</script>

		<!-- Load system -->
		<script type="text/javascript">
			const ipc = require('electron').ipcRenderer;
			const shell = require('electron').shell;
			const UIConfig = require('../assets/js/system/config.js');
			const UITimer = require('../assets/js/system/timer.js');
			const UINetConnection = require('../assets/js/net/connection.js');

			require('codemirror/mode/css/css');
			require('codemirror/addon/edit/closebrackets');
			require('codemirror/addon/display/autorefresh');
			const codemirror = require('codemirror');

			var config = new UIConfig();
			var net = new UINetConnection(config);

			// support i18n on server side
			net.setLocale(locale);
		</script>

	</head>

	<body id="preferences-window">

		<!-- TABS -->
		
		<div class="config-tabs-head">
			<ul>
				<li role="presentation" class="config-tab active">
					<a href="javascript: void(0);" onClick="switchConfigTab('host', this);" id="config-link-host">
						<i class="fas fa-globe-americas"></i> <span><!--Host--></span>
					</a>
				</li>
				
				<li role="presentation" class="config-tab">
					<a href="javascript: void(0);" onClick="switchConfigTab('print', this);" id="config-link-print">
						<i class="fas fa-print"></i> <span><!--Print--></span>
					</a>
				</li>

				<li role="presentation" class="config-tab">
					<a href="javascript: void(0);" onClick="switchConfigTab('layout', this);" id="config-link-layout">
						<i class="fas fa-eye"></i> <span><!--Layout--></span>
					</a>
				</li>
				
				<li role="presentation" class="config-tab">
					<a href="javascript: void(0);" onClick="switchConfigTab('orders', this);" id="config-link-orders">
						<i class="fas fa-box"></i> <span><!--Orders--></span>
					</a>
				</li>

				<li role="presentation" class="config-tab">
					<a href="javascript: void(0);" onClick="switchConfigTab('notif', this);" id="config-link-notif">
						<i class="fas fa-bell"></i> <span><!--Notifications--></span>
					</a>
				</li>

				<li role="presentation" class="config-tab">
					<a href="javascript: void(0);" onClick="switchConfigTab('updates', this);" id="config-link-updates">
						<i class="fas fa-download"></i> <span><!--Updates--></span>
					</a>
				</li>

				<li role="presentation" class="config-tab">
					<a href="javascript: void(0);" onClick="switchConfigTab('license', this);" id="config-link-license">
						<i class="fas fa-key"></i> <span><!--License--></span>
					</a>
				</li>
			</ul>
		</div>

		<div class="config-sections-container">

			<!-- Host Tab -->

			<div class="config-section form-horizontal" id="configsection-host" style="">

				<!-- Domain -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-baseurl"><!--Base URL--></h3>
					</div>

					<div class="panel-body">
						<div class="input-group">
							<span class="input-group-addon"><i class="fas fa-server prepend-icon" style="font-size: 16px;"></i></span>
							<input type="text" size="64" value="" id="input-baseurl" class="form-control"/>
							<span class="input-group-addon">
								<i class="fa fa-circle prepend-icon led green" id="green-led"></i>
								<i class="fa fa-circle prepend-icon led red" id="red-led"></i>
							</span>
						</div>

						<div class="response-message"></div>
					</div>
				</div>

				<div class="panel panel-default" id="unsecurelogin-panel" style="display: none;">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-unsecurelogin"><!--Unsecure Login--></h3>
					</div>

					<div class="panel-body">
						<div id="unsecurelogin-desc" class="alert alert-warning"><!--Desc--></div>

						<div class="checkbox-wrapper">
							<input type="checkbox" name="unsecurelogin" value="1" id="unsecurelogin" />
							<label for="unsecurelogin" id="unsecurelogin-lbl"><!--Use Unsecure Login--></label>
						</div>
					</div>
				</div>

				<!-- Username -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-secureuser"><!--Username--></h3>
					</div>

					<div class="panel-body input-group">
						<span class="input-group-addon"><i class="fas fa-user prepend-icon" style="font-size: 16px;"></i></span>
						<input type="text" size="32" value="" id="input-secureuser" class="form-control" />
					</div>
				</div>

				<!-- Password -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-securekey"><!--Password--></h3>
					</div>

					<div class="panel-body input-group">
						<span class="input-group-addon btn" id="secureuser-reveal-btn"><i class="fas fa-lock prepend-icon" style="font-size: 16px;"></i></span>
						<input type="password" size="32" value="" id="input-securekey" class="form-control" />
					</div>
				</div>

				<!-- Test Button -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-testhost"><!--Test--></h3>
					</div>

					<div class="panel-body input-group">
						<button type="button" class="btn btn-primary" id="button-testhost"><!--Test Connection--></button>
					</div>
				</div>

			</div>

			<!-- Printer Tab -->

			<div class="config-section form-horizontal" id="configsection-print" style="display: none;">

				<!-- Printer Device -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-printerdevice"><!--Device--></h3>
					</div>

					<div class="panel-body">
						<select name="printerdevice"></select>

						<div class="alert alert-danger" id="print-device-error" style="display: none;"><!--Missing Devices--></div>
					</div>
				</div>

				<!-- Auto Print -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-autoprint"><!--Auto Print--></h3>
					</div>

					<div class="panel-body">
						<div class="radio-wrapper">
							<input type="radio" name="autoprint" value="1" id="autoprint-yes" />
							<label for="autoprint-yes" id="autoprint-on"><!--Enabled--></label>
						</div>

						<div class="radio-wrapper">
							<input type="radio" name="autoprint" value="0" id="autoprint-no" />
							<label for="autoprint-no" id="autoprint-off"><!--Disabled--></label>
						</div>
					</div>
				</div>

				<!-- Page Format -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-pageformat"><!--Page Format--></h3>
					</div>

					<div class="panel-body">
						<select name="pageformat">
							<option value="A3" id="pageformat-a3"><!--A3--></option>
							<option value="A4" id="pageformat-a4"><!--A4--></option>
							<option value="A5" id="pageformat-a5"><!--A5--></option>
							<option value="Legal" id="pageformat-legal"><!--Legal--></option>
							<option value="Letter" id="pageformat-letter"><!--Letter--></option>
							<option value="Tabloid" id="pageformat-tabloid"><!--Tabloid--></option>
							<option value="custom" id="pageformat-custom"><!--custom--></option>
						</select>

						<div class="grid pageformat-size">
							<div class="grid-columns">
								<div class="grid-col">
									<label for="page-size-width" id="page-size-width-lbl"><!--Page Width--></label>

									<div class="input-group">
										<input type="number" name="page_size_width" id="page-size-width" min="0" step="any" class="form-control" />
										<span class="input-group-addon system-mm"><!--mm--></span>
									</div>
								</div>

								<div class="grid-col">
									<label for="page-size-height" id="page-size-height-lbl"><!--Page Height--></label>

									<div class="input-group">
										<input type="number" name="page_size_height" id="page-size-height" min="0" step="any" class="form-control" />
										<span class="input-group-addon system-mm"><!--mm--></span>
									</div>
								</div>
							</div>

							<p id="page-size-help"><small><!--Desc--></small></p>

							<hr />

							<div class="grid-columns">
								<div class="grid-col">
									<label for="print-size-width" id="print-size-width-lbl"><!--Print Width--></label>

									<div class="input-group">
										<input type="number" name="print_size_width" id="print-size-width" min="0" step="any" class="form-control" />
										<span class="input-group-addon system-mm"><!--mm--></span>
									</div>
								</div>

								<div class="grid-col">
									<label for="print-size-height" id="print-size-height-lbl"><!--Print Height--></label>

									<div class="input-group">
										<input type="number" name="print_size_height" id="print-size-height" min="0" step="any" class="form-control" />
										<span class="input-group-addon system-mm"><!--mm--></span>
									</div>
								</div>
							</div>

							<p id="print-size-help"><small><!--Desc--></small></p>
						</div>

					</div>
				</div>

				<!-- Page Margins -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-pagemargins"><!--Margins--></h3>
					</div>

					<div class="panel-body">
						<select name="pagemargintype">
							<option value="none" id="pagemargin-none"><!--None--></option>
							<option value="default" id="pagemargin-default"><!--Default--></option>
							<option value="printableArea" id="pagemargin-area"><!--Printable Area--></option>
							<option value="custom" id="pagemargin-custom"><!--Custom--></option>
						</select>

						<div class="grid pagemargins-values">
							<div class="grid-columns">
								<div class="grid-col">
									<label for="page-margin-top" id="page-margin-top-lbl"><!--Top--></label>

									<div class="input-group">
										<input type="number" name="page_margin_top" id="page-margin-top" min="0" step="1" class="form-control" />
										<span class="input-group-addon">px</span>
									</div>
								</div>

								<div class="grid-col">
									<label for="page-margin-bottom" id="page-margin-bottom-lbl"><!--Bottom--></label>

									<div class="input-group">
										<input type="number" name="page_margin_bottom" id="page-margin-bottom" min="0" step="1" class="form-control" />
										<span class="input-group-addon">px</span>
									</div>
								</div>
							</div>

							<div class="grid-columns">
								<div class="grid-col">
									<label for="page-margin-left" id="page-margin-left-lbl"><!--Left--></label>

									<div class="input-group">
										<input type="number" name="page_margin_left" id="page-margin-left" min="0" step="1" class="form-control" />
										<span class="input-group-addon">px</span>
									</div>
								</div>

								<div class="grid-col">
									<label for="page-margin-right" id="page-margin-right-lbl"><!--Right--></label>

									<div class="input-group">
										<input type="number" name="page_margin_right" id="page-margin-right" min="0" step="1" class="form-control" />
										<span class="input-group-addon">px</span>
									</div>
								</div>
							</div>

							<p id="page-margins-help"><small><!--Desc--></small></p>
						</div>

					</div>
				</div>

				<!-- Print Background -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-printbg"><!--Colors--></h3>
					</div>

					<div class="panel-body">
						<div class="radio-wrapper">
							<input type="radio" name="printbg" value="1" id="printbg-yes" />
							<label for="printbg-yes" id="printbg-on"><!--Enabled--></label>
						</div>

						<div class="radio-wrapper">
							<input type="radio" name="printbg" value="0" id="printbg-no" />
							<label for="printbg-no" id="printbg-off"><!--Disabled--></label>
						</div>
					</div>
				</div>

				<!-- Test Printer -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-testprint"><!--Test Printer--></h3>
					</div>

					<div class="panel-body">
						<p id="testprint-desc" class="alert alert-info"><!--Desc--></p>

						<button type="button" class="btn btn-primary" id="button-testprint"><!--Print Test Page--></button>
					</div>
				</div>

			</div>

			<!-- Layout Tab -->

			<div class="config-section form-horizontal" id="configsection-layout" style="display: none;">

				<!-- Theme -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-theme"><!--Theme--></h3>
					</div>

					<div class="panel-body">
						<div class="radio-wrapper">
							<input type="radio" name="theme" value="" id="theme-auto" />
							<label for="theme-auto" id="theme-auto-lbl"><!--Auto--></label>
						</div>

						<div class="radio-wrapper">
							<input type="radio" name="theme" value="light-mode" id="theme-light" />
							<label for="theme-light" id="theme-light-lbl"><!--Light--></label>
						</div>

						<div class="radio-wrapper">
							<input type="radio" name="theme" value="dark-mode" id="theme-dark" />
							<label for="theme-dark" id="theme-dark-lbl"><!--Dark--></label>
						</div>
					</div>
				</div>

				<!-- Print Layout -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-printlayout"><!--Print layout--></h3>
					</div>

					<div class="panel-body">
						<p id="printlayout-help" class="alert alert-info"><!--Desc--></p>

						<div class="radio-wrapper">
							<input type="radio" name="printlayout" value="html" id="printlayout-html" />
							<label for="printlayout-html" id="printlayout-html-lbl"><!--HTML--></label>
						</div>

						<div class="radio-wrapper">
							<input type="radio" name="printlayout" value="plain" id="printlayout-plain" />
							<label for="printlayout-plain" id="printlayout-plain-lbl"><!--Plain--></label>
						</div>

						<div class="radio-wrapper">
							<input type="radio" name="printlayout" value="food" id="printlayout-food" />
							<label for="printlayout-food" id="printlayout-food-lbl"><!--Food--></label>
						</div>
					</div>
				</div>

				<!-- Preview Layout -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-previewlayout"><!--Preview layout--></h3>
					</div>

					<div class="panel-body">
						<p id="previewlayout-help" class="alert alert-info"><!--Desc--></p>

						<div class="radio-wrapper">
							<input type="radio" name="previewlayout" value="html" id="previewlayout-html" />
							<label for="previewlayout-html" id="previewlayout-html-lbl"><!--HTML--></label>
						</div>

						<div class="radio-wrapper">
							<input type="radio" name="previewlayout" value="plain" id="previewlayout-plain" />
							<label for="previewlayout-plain" id="previewlayout-plain-lbl"><!--Plain--></label>
						</div>

						<div class="radio-wrapper">
							<input type="radio" name="previewlayout" value="json" id="previewlayout-json" />
							<label for="previewlayout-json" id="previewlayout-json-lbl"><!--JSON--></label>
						</div>
					</div>
				</div>

				<!-- Advanced -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-printstyle"><!--CSS Style--></h3>
					</div>

					<div class="panel-body no-padding">
						<p id="printstyle-help"><small><!--Desc--></small></p>
						<textarea name="printstyle" id="printstyle"></textarea>
					</div>
				</div>

			</div>

			<!-- Orders Tab -->

			<div class="config-section form-horizontal" id="configsection-orders" style="display: none;">

				<!-- Auto Download -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-autodownload"><!--Auto Download--></h3>
					</div>

					<div class="panel-body">
						<div class="radio-wrapper">
							<input type="radio" name="autodownload" value="1" id="autodownload-auto" />
							<label for="autodownload-auto" id="autodownload-on"><!--Auto--></label>
						</div>

						<div class="radio-wrapper">
							<input type="radio" name="autodownload" value="0" id="autodownload-manual" />
							<label for="autodownload-manual" id="autodownload-off"><!--Manual--></label>
						</div>
					</div>
				</div>

				<!-- Refresh Time -->

				<div class="panel panel-default" id="refresh-time-block">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-refreshtime"><!--Refresh Interval--></h3>
					</div>

					<div class="panel-body input-group">
						<input type="text" id="input-refreshtime" step="1" class="form-control"/>
						<span class="input-group-addon system-seconds"></span>
					</div>
				</div>

				<!-- View -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-view"><!--View--></h3>
					</div>

					<div class="panel-body">
						<div class="radio-wrapper">
							<input type="radio" name="daterange" value="1" id="daterange-option1" />
							<label for="daterange-option1" id="daterange-lbl1"><!--Daily--></label>
						</div>

						<div class="radio-wrapper">
							<input type="radio" name="daterange" value="2" id="daterange-option2" />
							<label for="daterange-option2" id="daterange-lbl2"><!--Weekly--></label>
						</div>

						<div class="radio-wrapper">
							<input type="radio" name="daterange" value="3" id="daterange-option3" />
							<label for="daterange-option3" id="daterange-lbl3"><!--Monthly--></label>
						</div>

						<div class="radio-wrapper">
							<input type="radio" name="daterange" value="4" id="daterange-option4" />
							<label for="daterange-option4" id="daterange-lbl4"><!--All--></label>
						</div>

						<hr />

						<div class="checkbox-wrapper">
							<input type="checkbox" name="showtakeaway" value="1" id="showtakeaway" />
							<label for="showtakeaway" id="showtakeaway-lbl"><!--Show take-away orders--></label>
						</div>

						<div class="checkbox-wrapper">
							<input type="checkbox" name="showrestaurant" value="1" id="showrestaurant" />
							<label for="showrestaurant" id="showrestaurant-lbl"><!--Show restaurant reservations--></label>
						</div>

						<div class="checkbox-wrapper">
							<input type="checkbox" name="showclosure" value="1" id="showclosure" />
							<label for="showclosure" id="showclosure-lbl"><!--Show closures--></label>
						</div>
					</div>
				</div>

				<!-- Sync Orders -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-syncorders"><!--Sync Orders--></h3>
					</div>

					<div class="panel-body">
						<p id="syncorders-desc" class="alert alert-warning"><!--Desc--></p>

						<button type="button" class="btn btn-danger" id="button-syncorders"><!--Restore--></button>
					</div>
				</div>

			</div>

			<!-- Notifications Tab -->

			<div class="config-section form-horizontal" id="configsection-notif" style="display: none;">

				<!-- Desktop Notifications -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-notifications"><!--Desktop Notifications--></h3>
					</div>

					<div class="panel-body">
						<div class="radio-wrapper supported-notifications">
							<input type="radio" name="notifications" value="1" id="notifications-yes" />
							<label for="notifications-yes" id="notifications-enabled"><!--Enabled--></label>
						</div>

						<div class="radio-wrapper supported-notifications">
							<input type="radio" name="notifications" value="0" id="notifications-no" />
							<label for="notifications-no" id="notifications-disabled"><!--Disabled--></label>
						</div>

						<p class="alert alert-danger unsupported-notifications" id="desktop-notif-not-supported">
							<!--Desc-->
						</p>
					</div>
				</div>

				<!-- Notifications Sound -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-playsound"><!--Notifications Sound--></h3>
					</div>

					<div class="panel-body">
						<div class="radio-wrapper">
							<input type="radio" name="playsound" value="1" id="playsound-yes" />
							<label for="playsound-yes" id="playsound-play"><!--Play--></label>
						</div>

						<div class="radio-wrapper">
							<input type="radio" name="playsound" value="0" id="playsound-no" />
							<label for="playsound-no" id="playsound-mute"><!--Mute--></label>
						</div>
					</div>
				</div>

			</div>

			<!-- Updates Tab -->

			<div class="config-section form-horizontal" id="configsection-updates" style="display: none;">

				<!-- Auto Updates -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-autoupdates"><!--Auto Updates--></h3>
					</div>

					<div class="panel-body">
						<div class="radio-wrapper">
							<input type="radio" name="autoupdates" value="1" id="autoupdates-yes" />
							<label for="autoupdates-yes" id="autoupdates-enabled"><!--Enabled--></label>
						</div>

						<div class="radio-wrapper">
							<input type="radio" name="autoupdates" value="0" id="autoupdates-no" />
							<label for="autoupdates-no" id="autoupdates-disabled"><!--Disabled--></label>
						</div>

						<p class="alert alert-info" id="autoupdates-tip">
							<!--Desc-->
						</p>
					</div>
				</div>

			</div>

			<!-- License Tab -->

			<div class="config-section form-horizontal" id="configsection-license" style="display: none;">

				<!-- License Key -->

				<div class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title" id="config-setting-licensekey">
							<span><!--License Key--></span>
							<i style="display:none;"></i>
						</h3>
					</div>

					<div class="panel-body no-padding">
						<textarea name="licensekey"></textarea>

						<p class="alert alert-danger" id="trial-expired" style="display:none;"><!--Desc--></p>

						<button type="button" class="btn btn-danger" id="remove-license" style="display:none;"><!--Remove License--></button>
					</div>
				</div>

			</div>

		</div>

	</body>

	<script type="text/javascript">

		// look for a preferred theme
		ipc.on('set-theme-mode', (event, theme) => {
			if (theme) {
				// force selected theme
				jQuery('body').addClass(theme);
			}
		});

		jQuery(function($) {
			// base url
			$('#input-baseurl').on('change', function() {
				emitConfigUpdated('baseurl', $(this).val());

				verifyConnection();
			});

			// app username
			$('#input-secureuser').on('change', function() {
				emitConfigUpdated('secureuser', $(this).val());

				verifyConnection();
			});

			// app password
			$('#input-securekey').on('change', function() {
				emitConfigUpdated('securekey', $(this).val());

				verifyConnection();
			});

			// app unsecure login
			$('#unsecurelogin').on('change', function() {
				emitConfigUpdated('unsecurelogin', $(this).is(':checked') ? 1 : 0);

				verifyConnection();
			});

			// test connection
			$('#button-testhost').on('click', function() {
				verifyConnection();

				$(this).blur();
			});

			// refresh time
			$('#input-refreshtime').on('change', function() {
				var val = parseInt($(this).val());

				if (isNaN(val) || val < 30) {
					val = 30;
					$(this).val(val);
				}

				emitConfigUpdated('refreshtime', val);
			});

			// toggle refresh time visibility when autodownload status changes
			$('input[name="autodownload"]').on('change', function() {
				if (parseInt($(this).val()) == 1) {
					jQuery('#refresh-time-block').show();
				} else {
					jQuery('#refresh-time-block').hide();
				}
			});

			// page format
			$('select[name="pageformat"]').on('change', function() {
				if ($(this).val() == 'custom') {
					$('.pageformat-size').show();
				} else {
					$('.pageformat-size').hide();
				}
			});

			// page size
			$('input[name="page_size_width"],input[name="page_size_height"]').on('change', function() {
				let val = parseFloat($(this).val());

				// retrieve related "print" field
				let name  = $(this).attr('name').replace(/^page/, 'print');
				let print = $('input[name="' + name + '"]').attr('max', val);

				if (!$(print).val()) {
					// value not set, use the same one
					$(print).val(val);
				}

				// trigger "print" field change to validate the value
				$(print).trigger('change');
			});

			// print size
			$('input[name="print_size_width"],input[name="print_size_height"]').on('change', function() {
				let val = parseFloat($(this).val());
				let max = parseFloat($(this).attr('max'));

				// make sure the value doesn't exceed the maximum page size
				$(this).val(Math.min(max, val));

				// build size object
				let pageSize = {
					width:       parseFloat($('input[name="page_size_width"]').val()),
					height:      parseFloat($('input[name="page_size_height"]').val()),
					printWidth:  parseFloat($('input[name="print_size_width"]').val()),
					printHeight: parseFloat($('input[name="print_size_height"]').val()),
				};

				// notify configuration update
				emitConfigUpdated('pagesize', pageSize);
			});

			// page margins
			$('select[name="pagemargintype"]').on('change', function() {
				if ($(this).val() == 'custom') {
					$('.pagemargins-values').show();
				} else {
					$('.pagemargins-values').hide();
				}
			});

			$('input[name^="page_margin_"]').on('change', function() {
				let margins = {
					top: parseInt($('input[name="page_margin_top"]').val()) || 0,
					bottom: parseInt($('input[name="page_margin_bottom"]').val()) || 0,
					right: parseInt($('input[name="page_margin_right"]').val()) || 0,
					left: parseInt($('input[name="page_margin_left"]').val()) || 0,
				};

				emitConfigUpdated('pagemargins', margins);
			});

			// handle generic radio/select change
			$('input[type="radio"],select').on('change', function() {
				emitConfigUpdated($(this).attr('name'), $(this).val());
			});

			// handle generic checkbox change
			$('input[type="checkbox"]').on('change', function() {
				emitConfigUpdated($(this).attr('name'), $(this).is(':checked') ? 1 : 0);
			});

			// toggle closures option when "showrestaurant" changes
			$('input[name="showrestaurant"]').on('change', function() {
				if (jQuery(this).is(':checked')) {
					// show show closure field
					jQuery('input[name="showclosure"]').parent().show();
				} else {
					// hide show closure field
					jQuery('input[name="showclosure"]')
						.prop('checked', false).trigger('change')
							.parent().hide();
				}
			});

			// handle theme change
			$('input[name="theme"]').on('change', function() {
				// remove existing classes
				let body = $('body').removeClass('light-mode').removeClass('dark-mode');

				let theme = $(this).val();

				if (theme) {
					// force new theme
					body.addClass(theme);
				}
			});

			// handle auto-updates change
			$('input[name="autoupdates"]').on('change', function() {
				if ($(this).val() == 1) {
					$('#autoupdates-tip').hide();
				} else {
					$('#autoupdates-tip').show();
				}
			});

			// handle sync order click
			$('#button-syncorders').on('click', function() {
				emitConfigUpdated('lastrestid', 0, true);
				emitConfigUpdated('lasttakeid', 0, true);
				emitConfigUpdated('resetorders', 1);
			});

			// handle test printer click
			$('#button-testprint').on('click', function() {
				// request a test print
				ipc.send('print-full-page', {id: 'test'});
			});

			// handle remove license click
			$('#remove-license').on('click', function() {
				// unset license key
				emitConfigUpdated('licensekey', '');
				$('textarea[name="licensekey"]').val('').prop('readonly', false);

				// hide button
				$(this).hide();

				// request validation
				ipc.send('validate-license', '');
			});

			$('#secureuser-reveal-btn').on('click', function() {
				const input = $('#input-securekey');

				if (input.is(':password')) {
					input.attr('type', 'text');
					$(this).find('i').removeClass('fa-lock').addClass('fa-unlock');
				} else {
					input.attr('type', 'password');
					$(this).find('i').removeClass('fa-unlock').addClass('fa-lock');
				}
			});
  	
			// open link with the browser
			$(document).on('click', 'a[href^="http"]', function(event) {
			    event.preventDefault();
			    shell.openExternal(this.href);
			    return false;
			});
		});

		// init fields when the configuration is loaded
		config.onLoad(() => {
			// base url
			jQuery('#input-baseurl').val(config.get('baseurl', ''));
			// app username
			jQuery('#input-secureuser').val(config.get('secureuser', ''));
			// app password
			jQuery('#input-securekey').val(config.get('securekey', ''));

			if (config.get('unsecurelogin') == 1) {
				// display "unsecure login" field only when enabled
				jQuery('#unsecurelogin-panel').show();
				jQuery('#unsecurelogin').prop('checked', true);
			}

			// auto print
			jQuery('input[name="autoprint"]')
				.filter('[value="' + config.get('autoprint', 1) + '"]')
					.prop('checked', true);

			// page format
			jQuery('select[name="pageformat"]').val(config.get('pageformat', 'A4')).trigger('change');

			// page size
			let pageSize = config.get('pagesize', {
				width: null,
				height: null,
				printWidth: null,
				printHeight: null
			});

			jQuery('input[name="page_size_width"]').val(pageSize.width);
			jQuery('input[name="page_size_height"]').val(pageSize.height);
			jQuery('input[name="print_size_width"]').val(pageSize.printWidth).attr('max', pageSize.width);
			jQuery('input[name="print_size_height"]').val(pageSize.printHeight).attr('max', pageSize.height);

			// page margins
			let marginType = config.get('pagemargintype', 'none');

			jQuery('select[name="pagemargintype"]').val(marginType).trigger('change');

			let pageMargins = config.get('pagemargins', {
				top: 0,
				bottom: 0,
				left: 0,
				right: 0,
			});

			jQuery('input[name="page_margin_top"]').val(pageMargins.top);
			jQuery('input[name="page_margin_bottom"]').val(pageMargins.bottom);
			jQuery('input[name="page_margin_left"]').val(pageMargins.left);
			jQuery('input[name="page_margin_right"]').val(pageMargins.right);

			// print background
			jQuery('input[name="printbg"]')
				.filter('[value="' + config.get('printbg', 0) + '"]')
					.prop('checked', true);

			// theme
			jQuery('input[name="theme"]')
				.filter('[value="' + config.get('theme', '') + '"]')
					.prop('checked', true);

			// print layout
			jQuery('input[name="printlayout"]')
				.filter('[value="' + config.get('printlayout', 'plain') + '"]')
					.prop('checked', true);

			// preview layout
			jQuery('input[name="previewlayout"]')
				.filter('[value="' + config.get('previewlayout', 'html') + '"]')
					.prop('checked', true);

			// set up code mirror for print style
			const editor = codemirror.fromTextArea($('#printstyle')[0], {
				lineNumbers: true,
				autoRefresh: true,
				autoCloseBrackets: true,
				indentUnit: 4,
				mode: 'css',
			});

			// fill existing code
			editor.setValue(config.get('printstyle', ''));

			// handle change events
			editor.on('change', (editor) => {
				// catch change event
				UITimer.delay(() => {
					// use a debounce of 500 ms in order to
					// prevent tens of contiguous savings
					emitConfigUpdated('printstyle', editor.getValue());
				}, 500, 'printstyle');
			});

			// auto download
			jQuery('input[name="autodownload"]')
				.filter('[value="' + config.get('autodownload', 1) + '"]')
					.prop('checked', true);

			// refresh time
			jQuery('#input-refreshtime').val(config.get('refreshtime', 120));

			if (config.get('autodownload', 1) == 1) {
				jQuery('#refresh-time-block').show();
			} else {
				jQuery('#refresh-time-block').hide();
			}

			// desktop notifications
			jQuery('input[name="notifications"]')
				.filter('[value="' + config.get('notifications', 1) + '"]')
					.prop('checked', true);

			// play sound
			jQuery('input[name="playsound"]')
				.filter('[value="' + config.get('playsound', 1) + '"]')
					.prop('checked', true);

			// date range
			jQuery('input[name="daterange"]')
				.filter('[value="' + config.get('daterange', 2) + '"]')
					.prop('checked', true);

			// show take-away orders
			if (config.get('showtakeaway', 1)) {
				jQuery('input[name="showtakeaway"]').prop('checked', true);
			}

			// show restaurant reservations
			if (config.get('showrestaurant', 1)) {
				jQuery('input[name="showrestaurant"]').prop('checked', true);

				// show closures
				if (config.get('showclosure', 0)) {
					jQuery('input[name="showclosure"]').prop('checked', true);
				}
			} else {
				// hide show closure field
				jQuery('input[name="showclosure"]').parent().hide();
			}

			// check if we have a connection status
			var connectionStatus = config.get('connectionstatus', null);

			if (connectionStatus !== null) {
				if (connectionStatus.status == 1) {
					// connection up and running
					jQuery('#green-led').addClass('active');
				} else {
					// connection failed
					jQuery('#red-led').addClass('active');

					// look for a registered message
					if (connectionStatus.error !== undefined && connectionStatus.error.length) {
						jQuery('.response-message').addClass('error');
						jQuery('.response-message').html(connectionStatus.error);
						jQuery('.response-message').show();
					}
				}
			}

			// auto-updates
			jQuery('input[name="autoupdates"]')
				.filter('[value="' + config.get('autoupdates', 1) + '"]')
					.prop('checked', true)
						.trigger('change');

			let licenseKey = config.get('licensekey', '');

			// handle license key change
			jQuery('textarea[name="licensekey"]').val(licenseKey).on('keyup paste', function(event) {
				// use a debounce of 2 seconds in order to trigger
				// the validation after stopping typing
				let ms = 2000;

				if (event.type == 'paste') {
					// immediately launch in case of paste event
					ms = 16;
				}

				let key = jQuery(this).val();

				// proceed only in case the key has changed or pasted
				if (event.type == 'paste' || licenseKey != key) {
					UITimer.delay(() => {
						licenseKey = jQuery(this).val().trim();

						// hide status message
						jQuery('#config-setting-licensekey i').hide();

						// temporarily disable textarea edit
						jQuery(this).prop('readonly', true);

						// ask the main process to validate the license key
						ipc.send('validate-license', licenseKey);
					}, ms, 'licensekey');
				}
			});

			id = config.get('config-default-tab', null);

			if (id !== null) {
				// auto-focus last selected tab
				switchConfigTab(id);
			}
		});

		/**
		 * Helper function used to access the selected section.
		 *
		 * @param 	integer  id    The section ID.
		 * @param 	mixed    link  The section link (optional).
		 *
		 * @return 	void
		 */
		function switchConfigTab(id, link) {
			if (link === undefined) {
				// missing link, recover it now
				link = jQuery('#config-link-' + id);
			}

			if (jQuery(link).hasClass('disabled')) {
				return false;
			}

			jQuery('.config-tab').removeClass('active');

			jQuery(link).parent().addClass('active');

			jQuery('.config-section').hide();
			jQuery('#configsection-' + id).show();

			emitConfigUpdated('config-default-tab', id);
		}

		/**
		 * Helper function used to inform all the subscribers
		 * that the configuration settings changed.
		 *
		 * @param 	string   key       The configuration key.
		 * @param 	mixed    val       The configuration value.
		 * @param 	boolean  skipsave  True to skip saving.
		 *
		 * @return 	void
		 */
		function emitConfigUpdated(key, val, skipsave) {
			// always skip saving
			config.set(key, val);

			// let the main process choose whether to save
			ipc.send('config-updated', {key: key, val: val, skipsave: skipsave});
		}

		/**
		 * Receive from the main process a list of supported
		 * printer devices.
		 *
		 * @param 	Event  event     The emitted event.
		 * @param 	array  printers  A list of devices.
		 */
		ipc.on('supported-printers', (event, printers) => {
			let select = jQuery('select[name="printerdevice"]');
			select.html('');

			if (printers.length) {
				// set up dropdown
				printers.forEach((device) => {
					let option = jQuery('<option></option>');

					option.attr('value', device.name);
					option.html(device.displayName);

					select.append(option);
				});

				/**
				 * Auto-set device once the configuration is loaded.
				 *
				 * @since 1.1.0
				 */
				config.onLoad(() => {
					// pre-select device, if needed
					if (config.get('printerdevice')) {
						select.val(config.get('printerdevice'));
					}
				});
			} else {
				// no available devices, hide select and show
				// alert message
				select.hide();
				jQuery('#print-device-error').show();
			}
		});

		/**
		 * Receive from the main process the support flag
		 * for desktop notifications.
		 *
		 * @param 	Event    event      The emitted event.
		 * @param 	boolean  supported  True if supported, false otherwise.
		 */
		ipc.on('supported-notifications', (event, supported) => {
			if (supported) {
				jQuery('.unsupported-notifications').hide();
				jQuery('.supported-notifications').show();
			} else {
				jQuery('.supported-notifications').hide();
				jQuery('.unsupported-notifications').show();
			}
		});

		/**
		 * Helper function used to check the connection between
		 * the application and the remote host.
		 *
		 * @return 	void
		 */
		function verifyConnection() {
			jQuery('.led').removeClass('active');

			jQuery('.response-message').hide();
			jQuery('.response-message').removeClass('error').removeClass('success');
			jQuery('.response-message').html('');

			/**
			 * Do not perform a request in case of an empty field, so that the system
			 * won't register a failure related to the IP address.
			 *
			 * @since 1.1.0
			 */
			if (!config.get('baseurl') || !config.get('secureuser') || !config.get('securekey')) {
				jQuery('#red-led').addClass('active');
				jQuery('.response-message').addClass('error');
				jQuery('.response-message').html(bundle.__('error.missing')).show();
				return false;
			}

			net.setConfig(config)
				.prepare('connection_ping')
				.post((error, response, body) => {
					// make sure we receive no error
					if (!error) {
						// make sure we have a valid HTTP code
						if (response.statusCode == 200) {
							// make sure the response is correct
							if (body.status == 1) {
								jQuery('#green-led').addClass('active');
								jQuery('.response-message').html(bundle.__('system.connected'));
								jQuery('.response-message').addClass('success');
								jQuery('.response-message').show();

								// save connection status
								emitConfigUpdated('connectionstatus', body);

								// exit here
								return;
							} else {
								// try to fetch a possible error message
								switch (body.errcode) {
									case 101:
										body.error = bundle.__('error.connection.user.emptyname');
										break;

									case 102:
										body.error = bundle.__('error.connection.user.emptypass');
										break;
									
									case 103:
										body.error = bundle.__('error.connection.user.login');
										break;

									case 104:
										body.error = bundle.__('error.connection.user.blocked');
										break;

									case 105:
										body.error = bundle.__('error.connection.user.ipauth');
										break;

									case 204:
										body.error = bundle.__('error.connection.event.auth');
										break;
								}

								/**
								 * In case the system returned a 101 error (no username) and the username
								 * was correctly specfified instead, then display a new setting to include
								 * the credentials within the URL.
								 *
								 * @since 1.1.0
								 */
								if (body.errcode == 101 && jQuery('#input-secureuser').val().length) {
									jQuery('#unsecurelogin-panel').show();
								}

								jQuery('.response-message').html(body.error);
							}
						} else {
							jQuery('.response-message').html(response.statusCode + ' : ' + response.statusMessage);
						}
					} else {
						if (config.get('baseurl', '').length == 0) {
							jQuery('.response-message').html(bundle.__('error.connection.system.emptyurl'));
						} else {
							jQuery('.response-message').html(error);
						}
					}

					// flag as not active
					jQuery('#red-led').addClass('active');
					jQuery('.response-message').addClass('error');
					jQuery('.response-message').show();

					emitConfigUpdated('connectionstatus', {status: 0, error: jQuery('.response-message').text()});
				});
		}

		/**
		 * Subscribe for receiving notifications
		 * about the expiration of the trial version.
		 *
		 * @param 	Event  event  The emitted event.
		 */
		ipc.on('trial-expired', (event) => {
			let textarea = jQuery('textarea[name="licensekey"]');

			// disabled not needed panels
			toggleConfigMenuItems(false);

			// remove full-height style from license key field
			textarea.parent().removeClass('full-height');

			// display "trial expired" alert
			jQuery('#trial-expired').show();

			// auto-focus license tab
			switchConfigTab('license');
			// focus license key textarea
			textarea.focus();
		});

		/**
		 * Receives a response about the validation of
		 * the license key.
		 *
		 * @param 	Event   event  The emitted event.
		 * @param   object  arg    The response. 
		 */
		ipc.on('license-validated', (event, arg) => {
			if (arg.result) {
				if (arg.key) {
					// save license key
					emitConfigUpdated('licensekey', arg.key);
				}

				// display status badge
				jQuery('#config-setting-licensekey i').attr('class', 'fas fa-check-circle').show();

				// always hide the expired trial message
				jQuery('#trial-expired').hide();

				// display button to remove the license
				jQuery('#remove-license').show();

				// make textarea not editable
				jQuery('textarea[name="licensekey"]').prop('readonly', true);

				// re-enable all panels
				toggleConfigMenuItems(true);
			} else {
				// re-enable textarea edit
				jQuery('textarea[name="licensekey"]').prop('readonly', false);

				// ignore error message in case of empty key
				if (arg.key) {
					// display status badge
					jQuery('#config-setting-licensekey i').attr('class', 'fas fa-times-circle').show();

					// raise prompt with a delay to apply the badge
					setTimeout(() => {
						// prompt error message
						alert(arg.error);
					}, 32);
				} else {
					// hide status badge
					jQuery('#config-setting-licensekey i').hide();
				}
			}
		});

		/**
		 * Helper function used to activate/deactivate the
		 * configuration menu items.
		 *
		 * @param 	boolean  is  True is active, false otherwise.
		 *
		 * @return 	void
		 */
		function toggleConfigMenuItems(is) {
			let elems = jQuery('#config-link-print')
				.add('#config-link-layout')
				.add('#config-link-orders')
				.add('#config-link-notif');

			if (is) {
				elems.removeClass('disabled');
			} else {
				elems.addClass('disabled');
			}
		}

		// set up translations
		jQuery(function($) {
			// Navigation links
			$('#config-link-host span').html(bundle.__('config.tabs.host'));
			$('#config-link-print span').html(bundle.__('config.tabs.print'));
			$('#config-link-layout span').html(bundle.__('config.tabs.layout'));
			$('#config-link-orders span').html(bundle.__('config.tabs.orders'));
			$('#config-link-notif span').html(bundle.__('config.tabs.notifications'));
			$('#config-link-updates span').html(bundle.__('config.tabs.updates'));
			$('#config-link-license span').html(bundle.__('config.tabs.license'));

			// Host section
			$('#config-setting-baseurl').html(bundle.__('config.host.baseurl'));
			$('#config-setting-secureuser').html(bundle.__('config.host.secureuser'));
			$('#config-setting-securekey').html(bundle.__('config.host.securekey'));
			$('#config-setting-testhost').html(bundle.__('config.host.test'));
			$('#button-testhost').html(bundle.__('config.host.testbtn'));
			
			$('#config-setting-unsecurelogin').html(bundle.__('config.host.unsecure.title'));
			$('#unsecurelogin-desc').html(bundle.__('config.host.unsecure.warn'));
			$('#unsecurelogin-lbl').html(bundle.__('config.host.unsecure.label'));

			// Printer device
			$('#config-setting-printerdevice').html(bundle.__('config.print.device.title'));
			$('#print-device-error').html(bundle.__('config.print.device.error'));

			// Page format
			$('#config-setting-pageformat').html(bundle.__('config.print.pageformat.title'));
			$('#pageformat-a3').html(bundle.__('config.print.pageformat.options.a3'));
			$('#pageformat-a4').html(bundle.__('config.print.pageformat.options.a4'));
			$('#pageformat-a5').html(bundle.__('config.print.pageformat.options.a5'));
			$('#pageformat-legal').html(bundle.__('config.print.pageformat.options.legal'));
			$('#pageformat-letter').html(bundle.__('config.print.pageformat.options.letter'));
			$('#pageformat-tabloid').html(bundle.__('config.print.pageformat.options.tabloid'));
			$('#pageformat-custom').html(bundle.__('config.print.pageformat.options.custom'));

			// Page size
			$('#page-size-width-lbl').html(bundle.__('config.print.pageformat.size.page.width'));
			$('#page-size-height-lbl').html(bundle.__('config.print.pageformat.size.page.height'));
			$('#page-size-help small').html(bundle.__('config.print.pageformat.size.page.help'));
			$('#print-size-width-lbl').html(bundle.__('config.print.pageformat.size.print.width'));
			$('#print-size-height-lbl').html(bundle.__('config.print.pageformat.size.print.height'));
			$('#print-size-help small').html(bundle.__('config.print.pageformat.size.print.help'));

			// Page margins
			$('#config-setting-pagemargins').html(bundle.__('config.print.pagemargins.title'));
			$('#pagemargin-none').html(bundle.__('config.print.pagemargins.options.none'));
			$('#pagemargin-default').html(bundle.__('config.print.pagemargins.options.default'));
			$('#pagemargin-area').html(bundle.__('config.print.pagemargins.options.area'));
			$('#pagemargin-custom').html(bundle.__('config.print.pagemargins.options.custom'));
			$('#page-margin-top-lbl').html(bundle.__('config.print.pagemargins.position.top'));
			$('#page-margin-bottom-lbl').html(bundle.__('config.print.pagemargins.position.bottom'));
			$('#page-margin-left-lbl').html(bundle.__('config.print.pagemargins.position.left'));
			$('#page-margin-right-lbl').html(bundle.__('config.print.pagemargins.position.right'));
			$('#page-margins-help small').html(bundle.__('config.print.pagemargins.help'));

			// Auto print setting
			$('#config-setting-autoprint').html(bundle.__('config.print.autoprint.title'));
			$('#autoprint-on').html(bundle.__('config.print.autoprint.enabled'));
			$('#autoprint-off').html(bundle.__('config.print.autoprint.disabled'));

			// Print background setting
			$('#config-setting-printbg').html(bundle.__('config.print.background.title'));
			$('#printbg-on').html(bundle.__('config.print.background.on'));
			$('#printbg-off').html(bundle.__('config.print.background.off'));

			// Test printing
			$('#config-setting-testprint').html(bundle.__('config.print.test.title'));
			$('#button-testprint').html(bundle.__('config.print.test.button'));
			$('#testprint-desc').html(bundle.__('config.print.test.help'));

			// Theme setting
			$('#config-setting-theme').html(bundle.__('config.layout.theme.title'));
			$('#theme-auto-lbl').html(bundle.__('config.layout.theme.options.auto'));
			$('#theme-light-lbl').html(bundle.__('config.layout.theme.options.light'));
			$('#theme-dark-lbl').html(bundle.__('config.layout.theme.options.dark'));

			// Print layout setting
			$('#config-setting-printlayout').html(bundle.__('config.layout.print.title'));
			$('#printlayout-help').html(bundle.__('config.layout.print.help'));
			$('#printlayout-html-lbl').html(bundle.__('config.layout.template.html'));
			$('#printlayout-plain-lbl').html(bundle.__('config.layout.template.plain'));
			$('#printlayout-food-lbl').html(bundle.__('config.layout.template.food'));

			// Preview layout setting
			$('#config-setting-previewlayout').html(bundle.__('config.layout.preview.title'));
			$('#previewlayout-help').html(bundle.__('config.layout.preview.help'));
			$('#previewlayout-html-lbl').html(bundle.__('config.layout.template.html'));
			$('#previewlayout-plain-lbl').html(bundle.__('config.layout.template.plain'));
			$('#previewlayout-json-lbl').html(bundle.__('config.layout.template.json'));

			// Print style
			$('#config-setting-printstyle').html(bundle.__('config.layout.style.title'));
			$('#printstyle-help small').html(bundle.__('config.layout.style.help'));

			// Auto-download setting
			$('#config-setting-autodownload').html(bundle.__('config.orders.download.title'));
			$('#autodownload-on').text(bundle.__('config.orders.download.auto'));
			$('#autodownload-off').text(bundle.__('config.orders.download.manual'));

			// Refresh interval setting
			$('#config-setting-refreshtime').html(bundle.__('config.orders.refreshtime'));

			// View settings
			$('#config-setting-view').html(bundle.__('config.orders.view.title'));
			$('#daterange-lbl1').html(bundle.__('config.orders.view.daily'));
			$('#daterange-lbl2').html(bundle.__('config.orders.view.weekly'));
			$('#daterange-lbl3').html(bundle.__('config.orders.view.monthly'));
			$('#daterange-lbl4').html(bundle.__('config.orders.view.all'));
			$('#showtakeaway-lbl').html(bundle.__('config.orders.view.takeaway'));
			$('#showrestaurant-lbl').html(bundle.__('config.orders.view.restaurant'));
			$('#showclosure-lbl').html(bundle.__('config.orders.view.closure'));

			// Sync orders
			$('#config-setting-syncorders').html(bundle.__('config.orders.sync.title'));
			$('#button-syncorders').html(bundle.__('config.orders.sync.button'));
			$('#syncorders-desc').html(bundle.__('config.orders.sync.help'));

			// Desktop notifications
			$('#config-setting-notifications').html(bundle.__('config.notifications.desktop.title'));
			$('#notifications-enabled').text(bundle.__('config.notifications.desktop.enabled'));
			$('#notifications-disabled').text(bundle.__('config.notifications.desktop.disabled'));
			$('#desktop-notif-not-supported').text(bundle.__('config.notifications.desktop.unsupported'));

			// Notifications sound
			$('#config-setting-playsound').html(bundle.__('config.notifications.sound.title'));
			$('#playsound-play').text(bundle.__('config.notifications.sound.play'));
			$('#playsound-mute').text(bundle.__('config.notifications.sound.mute'));

			// Auto updates
			$('#config-setting-autoupdates').html(bundle.__('config.updates.auto.title'));
			$('#autoupdates-enabled').text(bundle.__('config.updates.auto.enabled'));
			$('#autoupdates-disabled').text(bundle.__('config.updates.auto.disabled'));
			$('#autoupdates-tip').text(bundle.__('config.updates.auto.tip'));

			// License key
			$('#config-setting-licensekey span').html(bundle.__('config.license.key'));
			$('textarea[name="licensekey"]').attr('placeholder', bundle.__('config.license.placeholder'));
			$('#trial-expired').html(bundle.__('config.license.expired'));
			$('#remove-license').html(bundle.__('config.license.remove'));

			// System
			$('.system-yes').text(bundle.__('system.yes'));
			$('.system-no').text(bundle.__('system.no'));
			$('.system-seconds').text(bundle.__('system.seconds'));
			$('.system-mm').text(bundle.__('system.millimeters.short'));
		});

	</script>
</html>