<div class="panel_top">
	<h2 class="settings_heading" data-bind="i18n: {'key': '%MODULENAME%/HEADING_COMMON_SETTINGS'}"></h2>
</div>
<div class="panel_center">
	<div class="fields">
		<div class="fieldset">
			<div class="row" data-bind="visible: bAdmin">
				<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_SITENAME'}"></span>
				<input class="value input" data-bind="value: siteName" />
			</div>
			<div class="row" data-bind="visible: aThemes.length > 1">
				<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_THEME'}"></span>
				<select class="value input" data-bind="value: selectedTheme, options: aThemes"></select>
			</div>
			<div class="row" data-bind="visible: bAdmin && aMobileThemes.length > 1">
				<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_MOBILE_THEME'}"></span>
				<select class="value input" data-bind="value: selectedMobileTheme, options: aMobileThemes"></select>
			</div>
			<div class="row">
				<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_LANGUAGE'}"></span>
				<select class="value input" data-bind="value: selectedLanguage, options: aLanguages, optionsText: 'name', optionsValue: 'value'"></select>
			</div>
			<div class="row" data-bind="visible: !bAdmin">
				<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_REFRESH_EVERY'}"></span>
				<select class="value input" data-bind="value: autoRefreshInterval, options: aRefreshIntervals, optionsText: 'name', optionsValue: 'value'"></select>
			</div>
			<div class="row">
				<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_TIME_FORMAT'}"></span>
				
				<span class="value">
					<label class="custom_radio" data-bind="css: {'checked': timeFormat() === Enums.TimeFormat.F12}">
						<span class="icon"></span>
						<input type="radio" id="timeformat_12" data-bind="checked: timeFormat, attr: {'value': Enums.TimeFormat.F12}" />
					</label>
					<label for="timeformat_12" data-bind="i18n: {'key': '%MODULENAME%/LABEL_TIME_FORMAT_12'}"></label>

					<label class="custom_radio" data-bind="css: {'checked': timeFormat() === Enums.TimeFormat.F24}">
						<span class="icon"></span>
						<input type="radio" id="timeformat_24" data-bind="checked: timeFormat, attr: {'value': Enums.TimeFormat.F24}" />
					</label>
					<label for="timeformat_24" data-bind="i18n: {'key': '%MODULENAME%/LABEL_TIME_FORMAT_24'}"></label>
				</span>
			</div>
			<div class="row" data-bind="visible: allowChangeDateFormat">
				<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_DATEFORMAT'}"></span>
				<select class="value input" data-bind="value: selectedDateFormat, options: aDateFormats, optionsText: 'name', optionsValue: 'value'"></select>
			</div>
			<div class="row" data-bind="visible: window.Notification && !bAdmin">
				<span class="value offset" data-bind="css: {'disabled': !isDesktopNotificationsEnable()}">
					<label class="custom_checkbox" data-bind="css: {'checked': desktopNotifications}">
						<span class="icon"></span>
						<input type="checkbox" id="desktopNotifications" data-bind="checked: desktopNotifications, enable: isDesktopNotificationsEnable()" />
					</label>
					<label for="desktopNotifications" data-bind="i18n: {'key': '%MODULENAME%/LABEL_ENABLE_NOTIFICATION'}"></label>
				</span>
			</div>
			<div class="hint row" data-bind="visible: window.Notification && !isDesktopNotificationsEnable() && !bAdmin">
				<span class="value offset" data-bind="i18n: {'key': '%MODULENAME%/INFO_NOTIFICATION_DISABLED'}"></span>
			</div>
		</div>
		<div class="buttons">
			<span class="button" data-bind="click: save, visible: !isSaving()">
				<span data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_SAVE'}"></span>
			</span>
			<span class="button" data-bind="visible: isSaving()">
				<span data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_SAVE_IN_PROGRESS'}"></span>
			</span>
		</div>
	</div>
</div>
