<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="cache-control" content="max-age=0"/><meta http-equiv="cache-control" content="no-cache"/><meta http-equiv="expires" content="0"/><meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/><meta http-equiv="pragma" content="no-cache"/><!-- title is set from code behind --><title></title><!-- <link rel="icon" type="image/ico" href="favicon.ico" /> --><!--<link rel="stylesheet" href="Styles/main.min.css" type="text/css" />--><!-- <link rel="stylesheet" href="woodford.css" type="text/css" /> --><!-- <link rel="stylesheet" href="Styles/woodfordsprite.css" type="text/css" /> --><!-- <link rel="stylesheet" href="../CommonUI/Styles/commonui.css" type="text/css" /> --><!-- <link rel="stylesheet" href="../CommonUI/Styles/commonuisprite.css" type="text/css" /> --><!-- <link rel="stylesheet" href="../RescoSDK/Controls/Styles/controls.css" type="text/css" /> --><!-- <link rel="stylesheet" href="../RescoSDK/Controls/RuleEditor/Styles/ruleEditor.css" type="text/css" /> --><script src="../../ClientGlobalContext.js.aspx"></script><base href=""><link href="1292.f75cc45eb2346479.css" rel="stylesheet"><link href="145.89f66716ebec3f46.css" rel="stylesheet"><link href="1500.ae2837c2dea7aaab.css" rel="stylesheet"><link href="5216.042b27cf6d37770a.css" rel="stylesheet"><link href="8599.292ac18e4e69ffeb.css" rel="stylesheet"><link href="1583.3db1483c0883ec5b.css" rel="stylesheet"><link href="3567.23a689563184a2fc.css" rel="stylesheet"><link href="630.f3541ffbf6974a8c.css" rel="stylesheet"><link href="main_7beda613.e423a00f7cd9cbe7.css" rel="stylesheet"><link href="main_31f8ea5a.a7afe6101215a7c0.css" rel="stylesheet"><link href="main_017397ff.a1c0988ba603fbce.css" rel="stylesheet"><link href="main_4c120c8f.1a0fc98e46059f74.css" rel="stylesheet"><script type="text/html" id="tmplAppForm">
	<!-- ko if: Initializing() -->
	<table class="initializeAppTable">
		<tr>
			<td>
				<!-- ko if: !Error() -->
				<div class="sk-circle">
					<div class="sk-circle1 sk-child"></div>
					<div class="sk-circle2 sk-child"></div>
					<div class="sk-circle3 sk-child"></div>
					<div class="sk-circle4 sk-child"></div>
					<div class="sk-circle5 sk-child"></div>
					<div class="sk-circle6 sk-child"></div>
					<div class="sk-circle7 sk-child"></div>
					<div class="sk-circle8 sk-child"></div>
					<div class="sk-circle9 sk-child"></div>
					<div class="sk-circle10 sk-child"></div>
					<div class="sk-circle11 sk-child"></div>
					<div class="sk-circle12 sk-child"></div>
				</div>
				<span class="initializeAppText" data-bind="text: InitializeState"></span>
				<!-- /ko -->
				<!-- ko if: Error() -->
				<div class="errorAppText" data-bind="html: Error"></div>
				<!-- /ko -->
			</td>
		</tr>
	</table>
	<!-- /ko -->
	<!-- ko if: !Initializing() -->
	<div class="mainDiv" style="display: flex; flex-direction: column; width: 100%; height: 100%; overflow: auto;">
		<!-- ko if: ShowTitleBar() -->
		<div
			style="flex: 0 1 47px; margin: 0px; padding: 0px"
			data-bind="template: {name: 'tmplAppFormTitleBar', afterRender: function(elements, form) { TitleAppended(elements); }}"
		></div>
		<!-- /ko -->
		<!-- ko foreach: pageStack -->
		<div
			class="page"
			style="height: calc(100% - 60px)"
			data-bind="template: { name: TemplateName, afterRender: function(elements, form) { $data.Appended(elements); } }, style: { display: $data === $parent.Page() ? 'block' : 'none'}"
		></div>
		<!-- /ko -->
	</div>
	<div class="sidePanel" data-bind="visible: isSidePanelOpen">
		<div class="sideHeader">
			<div class="sideHeaderDiv">
				<i class="icon-commonui_AI_Help_32"></i>
				<span class="helpSpan">Help</span>
				<a class="helpLink" style="text-align: right;" href="https://resconet.atlassian.net/servicedesk/customer/portal/3" target="_blank"
					>Support portal</a
				>
			</div>
			<div class="closeDiv">
				<glyph-button data-bind="click: onSidePanelCloseClick" style="color: #0073E6" params="glyph: closeGlyph"></glyph-button>
			</div>
		</div>
		<div class="sideContent">
			<chat-control
				class="nohide"
				params="assistant: assistant, title: 'Resco AI Help', subtitle: 'What would you like to know?', promptPlaceholder: 'Enter your question.', waitingPlaceholder: 'Please wait…'"
			></chat-control>
		</div>
	</div>

	<!-- ko foreach: Dialogs -->
	<!-- ko template: { name: 'tmplRescoDialog', afterRender: Append.bind($data) } -->
	<!-- /ko -->
	<!-- /ko -->
	<!-- ko if: isMarketingAnnouncementVisible -->
	<marketing-announcement params="marketingAnnouncementParams: marketingAnnouncementParams"></marketing-announcement>
	<!-- /ko -->
	<!-- /ko -->
</script>

<script type="text/html" id="tmplAppFormTitleBar">
	<nav class="navigation-panel">
		<div class="breadcrumbs">
			<!-- ko if: Page() -->
			<!-- ko if: !CanGoBack() -->
			<a class="icon-box btn-disabled"
				><span data-bind="attr: { class: RESCO ? 'icon-commonui_icon_woodford' : 'icon-commonui_icon_dynamicsfieldservice' }"></span
			></a>
			<!-- /ko -->
			<!-- ko if: CanGoBack() -->
			<a data-testid="back-arrow" class="back-button navBtn" data-bind="click: ClosePage"><i class="icon-commonui_icon_back"></i></a>
			<!-- /ko -->
			<!-- ko foreach: HistoryItems -->
			<a class="btn-disabled" data-bind="text: $data"></a>
			<!-- /ko -->
			<a class="btn-disabled"><p style="overflow: hidden;text-overflow: ellipsis;max-width: 300px" data-bind="text: Page().Title"></p></a>
			<!-- /ko -->
		</div>
		<!-- ko if: UseGlobalSearch() -->
		<div class="search-wrapper">
			<input class="global-search" data-bind="value: FilterText, valueUpdate: 'keyup'" placeholder="Search" type="text" />
		</div>
		<!-- /ko -->
		<div class="nav-mobile">
			<a id="nav-toggle" class="navBtn"><span class="icon-commonui_icon_menu"></span></a>
		</div>
		<!-- ko if: RESCO -->
		<ul class="nav-list">
			<!-- ko if: LivePreviewPopup() -->
			<li
				class="nav-element"
				style="display: flex; align-items: center; gap: 8px; display: relative; padding: 0px 1em;border-left: solid 1px rgba(106, 106, 106, 0.18)"
			>
				<div class="live-preview-toggle" data-bind="css: { 'is-on': LivePreviewActive() }">
					<span class="live-preview-label">Live Preview</span>
					<button class="toggle-button" data-bind="click: onLivePreviewClick">
						<span class="toggle-icon" data-bind="text: LivePreviewActive() ? '◉' : '◎'"></span>
						<span class="toggle-text" data-bind="text: LivePreviewActive() ? 'On' : 'Off'"></span>
					</button>
				</div>

				<!-- ko if: LivePreviewPopup()?.visible() -->
				<div
					style="position: absolute; right: -0px; top: 100%; background: white; border: 1px solid #ccc; box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 10000;"
					data-bind="template: { name: LivePreviewPopup().template, data: LivePreviewPopup() }"
				></div>
				<!-- /ko -->
			</li>
			<!-- /ko -->
			<li class="nav-element" data-bind="if: UserName() !== ''" style="border-left: solid 1px rgba(106, 106, 106, 0.18)">
				<div class="nav-element__userName">
					<a data-bind="text: UserName"></a>
				</div>
				<i class="icon-commonui_Avatar_32" style="width: 32px; padding-right: 12px; align-self: center"></i>
			</li>
			<li class="nav-element">
				<a class="navBtn help-link">
					<i data-bind="css: {'icon-commonui_AI_Help_32': assistant(), 'icon-commonui_Help_32': !assistant()}"></i>
				</a>
				<ul class="nav-dropdown help-options">
					<!-- ko ifnot: assistant -->
					<li class="">
						<a href="https://resco.net" class="navBtn" target="_blank">Resco.net</a>
						<a href="https://resconet.atlassian.net/servicedesk/customer/portal/3" class="navBtn" target="_blank">Support portal</a>
					</li>
					<!-- /ko -->
				</ul>
			</li>
		</ul>
		<!-- /ko -->
	</nav>
</script>
<script type="text/html" id="tmplBasePage">
	<div style="background: white; flex: 1 1 100%; display: flex; flex-direction: row; overflow: hidden; height: 100%">
		<div style="display: flex; flex-direction: column; width: 100%; height: 100%; overflow: auto">
			<!-- ko if: Toolbar && Toolbar.Visible() -->
			<div data-bind="template: { name: Toolbar.TemplateName, data: Toolbar }"></div>
			<!-- /ko -->
			<div
				style="background: white; flex: 1 1 100%; display: flex; flex-direction: row; border-top: solid 1px #B7B7B7; height: 100px;overflow:hidden; position: relative;"
			>
				<!-- ko if: LeftPanel() && LeftPanel().visible() -->
				<div
					id="leftPanel"
					style="display: flex; flex-direction: column; height: 100%; flex: 0 0 auto; border-right: solid 1px #B7B7B7; box-sizing: border-box;transition : width 0.5s ease;"
					data-bind="style: { width: LeftPanelWidth() + 'px'}, css: {slideAway: LeftPanel().isCollapsed()}"
				>
					<!-- ko template: {name: 'tmplTabbedPanel', data: LeftPanel }--><!-- /ko -->
				</div>
				<!-- /ko -->
				<!-- ko if: Editor() -->
				<div
					style="display: flex; flex:1; flex-direction: column;transition : width 0.5s ease,;"
					data-bind="style: { width: 'calc(100% - ' + (LeftPanelWidth() + RightPanelWidth()) + 'px)' }"
				>
					<!-- ko template: { name: 'tmplRescoEditor', data: Editor, afterRender: function(elements, editor) { Editor().Appended(elements) } } --><!-- /ko -->
				</div>
				<!-- /ko -->
				<!-- ko if: RightPanel() && RightPanel().visible() -->
				<div
					id="propertyBar"
					style="height: 100%; flex: 0 0 auto; border-left: solid 1px #B7B7B7; box-sizing: border-box;transition : width 0.5s ease;"
					data-bind="style: { width: RightPanelWidth() + 'px'}, css: {slideAway: RightPanel().isCollapsed()}"
				>
					<!-- ko template: {name: 'tmplTabbedPanel', data: RightPanel }--><!-- /ko -->
				</div>
				<!-- /ko -->
			</div>
		</div>
	</div>
	<!-- ko if: StatusBarContent() -->
	<div
		style="background: #0066CC; flex: 0 1 30px; color: white; box-sizing: border-box; overflow: hidden"
		data-bind="template: { name: StatusBarContent }"
	></div>
	<!-- /ko -->
</script>
<script id="tmplBuilderDialog" type="text/html">
	<div data-bind="attr:{ class: createCssClass() }">
		<header>
			<h3 data-bind="text: Caption"></h3>
			<div class="header__buttons">
				<i class="commonuisprite icon-commonui_DialogExpand_24" data-bind="visible: IsCloseVisible"></i>
				<i id="dialogCloseButton" class="commonuisprite icon-commonui_Close_24" data-bind="click: OnCloseClicked, visible: IsCloseVisible"></i>
			</div>
		</header>
		<main data-bind="style: { margin: Margin + 'px', padding: Padding != null ? Padding + 'px' : ''}">
			<!-- ko if: DialogTemplateName -->
			<!-- ko template: { name: DialogTemplateName } --><!-- /ko -->
			<!-- /ko -->
		</main>
		<!-- ko if: Commands().length > 0 -->
		<footer>
			<left-side-footer>
				<!-- ko foreach: { data: Commands, as: 'command'} -->
				<!-- ko if: command.leftSide === true -->
				<button
					data-bind="text: Label, click: function(cmd) { $parent.OnCommandClicked.call($parent, cmd); }, attr: { id: Id, disabled: Disabled, class: 'Id', 'data-testid':  $parent.getCommandTestId(Id) }"
				></button>
				<!-- /ko -->
				<!-- /ko -->
			</left-side-footer>

			<right-side-footer>
				<!-- ko foreach: { data: Commands, as: 'command'} -->
				<!-- ko if: command.leftSide === false -->
				<button
					data-bind="text: Label, click: function(cmd) { $parent.OnCommandClicked.call($parent, cmd); }, attr: { id: Id, disabled: Disabled, class: 'Id', 'data-testid': $parent.getCommandTestId(Id)}"
				></button>
				<!-- /ko -->
				<!-- /ko -->
			</right-side-footer>
		</footer>

		<!-- /ko -->
	</div>
</script>
<script type="text/html" id="tmplRescoImageGallery">
	<div class="galleryImageContainer">
		<div class="galleryIcon" data-bind="click: addImage">
			<!-- ko if: selectedItem() && selectedItem().b64() -->
			<img data-bind="attr: { src: 'data:image/png;base64, ' + selectedItem().b64() }" />
			<!-- /ko -->
			<!-- ko if: !selectedItem() || !selectedItem().b64() -->
			<i class="questionnairesprite icon-questionnaire_NoIcon_32"></i>
			<!-- /ko -->
		</div>

		<!-- ko if:  canRemoveIcon()-->
		<p data-bind="click: clearImage">Remove image</p>
		<!-- /ko -->
		<!-- ko if: !canRemoveIcon() -->
		<p data-bind="click: addImage">Add image</p>
		<!-- /ko -->
	</div>
	<!-- ko if: items().length -->

	<div class="imageGalleryContainer">
		<!-- ko foreach: items() -->
		<div class="galleryIcon" data-bind="click: clicked, css: {selected: $data === parent.selectedItem() }">
			<img data-bind="attr: { src: 'data:image/png;base64, ' + b64() }" />
		</div>
		<!-- /ko -->
	</div>

	<!-- /ko -->
</script>

<script type="text/html" id="tmplRescoHeaderImage">
	<div class="headerImageContainer">
		<div class="galleryIcon" data-bind="click: isReadOnly ? null : galleryControl.addImage.bind(galleryControl)">
			<!-- ko if: galleryControl.selectedItem() && galleryControl.selectedItem().b64() -->
			<img data-bind="attr: { src: 'data:image/png;base64, ' + galleryControl.selectedItem().b64() }" />
			<!-- /ko -->
			<!-- ko if: !galleryControl.selectedItem() || !galleryControl.selectedItem().b64() -->
			<i class="questionnairesprite icon-questionnaire_NoIcon_32"></i>
			<!-- /ko -->
		</div>
	</div>
</script>
<script type="text/html" id="tmplSortDialog">
	<!-- ko foreach: Fields -->
	<div>
		<select style="max-width:320px" data-bind="options: FieldList, optionsText: 'DisplayName', value: Field, valueAllowUnset: false"></select>
		<select style="" data-bind="options: DirectionList, optionsText: 'Key', optionsValue: 'Value', value: Direction, valueAllowUnset: false"></select>
		<button data-bind="click: $parent.OnDeleteClicked.bind($parent), visible:AllowDelete">Del</button>
	</div>
	<!-- /ko -->
</script>
<script type="text/html" id="tmplSegmentedControl">
	<div class="segmentedControl__container" data-bind="foreach: items">
		<div class="segmentedControl__item">
			<input
				class="segmentedControl__item__input"
				data-bind="checked: $parent.value, value: value, enable: enabled(), attr: { id: id }"
				type="radio"
			/>
			<label class="segmentedControl__item__label" data-bind="text: label, attr: { for: id }"></label>
		</div>
	</div>
</script>
<script type="text/html" id="tmplCommonUISelectFieldsDialog">
	<div class="selectFieldsDialog" data-bind="with: tree.rootNode"><!-- ko template: { name: templateName, foreach: childNodes } --><!-- /ko --></div>
</script>

<script type="text/html" id="tmplSelectFieldsNode">
	<!-- ko if: isVisible() -->
	<div class="node">
		<div class="node_button">
			<!-- ko if: canExpand() -->
			<i data-bind="click: toggleExpand, attr: { class:'commonuisprite icon-commonui_' + ( isExpanded() ? 'Expanded_32' : 'Collapsed_32' ) }"></i>
			<!-- /ko -->
			<!-- ko ifnot: canExpand() -->
			<input type="checkbox" value="cherry" data-bind="checked: isSelected" />
			<!-- /ko -->
		</div>
		<p data-bind="text: displayName"></p>
	</div>
	<!-- ko if: isExpanded() -->
	<div class="childNodes">
		<div data-bind="template: { name: templateName, foreach: childNodes } "></div>
	</div>
	<!-- /ko -->
	<!-- /ko -->
</script>
<script id="tmplSimpleColorPickerDialog" type="text/html">
	<div class="color-picker">
		<div id="customColorPicker"></div>
	</div>
</script>
<!-- BEGIN: tmplRegisterUserDialog-->
<script id="tmplRegisterUserDialog" type="text/html">
	<table style="width:100%">
		<tr>
			<td colspan="2">
				Fill in your contact details below. These details help us to provide better quality support and track your support cases.
				<br /><br />
				This is a one time registration only.
				<br /><br />
			</td>
		</tr>
		<tr>
			<td width="10%">Email:</td>
			<td><input type="text" data-bind="value:Email" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td>Company:</td>
			<td><input type="text" data-bind="value:Company" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td>First&nbsp;Name:</td>
			<td><input type="text" data-bind="value:FirstName" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td>Last&nbsp;Name:</td>
			<td><input type="text" data-bind="value:LastName" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td>Job&nbsp;Title:</td>
			<td><input type="text" data-bind="value:JobTitle" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td>Phone:</td>
			<td><input type="text" data-bind="value:Phone" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td>Country:</td>
			<td><input type="text" data-bind="value:Country" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td colspan="2">
				<br />
				<div style="display: flex; align-items: center;">
					<input id="cbPrivacy" type="checkbox" data-bind="checked:PrivacyConsent" /><label for="cbPrivacy"
						>I have read and agree with <a href="https://www.resco.net/privacy-notice/" target="_blank">RESCO Privacy notice</a> and
						<a href="https://www.resco.net/downloads/RESCO_General_Terms_and_Conditions.pdf" target="_blank">RESCO General Terms and Conditions</a
						>.</label
					>
				</div>
			</td>
		</tr>
	</table>
</script>
<!-- END: tmplRegisterUserDialog -->
<script type="text/html" id="tmplIFrameDialog">
	<iframe class="iFrameDialog" data-bind="attr: { src: reportBlobUrl }"></iframe>
</script>
<script type="text/html" id="tmplRescoDialog">
	<div class="dialogOuterArea" data-bind="style: { zIndex: OuterAreaZIndex() }">
		<div class="dialogOuterArea dim" data-bind="click: OuterClick.bind($data), style: { opacity: OuterAreaBackgroundOpacity }"></div>
		<div
			class="dialog"
			data-bind="style: { width: (Bounds.Width() < 0 ? 'auto' : (Bounds.Width() + 'px')), height: (Bounds.Height() < 0 ? 'auto' : (Bounds.Height() + 'px')), left: Bounds.Left() + 'px', top: Bounds.Top() + 'px' }"
		>
			<!-- ko if: ContentTemplateName -->
			<!-- ko template: { name: ContentTemplateName, data: Content } --><!-- /ko -->
			<!-- /ko -->
			<!-- ko if: Resizable -->
			<div style="position: absolute; right: 0px; bottom: 0px; width: 15px; height: 15px; cursor: nwse-resize"></div>
			<!-- /ko -->
		</div>
	</div>
</script>

<script type="text/html" id="tmplRescoDropDownDialog">
	<div class="dropDown">
		<!-- ko foreach: Items -->
		<div class="dropDownItem" data-bind="text: $data, click: $parent.ItemClick.bind($parent, $index(), $data)"></div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplRescoMessageBox">
	<div class="messageBox">
		<div
			class="title"
			data-bind="text: Text, style: { wordBreak: Multiline ? 'break-word' : 'normal', wordWrap: Multiline ? 'break-word' : 'normal', whiteSpace: Multiline ? 'pre-wrap' : 'normal' }"
		></div>
		<!-- ko foreach: Buttons -->
		<div
			class="button"
			data-bind="attr: {'data-testid': 'MessageBox-' + $data}, text: $data, click: $parent.ButtonClick.bind($parent, $index()), style: { color: Resco.UI.MessageBox.ButtonColor }"
		></div>
		<!-- /ko -->
		<!-- ko if: DefaultButton -->
		<div
			class="button default"
			data-bind="attr: {'data-testid': DefaultButton}, text: DefaultButton, click: ButtonClick.bind($data, -1), style: { color: Resco.UI.MessageBox.ButtonColor }"
		></div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplRescoPleaseWaitDialog">
	<div class="pleaseWait">
		<table class="pleaseWaitTable">
			<tr>
				<td>
					<div class="sk-circle-small">
						<div class="sk-circle1 sk-child"></div>
						<div class="sk-circle2 sk-child"></div>
						<div class="sk-circle3 sk-child"></div>
						<div class="sk-circle4 sk-child"></div>
						<div class="sk-circle5 sk-child"></div>
						<div class="sk-circle6 sk-child"></div>
						<div class="sk-circle7 sk-child"></div>
						<div class="sk-circle8 sk-child"></div>
						<div class="sk-circle9 sk-child"></div>
						<div class="sk-circle10 sk-child"></div>
						<div class="sk-circle11 sk-child"></div>
						<div class="sk-circle12 sk-child"></div>
					</div>
					<div class="pleaseWaitText" data-bind="text: Text"></div>
					<br />
				</td>
			</tr>
		</table>
	</div>
</script>
<script type="text/html" id="tmplTabbedPanel">
	<div class="tabbedPanel">
		<!-- ko if: !isCollapsed() && visible() -->
		<!-- ko template: { name: "tmplTabs" } --><!-- /ko -->
		<div class="tabContent">
			<!-- ko if: selectedContent() -->
			<!-- ko template: { name: selectedContent().PanelContentTemplateName, data: selectedContent } --><!-- /ko -->
			<!-- /ko -->
		</div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplTabs">
	<!-- ko if: !hasHiddenTabHeader() -->
	<div class="tabs">
		<!-- ko foreach: tabContentList -->
		<!-- ko template: {name: 'tmplTabItem' }--><!-- /ko -->
		<!-- /ko -->

		<!-- ko if: enableCollapsing() -->
		<button class="closePanel" type="button" data-bind="click:hidePanel">
			<i data-bind="css:hidePanelIcon"></i>
		</button>
		<!-- /ko -->
	</div>
	<!-- /ko -->
</script>

<script type="text/html" id="tmplTabItem">
	<!-- ko if: !isSelected() -->
	<div
		data-bind="click: $parent.selectTab.bind($parent, $data), attr: {'data-tooltip': $parent && $parent.name() ? ($parent.name() + '.' + id) : id }, css: {'tooltipsource': $parent && $parent.name() ? true : false, ' tab' : true}"
	>
		<!-- ko if: hasIcon() -->
		<i data-bind="class:icon"></i>
		<!-- /ko -->
		<!-- ko if: !hasIcon() -->
		<span data-bind="text:label"></span>
		<!-- /ko -->
	</div>
	<!-- /ko -->
	<!-- ko if: isSelected() -->
	<div
		data-bind="click: $parent.selectTab.bind($parent, $data), attr: {'data-tooltip': $parent && $parent.name() ? ($parent.name() + '.' + id) : id }, css: {'tooltipsource': $parent && $parent.name() ? true : false, 'tab selected': true}"
	>
		<!-- ko if: hasIcon() -->
		<i data-bind="class:icon"></i>
		<!-- /ko -->
		<span data-bind="text:label"></span>
	</div>
	<!-- /ko -->
</script>

<script type="text/html" id="tmplHiddenPanelInvoker">
	<!-- ko if: visible() && isCollapsed() -->
	<div class="hiddenPanelInvoker" data-bind="class: invokerPosition, style:invokerCustomizedStyle">
		<div>
			<!-- ko foreach: tabContentList -->
			<button type="button" data-bind="click:$parent.invokePanel.bind($parent, $data)"><i data-bind="class:icon"></i></button>
			<!-- /ko -->
		</div>
	</div>
	<!-- /ko -->
</script>
<script type="text/html" id="tmplRescoToolbar">
	<div class="toolbar" data-bind="visible: Visible, style: {left:Left()}">
		<div class="control_arrows">
			<a href="#" class="arrow_left" data-bind="click:moveToolbar,visible:VisibleLeftArr"
				><i class="commonuisprite icon-commonui_Toolbar_Color_leftArrow"></i
			></a>
			<a href="#" class="arrow_right" data-bind="click:moveToolbar,visible:VisibleRightArr"
				><i class="commonuisprite icon-commonui_Toolbar_Color_rightArrow"></i
			></a>
		</div>

		<!-- ko foreach: Panels -->
		<div class="panel" data-bind="style: { width: Width() + 'px', left: Left() + 'px' }" style="position: absolute">
			<!-- ko foreach: Items -->
			<div
				class="button tooltipsource"
				data-bind="attr: {'data-tooltip': TooltipName}, style: { left: Position.Left() + 'px', top: Position.Top() + 'px', width: Size.Width() + 'px', height: Size.Height() + 'px' }"
			>
				<!-- ko template: { name: TemplateName } --><!-- /ko -->
			</div>
			<!-- /ko -->
			<!-- ko if: Label() -->
			<span class="label" data-bind="text: Label"></span>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- ko if: CustomPanel() -->
		<!-- ko with: CustomPanel() -->
		<div class="panel" data-bind="style: { width: Width() + 'px', left: Left() + 'px' }" style="position: absolute">
			<!-- ko template: { name: Content.CustomPanelTemplateName, data: Content } --><!-- /ko -->
			<!-- ko if: Label() -->
			<span class="label" data-bind="text: Label"></span>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplRescoToolbarItem">
	<div class="comboContent">
		<div class="label labelLarge" data-bind="text: Label" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"></div>
	</div>
</script>

<script type="text/html" id="tmplRescoToolbarButton">
	<div
		class="buttonContent"
		data-bind="click: OnClick, css: { disabled: !Enabled(), pushed: Pushed }, attr: { 'data-testid': $parent.dataTestAttribute()+ '-' + $data.getDataTestLabel()}"
	>
		<!-- ko if: ImageUrl() -->
		<i data-bind="attr: { class: Resco.Controls.Toolbar.SpriteClassBase + ImageUrl() + (IsLargeButton() ? ' iconLarge' : ' iconSmall') }"></i>
		<!-- /ko -->
		<span class="label" data-bind="text: Label, css: { labelLarge: IsLargeButton(), labelSmall: !IsLargeButton() }"></span>
		<!-- ko if: HasDropDown -->
		<i class="commonuisprite icon-commonui_DropDown" style="position:absolute;right:0;bottom:0"></i>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplRescoToolbarComboItem">
	<div class="comboContent">
		<div class="label" data-bind="text: Label"></div>
		<select
			class="combo"
			data-bind="options: ItemsSource, optionsText: DisplayMember, optionsValue: ValueMember, value: Value, valueAllowUnset: true, attr: { disabled: !Enabled() }"
		></select>
	</div>
</script>
<script type="text/html" id="tmplTooltipBase">
	<div data-bind="text: Content"></div>
</script>

<script type="text/html" id="tmplToolbarTooltip">
	<!-- ko if: (typeof(Content.Title) === 'string' && Content.Title && Content.Title.length > 0) -->
	<div class="title" data-bind="text: Content.Title"></div>
	<!-- /ko -->
	<div data-bind="text: Content.Content"></div>
	<!-- ko if: (typeof(Content.Link) === 'string' && Content.Link && Content.Link.length > 0) || (typeof(Content.Link) === 'function' && Content.Link() && $.trim(Content.Link()).length > 0) -->
	<div class="link-container">
		<a class="link" href="" target="_blank" data-bind="attr: { href: Content.Link }">More info...</a>
	</div>
	<!-- /ko -->
</script>
<script type="text/html" id="tmplCompactToolbar">
	<div class="compactToolbar" data-bind="visible: Visible, viewModelLifecycle: $data" data-test="compactToolbar">
		<!-- ko foreach: visibleGroups -->
		<!-- ko if: $parent.hasGroupSeparator($parent.visibleGroups(), $index()) -->
		<div class="compactToolbar__groupSeparatorLine"></div>
		<!-- /ko -->
		<!-- ko template: { name: templateName } --><!-- /ko -->
		<!-- /ko -->
		<!-- ko if: !allItemsVisible() -->
		<div
			class="compactToolbar__moreButton tooltipsource"
			data-bind="click: onMoreClick, css: { compactToolbar__pushed: isMoreMenuVisible() }, attr: { 'data-tooltip': 'CompactToolbar.MoreButton', 'data-test': 'compactToolbar-moreButton' }"
		>
			<div class="compactToolbar__icon">more-vert</div>
		</div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplCompactToolbarGroupSpacer">
	<div class="compactToolbar__groupSpacer"></div>
</script>

<script type="text/html" id="tmplCompactToolbarGroup">
	<div class="compactToolbar__group">
		<!-- ko if: label() -->
		<span class="compactToolbar__groupLabel" data-bind="text: label"></span>
		<!-- /ko -->
		<!-- ko foreach: items -->
		<!-- ko template: { name: templateName } --><!-- /ko -->
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplCompactToolbarButtonItem">
	<div
		class="compactToolbar__buttonItem tooltipsource"
		data-bind="click: onClick, css: { compactToolbar__disabled: !enabled(), compactToolbar__pushed: pushed() }, attr: { 'data-tooltip': $parents[1].tooltipPrefix + '.' + id, 'data-test': 'compactToolbar-buttonItem-' + id }"
	>
		<!-- ko if: imageUrl() -->
		<div class="compactToolbar__icon" data-bind="text: imageUrl"></div>
		<!-- /ko -->
		<!-- ko if: label() -->
		<span class="compactToolbar__label" data-bind="text: label"></span>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplCompactToolbarMoreMenuContent">
	<div class="compactToolbar__moreMenuContent">
		<!-- ko foreach: moreMenuGroups -->
		<!-- ko if: $parent.hasGroupSeparator($parent.moreMenuGroups(), $index()) -->
		<div class="compactToolbar__groupSeparatorLine"></div>
		<!-- /ko -->
		<!-- ko template: { name: templateName + 'MoreMenu' } --><!-- /ko -->
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplCompactToolbarGroupSpacerMoreMenu">
	<div class="compactToolbar__groupSpacer"></div>
</script>

<script type="text/html" id="tmplCompactToolbarGroupMoreMenu">
	<!-- ko if: label() -->
	<span class="compactToolbar__groupLabel" data-bind="text: label"></span>
	<!-- /ko -->
	<!-- ko foreach: items -->
	<!-- ko template: { name: templateName } --><!-- /ko -->
	<!-- /ko -->
</script>
<script type="text/html" id="tmplRescoGridEditor">
	<div
		class="rescoGridEditor"
		data-bind="
	         style: {
	            gridTemplateRows: ((showHeader() ? '[column-header] 32px ' : '') +gridTemplateRows() + (isReadOnly() ? '' : ' [add-column] 46px')),
	            gridTemplateColumns: ((showHeader() ? '[row-header] 32px ' : '') + gridTemplateColumns() + (isReadOnly() ? '' : ' [add-row] 46px')),
	         }"
	>
		<!-- ko foreach: { data: rowDefs, as: 'row' } -->
		<!-- ko if: row.gridEditor.showHeader -->
		<div
			class="rescoGridEditor__item rescoGridEditor__row"
			data-bind="cbRescoGridEditorRowResize: row,
				 css: { rescoGridEditor__row__selected: row.isSelected },
	             style: {
					gridRow: ($index() + 2).toString(),
				},
	             click: select,
				 clickBubble: false"
		>
			<span data-bind="text: $index() + 1"></span>

			<!-- ko ifnot: row.gridEditor.isReadOnly -->
			<div class="rescoGridEditor__actions__container">
				<div class="rescoGridEditor__actions">
					<div class="rescoGridEditor__action" title="Add row" data-bind="click: $parent.addRow.bind($parent, $index()), clickBubble: false">
						<i class="rescosdksprite icon-rescosdk_AddWhite"></i>
					</div>
					<!-- ko if: $parent.rowDefs().length > 1 -->
					<div class="rescoGridEditor__action" title="Delete row" data-bind="click: $parent.deleteRow.bind($parent), clickBubble: false">
						<i class="rescosdksprite icon-rescosdk_Delete"></i>
					</div>
					<!-- /ko -->
				</div>
			</div>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- ko foreach: { data: $parent.colDefs, as: 'col' } -->
		<div
			class="rescoGridEditor__cellPosition"
			data-bind="
					css: {
						rescoGridEditor__cellPosition__rowSelected: row.isSelected,
						rescoGridEditor__cellPosition__lastRowCell: ($index() === $parentContext.$parent.colDefs().length - 1),
						rescoGridEditor__cellPosition__columnSelected: col.isSelected,
						rescoGridEditor__cellPosition__lastColumnCell: ($parentContext.$index() === $parentContext.$parent.rowDefs().length - 1),
					},
	                 style: {
	                     gridColumn: ($index() + (col.gridEditor.showHeader() ? 2 : 1)).toString(),
	                     gridRow: ($parentContext.$index() + (col.gridEditor.showHeader() ? 2 : 1)).toString(),
	                },
	                cbRescoGridEditorDropZone: { colDef: col, rowDef: $parent }"
		>
			<!-- ko if: col.gridEditor.gridEditorCellPositionTemplateName -->
			<!-- ko template: { name: col.gridEditor.gridEditorCellPositionTemplateName, data: { row: row, column: col, gridEditor: col.gridEditor, parent: $parents[2] } } --><!-- /ko -->
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- ko if: row.stackedCells().length > 0 -->
		<div
			class="rescoGridEditor__item rescoGridEditor__stackedCells"
			data-bind="click: row.showOrHideStack.bind(row),
					clickBubble: false,
					css: { rescoGridEditor__stackedCells__expanded: row.isStackShown() },
					style: {
						gridColumn: ($parent.colDefs().length + (row.gridEditor.showHeader() ? 2 : 1)).toString(),
						gridRow: ($index() + (row.gridEditor.showHeader() ? 2 : 1)).toString(),
					}"
		>
			<i class="rescosdksprite icon-rescosdk_Stack"></i>
			<!-- ko ifnot: row.isStackShown -->
			<i class="rescosdksprite icon-rescosdk_Expand"></i>
			<!-- /ko -->
			<!-- ko if: row.isStackShown -->
			<i class="rescosdksprite icon-rescosdk_Collapse"></i>
			<div class="rescoGridEditor__stackDropdown">
				<!-- ko foreach: { data: row.stackedCells, as: 'stackedCell' } -->
				<span
					class="rescoGridEditor__stackDropdown__item"
					data-bind="text: $parentContext.$parent.cells.indexOf(stackedCell) + 1,
							click: stackedCell.select,
							css: { rescoGridEditor__stackDropdown__item__selected: stackedCell.isSelected }"
				>
				</span>
				<!-- /ko -->
			</div>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: showHeader -->
		<!-- ko foreach: colDefs -->
		<div
			class="rescoGridEditor__item rescoGridEditor__column"
			data-bind="cbRescoGridEditorColumnResize: $data,
					css: { rescoGridEditor__column__selected: isSelected },
	                style: {
						gridColumn: ($index() + 2).toString(),
					},
	                click: select,
				 	clickBubble: false"
		>
			<span data-bind="text: $index() + 1"></span>
			<!-- ko ifnot: gridEditor.isReadOnly -->
			<div class="rescoGridEditor__actions__container">
				<div class="rescoGridEditor__actions">
					<div class="rescoGridEditor__action" title="Add column" data-bind="click: $parent.addColumn.bind($parent, $index()), clickBubble: false">
						<i class="rescosdksprite icon-rescosdk_AddWhite"></i>
					</div>
					<!-- ko if: $parent.colDefs().length > 1 -->
					<div class="rescoGridEditor__action" title="Delete column" data-bind="click: $parent.deleteColumn.bind($parent), clickBubble: false">
						<i class="rescosdksprite icon-rescosdk_Delete"></i>
					</div>
					<!-- /ko -->
				</div>
			</div>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko ifnot: isReadOnly -->
		<div
			class="rescoGridEditor__item rescoGridEditor__addColumn"
			data-bind="style: {
				gridColumn: (colDefs().length + 2).toString()
			}"
		>
			<div class="rescoGridEditor__addColumn__button" data-bind="click: addColumn.bind($data, -1)">
				<i class="rescosdksprite icon-rescosdk_AddWhite"></i>
			</div>
		</div>
		<div
			class="rescoGridEditor__item rescoGridEditor__addRow"
			data-bind="style: {
				gridRow: (rowDefs().length + 2).toString()
			}"
		>
			<div class="rescoGridEditor__addRow__button" data-bind="click: addRow.bind($data, -1)">
				<i class="rescosdksprite icon-rescosdk_AddWhite"></i>
			</div>
		</div>
		<!-- /ko -->
		<!-- ko foreach: cells -->
		<div
			class="rescoGridEditor__cell"
			data-bind="
			css: {
				rescoGridEditor__cell__selected: isSelected,
				rescoGridEditor__cell__readOnly: gridEditor.isReadOnly,
			 },
			style: {
	                gridColumn: (+data.column() + (gridEditor.showHeader() ? 1 : 0)) + ' / span ' + data.colSpan(),
	                gridRow: (+data.row() + (gridEditor.showHeader() ? 1 : 0)) + ' / span ' + data.rowSpan(),
	            },
	         cbRescoGridEditorCellDrag: $data,
	         cbRescoGridEditorCellResize: { cell: $data, gridEditor: $parent },
	         click: select,
			 clickBubble: false"
		>
			<!-- ko template: { name: data.gridEditorCellContentTemplateName, data: data } --><!-- /ko -->
		</div>
		<!-- /ko -->
	</div>
</script>
<script id="tmplAIVisionConfig" type="text/html">
	<table style="width:100%;">
		<tr>
			<td><b>Name:</b></td>
			<td><input type="text" data-bind="value:Name" style="width:300px; box-sizing:border-box;" /></td>
		</tr>
		<tr>
			<td><b>Entity:</b></td>
			<td>
				<select
					data-bind="options: entities, optionsText: function(entity) { return entity.DisplayName }, value: entity, valueAllowUnset: false"
					style="width: 300px; box-sizing:border-box;"
				></select>
			</td>
		</tr>
		<tr>
			<td><b>Service type:</b></td>
			<td>
				<select data-bind="options: serviceTypes, value: serviceType, valueAllowUnset: false" style="width: 300px; box-sizing:border-box;"></select>
			</td>
		</tr>
		<tr>
			<td><b>Prediction key:</b></td>
			<td><input type="text" data-bind="value:predictionKey" style="width:300px; box-sizing:border-box;" /></td>
		</tr>
		<tr>
			<td><b>URL:</b></td>
			<td><input type="text" data-bind="value:url" style="width:300px; box-sizing:border-box;" /></td>
		</tr>
	</table>
</script>
<script id="tmplAIVisionEditor" type="text/html">
	<div data-bind="grid: DataGrid" data-definitiononly="false" data-multiselect="false" style="height: 100%; margin-top:10px">
		<div data-columnname="Name" data-binding="Name" data-sortable="true" data-flex="0 0 250px" data-horalign="left" data-sort="ascending"></div>
		<div data-columnname="Type" data-binding="SeriviceType" data-flex="0 1 150px" data-sortable="true" data-horalign="left"></div>
		<div
			data-columnname="Entity Name"
			data-binding="EntityDisplayName"
			data-flex="0 1 150px"
			data-sortable="true"
			data-horalign="left"
			style="vertical-align:middle"
		></div>
	</div>
</script>
<!-- BEGIN: tmplAuditingEditor-->
<script id="tmplAuditingEditor" type="text/html">
	<table data-bind="with: Auditing">
		<tr>
			<td>
				<label for="cbEnabled"><b>Enabled:</b></label>
			</td>
			<td><input type="checkbox" id="cbEnabled" data-bind="checked: IsEnabled" /></td>
		</tr>
		<tr>
			<td>
				<label for="AuditGPSPosition"><b>Include GPS Position:</b></label>
			</td>
			<td><input type="checkbox" id="AuditGPSPosition" data-bind="checked: AuditGPSPosition, enable: IsEnabled" /></td>
		</tr>
		<tr>
			<td>
				<label for="AuditSynchronization"><b>Log synchronization event</b></label>
			</td>
			<td><input type="checkbox" id="AuditSynchronization" data-bind="checked: AuditSynchronization, enable: IsEnabled" /></td>
		</tr>
		<tr>
			<td>
				<label for="AuditApplicationState"><b>Log application state events</b></label>
			</td>
			<td><input type="checkbox" id="AuditApplicationState" data-bind="checked: AuditApplicationState, enable: IsEnabled" /></td>
		</tr>
		<tr>
			<td>
				<label for="TrackGpsChanges"><b>Track GPS position changes</b></label>
			</td>
			<td><input type="checkbox" id="TrackGpsChanges" data-bind="checked: TrackGpsChanges, enable: IsEnabled" /></td>
			<td>Delay (seconds)<input type="number" style="box-sizing:border-box" data-bind="value: TrackGpsChangesDelay, enable: IsEnabled" /></td>
			<td>Distance (meters)<input type="number" style="box-sizing:border-box" data-bind="value: TrackGpsChangesDistance, enable: IsEnabled" /></td>
		</tr>
	</table>

	<div data-bind="grid: EntityGrid" data-definitiononly="false" data-twowaybinding="true" style="white-space:nowrap; height: 100%">
		<div
			data-columnname="DisplayName"
			data-flex="1 0 150px"
			data-binding="DisplayName"
			data-sortable="true"
			data-horalign="left"
			data-sort="ascending"
		></div>
		<div data-columnname="LogicalName" data-flex="1 0 150px" data-binding="LogicalName" data-sortable="true" data-horalign="left"></div>
		<div
			data-columnname="Create"
			data-columntype="checkbox"
			data-horalign="center"
			data-flex="0 0 100px"
			data-binding="create"
			data-sortable="false"
		></div>
		<div
			data-columnname="Update"
			data-columntype="checkbox"
			data-horalign="center"
			data-flex="0 0 100px"
			data-binding="update"
			data-sortable="false"
		></div>
		<div
			data-columnname="Delete"
			data-columntype="checkbox"
			data-horalign="center"
			data-flex="0 0 100px"
			data-binding="delete"
			data-sortable="false"
		></div>
		<div
			data-columnname="StartEdit"
			data-columntype="checkbox"
			data-horalign="center"
			data-flex="0 0 100px"
			data-binding="startedit"
			data-sortable="false"
		></div>
		<div
			data-columnname="EndEdit"
			data-columntype="checkbox"
			data-horalign="center"
			data-flex="0 0 100px"
			data-binding="endedit"
			data-sortable="false"
		></div>
	</div>
</script>
<!-- END: tmplAuditingEditor-->
<!-- BEGIN: tmplGeoFencingEditor-->
<script id="tmplGeoFencingEditor" type="text/html">
	<div data-bind="with: GeoFencing" style="margin:1em;overflow-y: scroll;">
		<input type="checkbox" id="cbEnabled" data-bind="checked: IsEnabled" /><label for="cbEnabled">Enable geofencing</label><br /><br />
		<h3>Common options</h3>
		<div style="margin-left:1em;">
			<div>
				<span style="margin-right: 1em;">Geofence radius</span>
				<input type="number" id="GeofenceRadius" data-bind="value: Radius, enable: IsEnabled" />
				<span> meters</span>
			</div>
			<br />
			<div>
				<input type="checkbox" id="cbRealtimeFlush" data-bind="checked: RealtimeFlushing, enable: IsEnabled" />
				<label for="cbRealtimeFlush">Enable real-time position flushing via Resco web service.</label>
			</div>
			<br />
			<div>
				<label
					>Show notification:<select style="margin-left: 1em;" data-bind="value: notification, valueAllowUnset: false, enable: IsEnabled">
						<option value="Never">Never</option>
						<option value="WhenArrived">When arrived</option>
						<option value="Always">When arrived and left</option>
					</select></label
				>
			</div>
			<br />
			<div>
				<label
					>Log verbosity:<select style="margin-left: 1em;" data-bind="value: logLevel, valueAllowUnset: false, enable: IsEnabled">
						<option value="Off">Off</option>
						<option value="Normal">Normal</option>
						<option value="Diagnostic">Diagnostic</option>
					</select></label
				>
			</div>
			<br />
			<!--<div>
				<span>Custom web service URL: </span><input type="url" id="CustomWebServiceURL" data-bind="value: CustomWebServiceURL, enable: IsEnabled" />
			</div>-->
		</div>
		<div style="margin-left:1em;">
			<label>Business hours</label>
			<div style="margin-left: 2em;">
				<span>From: </span>
				<input type="time" data-bind="value: BusinessHoursFrom, enable: IsEnabled" />
				<span style="margin-left: 1em;">To: </span>
				<input type="time" data-bind="value: BusinessHoursTo, enable: IsEnabled" />
				<span> (e.g. 9:00 - 17:00)</span>
			</div>
			<br />
			<label>Business days</label>
			<div style="margin-left: 2em;">
				<!-- ko foreach: DayFilter -->
				<label><input type="checkbox" data-bind="checked: IsChecked, enable: $parent.IsEnabled" /><span data-bind="text: Label"></span></label>
				<!-- /ko -->
			</div>
		</div>
		<h3>Entities used for geofencing</h3>
		<p>
			Limitations:
			<li>Entity (or its link entity) must have latitude/longitude fields.</li>
			<li>In offline mode, records used for geofencing have to be synced to the app (included in sync filters of given entity).</li>
			<li>
				Only 20 locations can be geofenced at the same time. If filter results in more than 20 records, they are being geofenced in the sorted order.
			</li>
			<li>If more than a single entity is being geofenced, make sure to set the limit of records for each entity.</li>
		</p>
		<p>
			<label><input type="checkbox" data-bind="checked: jsBridgeGeoFences, enable: IsEnabled" /><span>Provide geo fences from JSBridge</span></label>
		</p>
		<!-- ko foreach: entities -->
		<div class="geofencingItemsContainer">
			<div class="geofencingItem">
				<label>Primary entity</label>
				<select data-bind="options: allowedEntities, optionsText: 'DisplayName', value: entityItem, enable: $parent.entitiesEnabled"></select>
			</div>
			<div class="geofencingItem">
				<label>Limit</label>
				<input type="number" data-bind="value: maxCount, enable: $parent.entitiesEnabled" />
			</div>
			<div class="geofencingItem" title="Filter">
				<button data-bind="click: editFilter, enable: $parent.entitiesEnabled">
					<i class="commonuisprite icon-commonui_Toolbar_Color_EditFilter_32" alt="Filter"></i>
				</button>
			</div>
			<div class="geofencingItem" title="Sort">
				<button data-bind="click: editSort, enable: $parent.entitiesEnabled">
					<i class="commonuisprite icon-commonui_Toolbar_Color_EditSort_32" alt="Sort"></i>
				</button>
			</div>
			<div class="geofencingItem widerGeofencingItem">
				<label>Latitude</label>
				<div class="geofencingLatLongContainer">
					<input
						class="geofencingLatLongInput"
						type="text"
						data-bind="value: latitudeField()?.DisplayName ?? 'None', enable: $parent.entitiesEnabled"
						readonly
					/>
					<button data-bind="click: selectLatitude, enable: $parent.entitiesEnabled">...</button>
				</div>
			</div>
			<div class="geofencingItem widerGeofencingItem">
				<label>Longitude</label>
				<div class="geofencingLatLongContainer">
					<input
						class="geofencingLatLongInput"
						type="text"
						data-bind="value: longitudeField()?.DisplayName ?? 'None', enable: $parent.entitiesEnabled"
						readonly
					/>
					<button data-bind="click: selectLongitude, enable: $parent.entitiesEnabled">...</button>
				</div>
			</div>
			<div class="geofencingItem">
				<span style="visibility: hidden;">.</span>
				<button data-bind="click: function(){$parent.delEntity($data)}, enable: $parent.entitiesEnabled, visible: $parent.entities().length > 1">
					Delete
				</button>
			</div>
		</div>
		<!-- /ko -->
		<div><button data-bind="click: addEntity, enable: entitiesEnabled">Add</button></div>
		<h3>Remarks</h3>
		<div style="margin-left:1em;">
			<p>Geofencing can generate a large amount of &quot;Mobile Audit&quot; records.<br /></p>
			<p data-bind="visible: HasMaintenance">Setup the automatic cleanup in the Woodford section &quot;Maintenance&quot;.</p>
		</div>
	</div>
</script>
<!-- END: tmplGeoFencingEditor-->
<!-- BEGIN: tmplLocationTrackingEditor-->
<script id="tmplLocationTrackingEditor" type="text/html">
	<div data-bind="with: LocationTracking" style="margin:1em;overflow-y: scroll;">
		<!-- ko if: RESCO -->
		<div style="background-color:lightcoral">
			Location Tracking is part of Resco Routes, which is a separate product with its own respective license.<br />
			If you are not sure if this organization has the appropriate license, please contact your account manager at Resco or email us at <a href="mailto:sales@resco.net">sales@resco.net</a>.
		</div>
		<!-- /ko -->
		<h3>Common options</h3>
			<div style="margin-left:1em;">
				<label>Business hours</label>
				<div style="margin-left: 2em;">
					<span>From: </span><input type="time" data-bind="value: BusinessHoursFrom" />
					<span>To: </span><input type="time" data-bind="value: BusinessHoursTo" />
					<span> (e.g. 9:00 - 17:00)</span>
				</div><br />
				<label>Business days</label>
				<div style="margin-left: 2em;">
					<!-- ko foreach: DayFilter -->
					<label><input type="checkbox" data-bind="checked: IsChecked" /><span data-bind="text: Label"></span></label>
					<!-- /ko -->
				</div>
			</div>
		</h3>
		<h3>Background Service options</h3>
		<div style="margin-left:1em;">
			<input type="checkbox" id="cbEnabled" data-bind="checked: IsEnabled" /><label for="cbEnabled">Enable background GPS monitoring</label><br /><br />
			<div>
				<span>Request position every </span><input type="number" id="RequestInterval" data-bind="value: RequestInterval, enable: IsEnabled" /><span> minutes</span>
			</div><br />
			<div>
				<span>Optimize for </span>
				<select data-bind="value: OptimizeFor, valueAllowUnset: false, enable: IsEnabled, options: $parent.OptimizeForItems, optionsText: 'Label', optionsValue: 'Value' "></select>
			</div><br />
			<!-- ko if: RESCO -->
			<input type="checkbox" id="cbRealtimeFlush" data-bind="checked: RealtimeFlusing, enable: IsEnabled" /><label for="cbRealtimeFlush">Enable real-time position flushing via Resco web service.</label><br />
			<!-- /ko -->
			<!--<div>
				<span>Custom web service URL: </span><input type="url" id="CustomWebServiceURL" data-bind="value: CustomWebServiceURL, enable: IsEnabled" />
			</div>-->
		</div>
		<h3>Remarks</h3>
		<div style="margin-left:1em;">
			<p>Location Tracking can generate a large amount of &quot;Mobile Audit&quot; records.<br /></p>
			<p data-bind="visible: HasMaintenance">Setup the automatic cleanup in the Woodford section &quot;Maintenance&quot;.</p>
		</div>
		<hr style="margin: 1em 0;" />
		<h3>Monitoring options</h3>
		<table style="margin-left:1em;">
			<tr>
				<td>User entity view:</td>
				<td><button data-bind="text: UserEntityView() || '[None]', click: function() { $parent.selectView(UserEntity, UserEntityView); }"></button></td>
			</tr>
			<tr>
				<td></td>
				<td>Choose user entity and its view defining a set of users or resources that are being tracked.</td>
			</tr>
			<tr>
				<td>Visit entity view:</td>
				<td><button data-bind="text: VisitEntityView() || '[None]', click: function() { $parent.selectView(VisitEntity, VisitEntityView); }"></button></td>
			</tr>
			<tr>
				<td></td>
				<td>
					Choose an entity and its view which should be displayed on the Location Tracking Monitor map as visit along with tracked users trajectory.<br/>
					Chosen view should contain following fields: primary field (id), name field, start/end fields, latitude/longitude fields (can be linked from related entity), owner field (lookup to user entity), status field
				</td>
			</tr>
		</table>
	</div>
</script>
<!-- END: tmplLocationTrackingEditor-->
<!-- BEGIN: tmplLocationTrackingRegistrationEditor-->
<script id="tmplLocationTrackingRegistrationEditor" type="text/html">
	<div class="content-wrapper">
		<div>Please, specify CRM user and fill in his/her password to register this organization for the location tracking web service.</div>
		<br />
		<div>
			This information is stored on the Resco's server which hosts the web service for background GPS position reporting. This is because the app does
			not have access to the user’s password when it runs on background. The web service then creates records in the target CRM system using these
			user's credentials.
		</div>
		<br />
		<table>
			<tr>
				<td>Username:</td>
				<td><button data-bind="text: Username, click: ShowUserDialog" style="box-sizing:border-box;width:300px;height:2em;"></button></td>
			</tr>
			<tr>
				<td>Password:</td>
				<td><input type="password" data-bind="value: Password" style="box-sizing:border-box;width:300px;height:2em;" /></td>
			</tr>
		</table>
	</div>
</script>
<!-- END: tmplLocationTrackingRegistrationEditor-->
<!-- BEGIN: tmplCodeEditDialog-->

<script id="tmplCodeEditDialog" type="text/html">
	<div class="codeEditor" style="flex: 1 1 auto"></div>
</script>

<!-- END: tmplCodeEditDialog-->
<script id="tmplDefaultListHeaderTemplate" type="text/html">
	<div class="label" data-bind="text: Label"></div>
</script>

<script id="tmplDefaultListItemTemplate" type="text/html">
	<div class="defaultListItemTemplate" data-bind="text: Data"></div>
</script>
<!--
		tmplLookupFormDialog Control Template
	-->
<script id="tmplLookupFormDialog" type="text/html">
	<div class="lookupForm">
		<header>
			<h3 data-bind="text: Caption"></h3>
			<i id="dialogCloseButton" class="woodfordsprite icon-woodford_Close" data-bind="click: OnCloseClicked"></i>
		</header>
		<main>
			<div style="display: flex; flex-direction: row; justify-content:space-between; margin: 5px;">
				<select
					data-bind="	options: Entities(),
									optionsText: function(item){ return item.EntityMeta.DisplayName; },
									value: SelectedEntity,
									valueAllowUnset: false"
					style="flex: 1 1 auto;"
				></select>
				<div style="flex: 2 1 auto; display: flex; flex-direction: row; align-items: center;">
					<div style="padding: 0 5px;"><b>Search: </b></div>
					<input id="nameFilter" type="text" data-bind="value: EntityNameFilter()" style="width:100%;box-sizing:border-box" />
				</div>
			</div>
			<div data-bind="grid: Grid" data-definitiononly="false" style="flex: 1 1 0; background: white">
				<!-- data-sortable="true" data-horalign="left" data-sort="ascending" -->
				<div data-columnname="Name" data-flex="1 0 150px" data-binding="Name"></div>
			</div>
		</main>
		<!-- ko if: Commands().length > 0 -->
		<footer>
			<!-- ko foreach: Commands -->
			<button data-bind="text: Label, click: function(cmd) { $parent.OnCommandClicked.call($parent, cmd); }, attr: { disabled: Disabled }"></button>
			<!-- /ko -->
		</footer>
		<!-- /ko -->
	</div>
</script>
<!-- BEGIN: tmplTextEditDialog-->
<script id="tmplTextEditDialog" type="text/html">
	<textarea data-bind="value: Text, attr: {readonly: IsReadOnly}" style="flex: 1 1 auto"></textarea>
</script>
<!-- END: tmplTextEditDialog-->

<!-- BEGIN: tmplImageDialog-->
<script id="tmplImageDialog" type="text/html">
	<img style="max-width: 100%; max-height: 100%; margin: auto" data-bind="attr: { src: ImageData}" />
</script>
<!-- END: tmplImageDialog-->
<!-- BEGIN: tmplVisualizeXmlDialog-->

<script id="tmplVisualizeXmlDialog" type="text/html">
	<div class="visualizeXml" id="visualizeXml" style="height: 100%;"></div>
</script>

<!-- END: tmplVisualizeXmlDialog-->
<!-- BEGIN: tmplDashboardDesigner -->
<script id="tmplDashboardDesigner" type="text/html">
	<div class="designer dashboardDesigner">
		<div class="designer__leftPanel">
			<div class="wfheader">
				<label class="label">Properties</label>
			</div>
			<div class="designerPanel">
				<table style="width:100%">
					<tbody>
						<tr>
							<td colspan="2" class="designerSectionHeader">Dashboard</td>
						</tr>
						<tr>
							<td class="designerLabel">Columns:</td>
							<td><select data-testid="dashboard-columns" data-bind="options: SizeList, value: Columns"></select></td>
						</tr>
						<tr>
							<td class="designerLabel">Rows:</td>
							<td><select data-testid="dashboard-rows" data-bind="options: SizeList, value: Rows"></select></td>
						</tr>
						<!-- ko if: SelectedItem -->
						<!-- ko if: SelectedItem().Component -->
						<!-- ko with: SelectedItem -->
						<tr>
							<td colspan="2" class="designerSectionHeader">Item</td>
						</tr>
						<tr>
							<td class="designerLabel">Column:</td>
							<td><select data-testid="item-column" data-bind="options: CList, value: Column"></select></td>
						</tr>
						<tr>
							<td class="designerLabel">Row:</td>
							<td><select data-testid="item-row" data-bind="options: RList, value: Row"></select></td>
						</tr>
						<tr>
							<td class="designerLabel">Column Span:</td>
							<td><select data-testid="item-column-span" data-bind="options: CSList, value: ColumnSpan"></select></td>
						</tr>
						<tr>
							<td class="designerLabel">Row Span:</td>
							<td><select data-testid="item-row-span" data-bind="options: RSList, value: RowSpan"></select></td>
						</tr>
						<!-- /ko -->
						<!-- /ko -->
						<!-- /ko -->
					</tbody>
				</table>
			</div>
		</div>
		<div class="designerPanelOuter" style="flex:4 1 auto; display:flex; flex-direction:column">
			<div class="wfheader" style="border-left:0; flex: 0 0 auto;">
				<label class="label">Designer</label>
			</div>
			<div style="position:relative;flex:1 1 auto">
				<!-- ko foreach: Placeholders -->
				<div
					style="position:absolute;padding:10px;box-sizing: border-box;"
					data-bind="visible: IsVisible, multiClick: $parent.OnBoxClicked.bind($parent), style:{left:Left, top:Top, width:Width, height:Height }, attr: { 'data-testid': $index() }"
				>
					<div class="dashboardComponent" data-bind="css: { dashboardComponentSelected: IsSelected(), dashboardComponentFull: Component }">
						<div><i data-bind="visible: Component, attr:{ 'class': 'woodfordsprite icon-woodford_' + ImagePath }"></i></div>
						<div data-bind="text: Label"></div>
					</div>
				</div>
				<!-- /ko -->
			</div>
		</div>
	</div>
</script>
<!-- END: tmplDashboardDesigner-->
<!--
		 tmplAboutEditor Editor Template
	 -->
<script id="tmplAboutEditor" type="text/html">
	<div class="content-wrapper">
		<div class="header">
			<span
				data-bind="attr: { class: RESCO ? 'icon-commonui_icon_woodford' : 'icon-commonui_icon_dynamicsfieldservice' }"
				style="margin-right: 8px"
			></span>
			<h1 data-bind="text: fullTitle"></h1>
		</div>

		<!-- ko if: ShowAvailableVersion() -->
		<p><span>Available Version:</span> <span data-bind="text: AvailableVersion"></span></p>
		<!-- /ko -->
		<!-- ko ifnot: RESCO -->
		<p><a href="https://aka.ms/fsmobile-docs" target="_blank">How to Configure Field Service Mobile</a></p>
		<!-- /ko -->

		<h2>Customer Support</h2>
		<!-- ko if: RESCO -->
		<p><a data-bind="text: SupportPortal, attr: {href: SupportPortalUrl}" target="_blank"></a></p>
		<p><a href="https://www.resco.net/support/guides/woodford/" target="_blank">Support documentation</a></p>
		<!-- /ko -->
		<!-- ko ifnot: RESCO -->
		<p><a href="mailto:fsmobilesupport@microsoft.com">Share Feedback</a></p>
		<p><a href="https://go.microsoft.com/fwlink/?LinkId=853505" target="_blank">Support</a></p>
		<!-- /ko -->

		<h2>Connected organization</h2>
		<p><span>Unique Id:</span> <span data-bind="text: OrganizationId"></span></p>
		<p><span>Unique Name:</span> <span data-bind="text: OrganizationUniqueName"></span></p>

		<!-- ko ifnot: RESCO -->
		<div class="branding">
			<span class="icon-woodford_logo_msft_dynamics365"></span>
		</div>
		<!-- /ko -->
		<p>Powered By Resco.Net</p>
	</div>
</script>
<script id="tmplAttributeDialog" type="text/html">
	<div style="display:flex; flex-direction:column; padding: 10px">
		<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
			<label style="padding:2px; font-size: larger; width: 130px">LOGICAL NAME</label>
			<input
				type="text"
				data-bind="textInput:Name, enable: IsNameEditable"
				placeholder=""
				style="box-sizing:border-box; padding:10px 10px; display:inline-block; border: 1px solid #ccc; border-radius:4px; margin: 5px 5px 0px 50px"
			/>
		</div>
		<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
			<label style="padding:2px; font-size: larger; width: 130px">DISPLAY NAME</label>
			<input
				type="text"
				data-bind="textInput:DisplayName"
				placeholder=""
				style="box-sizing:border-box; padding:10px 10px; display:inline-block; border: 1px solid #ccc; border-radius:4px; margin: 5px 5px 0px 50px"
			/>
		</div>
		<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
			<label style="padding:2px; font-size: larger; width: 130px">TYPE</label>
			<p style="margin-left: 50px" data-bind="text:Type"></p>
		</div>
		<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
			<label style="padding:2px; font-size: larger">ALLOWED PERMISSIONS</label>
			<div style="max-width: 150px; display: flex; align-items:center; padding: 10px">
				<input id="cbIsActivity" style="width: 15px; height: 15px" type="checkbox" data-bind="checked: AllowedRead, enable: AllowedReadEnabled" />
				<label>READ</label>
			</div>
			<div style="max-width: 150px; display: flex; align-items:center; padding: 10px">
				<input id="cbIsActivity" style="width: 15px; height: 15px" type="checkbox" data-bind="checked: AllowedCreate, enable: AllowedCreateEnabled" />
				<label>CREATE</label>
			</div>
			<div style="max-width: 150px; display: flex; align-items:center; padding: 10px">
				<input id="cbIsActivity" style="width: 15px; height: 15px" type="checkbox" data-bind="checked: AllowedUpdate, enable: AllowedUpdateEnabled" />
				<label>UPDATE</label>
			</div>
		</div>
		<div data-bind="visible: IsFormatVisible() === true && IsDateTimeVisible() === true">
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
				<label style="padding:2px; font-size: larger; width: 130px">BEHAVIOR</label>
				<select
					style="margin-left: 50px"
					data-bind="options:DateTimeBehaviorOptions, optionsText: function(item) {return item.Key}, optionsValue: function(item) {return item.Value}, value:DateTimeBehavior"
				></select>
			</div>
		</div>
		<div data-bind="visible: IsFormatVisible">
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
				<label style="padding:2px; font-size: larger; width: 130px">FORMAT</label>
				<select
					style="margin-left: 50px"
					data-bind="options:FormattingOptions, optionsText: function(item) {return item.Label}, optionsValue: function(item) {return item.Label}, value:SelectedFormatting"
				></select>
			</div>
		</div>
		<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
			<label style="padding:2px; font-size: larger; width: 130px">REQUIRED</label>
			<input
				id="cbIsRequired"
				style="width: 15px; height: 15px; margin-left: 50px"
				type="checkbox"
				data-bind="checked: Required, enable: IsRequiredEnabled"
			/>
		</div>
		<div data-bind="visible: IsMinMaxVisible">
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
				<label style="padding:2px; font-size: larger; width: 130px">MIN</label>
				<input
					type="text"
					data-bind="textInput:Min"
					placeholder=""
					style="box-sizing:border-box; padding:10px 10px; display:inline-block; border: 1px solid #ccc; border-radius:4px; margin: 5px 5px 0px 50px"
				/>
			</div>
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
				<label style="padding:2px; font-size: larger; width: 130px">MAX</label>
				<input
					type="text"
					data-bind="textInput:Max"
					placeholder=""
					style="box-sizing:border-box; padding:10px 10px; display:inline-block; border: 1px solid #ccc; border-radius:4px; margin: 5px 5px 0px 50px"
				/>
			</div>
		</div>
		<div data-bind="visible: IsPrecisionVisible">
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
				<label style="padding:2px; font-size: larger; width: 130px">DECIMAL PLACES</label>
				<select
					style="margin-left: 50px"
					data-bind="options:PrecisionOptions, optionsText: function(item) {return item.Key}, optionsValue: function(item) {return item.Value}, value:Precision"
				></select>
			</div>
		</div>
		<div data-bind="visible: IsLengthVisible">
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
				<label style="padding:2px; font-size: larger; width: 130px">LENGTH</label>
				<input
					type="text"
					data-bind="textInput:Length"
					placeholder=""
					style="box-sizing:border-box; padding:10px 10px; display:inline-block; border: 1px solid #ccc; border-radius:4px; margin: 5px 5px 0px 50px"
				/>
			</div>
		</div>
		<div data-bind="visible: IsDefaultVisible">
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
				<label style="padding:2px; font-size: larger; width: 130px">DEFAULT</label>
				<!--<select name="defaultOptions" style="margin-left: 50px" data-bind="options:DefaultOptions, optionsText: function(item) {return item.Key}, optionsValue: function(item) {return item.Value}, value:Default" ></select>-->
				<select
					name="defaultOptions"
					style="margin-left: 50px"
					data-bind="options:DefaultStateDropDown, optionsText: 'Key', optionsValue: 'Value', value:Default"
				></select>
			</div>
		</div>
		<div data-bind="visible: IsTwoOptionsVisible">
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
				<label style="padding:2px; font-size: larger; width: 130px">DEFAULT</label>
				<!--<select name="defaultOptions" style="margin-left: 50px" data-bind="options:DefaultOptions, optionsText: function(item) {return item.Key}, optionsValue: function(item) {return item.Value}, value:Default" ></select>-->
				<select
					name="defaultOptions"
					style="margin-left: 50px"
					data-bind="options:DefaultOptions, optionsText: 'Key', optionsValue: 'Value', value:DefaultBoolean"
				></select>
			</div>
		</div>
		<div data-bind="visible: PicklistOptionsVisible">
			<table>
				<thead>
					<tr>
						<th>State</th>
						<th>Label</th>
					</tr>
				</thead>
				<tbody data-bind="foreach: DefaultStateDropDown">
					<!-- ko if: Value -->
					<tr>
						<td><input type="text" data-bind="valueEnter: Value" /></td>
						<td><input type="text" data-bind="valueEnter: Key" /></td>
						<td><button href="#" data-bind="click: $parent.RemoveOption.bind($parent, $data)">Remove</button></td>
					</tr>
					<!-- /ko -->
				</tbody>
			</table>
		</div>
		<div data-bind="visible: PicklistOptionsVisible">
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
				<label style="padding:2px; font-size: larger; width: 130px">NEW OPTION</label>
				<input
					type="text"
					data-bind="textInput:NewStateKey"
					placeholder=""
					style="box-sizing:border-box; padding:10px 10px; display:inline-block; border: 1px solid #ccc; border-radius:4px; margin: 5px 5px 0px 50px"
				/>
				<button href="#" data-bind="click: $parent.AddOption">Add</button>
			</div>
		</div>
		<div data-bind="visible: IsStateStatusVisible">
			<table>
				<thead>
					<tr>
						<th>State</th>
						<th>Status</th>
						<th>Default</th>
						<th>Label</th>
					</tr>
				</thead>
				<tbody data-bind="foreach: StateStatusOptions">
					<tr>
						<td><p type="text" data-bind="text: StateLabel"></p></td>
						<td><input type="text" data-bind="valueEnter: Value" /></td>
						<td><input style="width: 15px; height: 15px" type="checkbox" data-bind="checked: IsDefault" /></td>
						<td><input type="text" data-bind="valueEnter: Key" /></td>
						<td><button href="#" data-bind="click: $parent.RemoveStateStatus.bind($parent, $data)">Remove</button></td>
					</tr>
				</tbody>
			</table>
		</div>
		<div data-bind="visible: IsStateStatusVisible">
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
				<label style="padding:2px; font-size: larger; width: 130px">NEW OPTION</label>
				<select
					name="defaultOptions"
					style="margin-left: 50px"
					data-bind="options:StateList, optionsText: 'Key', optionsValue: 'Value', value:SelectedStatusState"
				></select>
				<input
					type="text"
					data-bind="textInput:Status"
					style="box-sizing:border-box; padding:10px 10px; display:inline-block; border: 1px solid #ccc; border-radius:4px; margin: 5px 5px 0px 50px"
				/>
				<button href="#" data-bind="click: $parent.AddStateStatus">Add</button>
			</div>
		</div>
		<div data-bind="visible: IsTwoOptionsVisible">
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
				<label style="padding:2px; font-size: larger; width: 130px">LABEL OFF</label>
				<input
					type="text"
					data-bind="textInput:LabelOff"
					placeholder=""
					style="box-sizing:border-box; padding:10px 10px; display:inline-block; border: 1px solid #ccc; border-radius:4px; margin: 5px 5px 0px 50px"
				/>
			</div>
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
				<label style="padding:2px; font-size: larger; width: 130px">LABEL ON</label>
				<input
					type="text"
					data-bind="textInput:LabelOn"
					placeholder=""
					style="box-sizing:border-box; padding:10px 10px; display:inline-block; border: 1px solid #ccc; border-radius:4px; margin: 5px 5px 0px 50px"
				/>
			</div>
		</div>
		<div data-bind="visible: LookupConstraintVisible">
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
				<label style="padding:2px; font-size: larger; width: 130px">CREATE/UPDATE CONSTRAINT</label>
				<select
					style="margin-left: 50px"
					data-bind="options:CreateConstraintOptions, optionsText: function(item) {return item.Key}, optionsValue: function(item) {return item.Value}, value:CreateUpdateConstraint, disable: _isIntersect === true"
				></select>
			</div>
		</div>
		<div data-bind="visible: LookupConstraintVisible() === true && DeleteConstraintVisible() === true">
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
				<label style="padding:2px; font-size: larger; width: 130px">DELETE CONSTRAINT</label>
				<select
					style="margin-left: 50px"
					data-bind="options:DeleteConstraintOptions, optionsText: function(item) {return item.Key}, optionsValue: function(item) {return item.Value}, value:DeleteConstraint, disable: _isIntersect === true || FieldProperties.LogicalName === 'ownerid' || FieldProperties.LogicalName === 'owningbusinessunit'"
				></select>
			</div>
		</div>
		<div data-bind="visible: LookupConstraintVisible">
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
				<label style="padding:2px; font-size: larger; width: 130px">LOOKUP TARGETS</label>
				<table style="margin-left: 50px">
					<tbody data-bind="foreach: LookupTargets">
						<tr>
							<td><p type="text" data-bind="text: Key"></p></td>
							<td><button href="#" data-bind="click: $parent.RemoveTarget.bind($parent, $data)">X</button></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div
			data-bind="visible: LookupConstraintVisible() === true && FieldProperties.LogicalName !== 'ownerid' && FieldProperties.LogicalName !== 'owningbusinessunit'"
		>
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
				<label style="padding:2px; font-size: larger; width: 130px">NEW TARGET</label>
				<select
					style="margin-left: 50px"
					data-bind="options:LookupTargetOptions, optionsText: function(item) {return item.Key}, value:SelectedLookupTarget"
				></select>
				<button href="#" data-bind="click: $parent.AddTarget">Add</button>
			</div>
		</div>
		<div style="width: 50%; max-width: 500px; display: flex; flex-direction: row; align-items: center">
			<label style="padding:2px; font-size: larger; width: 130px">DESCRIPTION</label>
			<input
				type="text"
				data-bind="textInput:Description"
				placeholder=""
				style="box-sizing:border-box; padding:10px 10px; display:inline-block; border: 1px solid #ccc; border-radius:4px; margin: 5px 5px 0px 50px"
			/>
		</div>
	</div>
</script>
<!--
		Editor Template
		This is HTML envelope for editors it contains just two divs, one is handled by appForm when resizing events occur etc, the second is the root of the editor content

		You can define GUI of specific editor either by defining the knockout template and returning the tempaltes name in GetTemplateName() method,
		or you can manipulate the HTML Element that is passed to editor in Appended() handler (you can use jquery, DOM object manipulations,...)
	-->
<script id="tmplWoodfordEditor" type="text/html">
	<div class="woodfordEditor" data-bind="attr:{ title: SetHeaderTitle(),class: gridClassName()}">
		<!-- ko if: GetHeaderTemplateName() -->
		<div class="header" data-bind="template: {name: GetHeaderTemplateName}"></div>
		<!-- /ko -->
		<!-- ko ifnot: GetHeaderTemplateName() -->
		<div class="header" data-bind="visible: ShowHeader">
			<div class="label">
				<span data-bind="text: Label"></span>
			</div>
			<!-- ko if: ShowToggleImages() -->
			<div class="toggleImagestyle">
				<span data-bind="click:displayNewImageComponent, css: { activeStyle: newImageComponentVisible()}">Default</span>
				<span data-bind="click:displayOldImageComponent , css: { activeStyle: !newImageComponentVisible()}">Legacy</span>
			</div>
			<!-- /ko -->
			<!-- ko if: ShowFilter() -->
			<div class="search">
				<input id="searchbox" class="search__input" type="text" data-bind="value: FilterText, valueUpdate: 'afterkeydown'" placeholder="Search..." />
			</div>
			<!-- /ko -->
			<!-- ko if: ShowRefresh() -->
			<div class="refreshBtn" data-bind="click: Refresh">
				<span class="refreshBtn__label">Refresh</span>
				<i class="woodfordsprite icon-woodford_Refresh_24"></i>
			</div>
			<!-- /ko -->
			<!-- ko if: ShowCollapseAll() -->
			<div class="refreshBtn">
				<i
					data-bind="click:CollapseAllGroups,attr: { class: AllGroupsCollapsed() ? 'woodfordsprite icon-woodford_Expand_24' : 'woodfordsprite icon-woodford_Collapse_24' }"
				></i>
			</div>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<div
			class="content"
			style="display:flex;flex-direction: column;"
			data-bind="template: { name: GetContentTemplateName }, style: { height: ShowHeader() ? 'calc(100% - 39px)' : '100%' }"
		></div>
	</div>
</script>

<!--
		Base Editor Template
		Simple Editor, has no content. this is default editor, if no template name is specified in GetTemplateName(), than this template is used
	-->
<script id="tmplBaseWoodfordEditor" type="text/html"></script>
<script id="tmplBrandedAppsEditor" type="text/html">
	<div data-bind="visible: IsRegisterVisible, style: {'margin-left': '5px', 'padding-top': '10px', 'width': '100%'}">
		<b style="color: red"
			>Currently, you don't have an access to mobile apps configurations. Please submit your email to create and manage mobile apps.</b
		>
		<button data-bind="click: CreateUserAccount, style: {'padding': '5px 10px', 'border-radius': '12px', 'background': 'white'}">Submit email</button>
	</div>
	<div style="padding: 5px; height: 100%">
		<p style="color: darkblue">
			<b
				>Configure new custom application with your own branding and logo. The application is designed for App Store (iOS devices) and Play Store
				(Android devices).</b
			>
		</p>
		<p>
			Create new custom application configuration by 'New' button, fill in all necessary information, add your custom icons and send the request by
			'Request' button. Our sales department will contact you regarding the request. Once it is accepted, it will be possible to publish the app to
			the corresponding stores. Mobile Apps service requires payment for each request.
		</p>
		<!--<p><b>Custom application pricing information:</b></p>-->
		<div data-bind="grid: BrandedApps" data-definitiononly="false" data-multiselect="false" style="height: 100%">
			<div
				data-columnname="Package Name"
				data-flex="1 1 100px"
				data-binding="Attributes.name"
				data-sortable="true"
				data-horalign="left"
				data-sort="ascending"
			></div>
			<div
				data-columnname="Application Title"
				data-flex="1 1 100px"
				data-binding="Attributes.apptitle"
				data-sortable="true"
				data-horalign="left"
				data-sort="ascending"
			></div>
			<div data-columnname="Created On" data-flex="1 1 40px" data-binding="Attributes.createdon" data-sortable="true" data-horalign="left">
				<div style="padding: 5px" data-bind="text: dateAsLongDateString(data.Attributes.createdon.Value)"></div>
			</div>
			<div
				data-columnname="Status"
				data-flex="1 1 100px"
				data-binding="Attributes.statuscode"
				data-sortable="true"
				data-horalign="left"
				data-sort="ascending"
			></div>
		</div>
	</div>
</script>
<script id="tmplBrandedDownloadDialog" type="text/html">
	<div style="padding: 5px; height: 100%">
		<p>If completed builds are listed below, but their download links are not available, it means they are expired. Please request new build.</p>
		<div
			data-bind="grid: BuildItemsGrid"
			data-definitiononly="false"
			data-multiselect="false"
			style="height: calc(100% - 60px);white-space:nowrap;margin-top:10px"
		>
			<div data-columnname="Name" data-flex="1 0 50px" data-binding="Attributes.name" data-sortable="false" data-horalign="left"></div>
			<div data-columnname="Version" data-flex="1 0 10px" data-binding="Attributes.appversion" data-sortable="false" data-horalign="left"></div>
			<div data-columnname="Created On" data-flex="1 0 30px" data-binding="Attributes.createdon" data-sortable="true" data-horalign="left">
				<div style="padding: 5px" data-bind="text: dateAsLongDateString(data.Attributes.createdon.Value)"></div>
			</div>
			<div data-columnname="Android" data-flex="1 0 30px" data-binding="Attributes.androidurl" data-sortable="false" data-horalign="center">
				<div style="padding-top: 5px">
					<a data-bind="attr: { href: data.Attributes.androidurl}" target="_blank">download</a>
				</div>
			</div>
			<div data-columnname="iOS" data-flex="1 0 30px" data-binding="Attributes.iosurl" data-sortable="false" data-horalign="center">
				<div style="padding-top: 5px">
					<a data-bind="attr: { href: data.Attributes.iosurl}" target="_blank">download</a>
				</div>
			</div>
		</div>
	</div>
</script>
<!--
		 tmplBrandingEditor Editor Template
	 -->
<script id="tmplBrandingEditor" type="text/html">
	<table style="width:100%">
		<tbody>
			<!-- ko foreach: Fields -->
			<tr>
				<td>
					<b data-bind="text: Name" style="padding:2px;white-space:nowrap"></b>
				</td>
				<td style="width:100%">
					<input data-bind="value: Value, attr: {'data-testid': 'branding-' + Name}" style="width:100%;box-sizing:border-box" />
				</td>
			</tr>
			<!-- /ko -->
		</tbody>
	</table>
</script>
<!--
		tmplCheckUserDialog Editor Template
	-->
<script id="tmplCheckUserDialog" type="text/html">
	<div class="CheckUser__input">
		<span class="CheckUser__label">CheckUser</span>
		<input id="nameFilter" type="text" data-bind="value: Name()" style="width:100%; box-sizing:border-box" />
	</div>
	<div data-bind="grid: Grid" data-definitiononly="false" data-groupbinding="AppName" style="flex: 1 1 auto; background: white">
		<div data-columnname="Name" data-flex="1 0 100px" data-binding="Name" data-sortable="true" data-horalign="left"></div>
		<div
			data-columnname="Priority"
			data-flex="0 1 100px"
			data-binding="Priority"
			data-sortable="true"
			data-sort="descending"
			data-horalign="left"
		></div>
		<div data-columnname="Team" data-flex="0 1 100px" data-binding="Team" data-sortable="true" data-horalign="left"></div>
		<div data-columnname="Role" data-flex="0 1 100px" data-binding="Role" data-sortable="true" data-horalign="left"></div>
	</div>
</script>
<!--
    Config Editor Template
    -->
<script id="tmplConfigEditor" type="text/html">
	<!-- ko if: IsSearch -->
	<div style="height: 100%; overflow-y: hidden;display: flex;flex-direction: column">
		<div style="display: inline-flex; background: #FFF; z-index: 1; position: relative; max-height: 3em; min-width: 100%;">
			<h3 style="padding: 0 20px; margin-top: 0px; display: flex; justify-content: flex-end; flex: 10 1 0px; min-width: 200px;">Name</h3>
			<h3 style="padding: 0 20px; margin-top: 0px; display: flex; justify-content: center; flex: 1 1 0px; min-width: 50px;">Lock</h3>
			<h3 style="padding: 0 20px; margin-top: 0px; display: flex; justify-content: center; min-width: 150px;">Value</h3>
			<h3 style="padding: 0 20px; margin-top: 0px; display: flex; justify-content: center; width: 150px;">Default Value</h3>
			<h3 style="padding: 0 20px; margin-top: 0px; display: flex; justify-content: center; flex: 20 1 0px; min-width: 300px;"></h3>
		</div>
		<div style="display: inline-block; top: 0; position: relative; min-width: 100%; height: calc(100% - 4em); overflow-y: auto;">
			<!-- ko foreach: Categories() -->
			<div class="configEditorTab">
				<hr />
				<input data-bind="attr: { id: 'ce' + $data }" type="checkbox" name="tabs" />
				<label data-bind="attr: { for: 'ce' + $data }, text: $parent.CategoryLabel($data)"></label>
				<hr />
				<div class="tab-content">
					<div style="display: flex; flex-direction: column; flex: 0 1 auto">
						<!-- ko foreach: $parent.CategoryValues($data, true) -->
						<div style="display: flex; align-items: center; padding: 5px 0; border-bottom: 1px dashed #D0D0D0;">
							<div style="display: flex; padding: 0 20px; flex: 10 1 0px; min-width: 200px;">
								<b style="cursor: pointer;" data-bind="visible: IsSet(), click: OnUnsetClick">X</b>
								<span style="margin-left: auto;" data-bind="text: Label(), style: { fontWeight: IsSet() ? 'bold':'' }"></span>
							</div>
							<div style="display: flex; padding: 0 20px; flex: 1 1 0px; align-items: center; justify-content: center; min-width: 50px;">
								<input type="checkbox" data-bind="attr: { id: 'ceLock' + Name() }, checked: IsReadOnly" />
							</div>
							<div style="display: flex; padding: 0 20px; align-items: center; justify-content: center; min-width: 150px; height: 2em;">
								<!-- ko if: ValueType === 'string' -->
								<input style="width: 150px; box-sizing: border-box; max-height: 100%;" type="text" data-bind="value: Value" />
								<!-- /ko -->
								<!-- ko if: ValueType === 'number' -->
								<input style="width: 150px; box-sizing: border-box; max-height: 100%;" type="number" data-bind="value: Value" />
								<!-- /ko -->
								<!-- ko if: (ValueType === 'boolean' || ValueType === 'enum' || ValueType === 'array') -->
								<select
									style="width: 150px; box-sizing: border-box; min-height: 100%;"
									data-bind="	options: AllowedValues,
									optionsText: function(item){ return item.Key; },
									optionsValue: function(item){ return item.Value; },
									value: Value,
									valueAllowUnset: false"
								></select>
								<!-- /ko -->
							</div>
							<div style="display: flex; padding: 0 20px; align-items: center; justify-content: center; width: 150px;">
								<span data-bind="text: DefaultValueLabel"></span>
							</div>
							<div style="display: flex; padding: 0 20px; flex: 20 1 0px; min-width: 300px;">
								<span data-bind="text: HelpText()"></span>
							</div>
						</div>
						<!-- /ko -->
					</div>
				</div>
			</div>
			<!-- /ko -->
		</div>
	</div>
	<!-- /ko -->
	<!-- ko ifnot: IsSearch -->
	<div class="configEditorTab" style="display: block; top: 0; position: relative; min-width: 100%; overflow: hidden; height: 100%;overflow:auto">
		<!-- ko foreach: Categories() -->
		<button
			data-bind="attr: { class: $data === $parent.SelectedCategory() ? 'configCategoryTabLink configCategoryTabLink-selected' : 'configCategoryTabLink' }, click: function(){ $parent.SetCategory($data)}"
		>
			<label data-bind="attr: { for: 'ce' + $data }, text: $parent.CategoryLabel($data)"></label>
		</button>
		<!-- /ko -->
		<div class="configTabHeader" style="display: flex; z-index: 1; position: relative; max-height: 4em; min-width: 100%; padding: 10px 0;">
			<div style="display: flex; justify-content: space-between; flex: 10 1 0px; min-width: 200px; padding: 0 20px;">
				<div class="refreshBtn" title="" data-bind=" css: { refreshBtnPushed: SubCategoriesPacked }, click: PackOrUnpackAllSubcategories">
					<i
						class="woodfordsprite"
						data-bind="css: {'icon-woodford_Collapse_24': !SubCategoriesPacked(), 'icon-woodford_Expand_24': SubCategoriesPacked}"
					></i>
				</div>
				<h3 style="margin: 0px;">NAME</h3>
			</div>

			<h3 style="padding: 0 20px; margin: 0px; display: flex; justify-content: center; flex: 1 1 0px; min-width: 50px;">LOCK</h3>
			<h3 style="padding: 0 20px; margin: 0px; display: flex; justify-content: center; min-width: 150px;">VALUE</h3>
			<h3 style="padding: 0 20px; margin: 0px; display: flex; justify-content: flex-start; width: 150px;">DEFAULT VALUE</h3>
			<h3 style="padding: 0 20px; margin: 0px; display: flex; justify-content: flex-start; flex: 20 1 0px; min-width: 300px;">DESCRIPTION</h3>
		</div>
		<div style="display: flex; flex-direction: column; flex: 0 1 auto; height: calc(100% - 7em);width: 100%;">
			<!-- ko foreach: GetSubcategories() -->
			<div class="configTabSubcategory" data-bind="visible: $data.numIndex > -1, click: $data.changePacking">
				<i
					class="woodfordsprite"
					style="margin: 0 5px; cursor: pointer"
					data-bind="css: {'icon-woodford_Collapsed_32': $data.isPacked, 'icon-woodford_Expanded_32': !$data.isPacked()}"
				></i>
				<label style="vertical-align: super" data-bind="attr: { for: 'ce' + $data }, text: $data.label"></label>
			</div>
			<!-- ko foreach: $parent.SubCategoryValues($data)-->
			<div style="display: flex; align-items: center; padding: 5px 0; border: 1px solid #D0D0D0;border-bottom: 1px dashed #D0D0D0; border-top: none;">
				<div style="display: flex; padding: 0 20px; flex: 10 1 0px; min-width: 200px; text-align: end;">
					<b style="cursor: pointer;" data-bind="visible: IsSet(), click: OnUnsetClick">X</b>
					<span style="margin-left: auto;" data-bind="text: Label(), style: { fontWeight: IsSet() ? 'bold':'' }"></span>
				</div>
				<div style="display: flex; padding: 0 20px; flex: 1 1 0px; align-items: center; justify-content: center; min-width: 50px;">
					<input type="checkbox" data-bind="attr: { id: 'ceLock' + Name() }, checked: IsReadOnly" />
				</div>
				<div style="display: flex; padding: 0 20px; align-items: center; justify-content: center; min-width: 150px; height: 2em;">
					<!-- ko if: ValueType === 'string' -->
					<input style="width: 150px; box-sizing: border-box; max-height: 100%;" type="text" data-bind="value: Value" />
					<!-- /ko -->
					<!-- ko if: ValueType === 'number' -->
					<input style="width: 150px; box-sizing: border-box; max-height: 100%;" type="number" data-bind="value: Value" />
					<!-- /ko -->
					<!-- ko if: (ValueType === 'boolean' || ValueType === 'enum' || ValueType === 'array') -->
					<select
						style="width: 150px; box-sizing: border-box; min-height: 100%;"
						data-bind="	options: AllowedValues,
									optionsText: function(item){ return item.Key; },
									optionsValue: function(item){ return item.Value; },
									value: Value,
									valueAllowUnset: false"
					></select>
					<!-- /ko -->
				</div>
				<div style="display: flex; padding: 0 20px; align-items: center; justify-content: center; width: 150px;">
					<span data-bind="text: DefaultValueLabel"></span>
				</div>
				<div style="display: flex; padding: 0 20px; flex: 20 1 0px;"><span data-bind="text: HelpText()"></span></div>
			</div>
			<!-- /ko -->
			<!-- /ko -->
		</div>
	</div>
	<!-- /ko -->
</script>
<!--
		 tmplConflictDialog Editor Template
	-->
<script id="tmplConflictDialog" type="text/html">
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>

	<div data-bind="grid: Grid" id="conflictgrid" data-definitiononly="false" style="flex: 1 1 auto; background: white">
		<div data-columnname="Entity Name" data-flex="1 0 150px" data-horalign="left" data-sortable="true" data-sort="ascending">
			<div style="display:flex; height:100%; align-items:center">
				<input type="checkbox" data-bind="checked: data.IsChecked, enable: data.IsCheckboxEnabled" />&nbsp;<span
					data-bind="text: data.EntityName"
				></span>
			</div>
		</div>
		<div data-columnname="Record Name" data-flex="0 1 250px" data-binding="RecordName" data-sortable="true" data-horalign="left"></div>
		<div
			data-columnname="Conflict definition"
			data-flex="0 1 250px"
			data-binding="ConflictDefinition"
			data-sortable="true"
			data-horalign="left"
		></div>
		<div data-columnname="Resolution" data-flex="0 1 150px" data-binding="Resolution" data-sortable="true" data-horalign="left">
			<div style="height:100%; display:flex; align-items:center">
				<i class="woodfordsprite" data-bind="css: data.ResolutionImage" style="margin:0px 5px;"></i>
				<div data-bind="text: data.Resolution == 'undefined' ? '' : data.Resolution"></div>
			</div>
		</div>
		<div data-columnname="Status" data-flex="0 1 150px" data-binding="Status" data-sortable="true" data-horalign="left">
			<div style="height:100%; display:flex; align-items:center" class="divpadding">
				<div data-bind="text: data.Status == 'undefined' ? '' : data.Status"></div>
			</div>
		</div>
		<div
			data-columnname="Remove resolution"
			data-flex="2 1 190px"
			data-columntype="command"
			data-commands="Remove resolution"
			data-horalign="center"
			data-sortable="false"
		></div>
		<div
			data-columnname="Detail"
			data-flex="2 1 70px"
			data-columntype="command"
			data-commands="Detail"
			data-horalign="center"
			data-sortable="false"
		></div>
		<!--<div data-columnname="Take Version" data-flex="2 1 70px" data-columntype="command" data-commands="Server" data-horalign="center" data-sortable="false"></div>
				<div data-columnname="Take Version" data-flex="2 1 70px" data-columntype="command" data-commands="Device" data-horalign="center" data-sortable="false"></div>-->
	</div>

	<!--<input type="button" data-bind="enable: IsEnabled" value="Take server version" /> <input type="button" data-bind="enable: IsEnabled" value="Take device version" /> <input type="button" data-bind="enable: IsEnabled" value="Ignore Conflicts" />-->
</script>
<!--
		 tmplDeviceDetailDialog Editor Template
	-->
<script id="tmplDeviceDetailDialog" type="text/html">
	<div>
		<table cellpadding="7" cellspacing="0" width="100%">
			<tr>
				<td><b>Device Name:</b></td>
				<td><span data-bind="text:deviceName"></span></td>
			</tr>
			<tr>
				<td class="rowbackground"><b>Device Id:</b></td>
				<td class="rowbackground"><span data-bind="text:deviceId"></span></td>
			</tr>
			<tr>
				<td><b>Device OS:</b></td>
				<td><span data-bind="text:deviceOS"></span></td>
			</tr>
		</table>
	</div>
</script>
<!-- BEGIN: tmplEditBrandedAppsConfigDialog-->
<script id="tmplEditBrandedAppsConfigDialog" type="text/html">
	<div><button data-bind="click: ExportImages">Export images</button><button data-bind="click: ImportImages">Import images</button></div>
	<div style="flex: 0 0 auto; display:flex">
		<!-- ko foreach: Tabbar -->
		<div class="tabControlItem" data-bind="css: { tabControlItemSelected: Selected() }, click: Clicked, visible: Visible">
			<span style="padding:0.3em" data-bind="text: Name"></span>
		</div>
		<!-- /ko -->
	</div>
	<div
		style="flex:1 1 auto; flex-direction:column; overflow: auto"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===0, template: { name: 'tmplSelectGeneralControl', data: $parent}"
	></div>
	<div
		style="flex:1 1 auto; flex-flow:wrap; flex-direction:row; justify-content: center; overflow: auto"
		data-bind="visible: SelectedTabIndex()===1, template: { name: 'tmplSelectAndroidControl', data: $parent}"
	></div>
	<div
		style="flex:1 1 auto; flex-flow:wrap; flex-direction:row; justify-content: center; overflow: auto"
		data-bind="visible: SelectedTabIndex()===2, template: { name: 'tmplSelectiOSControl', data: $parent}"
	></div>
	<!--<div style="flex:1 1 auto; flex-direction:column" class="flexDiv" data-bind="visible: SelectedTabIndex()===3, template: { name: 'tmplSelectWindowsControl', data: $parent}"></div>-->
</script>
<!-- END: tmplEditBrandedAppsConfigDialog-->
<!-- BEGIN: tmplSelectGeneralControl-->
<script id="tmplSelectGeneralControl" type="text/html">
	<table style="width:100%">
		<p style="margin-top:20px; margin-bottom:30px; padding-left:10px">
			Fill in the following form with valid information. Entered data are common for both application platforms: iOS and Android.<br>
			<b style="color:darkred">Please set value for 'Package Name' wisely. Once the configuration is saved, this field will be read-only.</b>
		</p>
		<tr>
			<td style="width:31%; padding-left:10px"><b>Application Title*</b></td>
			<td style="width:68%"><input type="text" maxlength="32" placeholder="Title displayed below app icon. Max 32 characters." data-bind="textInput:AppIconTitle, style: {'border-color': AppIconTitleColor}" style="width:100%;box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td style="width:31%; padding-left:10px"><b>Package Name*</b></td>
			<td style="width:68%"><input type="text" placeholder="Only a-z and .(dot) are allowed. Example: com.yourcompany.appname " data-bind="textInput:PackageName, style: {'border-color': PackageNameColor}, hasFocus: PackageNameFocus, enable: _isNew" style="width:100%;box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td style="width:31%; padding-left:10px"><b>URL Scheme*</b></td>
			<td style="width:68%"><input type="text" class="URLScheme" data-bind="textInput:URLScheme, style: {'border-color': URLSchemeColor}" style="width:100%;box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td style="width:31%; padding-left:10px"><b>E-mail*</b></td>
			<td style="width:68%"><input type="text" placeholder="E-mail of responsible contact person. Build information will be sent to this e-mail." data-bind="textInput:Email, style: {'border-color': EmailColor}" style="width:100%;box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td style="width:31%; padding-left:10px"><b>Application Background Color*</b></td>
			<td><input class="BrandingAppBackColor" placeholder="Background color for all icons with transparent background." type="text" style="width:100%" data-bind="textInput:AppBackColorHEX, click: OnColorClick, style: {'border-color': AppBackColorColor}" /></td>
			<td style="padding-right:37px"><div class="ColorSquare" style="width:20px; height:20px; border: 1px solid; border-color:grey" data-bind="style: {'background-color': AppBackColorHEX}"></div></td>
		</tr>
	</table>
	<p style="width:90%; padding-left:10px"><b>About information</b></br>It will be possible to overwrite them from the application About setup.</p>
	<table style="width:100%">
		<tr>
			<td style="width:30%; padding-left:10px"><b>Manufacturer*</b></td>
			<td style="width:70%"><input type="text" placeholder="Owner company of the app. Visible in the application 'About' section." data-bind="textInput:Manufacturer, style: {'border-color': ManufacturerColor}" style="width:90%;box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td style="width:30%; padding-left:10px"><b>Application About Title*</b></td>
			<td style="width:70%"><input type="text" placeholder="Main title of the app. Visible in the application 'About' section." data-bind="textInput:AppAboutTitle, style: {'border-color': AppAboutTitleColor}" style="width:90%;box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td style="width:30%; padding-left:10px"><b>Application Subtitle</b></td>
			<td style="width:70%"><input type="text" placeholder="Subtitle of the app. Visible in the application 'About' section." data-bind="value:AppSubtitle" style="width:90%;box-sizing:border-box" /></td>
		</tr>
	</table>
	<div width="100%" style="padding-left:10px"><input id='cbPrefillSyncDialog' type='checkbox' data-bind="checked: PreFillSyncInfo" /><label for='cbPrefillSyncDialog'><span style='color:gray;font-style:italic'>Set default sync dialog information (optional)</span></label></div>
	<table style="width:100%" data-bind="visible:PreFillSyncInfo">
		<p data-bind="visible:PreFillSyncInfo" style="width:90%; padding-left:10px">Set organization data for synchronization dialog.</p>
		<tr>
			<td style="width:30%; padding-left:10px"><b>Organization URL*</b></td>
			<td style="width:70%"><input type="text" placeholder="Default URL for synchronization." data-bind="textInput:OrgURL, style: {'border-color': OrgURLColor}" style="width:90%;box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td style="width:30%; padding-left:10px"><b>User Mode*</b></td>
			<td style="width:70%"><select style="width: 90%" data-bind="options:_userModes, value:UserMode, style: {'border-color': UserModeColor}" ></select></td>
		</tr>
		<tr>
			<td style="width:30%; padding-left:10px"><b>MSAL Mode*</b></td>
			<td style="width:70%"><select style="width: 90%" data-bind="options:_msalModes, value:MSALMode, style: {'border-color': MSALModeColor}" ></select></td>
		</tr>
		<tr>
			<td style="width:30%; padding-left:10px"><b>Domain</b></td>
			<td style="width:70%"><input type="text" data-bind="value:Domain" style="width:90%;box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td style="width:30%; padding-left:10px"><b>Home Realm</b></td>
			<td style="width:70%"><input type="text" data-bind="value:HomeRealm" style="width:90%;box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td style="width:30%; padding-left:10px"><b>ADFS User Name</b></td>
			<td style="width:70%"><input type="text" data-bind="value:ADFSUserName" style="width:90%;box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td style="width:30%; padding-left:10px"><b>Hide User Mode</b></td>
			<td style="width:70%"><input id='cbUserMode' type='checkbox' data-bind="checked: HideUserMode" /></td>
		</tr>
		<tr>
			<td style="width:30%; padding-left:10px"><b>Hide MSAL Mode</b></td>
			<td style="width:70%"><input id='cbMSALMode' type='checkbox' data-bind="checked: HideMSALMode" /></td>
		</tr>
		<tr>
			<td style="width:30%; padding-left:10px"><b>Hide Organization URL</b></td>
			<td style="width:70%"><input id='cbHideOrgURL' type='checkbox' data-bind="checked: HideOrgURL" /></td>
		</tr>
		<tr>
			<td style="width:30%; padding-left:10px"><b>Save Password</b></td>
			<td style="width:70%"><input id='SavePwd' type='checkbox' data-bind="checked: SavePassword" /></td>
		</tr>
	</table>
</script>
<!--END: tmplSelectGeneralControl-->
<!-- BEGIN: tmplSelectAndroidControl-->
<script id="tmplSelectAndroidControl" type="text/html">
	<div style="margin-top:20px; padding-left:1%; width:99%"><b>Please check this checkbox if you want your custom app to be built for Android devices.</b></div>
	<div width="100%" style="padding-left:1%"><input id='cbAndroidDialog' type='checkbox' data-bind="checked: IsAndroidSelected" /><label for='cbAndroidDialog'><span style='color:gray;font-style:italic'>Set Android Configuration</span></label></div>
	<div data-bind="visible: IsAndroidSelected" style="padding-left:1%; margin:1em 0px;">
		<b>Mobile Device Management Support</b><br/>
		<div width="99%"><input id='cbIntuneMAM' type='checkbox' data-bind="checked: intuneMAM" /><label for='cbIntuneMAM'><span>Include MS Intune MAM SDK</span></label></div>
	</div>
	<p data-bind="style: {'display': $parent.IsAndroidSelected() ? 'inline-block' : 'none', 'width': '99%', 'padding-left': '1%'}">
		<b>Upload icons for Android app. All icons are needed.</b></br>Before uploading your own icons, please make sure each icon has valid size (dimensions are set under each icon) and correct background and icon color.
		Icons with transparent background (Android 8+) are colorized with color from 'Application Background Color' setting.</br>
		<a data-bind="attr: { href: 'https://romannurik.github.io/AndroidAssetStudio/index.html'}" target="_blank">Custom Icon Generator for Android</a>
	</p>
	<p data-bind="style: {'display': $parent.IsAndroidSelected() ? 'inline-block' : 'none', 'width': '99%', 'padding-left': '1%'}"><b>Icons for older Android versions compatibility (full-color)</b></p>
	<!-- ko foreach: androidImages -->
	<!-- ko if: $data.name.indexOf('foreground') == -1 && $data.name.indexOf('icon') !== -1-->
	<div style="display: inline-block; flex: auto; flex-direction:column; text-align:center; max-width:150px; margin: 10px" data-bind="style: {'display': $parent.IsAndroidSelected() ? 'inline-block' : 'none'}">
		<img style="display: block; flex: auto; width: auto; height: auto; max-width:150px; border: 1px solid #D5BA76; border-radius:10px; cursor: pointer" data-bind="attr:{src: $data.path}, click: function(data, event){$parent.SelectCustomImage($data, $parent)}, style: {'background-color': ''}" />
		<b data-bind="text: $data.description + 'px'"></b>
	</div>
	<!-- /ko -->
	<!-- /ko -->
	<p data-bind="style: {'display': $parent.IsAndroidSelected() ? 'inline-block' : 'none', 'width': '99%', 'padding-left': '1%'}"><b>Icons for Android 8+ compatibility (transparent-color background)</b></p>
	<!-- ko foreach: androidImages -->
	<!-- ko if: $data.name.indexOf('foreground') !== -1 && $data.name.indexOf('icon') !== -1 -->
	<div style="display: inline-block; flex: auto; flex-direction:column; text-align:center; max-width:150px; margin: 10px" data-bind="style: {'display': $parent.IsAndroidSelected() ? 'inline-block' : 'none'}">
		<img style="display: block; flex: auto; width: auto; height: auto; max-width:150px; border: 1px solid #D5BA76; border-radius:10px; cursor: pointer" data-bind="attr:{src: $data.path}, click: function(data, event){$parent.SelectCustomImage($data, $parent)}, style: {'background-color': $parent.AppBackColorHEX}" />
		<b data-bind="text: $data.description + 'px'"></b>
	</div>
	<!-- /ko -->
	<!-- /ko -->
	<p data-bind="style: {'display': $parent.IsAndroidSelected() ? 'inline-block' : 'none', 'width': '99%', 'padding-left': '1%'}"><b>Splash screen & notification icons (white icon on transparent-color background)</b></p>
	<!-- ko foreach: androidImages -->
	<!-- ko if: $data.name.indexOf('splash') !== -1 || $data.name.indexOf('notification') !== -1-->
	<div style="display: inline-block; flex: auto; flex-direction:column; text-align:center; max-width:150px; margin: 10px" data-bind="style: {'display': $parent.IsAndroidSelected() ? 'inline-block' : 'none'}">
		<img style="display: block; flex: auto; width: auto; height: auto; max-width:150px; border: 1px solid #D5BA76; border-radius:10px; cursor: pointer" data-bind="attr:{src: $data.path}, click: function(data, event){$parent.SelectCustomImage($data, $parent)}, style: {'background-color': $data.name.indexOf('foreground') !== -1 || $data.name.indexOf('splash') !== -1 ? $parent.AppBackColorHEX : ''}" />
		<b data-bind="text: $data.description + 'px'"></b>
	</div>
	<!-- /ko -->
	<!-- /ko -->
</script>
<!--END: tmplSelectAndroidControl-->
<!-- BEGIN: tmplSelectiOSControl-->
<script id="tmplSelectiOSControl" type="text/html">
	<div style="margin-top:20px; padding-left:1%; width:99%"><b>Please check this checkbox if you want your custom app to be built for iOS devices.</b></div>
	<div width="99%" style="padding-left:1%"><input id='cbiOSDialog' type='checkbox' data-bind="checked: IsiOSSelected" /><label for='cbiOSDialog'><span style='color:gray;font-style:italic'>Set iOS Configuration</span></label></div>
	<p data-bind="style: {'display': $parent.IsiOSSelected() ? 'inline-block' : 'none', 'width': '99%', 'padding-left': '1%'}">
		iOS Signing Certificate, iOS Signing Password and iOS Provision Profile are optional. Please provide them all, if you would like to have iOS application signed with them.
	</p>
	<table data-bind="style: {'display': $parent.IsiOSSelected() ? 'inline-block' : 'none', 'width': '90%', 'padding-left': '1%'}">
		<tr>
			<td><b>iOS Signing Certificate</b> (.p12 file)</td>
			<td style="width:55%"><input type="text" data-bind="value:iOSSigningCertName, enable: false" style="width:100%;box-sizing:border-box"></td>
			<td><a href='#' class="iOSSigningCert" data-bind="text: 'Select', click: $parent.SelectIOSFile"></a></td>
		</tr>
		<tr>
			<td><b>iOS Signing Password</b></td>
			<td style="width:55%"><input type="password" data-bind="value:iOSSigningPasswd" style="width:100%;box-sizing:border-box"></td>
		</tr>
		<tr>
			<td><b>iOS Provision Profile</b> (.mobileprovision file)</td>
			<td style="width:55%"><input type="text" data-bind="value:iOSProvisionProfileName, enable: false" style="width:100%;box-sizing:border-box"></td>
			<td><a href='#' class="iOSProvisionProfile" data-bind="text: 'Select', click: $parent.SelectIOSFile"></a></td>
		</tr>
	</table>
	<div data-bind="visible: IsiOSSelected" style="padding-left:1%; margin:1em 0px;">
		<b>Mobile Device Management Support</b><br/>
		<p width="99%"><input id='cbCitrixMAM' type='checkbox' data-bind="checked: citrixMam" /><label for='cbCitrixMAM'><span>Include Citrix MAM SDK</span><span> (requires further steps - <a href="https://docs.resco.net/wiki/Mobile_device_management" target="_blank">Learn more</a>)</span></label></p>
		<p style="width:99%; padding-left: 20px;">MS Intune support requires Intune App Wrapping - <a href="https://docs.resco.net/wiki/Mobile_device_management" target="_blank">Learn more</a></p>
	</div>
	<p data-bind="style: {'display': $parent.IsiOSSelected() ? 'inline-block' : 'none', 'width': '99%', 'padding-left': '1%'}">
		<b>Upload icons for iOS app. All icons are needed.</b></br>Before uploading your own icons, please make sure each icon has valid size (dimensions are set under each icon) and correct background and icon color. If you use transparent-background color icons for full color icons, black background is set to these icons by default.
	</p>
	<p data-bind="style: {'display': $parent.IsiOSSelected() ? 'inline-block' : 'none', 'width': '99%', 'padding-left': '1%'}"><b>Application full-color icons (for retina display)</b></p>
	<!-- ko foreach: iOSImages -->
	<!-- ko if: $data.name.indexOf('Icon') !== -1 && $data.name.indexOf('@') !== -1 -->
	<div style="display: inline-block; flex: auto; flex-direction:column; text-align:center; max-width:150px; margin: 10px" data-bind="style: {'display': $parent.IsiOSSelected() ? 'inline-block' : 'none'}">
		<img style="display: block; flex: auto; width: auto; height: auto; max-width:150px; border: 1px solid #D5BA76; border-radius:10px; cursor: pointer" data-bind="attr:{src: $data.path}, click: function(data, event){$parent.SelectCustomImage($data, $parent)}, style: {'background-color': 'black'}" />
		<b data-bind="text: $data.description + 'px'"></b>
	</div>
	<!-- /ko -->
	<!-- /ko -->
	<p data-bind="style: {'display': $parent.IsiOSSelected() ? 'inline-block' : 'none', 'width': '99%', 'padding-left': '1%'}"><b>Application full-color icons (for non-retina display)</b></p>
	<!-- ko foreach: iOSImages -->
	<!-- ko if: $data.name.indexOf('Icon') !== -1 && $data.name.indexOf('@') == -1-->
	<div style="display: inline-block; flex: auto; flex-direction:column; text-align:center; max-width:150px; margin: 10px" data-bind="style: {'display': $parent.IsiOSSelected() ? 'inline-block' : 'none'}">
		<img style="display: block; flex: auto; width: auto; height: auto; max-width:150px; border: 1px solid #D5BA76; border-radius:10px; cursor: pointer" data-bind="attr:{src: $data.path}, click: function(data, event){$parent.SelectCustomImage($data, $parent)}, style: {'background-color': 'black'}" />
		<b data-bind="text: $data.description + 'px'"></b>
	</div>
	<!-- /ko -->
	<!-- /ko -->
	<p data-bind="style: {'display': $parent.IsiOSSelected() ? 'inline-block' : 'none', 'width': '99%', 'padding-left': '1%'}"><b>Transparent-color background icons (splash screen icons for retina display)</b></p>
	<!-- ko foreach: iOSImages -->
	<!-- ko if: $data.name.indexOf('Icon') == -1 && $data.name.indexOf('@') !== -1-->
	<div style="display: inline-block; flex: auto; flex-direction:column; text-align:center; max-width:150px; margin: 10px" data-bind="style: {'display': $parent.IsiOSSelected() ? 'inline-block' : 'none'}">
		<img style="display: block; flex: auto; width: auto; height: auto; max-width:150px; border: 1px solid #D5BA76; border-radius:10px; cursor: pointer" data-bind="attr:{src: $data.path}, click: function(data, event){$parent.SelectCustomImage($data, $parent)}, style: {'background-color': ''}" />
		<b data-bind="text: $data.description + 'px'"></b>
	</div>
	<!-- /ko -->
	<!-- /ko -->
	<p data-bind="style: {'display': $parent.IsiOSSelected() ? 'inline-block' : 'none', 'width': '99%', 'padding-left': '1%'}"><b>Transparent-color background icons (splash screen icons for non-retina display)</b></p>
	<!-- ko foreach: iOSImages -->
	<!-- ko if: $data.name.indexOf('Icon') == -1 && $data.name.indexOf('@') == -1-->
	<div style="display: inline-block; flex: auto; flex-direction:column; text-align:center; max-width:150px; margin: 10px" data-bind="style: {'display': $parent.IsiOSSelected() ? 'inline-block' : 'none'}">
		<img style="display: block; flex: auto; width: auto; height: auto; max-width:150px; border: 1px solid #D5BA76; border-radius:10px; cursor: pointer" data-bind="attr:{src: $data.path}, click: function(data, event){$parent.SelectCustomImage($data, $parent)}, style: {'background-color': ''}" />
		<b data-bind="text: $data.description + 'px'"></b>
	</div>
	<!-- /ko -->
	<!-- /ko -->
</script>
<!--END: tmplSelectioniOSControl-->
<!-- TODO: IMPLEMENT WINDOWS ONCE IT IS POSSIBLE TO GENERATE WIN APP 
<script id="tmplSelectWindowsControl" type="text/html">
	<div width="100%"><input id='cbWinDialog' type='checkbox' data-bind="checked: IsWindowsSelected" /><label for='cbWinDialog'><span style='color:gray;font-style:italic'>Set Windows Configuration</span></label></div>
</script>
-->
<!--
		tmplEditEntityRequiredFieldsDialog
-->
<script id="tmplEditEntityRequiredFieldsDialog" type="text/html">
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div style="padding: 10px 0px 10px 0px;display: flex; justify-content: space-between; align-items: center;">
		<div>
			<div><input type="text" data-bind="value: filterText, valueUpdate: 'afterkeydown'" placeholder="Search..." /></div>
		</div>
	</div>
	<div data-bind="grid: fieldsGrid" data-definitiononly="false" data-twowaybinding="true" data-multiselect="false" style="height: 100%;">
		<div data-columnname=" " data-flex="0 0 20px" data-binding="isSelected" data-horalign="center" data-sortable="false">
			<input type="checkbox" data-bind="checked: data.isSelected, enable: !data.isInherited(), event: {change: $parent.onIsEnabledChanged}"></input>
		</div>
		<div data-columnname="Name" data-flex="1 1 100px" data-binding="displayName" data-horalign="left" data-sortable="true" data-sort="desc"></div>
		<div data-columnname="Logical Name" data-flex="1 1 100px" data-binding="logicalName" data-horalign="left" data-sortable="true"></div>
	</div>
</script>
<script id="tmplEditMobileDeviceDialog" type="text/html">
	<main style="flex:1 1 auto;display:initial;margin:5px">
		<div>
			<div style="display:inline-block;margin-right: 8px">Security Policy</div>
			<select style="width:150px" data-bind="options: Policies, optionsText: 'Name', value: SelectedPolicy, valueAllowUnset: true"></select>
		</div>
		<div style="margin-top:12px">
			<label style="cursor: pointer"><input type="checkbox" data-bind="nullableChecked: Lock" />Lock Application</label>
		</div>
		<div style="margin-top:8px">
			<label style="cursor: pointer"><input type="checkbox" data-bind="nullableChecked: Wipe" />Wipe Application</label>
		</div>
		<div style="margin-top:8px">
			<label style="cursor: pointer"><input type="checkbox" data-bind="nullableChecked: ForceSync" />Full Sync Application</label>
			<label style="cursor: pointer" data-bind="visible: ForceSync"
				><input type="checkbox" data-bind="nullableChecked: ForceSyncAlways" />Discard Device Changes</label
			>
		</div>
	</main>
</script>
<!-- BEGIN: tmplEditReminderDialog-->
<script id="tmplEditReminderDialog" type="text/html">
	<table>
		<tr>
			<td><b>Entity:</b></td>
			<td><select style="width:200px" data-bind="options: Entities, optionsText: 'DisplayName', value: Entity, enable: IsEntityEnabled"></select></td>
		</tr>
		<tr>
			<td><b>Start Date:</b></td>
			<td><select style="width:200px" data-bind="options: DateFields, optionsText: 'DisplayName', value: StartField"></select></td>
		</tr>
		<tr>
			<td><b>End Date:</b></td>
			<td><select style="width:200px" data-bind="options: DateFields, optionsText: 'DisplayName', value: EndField"></select></td>
		</tr>
		<tr>
			<td><b>Description:</b></td>
			<td><select style="width:200px" data-bind="options: StringFields, optionsText: 'DisplayName', value: DescriptionField"></select></td>
		</tr>
		<tr>
			<td><b>Integration:</b></td>
			<td>
				<select style="width:200px" data-bind="options: IntegrationFields, optionsText: 'Label', optionsValue: 'Index', value: Integration"></select>
			</td>
		</tr>
	</table>
</script>
<!-- END: tmplEditReminderDialog-->
<script id="tmplEditSecurityPolicyDialog" type="text/html">
	<div>
		<h3 data-bind="text: MobileCRM.Woodford.Localization.Instance.Get('Label.Name')"></h3>
		<input type="text" data-bind="value: Security.Name" />
		<h3 data-bind="text: MobileCRM.Woodford.Localization.Instance.Get('Label.SecurityForceLogin')"></h3>
		<input id="cbRequireLogin" type="checkbox" data-bind="checked: Security.Rules[0].IsEnabled" />
		<label for="idRequireLogin" data-bind="text: MobileCRM.Woodford.Localization.Instance.Get('Label.SecuritySessionTimeout')"></label>
		<input type="text" data-bind="value: Security.Rules[0].Value, enable: Security.Rules[0].IsEnabled" style="width: 100px" />
		<h3 data-bind="text: MobileCRM.Woodford.Localization.Instance.Get('Label.SecurityCheckPolicy')"></h3>
		<input id="cbCheckAtAppLogin" type="checkbox" data-bind="checked: Security.Rules[1].IsEnabled" />
		<label for="cbCheckAtAppLogin" data-bind="text: MobileCRM.Woodford.Localization.Instance.Get('Label.SecurityCheckPolicyLogin')"></label>
		<br />
		<input id="cbCheckEveryXHours" type="checkbox" data-bind="checked: Security.Rules[2].IsEnabled" />
		<label for="cbCheckEveryXHours" data-bind="text: MobileCRM.Woodford.Localization.Instance.Get('Label.SecurityCheckPolicyHours')"></label>
		<input type="text" data-bind="value: Security.Rules[2].Value, enable: Security.Rules[2].IsEnabled" style="width: 100px" />
		<h3 data-bind="text: MobileCRM.Woodford.Localization.Instance.Get('Label.SecurityLock')"></h3>
		<input id="cbLockApplication" type="checkbox" data-bind="checked: Security.Rules[3].IsEnabled" />
		<label for="cbLockApplication" data-bind="text: MobileCRM.Woodford.Localization.Instance.Get('Label.SecurityLock')"></label>
		<br />
		<input id="cbLockIfNoContact" type="checkbox" data-bind="checked: Security.Rules[4].IsEnabled" />
		<label for="cbLockIfNoContact" data-bind="text: MobileCRM.Woodford.Localization.Instance.Get('Label.SecurityAfterNoConnect')"></label>
		<input type="text" data-bind="value: Security.Rules[4].Value, enable: Security.Rules[4].IsEnabled" style="width: 100px" />
		<br />
		<input id="cbLockDuringNonBusiness" type="checkbox" data-bind="checked: Security.Rules[5].IsEnabled" />
		<label for="cbLockDuringNonBusiness" data-bind="text: MobileCRM.Woodford.Localization.Instance.Get('Label.SecurityLockDuring')"></label>
		<input type="text" data-bind="value: Security.Rules[5].Value, enable: Security.Rules[5].IsEnabled" style="width: 100px" />
		<br />
		<input id="cbLockInvalidPasswordXTimes" type="checkbox" data-bind="checked: Security.Rules[6].IsEnabled" />
		<label for="cbLockInvalidPasswordXTimes" data-bind="text: MobileCRM.Woodford.Localization.Instance.Get('Label.SecurityWrongPassword')"></label>
		<input type="text" data-bind="value: Security.Rules[6].Value, enable: Security.Rules[6].IsEnabled" style="width: 100px" />
		<br />
		<h3 data-bind="text: MobileCRM.Woodford.Localization.Instance.Get('Label.SecurityWipe')"></h3>
		<input id="cbWipeApplication" type="checkbox" data-bind="checked: Security.Rules[7].IsEnabled" />
		<label for="cbWipeApplication" data-bind="text: MobileCRM.Woodford.Localization.Instance.Get('Label.SecurityWipe')"></label>
		<br />
		<input id="cbWipeIfNoContact" type="checkbox" data-bind="checked: Security.Rules[8].IsEnabled" />
		<label for="cbWipeIfNoContact" data-bind="text: MobileCRM.Woodford.Localization.Instance.Get('Label.SecurityAfterNoConnect')"></label>
		<input type="text" data-bind="value: Security.Rules[8].Value, enable: Security.Rules[8].IsEnabled" style="width: 100px" />
		<br />
		<input id="cbWipeInvalidPasswordXTimes" type="checkbox" data-bind="checked: Security.Rules[9].IsEnabled" />
		<label for="cbWipeInvalidPasswordXTimes" data-bind="text: MobileCRM.Woodford.Localization.Instance.Get('Label.SecurityWrongPassword')"></label>
		<input type="text" data-bind="value: Security.Rules[9].Value, enable: Security.Rules[9].IsEnabled" style="width: 100px" />
		<br />
		<h3>Migration</h3>
		<input id="chMigrateEnable" type="checkbox" data-bind="checked: Security.migration.enabled" />
		<label for="chMigrateEnable">Enable</label>
		<br />
		<br />
		<div style="padding-left: 24px;">
			<label>Old URL</label>
			<input type="text" data-testid="old-url" data-bind="value: Security.migration.oldUrl, enable: Security.migration.enabled" style="width:350px" />
			<br />
			<label>New URL</label>
			<input type="text" data-testid="new-url" data-bind="value: Security.migration.newUrl, enable: Security.migration.enabled" style="width:350px" />
			<br />
			<label>Time frame from</label>
			<input type="text" data-testid="time-frame-from" data-bind="datetimepicker: Security.migration.from, enable: Security.migration.enabled" />
			<br />
			<label>Time frame to</label>
			<input type="text" data-testid="time-frame-to" data-bind="datetimepicker: Security.migration.to, enable: Security.migration.enabled" />
		</div>
		<br />
	</div>
</script>
<!-- BEGIN: EntityEditor -->
<script id="tmplEntityEditor" type="text/html">
	<div class="entityEditor">
		<div class="entityEditor__header">
			<div class="entityEditor__row">
				<label class="entityEditor__label">Display Name</label>
				<label class="entityEditor__text" data-bind="text: DisplayName"></label>
				<label class="entityEditor__description" data-bind="text: Description"></label>
			</div>
			<div class="entityEditor__row">
				<label class="entityEditor__label">Name</label>
				<label class="entityEditor__text" data-bind="text: EntityName"></label>
			</div>
			<!-- ko if: EntityExternalName -->
			<div class="entityEditor__row">
				<label class="entityEditor__label">External Name</label>
				<label class="entityEditor__text" data-bind="text: EntityExternalName"></label>
			</div>
			<!-- /ko -->
			<div class="entityEditor__row__checkboxes">
				<label class="entityEditor__label">Permission</label>
				<label class="entityEditor__checkbox"><input type="checkbox" data-bind="checked: CanRead, enable: IsEnabled" />Read</label>
				<label class="entityEditor__checkbox"
					><input type="checkbox" data-bind="checked: CanWrite, enable: IsEnabled && (!isVirtual || modifiedOnField() !== undefined)" />Write</label
				>
				<label class="entityEditor__checkbox"
					><input type="checkbox" data-bind="checked: CanCreate, enable: IsEnabled && (!isVirtual || modifiedOnField() !== undefined)" />Create</label
				>
				<label class="entityEditor__checkbox"
					><input type="checkbox" data-bind="checked: CanDelete, enable: IsEnabled && (!isVirtual || modifiedOnField() !== undefined)" />Delete</label
				>
			</div>
			<div class="entityEditor__row">
				<label class="entityEditor__label">Mode</label>
				<select data-bind="value: IsOnlineOnly, valueAllowUnset: false, enable:IsEnabled">
					<option value="0">Online &amp; Offline</option>
					<option value="1">Online Only</option>
				</select>
			</div>
			<div class="entityEditor__row">
				<label class="entityEditor__label">Synchronization</label>
				<select
					data-bind="value: SyncType, valueAllowUnset: false, enable:IsEnabled() && (!isVirtual || modifiedOnField() !== undefined) && !isSyncTypeConstant"
				>
					<option value="0">Standard Sync</option>
					<option value="8388608">Always Full Sync</option>
					<option value="33554432">Incremental with Sync Filter</option>
				</select>
				<span class="entityEditor__selector">On Conflict:</span>
				<select data-bind="value: ConflictStrategy, valueAllowUnset: false, enable:IsEnabled()">
					<option value="0">Server Wins</option>
					<option value="16384">Device Wins</option>
					<option value="32768">Manual Action</option>
					<option value="65536">Device Wins (Full)</option>
				</select>
				<span class="entityEditor__selector" data-bind="visible: isVirtual">Modified On Field:</span>
				<select
					data-bind="value: modifiedOnField, options: dateTimeFields, optionsCaption: '<None>', optionsValue: 'LogicalName', optionsText: 'DisplayName', visible: isVirtual, enable:IsEnabled"
				></select>
			</div>
			<div class="entityEditor__row" data-bind="visible: IsSalesforce">
				<label class="entityEditor__label tooltipsource" data-tooltip="EntityEditor.SalesforceConfig">
					Salesforce
					<span>&#9432;</span>
				</label>
				<span data-bind="visible: IsSalesforceDownloadAllFilesVisible" style="margin-right: 2em;">
					Sync linked files:
					<select
						data-bind="valueAllowUnset: false,
									enable :IsEnabled,
									options: [
										{ value: false, caption: SalesforceDownloadAllFilesDisabledOptionName },
										{ value: true, caption: 'All' }
									],
									optionsValue: 'value',
									optionsText: 'caption',
									value: SalesforceDownloadAllFiles"
					></select>
				</span>
				<label style="margin-right: 2em;" data-bind="visible: IsSalesforceSyncEntityFeedVisible">
					<input type="checkbox" data-bind="checked: SalesforceSyncEntityFeed, enable: IsEnabled" />
					Sync entity feed
				</label>
				<label style="margin-right: 2em;" data-bind="visible: IsSalesforceSyncSharedRecordsVisible">
					<input type="checkbox" data-bind="checked: SalesforceSyncSharedRecords, enable: IsEnabled" />
					Sync shared records
				</label>
				<label style="margin-right: 2em;" data-bind="visible: IsSalesforceSyncArchivedRecordsVisible">
					<input type="checkbox" data-bind="checked: SalesforceSyncArchivedRecords, enable: IsEnabled" />
					Sync archived and deleted records
				</label>
				<label style="margin-right: 2em;" data-bind="visible: IsSalesforceSplitQueryEnabledInConfig">
					<input type="checkbox" data-bind="checked: IsSalesforceSplitQueryDisabledForEntity, enable: IsEnabled" />
					Disable support for nested Parent->Child links in Sync Filter and Online
				</label>
			</div>
			<div class="entityEditor__row" data-bind="visible: IsTdsSupported() || IsUploadStatusWithDataVisible()">
				<label class="entityEditor__label"></label>
				<div class="entityEditor__row__checkboxes">
					<div class="entityEditor__checkbox" data-bind="visible: IsUploadStatusWithDataVisible">
						<label>
							<input type="checkbox" data-bind="checked: UploadStatusWithData, enable: IsEnabled" />
							Upload Status with Data
						</label>
					</div>
					<div class="entityEditor__checkbox" data-bind="visible: IsTdsSupported">
						<span data-bind="style: { marginLeft: IsUploadStatusWithDataVisible() ? '2em' : '0'} "></span>
						<label>
							<input type="checkbox" data-bind="checked: IsTdsDisabledForEntity, enable: IsEnabled && IsTdsEnabledInConfig" />
							Disable TDS download
						</label>
					</div>
				</div>
			</div>
			<div class="entityEditor__row">
				<label class="entityEditor__label">Advanced</label>
				<div class="entityEditor__row__checkboxes">
					<div class="entityEditor__checkbox">
						<label>
							<input type="checkbox" data-bind="checked: HasLookupLabels, enable: IsEnabled && CanCanfigureLookupLabels" />
							Include Lookup Labels
						</label>
					</div>
				</div>
				<!-- ko if: SyncType() === "0" -->
				<span class="entityEditor__selector">Incremental Linked SyncFilter:</span>
				<select data-bind="value: IncrementalSyncFilter, valueAllowUnset: false, enable:IsEnabled">
					<option value="0" data-bind="text: IncrementalSyncFilterProjectDefaultLabel"></option>
					<option value="2097152">Enable</option>
					<option value="4194304">Disable</option>
				</select>
				<!-- /ko -->
			</div>
		</div>
		<div style="display:flex;flex:5;overflow:hidden">
			<div data-bind="grid: Grid" data-definitiononly="false" data-twowaybinding="true" style="white-space:nowrap; height: 100%;flex:5;">
				<div
					data-columnname="DisplayName"
					data-flex="1 1 200px"
					data-horalign="left"
					data-bind="opacity:data.Opacity()"
					data-sortable="true"
					data-sort="ascending"
				>
					<div style="height:100%; display:flex; align-items:center">
						<input type="checkbox" data-bind="checked: data.IsEnabled, enable: data.IsEditable()" />&nbsp;<span
							data-bind="text: data.DisplayName"
						></span>
					</div>
				</div>

				<div data-columnname="Name" data-sortable="true" data-flex="1 1 200px" data-horalign="left" data-bind="opacity:data.Opacity()"></div>
				<div data-columnname="Type" data-sortable="true" data-flex="1 1 200px" data-horalign="left" data-bind="opacity:data.Opacity()"></div>
				<div data-columnname="Permissions" data-sortable="true" data-flex="1 1 200px" data-horalign="left" data-bind="opacity:data.Opacity()"></div>
			</div>
			<div class="entityProperties">
				<div class="wfheader"><span class="label">Properties</span></div>
				<div class="entityProperties__content">
					<!-- ko if: SelectedField() -->
					<!-- ko if: SelectedField().HasDifferentExternalName -->
					<div class="entityProperties__section">
						<label class="entityProperties__label">External Name</label>
						<div data-bind="text: SelectedField().ExternalName"></div>
					</div>
					<!-- /ko -->
					<!-- ko if: SelectedField().Description -->
					<div class="entityProperties__section">
						<label class="entityProperties__label">Description</label>
						<div class="entityProperties__group">
							<div class="entityProperties__truncate" data-bind="text: SelectedField().Description"></div>
						</div>
					</div>
					<!-- /ko -->
					<div class="entityProperties__section">
						<label class="entityProperties__label">Permissions</label>
						<div class="entityProperties__group">
							<label><input type="checkbox" data-bind="checked: SelectedField().CanRead, enable: SelectedAllowCanRead" /><span>Read</span></label>
							<label
								><input type="checkbox" data-bind="checked: SelectedField().CanCreate, enable: SelectedAllowCanCreate" /><span>Create</span></label
							>
							<label
								><input type="checkbox" data-bind="checked: SelectedField().CanUpdate, enable: SelectedAllowCanUpdate" /><span>Update</span></label
							>
						</div>
					</div>
					<!-- ko if: SelectedField().FormatOptions -->
					<div class="entityProperties__section">
						<label class="entityProperties__label">Formatting</label>
						<div class="entityProperties__group">
							<select
								data-bind="options: SelectedField().FormatOptions, optionsText: 'Label', optionsValue: 'Key', value: SelectedField().DisplayFormat, valueAllowUnset: false, enable:SelectedAllowDisplayFormat"
							></select>
						</div>
					</div>
					<!-- /ko -->
					<div class="entityProperties__section">
						<label class="entityProperties__label">Requirement Level</label>
						<div class="entityProperties__group">
							<div data-bind="text: SelectedField().RequiredLevel"></div>
						</div>
					</div>
					<!-- ko if: SelectedField().HasTargetEntities -->
					<div class="entityProperties__section">
						<label class="entityProperties__label">Lookup Targets</label>
						<!-- ko foreach: SelectedField().TargetEntities -->
						<div class="entityProperties__group">
							<input type="checkbox" data-bind="checked:IsEnabled" disabled="disabled" /><span data-bind="text: DisplayName"></span
							><span style="color:darkgray">&nbsp;[<span data-bind="text: LogicalName"></span>]</span>
						</div>
						<!-- /ko -->
					</div>
					<!-- /ko -->
					<!-- ko if: SelectedField().OptionsLabels -->
					<div class="entityProperties__section">
						<label class="entityProperties__label">Options</label>
						<!-- ko foreach: SelectedField().OptionsLabels -->
						<div class="entityProperties__group">
							<span style="word-break: break-all" data-bind="text: Value"></span
							><span style="color:darkgray; word-break: break-all"
								>&nbsp;[<span data-bind="text: Key"></span>]&nbsp;<span data-bind="text: StateInfo"></span
							></span>
						</div>
						<!-- /ko -->
					</div>
					<!-- /ko -->
					<!-- ko if: SelectedAllowIsParentLookup -->
					<div class="entityProperties__section">
						<label class="entityProperties__label">Advanced</label>
						<div class="entityProperties__group">
							<label
								><input
									type="checkbox"
									data-bind="checked: SelectedField().IsParentLookup, visible: SelectedAllowIsParentLookup, enable: !SelectedField().HasImplicitParent"
								/>Mark as Parent Pointer</label
							>
						</div>
						<div class="entityProperties__group">
							<span style="margin-left:16px;"
								><label
									><input
										type="checkbox"
										data-bind="checked: SelectedField().IsDeleteWithParent, visible: SelectedAllowIsParentLookup, enable: ParentLookupIsSelected && !SelectedField().HasImplicitParent"
									/>Delete with Parent (Cascading Delete)
								</label></span
							>
						</div>
					</div>
					<!-- /ko -->
					<!-- ko if: SelectedField().MinMaxLabel -->
					<div class="entityProperties__section">
						<label class="entityProperties__label">Constraints</label>
						<div class="entityProperties__group">
							<div data-bind="text: SelectedField().MinMaxLabel"></div>
						</div>
					</div>
					<!-- /ko -->
					<!-- ko if: SelectedField().DefaultValue -->
					<div class="entityProperties__section">
						<label class="entityProperties__label">Default</label>
						<div class="entityProperties__group">
							<div data-bind="text: SelectedField().DefaultValue"></div>
						</div>
					</div>
					<!-- /ko -->
					<!-- ko if: SelectedField().PrecisionLabel -->
					<div class="entityProperties__section">
						<label class="entityProperties__label">Precision</label>
						<div class="entityProperties__group">
							<div data-bind="text: SelectedField().PrecisionLabel"></div>
						</div>
					</div>
					<!-- /ko -->
					<!-- ko if: SelectedField().HasExtensions -->
					<div class="entityProperties__section">
						<label class="entityProperties__label">Extensions</label>
						<!-- ko foreach: SelectedField().ExtensionKeys -->
						<div class="entityProperties__group">
							<b><span data-bind="text: $data"></span>:&nbsp;</b>
							<span class="entityProperties__truncate" data-bind="text: $parent.SelectedField().GetExtensionValue($data)"></span>
						</div>
						<!-- /ko -->
						<div data-bind="text: SelectedField().Extensions"></div>
					</div>
					<!-- /ko -->
					<!-- /ko -->
				</div>
			</div>
		</div>
		<footer class="entityEditor__footer">
			<div data-bind="text:StatusText"></div>
		</footer>
	</div>
</script>
<!-- END: EntityEditor -->

<script id="tmplListIndexDialog" type="text/html">
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div
		data-bind="grid: Grid"
		data-definitiononly="false"
		data-twowaybinding="true"
		style="white-space:nowrap; height: calc(100% - 100px); margin:5px"
	>
		<div data-columnname="Name" data-flex="0 0 200px" data-binding="Label" data-sortable="false" data-horalign="left" data-sort="ascending"></div>
		<div data-columnname="FieldsLabel" data-flex="1 1 300px" data-binding="FieldsLabel" data-sortable="false" data-horalign="left"></div>
	</div>
</script>
<script id="tmplEntityRelationshipsDialog" type="text/html">
	<div style="flex: 0 0 auto; display:flex">
		<!-- ko foreach: Tabbar -->
		<div class="tabControlItem" data-bind="css: { tabControlItemSelected: Selected() }, click: Clicked, visible: Visible">
			<span style="padding:0.3em" data-bind="text: Name"></span>
		</div>
		<!-- /ko -->
	</div>
	<!-- ko if:  SelectedTabIndex() > 3-->
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<!-- /ko -->
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===0, template: { name: 'tmpl1NEntityRelationships', data: relationships1NControl}"
	></div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===1, template: { name: 'tmplN1EntityRelationships', data: relationshipsN1Control}"
	></div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===2, template: { name: 'tmplNNEntityRelationships', data: relationshipsNNControl}"
	></div>
	<div style="flex:1 1 auto; flex-direction:column" class="flexDiv" data-bind="visible: SelectedTabIndex()===3"></div>
</script>

<script id="tmpl1NEntityRelationships" type="text/html">
	<div style="display: flex;justify-content: center; align-items: center;margin: 10px;">
		<div class="relationItem">{Entity}</div>
		<div>.</div>
		<div class="relationItem">{Field}</div>
		<div>-></div>
		<div class="highlightedRelationItem" data-bind="text: entityTitle"></div>
	</div>
	<div data-bind="grid: fieldsGrid" data-definitiononly="false" data-resetcolumns="false" style="height: 100%;">
		<div
			data-columnname="Entity"
			data-flex="1 1 100px"
			data-binding="sourceEntityDisplayName"
			data-horalign="left"
			data-sortable="true"
			data-sort="desc"
		>
			<div class="gridColumn">
				<div class="entityLink">
					<span data-bind="text: data.sourceEntityDisplayName, click: $parent.onSourceEntityClicked"></span>
				</div>
				<div data-bind="visible: data.showLogicalName, text: data.sourceEntity"></div>
			</div>
		</div>
		<div data-columnname="Field" data-flex="1 1 100px" data-binding="sourceFieldDisplayName" data-horalign="left" data-sortable="true">
			<div class="gridColumn">
				<div data-bind="text: data.sourceFieldDisplayName"></div>
				<div data-bind="visible: data.showLogicalName, text: data.sourceField"></div>
			</div>
		</div>
	</div>
	<table style="display: flex;">
		<tr>
			<td>
				<span>Logical Names</span>
			</td>
			<td>
				<input type="checkbox" data-bind="checked: showLogicalName" />
			</td>
		</tr>
		<tr>
			<td>
				<span>System</span>
			</td>
			<td>
				<input type="checkbox" data-bind="checked: showSystem" />
			</td>
		</tr>
	</table>
</script>
<script id="tmplN1EntityRelationships" type="text/html">
	<div style="display: flex;justify-content: center; align-items: center;margin: 10px;">
		<div class="highlightedRelationItem" data-bind="text: entityTitle"></div>
		<div>.</div>
		<div class="relationItem">{Field}</div>
		<div>-></div>
		<div class="relationItem">{Target}</div>
	</div>
	<div data-bind="grid: fieldsGrid" data-definitiononly="false" data-resetcolumns="false" style="height: 100%;">
		<div
			data-columnname="Field"
			data-flex="1 1 100px"
			data-binding="sourceFieldDisplayName"
			data-horalign="left"
			data-sortable="true"
			data-sort="desc"
		>
			<div class="gridColumn">
				<div data-bind="text: data.sourceFieldDisplayName"></div>
				<div data-bind="visible: data.showLogicalName, text: data.sourceField"></div>
			</div>
		</div>
		<div data-columnname="Target" data-flex="1 1 100px" data-binding="targetEntityDisplayName" data-horalign="left" data-sortable="true">
			<div class="gridColumn">
				<div class="entityLink">
					<span data-bind="text: data.targetEntityDisplayName, click: $parent.onTargetEntityClicked"></span>
				</div>
				<div data-bind="visible: data.showLogicalName, text: data.targetEntity"></div>
			</div>
		</div>
	</div>
	<table style="display: flex;">
		<tr>
			<td>
				<span>Logical Names</span>
			</td>
			<td>
				<input type="checkbox" data-bind="checked: showLogicalName" />
			</td>
		</tr>
		<tr>
			<td>
				<span>System</span>
			</td>
			<td>
				<input type="checkbox" data-bind="checked: showSystem" />
			</td>
		</tr>
	</table>
</script>
<script id="tmplNNEntityRelationships" type="text/html">
	<div style="display: flex;justify-content: center; align-items: center;margin: 10px;">
		<div class="highlightedRelationItem" data-bind="text: entityTitle"></div>
		<div>+</div>
		<div class="relationItem">{Other Entity}</div>
		<div>=</div>
		<div class="relationItem">{NN Entity}</div>
	</div>
	<div data-bind="grid: fieldsGrid" data-definitiononly="false" data-twowaybinding="true" style="height: 100%;">
		<div
			data-columnname="Other Entity"
			data-flex="1 1 100px"
			data-binding="otherEntityDisplayName"
			data-horalign="left"
			data-sortable="true"
			data-sort="desc"
		>
			<div class="gridColumn">
				<div class="entityLink">
					<span data-bind="text: data.otherEntityDisplayName, click: $parent.onOtherEntityClicked"></span>
				</div>
				<div data-bind="visible: data.showLogicalName, text: data.otherEntity"></div>
			</div>
		</div>
		<div data-columnname="NN Entity" data-flex="1 1 100px" data-binding="nnEntityDisplayName" data-horalign="left" data-sortable="true">
			<div class="gridColumn">
				<div data-bind="text: data.nnEntityDisplayName"></div>
				<div data-bind="visible: data.showLogicalName, text: data.nnEntity"></div>
			</div>
		</div>
	</div>
	<table style="display: flex;">
		<tr>
			<td>
				<span>Logical Names</span>
			</td>
			<td>
				<input type="checkbox" data-bind="checked: showLogicalName" />
			</td>
		</tr>
	</table>
</script>
<script id="tmplEntitySchemaEditor" type="text/html">
	<div style="background-color: #edeff2; padding: 2px; margin: 5px; height: 100%; overflow: auto">
		<div style="display:flex; flex-direction:row; padding: 10px">
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: column">
				<label style="padding:2px; font-size: larger">LOGICAL NAME</label>
				<input
					type="text"
					data-bind="textInput:LogicalName, enable: _isNew() === true"
					placeholder=""
					style="box-sizing:border-box; padding:10px 10px; display:inline-block; border: 1px solid #ccc; border-radius:4px; margin: 5px 5px 0px 0px"
				/>
			</div>
			<div style="width: 50%; max-width: 500px; display: flex; flex-direction: column">
				<label style="padding:2px; font-size:larger">DISPLAY NAME</label>
				<input
					type="text"
					data-bind="textInput:DisplayName"
					placeholder=""
					style="box-sizing:border-box; padding:10px 10px; display:inline-block; border: 1px solid #ccc; border-radius:4px; margin: 5px 5px 0px 0px"
				/>
			</div>
			<div style="width: 50%; max-width: 500px; display:flex; flex-direction: column">
				<label style="padding:2px; font-size:larger">DISPLAY NAME PLURAL</label>
				<input
					type="text"
					data-bind="textInput:DisplayNamePlural"
					placeholder=""
					style="box-sizing:border-box; padding:10px 10px; display:inline-block; border: 1px solid #ccc; border-radius:4px; margin: 5px 5px 0px 0px"
				/>
			</div>
		</div>
		<div style="width: 100%; max-width: 1520px; display:flex; flex-direction: column; padding: 10px">
			<label style="padding:2px; font-size: larger">DESCRIPTION</label>
			<input
				type="text"
				data-bind="textInput:Description"
				placeholder=""
				style="box-sizing:border-box; padding:10px 10px; display:inline-block; border: 1px solid #ccc; border-radius:4px; margin: 5px 5px 0px 0px"
			/>
		</div>
		<button
			style="background-color: #ffffff; color: #666666; padding: 6px 24px; border: 1px solid #dcdcdc; border-radius: 6px; margin:10px"
			data-bind="text: ButtonLabel, click: ShowMoreSettings"
		></button>
		<div data-bind="visible: IsMoreSettings">
			<div style="max-width: 350px; display:flex; flex-direction: column; padding: 10px">
				<label style="padding:2px; font-size: larger">OWNERSHIP TYPE</label>
				<select
					style="box-sizing:border-box; padding:10px 10px; display:inline-block; border: 1px solid #ccc; border-radius:4px; margin: 5px 5px 0px 0px"
					data-bind="options:_ownershipTypes, value:OwnershipType, enable: IsOwnershipEnabled, event:{change: OnOwnershipChanged}"
				></select>
			</div>
			<div style="display: flex; flex-direction: row">
				<div data-bind="visible: IsManyToMany() === true">
					<div style="max-width: 150px; display: flex; align-items:center; padding: 10px">
						<input
							id="cbIsActivity"
							style="width: 15px; height: 15px"
							type="checkbox"
							data-bind="checked: IsManyToMany, disable: IsManyToMany() === true"
						/>
						<label>IS MANY-TO-MANY</label>
					</div>
				</div>
				<div data-bind="visible: IsManyToMany() === false">
					<div style="max-width: 150px; display: flex; align-items:center; padding: 10px; margin: 0px 10px 0px 10px">
						<input id="cbIsActivity" style="width: 15px; height: 15px" type="checkbox" data-bind="checked: IsActivity, enable: false" />
						<label>IS ACTIVITY</label>
					</div>
				</div>
				<div data-bind="visible: IsManyToMany() === false">
					<div style="max-width: 150px; display: flex; align-items:center; padding: 10px; margin: 0px 10px 0px 10px">
						<input
							id="cbHasActivities"
							style="width: 15px; height: 15px"
							type="checkbox"
							data-bind="checked: HasActivities, enable: IsActivity() === false"
						/>
						<label>HAS ACTIVITIES</label>
					</div>
				</div>
				<div data-bind="visible: IsManyToMany() === false">
					<div style="max-width: 150px; display: flex; align-items:center; padding: 10px; margin: 0px 10px 0px 10px">
						<input id="cbHasNotes" style="width: 15px; height: 15px" type="checkbox" data-bind="checked: HasNotes" />
						<label>HAS NOTES</label>
					</div>
				</div>
				<div style="max-width: 150px; display: flex; align-items:center; padding: 10px; margin: 0px 10px 0px 10px">
					<input id="cbAudit" style="width: 15px; height: 15px" type="checkbox" data-bind="checked: Audit" />
					<label>AUDIT</label>
				</div>
			</div>
			<p style="padding:0px 10px 10px 10px; display:none">
				<b>Note: </b>By default, all fields for this entity are enabled for auditing. Click the 'AUDIT' field to enable or disable specific fields for
				auditing.
			</p>
		</div>
		<div data-bind="grid: FieldListGrid" data-definitiononly="false" data-multiselect="true" style="height:calc(100% - 20px)">
			<div
				data-columnname="Display Name"
				data-flex="1 1 100px"
				data-binding="DisplayName"
				data-sortable="true"
				data-horalign="left"
				data-sort="ascending"
			></div>
			<div
				data-columnname="Logical Name"
				data-flex="1 1 100px"
				data-binding="LogicalName"
				data-sortable="true"
				data-horalign="left"
				data-sort="ascending"
			></div>
			<div
				data-columnname="Type"
				data-flex="1 1 100px"
				data-binding="TypeLabel"
				data-sortable="true"
				data-horalign="left"
				data-sort="ascending"
			></div>
			<div
				data-columnname="Description"
				data-flex="1 1 100px"
				data-binding="Description"
				data-sortable="true"
				data-horalign="left"
				data-sort="ascending"
			>
				<div style="padding: 5px; word-break: break-word" data-bind="text: data.Description"></div>
			</div>
		</div>
	</div>
</script>
<script id="tmplGeocodingDetailsDialog" type="text/html">
	<div style="width:100%;height:100%;display:flex;flex-direction:row">
		<div id="bingMapsControl" style="flex: 4 1 auto"></div>
		<div style="flex:0 0 200px;display:flex;flex-direction:column">
			<div style="flex:1 1 auto;padding:5px">
				<h4 style="margin:0px">New Position</h4>
				<div style="padding: 2px">
					<div data-bind="text: Address"></div>
					<div>Lat:&nbsp;<span data-bind="text: Latitude"></span> Lon:&nbsp;<span data-bind="text: Longitude"></span></div>
				</div>
			</div>
			<div style="flex:0 0 auto;padding-left:5px">Enter address or latitude,longitude</div>
			<div style="flex:0 0 auto;padding:5px;display:flex">
				<input
					data-bind="value: Search, event: {keypress: function(data, event) { if(event.keyCode === 13) { data.Search(event.target.value); data.OnSearch(); } return true; }}"
					style="vertical-align:middle;flex:1 1 auto"
				/>
				<button
					data-bind="click: OnSearch"
					style="flex:0 0 auto;margin-left:5px;width:22px;height:22px;vertical-align:middle;padding:0px;border-width:0px;background-color:white"
				>
					<i class="woodfordsprite icon-woodford_Search" style="zoom: 0.6;"></i>
				</button>
			</div>
			<div style="flex:4 1 auto;padding:5px">
				<h4 style="margin:0px">Positions</h4>
				<div data-bind="grid: PositionsGrid" data-definitiononly="false">
					<div data-columnname="Position" data-flex="1 1 auto" data-horalign="left">
						<div data-bind="style: { fontWeight: (data.primary === true ? 'bold' : 'normal') }" style="padding: 2px">
							<div>
								<span data-bind="text: data.address.formattedAddress"></span>,
								<span data-bind="text: data.address.countryRegion"></span>
							</div>
							<div>
								Lat:&nbsp;<span data-bind="text: data.point.coordinates[0]"></span> Lon:&nbsp;<span
									data-bind="text: data.point.coordinates[1]"
								></span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div style="flex:0 1 auto;padding:5px;text-align:right">
				<label><input type="checkbox" data-bind="checked: UpdateLocation" style="margin:0px 2px 0px 0px;vertical-align:-2px" />Location</label>
				<label style="padding-left:5px"
					><input type="checkbox" data-bind="checked: UpdateAddress" style="margin:0px 2px 0px 0px;vertical-align:-2px" />Address</label
				>
			</div>
			<div style="flex:0 1 auto;padding:5px;text-align:right">
				<button data-bind="click: OnUpdateClicked, enable: CanUpdate" style="width:80px">Update</button>
				<button data-bind="click: OnCancelClicked" style="width:80px">Cancel</button>
			</div>
		</div>
	</div>
</script>
<!-- BEGIN: Geocoding -->
<script id="tmplGeocodingEditor" type="text/html">
	<div class="geocoding">
		<div class="geocoding__filter">
			<h3 class="geocoding__title">Entity:</h3>
			<div class="geocoding__selector">
				<select
					data-bind="options: Entities, optionsText: function(entity) { return entity.GetLabel() }, value: Entity, valueAllowUnset: false"
				></select>
			</div>
			<h3 class="geocoding__title">Fields:</h3>
			<div class="geocoding__selector">
				<label>Street:</label>
				<select
					data-bind="options: Attributes, optionsText: function(attribute) { return attribute.GetLabel() }, value: Attribute_Street1, valueAllowUnset: true"
				></select>
				<label><input type="checkbox" data-bind="checked: UseMultilineStreet" />Set additional street fields</label>
				<select
					data-bind="options: Attributes, optionsText: function(attribute) { return attribute.GetLabel() }, value: Attribute_Street2, valueAllowUnset: true, visible: UseMultilineStreet"
				></select>
				<select
					data-bind="options: Attributes, optionsText: function(attribute) { return attribute.GetLabel() }, value: Attribute_Street3, valueAllowUnset: true, visible: UseMultilineStreet"
				></select>
				<input type="text" data-bind="value: MultilineStreetFormat, visible: UseMultilineStreet" />
			</div>
			<div class="geocoding__selector">
				<label>City:</label>
				<select
					data-bind="options: Attributes, optionsText: function(attribute) { return attribute.GetLabel() }, value: Attribute_City, valueAllowUnset: true"
				></select>
			</div>
			<div class="geocoding__selector">
				<label>Postal Code:</label>
				<select
					data-bind="options: Attributes, optionsText: function(attribute) { return attribute.GetLabel() }, value: Attribute_Zip, valueAllowUnset: true"
				></select>
			</div>
			<div class="geocoding__selector">
				<label>State:</label>
				<select
					data-bind="options: Attributes, optionsText: function(attribute) { return attribute.GetLabel() }, value: Attribute_State, valueAllowUnset: true"
				></select>
			</div>
			<div class="geocoding__selector">
				<label>Country:</label>
				<select
					data-bind="options: Attributes, optionsText: function(attribute) { return attribute.GetLabel() }, value: Attribute_Country, valueAllowUnset: true"
				></select>
			</div>
			<div class="geocoding__selector">
				Latitude:
				<select
					data-bind="options: Attributes, optionsText: function(attribute) { return attribute.GetLabel() }, value: Attribute_Latitude, valueAllowUnset: true"
				></select>
			</div>
			<div class="geocoding__selector">
				Longitude:
				<select
					data-bind="options: Attributes, optionsText: function(attribute) { return attribute.GetLabel() }, value: Attribute_Longitude, valueAllowUnset: true"
				></select>
				<label><input type="checkbox" data-bind="checked: FindPositionByQuery" />Find position by query</label>
			</div>
			<h3 class="geocoding__title">Filter By:</h3>
			<div class="geocoding__selector__row">
				<input
					type="text"
					data-bind="value: SelectedView() === undefined ? '' : SelectedView().Attributes.name, readonly: true"
					style="width:100px"
					readonly="readonly"
				/>
				<button data-bind="click: OnSelectViewClicked" style="width:20px;height:21px;margin:0px;padding:0px">...</button>
				<button data-bind="click: OnEditFilterClicked" style="width:75px;height:21px; margin:0; margin-left:5px; padding:0">Filter...</button>
			</div>
			<h3 class="geocoding__title">Select Map Provider:</h3>
			<div class="geocoding__selector">
				<label>Choose map service provider:</label>
				<select data-bind="options: MapServiceProviders, optionsText: 'name', optionsValue: 'id', value: SelectedProvider"></select>
			</div>
			<h3 class="geocoding__title">Confidence:</h3>
			<div class="geocoding__selector">
				<label>Accept position with confidence:</label>
				<select data-bind="value: Confidence">
					<option value="0">Low</option>
					<option value="1">Medium</option>
					<option value="2">High</option>
				</select>
			</div>
			<h3 class="geocoding__title">Map API Key: <span data-bind="text: SelectedProviderLabel"></span></h3>
			<div class="geocoding__selector">
				<input type="text" data-bind="value: MapKey, disable: SelectedProvider() === 3" />
			</div>
			<div class="geocoding__selector" style="margin-top:6px">
				<label>Legend (records):</label>
				<div><span style="color:green">New</span> – coordinates added (no previous coordinates)</div>
				<div><span style="color:blue">Changed</span> – coordinates updated (coordinates changed)</div>
				<div><span style="color:red">Failed</span> – geocoding failed</div>
				<div><span style="font-weight:bold">Modified</span> – address/location edited</div>
			</div>
		</div>
		<div class="geocoding__listView">
			<h3 class="geocoding__title">Records</h3>
			<div class="geocoding__selector__row">
				<label>Show:</label>
				<select data-bind="value: FilterType">
					<option value="0">All</option>
					<option value="1">Empty Lat/Lon</option>
					<option value="2" style="color:green">New</option>
					<option value="3" style="color:blue">Changed</option>
					<option value="4" style="color:red">Failed</option>
					<option value="5" style="font-weight:bold">Modified</option>
				</select>
				<label>Show:</label>
				<select data-bind="options: Cultures, optionsText: 'name', optionsValue: 'code', value: Culture, valueAllowUnset: false"></select>
			</div>
			<div class="geocoding__selector__row">
				<select data-bind="value: SelectionMode">
					<option value="0">Current Page</option>
					<option value="1">All Records</option>
				</select>
				<button value="0" data-bind="click: OnSelectRecords" style="width:120px">Select</button>
				<button value="1" data-bind="click: OnSelectRecords" style="width:120px">Deselect</button>
				<button value="2" data-bind="click: OnSelectRecords" style="width:120px">Invert Selection</button>
				<label>Range:</label> <input type="text" data-bind="value: FromIndex" style="width:120px" /><label>-</label
				><input type="text" data-bind="value: ToIndex" style="width:120px" />
			</div>
			<div style="flex:1 1 auto;height:100%">
				<div data-bind="grid: RecordsGrid" data-definitiononly="false" style="height:calc(100% - 5px)">
					<div
						data-columnname="Name"
						data-binding="Attributes.Name"
						data-flex="4 1 100px"
						data-sortable="true"
						data-horalign="left"
						data-sort="ascending"
					></div>
					<div data-columnname="Street" data-binding="Attributes.Street" data-flex="4 1 100px" data-sortable="true" data-horalign="left"></div>
					<div data-columnname="City" data-binding="Attributes.City" data-flex="2 1 100px" data-sortable="true" data-horalign="left"></div>
					<div data-columnname="Postal Code" data-binding="Attributes.Zip" data-flex="1 1 100px" data-sortable="true" data-horalign="left"></div>
					<div data-columnname="State" data-binding="Attributes.State" data-flex="2 1 100px" data-sortable="true" data-horalign="left"></div>
					<div data-columnname="Country" data-binding="Attributes.Country" data-flex="2 1 100px" data-sortable="true" data-horalign="left"></div>
					<div data-columnname="Latitude" data-binding="Attributes.Latitude" data-flex="1 1 100px" data-sortable="true" data-horalign="left">
						<div data-bind="text: data.Attributes.Latitude ? data.Attributes.Latitude : ''" class="standard"></div>
					</div>
					<div data-columnname="Longitude" data-binding="Attributes.Longitude" data-flex="1 1 100px" data-sortable="true" data-horalign="left">
						<div data-bind="text: (data.Attributes.Longitude) ? data.Attributes.Longitude : ''" class="standard"></div>
					</div>
					<div
						data-columnname="Detail"
						data-flex="0 1 60px"
						data-columntype="command"
						data-commands="i"
						data-commandstyle="button"
						data-horalign="center"
					></div>
				</div>
			</div>
		</div>
	</div>
</script>
<!-- BEGIN: tmplGlobalUIEditor -->
<script id="tmplGlobalUIEditor" type="text/html">
	<div style="padding: 5px;height:100%">
		<div data-bind="grid: Grid" data-definitiononly="false" data-twowaybinding="true" style="white-space:nowrap; height: 100%">
			<div data-columnname="Label" data-flex="1 1 200px" data-horalign="left" data-sort="ascending"></div>
			<div data-columnname="Date" data-binding="DateLabel" data-flex="1 1 200px" data-horalign="right"></div>
			<div data-columnname="State" data-flex="1 1 200px" data-horalign="left"></div>
		</div>
	</div>
</script>
<!-- END: tmplGlobalUIEditor -->
<script id="GridChildTable" type="text/html">
	<div id="gridChildTmplDiv"></div>
</script>
<script id="GridItemTable" type="text/html">
	<div id="gridItemTmplDiv"></div>
</script>
<!--
		tmplGuidesEditor Editor Template
	-->
<script id="tmplGuidesEditor" type="text/html">
	<div style="height:100%;overflow:auto">
		<div style="padding:1em;background-color:lightcoral">
			Guides is a Resco feature that requires an ultimate license. Should you require more information, please contact us at
			<a href="mailto:sales@resco.net">sales@resco.net</a>.
		</div>
		<div style="padding-left: 1em;">
			<h2>Guides</h2>
			<p>Guides are step-by-step visual instructions that can contain annotated images, tips, safety Warnings, PDF attachments and videos.</p>
			<p>
				They are a collaborative form of peer-to-peer knowledge creation where also mobile users can create guides from mobile and give feedback on
				existing ones with the aim to make the process relevant, effective and the mobile user successful.
			</p>
			<p>
				<span style="font-weight: bold;"
					>Please note: Guides are stored in Resco Cloud database. It is not possible to use lookup fields to associate them with Salesforce
					objects.</span
				>
			</p>
			<p>More info: <a href="https://docs.resco.net/wiki/Guides" target="_blank">https://docs.resco.net/wiki/Guides</a></p>
			<table style="width:100%;">
				<tbody>
					<tr>
						<td>
							<span style="font-size: 1.4em; font-weight: bold;">1.</span>
							<input id="cbEnable" type="checkbox" data-bind="checked: guidesEnabled" />
							<label for="cbEnable" style="padding:2px; font-size: 1.4em; font-weight: bold;">Enable Guides</label>
						</td>
					</tr>
					<tr>
						<td style="padding-left: 2em;">
							<ul style="list-style-type: disc; list-style-position: inside; line-height: 2em;">
								<li>
									The following items will be added:
									<p style="line-height: 1.2em; padding-left: 2em; margin-top: 0.5em;">
										Entities: Guide, Guide Category, Guide Author, Guide Tag, Feedback, Tag, Guide Log<br />
										Views: Guide Default View<br />
										Styles: ListGuideImage, red<br />
										Images: Home/rh_guide, Houston/AddImage<br />
									</p>
									<span style="font-weight: bold; padding-left: 2em;">Please click the "Save" button above to confirm. Thanks.</span>
								</li>
								<li data-bind="visible: guidesEnabled">To add Guides to Home, please click on the "Add to Home" button above.</li>
								<li data-bind="visible: guidesEnabled() && !isSalesforce()">
									To add Guides Editor to Home, please click on the "Add Editor to Home" button above. Please note Guides Editor can be accessed from
									web browser only.
								</li>
								<!-- <li>To add Guides to a Form, please click the "Add to Form" button above.</li>
									<li>To install sample Guides, please click here.</li> -->
								<li data-bind="visible: guidesEnabled">
									<span style="font-weight: bold;"
										>Please note: By default, Guides need
										<a href="https://docs.resco.net/wiki/Sync_Filter#Incremental_linked_sync_filters" target="_blank"
											>Incremental Linked SyncFilter</a
										>
										to be enabled on Note entity and enabling Guides enables it.</span
									>
								</li>
							</ul>
						</td>
					</tr>
					<tr data-bind="visible: guidesEnabled() && !isSalesforce()">
						<td>
							<div style="font-size: 1.4em; font-weight: bold;">2. Associate Guides with...</div>
							<div style="padding: 1em 0em 1em 2em;">
								Please note that once you associate entities, you will not be able to revert these associations, only to add new ones.
							</div>
							<div data-bind="visible: !isXrm" style="padding: 0em 0em 1em 2em;">
								To associate guides you first need to create relationships between Guide entity and entities you want to associate guides with.
							</div>
						</td>
					</tr>
					<tr data-bind="visible: guidesEnabled() && isSalesforce()">
						<td>
							<div style="font-size: 1.4em; font-weight: bold;">2. Associate Guides with...</div>
							<div style="padding: 1em 0em 1em 2em;">Guide association is currently not supported on Salesforce platform.</div>
						</td>
					</tr>
					<tr data-bind="visible: guidesEnabled() && !isSalesforce()">
						<td style="padding-left: 2em; padding-bottom: 0.5em;">
							<div
								data-bind="foreach: standardEntities"
								style="display: inline-grid; grid-template-columns: repeat(3, 1fr); column-gap: 1em; row-gap: 0.5em; width: auto;"
							>
								<div>
									<input type="checkbox" data-bind="checked: selected, enable: enabled, attr: {id: 'cb_' + logicalName}" />
									<label style="padding:2px;" data-bind="text: displayName, attr: {for: 'cb_' + logicalName}"></label>
								</div>
							</div>
						</td>
					</tr>
					<tr data-bind="visible: guidesEnabled">
						<td><div style="font-size: 1.4em; font-weight: bold; margin-top: 1em; margin-bottom: 0.5em;">3. Guides Feedback</div></td>
					</tr>
					<tr data-bind="visible: guidesEnabled">
						<td style="padding-left: 2em;">
							<input id="cbEnableFeedback" type="checkbox" data-bind="checked: feedbackEnabled" />
							<label for="cbEnableFeedback" style="padding:2px">Enable Feedback</label>
						</td>
					</tr>
					<tr data-bind="visible: guidesEnabled">
						<td style="padding-left: 2em;">
							<p>
								The form will
								<span data-bind="visible: feedbackTimeout() == 0">never be triggered.</span>
								<span data-bind="visible: feedbackTimeout() > 0">
									be triggered after <span data-bind="text: feedbackTimeout"></span> second<span
										data-bind="text: feedbackTimeout() > 1 ? 's' : ''"
									></span>
									of viewing a guide.</span
								>
							</p>
							<label for="fbTimeout">Time </label
							><input
								style="width: 10ch; box-sizing: border-box; max-height: 100%;"
								type="number"
								min="0"
								max="1000"
								name="fbTimeout"
								data-bind="value: feedbackTimeout"
							/>
							(0-1000)
						</td>
					</tr>
					<tr data-bind="visible: guidesEnabled">
						<td style="padding-left: 2em;">
							<input id="cbEnableSteIssues" type="checkbox" data-bind="checked: stepIssuesEnabled" />
							<label for="cbEnableSteIssues" style="padding:2px">Allow users to report step issues</label>
						</td>
					</tr>
					<tr data-bind="visible: guidesEnabled">
						<td><div style="font-size: 1.4em; font-weight: bold; margin-top: 1em; margin-bottom: 0.5em;">4. Guides Usage Logging</div></td>
					</tr>
					<tr data-bind="visible: guidesEnabled">
						<td style="padding-left: 2em;">
							<input id="cbEnableUsageLogging" type="checkbox" data-bind="checked: usageLoggingEnabled" />
							<label for="cbEnableUsageLogging" style="padding:2px">Enable Usage Logging</label>
						</td>
					</tr>
					<tr style="height: 1em;"></tr>
				</tbody>
			</table>
		</div>
	</div>
</script>
<!--
		 BEGIN: Home Editor
	-->
<script id="tmplHomeEditor" type="text/html">
	<div class="homeEditor">
		<div
			data-bind="visible: RootItem() && RootItem().Folders().length"
			style="flex: 0 0 200px; display:flex; flex-direction:column; height:100%; overflow:auto; border-right: 1px solid #CCC; background-color: #CCC;white-space:nowrap"
		>
			<div class="section-header" data-bind="text: GroupsLabel"></div>
			<p
				style="margin:0;padding:5px;min-height:1.5em;white-space:nowrap"
				data-bind="click: OnGroupItemClick.bind($data, RootItem()), text: RootItem().Label, style: { backgroundColor: SelectedGroup() === RootItem() ? '#ADD8E6' : '' }"
			></p>
			<div
				data-bind="template: { name:  'tmplHomeEditorNestedGroup', data: { folders: RootItem().Folders(), Editor:$data } }"
				style="margin-left:10px;display:inline-block;"
			></div>
		</div>
		<div class="editorSection">
			<div class="section-header" data-bind="text: SelectedLabel"></div>
			<div class="editor-component">
				<!-- ko if: CompanyName -->
				<div class="editor-list__title">
					<span>Title</span>
				</div>
				<div class="editor-list__item editor-list__navigation">
					<p data-bind="text:CompanyName()"></p>
					<div class="editor-list__buttons">
						<i
							class="woodfordsprite icon-woodford_HomeEditor_EditEntity_24"
							data-bind="click:EditCompanyName, attr: {'data-testid': 'rename-company-title'}"
						></i>
					</div>
				</div>
				<!-- /ko -->
				<div class="editor-list__title">
					<span>Banner</span>
					<span class="addButton" data-bind="click:addCompanyLogo,visible: !DisplayLogo()">&#x2b; Add Banner</span>
				</div>
				<div
					data-bind="attr: {'data-testid': 'company-banner'}, click:addCompanyLogo,css: { itemSelected: SelectedBanner()},visible: DisplayLogo()"
					class="editor-list__banner"
				>
					<div class="logo-wrapper">
						<img data-bind="attr:{src:CompanyLogo()}" />
					</div>
					<i
						class=" woodfordsprite icon-woodford_HomeEditor_Delete_32 delete-button"
						data-bind="click:deleteCompanyLogo,visible:DisplayLogo(),clickBubble:false"
					></i>
				</div>
				<div class="editor-list__title">
					<span>Menu items</span>
				</div>
				<ul
					class="editor-list"
					data-bind="foreach: Selected(), dropZone: { accepts: ['allAvailable','Selected'], drop: OnItemDrop.bind($data), dragOver: OnItemDragOver.bind($data), dragLeave: OnItemDragLeave.bind($data) },css:{emptydropZone:Selected().length<5}"
				>
					<li
						class="editor-list__item"
						data-bind="attr: { 'data-testid': $parent.dataTestId('home-menu-'+LogicalName())}, dragZone: { name:'Selected', dragStart: $parent.OnItemDragStart.bind($data)}, multiClick: $parent.OnSelectedItemClick.bind($parent), css: { itemSelected: $parent.SelectedSelected() === $data,isSpecialItem:!IconAllowed}"
					>
						<div class="editor-list__name">
							<i class="woodfordsprite icon-woodford_HomeEditor_Move_24"></i>
							<!-- ko if: IconAllowed -->
							<img class="editor-list__entityName" data-bind="attr: { src: b64Image()},click: $parent.displayImagePanel.bind($parent)" />
							<!-- /ko -->
							<span data-bind=" text: ExtendedDisplayName()"></span>
						</div>
						<div class="editor-list__buttons">
							<i
								class=" tooltipsource woodfordsprite icon-woodford_HomeEditor_EditEntity_24"
								data-bind="click:$parent.EditEntity.bind($parent),visible: HasEditor(), attr: {'data-testid': $parent.dataTestId('home-menu-' + LogicalName() + '-edit') }"
								data-tooltip="HomeEditor.HasEditor"
							></i>
							<i
								data-tooltip="HomeEditor.StartUp"
								data-bind="click:$parent.setStartUpItem.bind($parent),attr:{'data-testid': $parent.dataTestId('home-menu-' + LogicalName() + '-startup'), class:'tooltipsource woodfordsprite icon-woodford_HomeEditor_'+(IsInitial() ? 'ActiveSetStartUp_24' : 'SetStartUp_24')},visible:!IsSection"
							></i>
							<i
								class="tooltipsource woodfordsprite icon-woodford_HomeEditor_Delete_18"
								data-bind="click:$parent.OnItemClick.bind($parent), attr: {'data-testid': $parent.dataTestId('home-menu-' + LogicalName() + '-delete')}"
								data-tooltip="HomeEditor.Delete"
							></i>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="entitySection">
			<div class="section-header">
				<div class="toggleButton" data-bind="click:displayItemsPanel,css:{activeToggle:!isImagePanelDisplayed()}, visible: !isSearchActive()">
					<span data-bind="text:AvailableLabel()"></span>
				</div>
				<div class="toggleButton" data-bind="click:displayImagePanel,css:{activeToggle:isImagePanelDisplayed()}, visible: !isSearchActive()">
					<span data-bind="text:ImageLabel()"></span>
				</div>

				<div data-bind="attr: {'class': (isSearchActive() ? 'search-button-wrapper_active' : 'search-button-wrapper')}">
					<searchbutton
						data-bind="visible: !isImagePanelDisplayed()"
						params="searchText: searchText, active: isSearchActive, rolloutDirection: searchBarRolloutDirection, htmlElement: $element"
					></searchbutton>
				</div>
			</div>
			<div data-bind="visible:!isImagePanelDisplayed()" class="section-list">
				<!-- ko if: AllSpecials().length -->
				<div class="list-header tooltipsource" data-tooltip="HomeEditor.Specials" data-bind="visible: AllSpecials().length > 0">Specials</div>
				<ul class="entity-list" data-bind="foreach: AllSpecials()">
					<li
						class="entity-list__item"
						data-bind="attr: { 'data-testid': $parent.dataTestId('items-'+LogicalName())} ,multiClick: $parent.OnAvailableItemClick.bind($parent), dragZone: { name: 'allAvailable' },css:{itemSelected:$parent.SelectedAvailable()===$data}"
					>
						<i class="woodfordsprite icon-woodford_HomeEditor_Move_14"></i>
						<span data-bind="attr:{title:ExtendedDisplayName()}, text: ExtendedDisplayName()"></span>
					</li>
				</ul>
				<!-- /ko -->
				<div class="list-header tooltipsource" data-tooltip="HomeEditor.Components" data-bind="visible: AllComponents().length > 0">Components</div>
				<ul class="entity-list" data-bind="foreach: AllComponents()">
					<li
						class="entity-list__item"
						data-bind="attr: { 'data-testid': $parent.dataTestId('items-'+LogicalName())}, multiClick: $parent.OnAvailableItemClick.bind($parent), dragZone: { name: 'allAvailable' },css:{itemSelected:$parent.SelectedAvailable()===$data}"
					>
						<i class="woodfordsprite icon-woodford_HomeEditor_Move_14"></i>
						<span data-bind="attr:{title:ExtendedDisplayName()}, text: ExtendedDisplayName()"></span>
					</li>
				</ul>
				<div class="list-header tooltipsource" data-tooltip="HomeEditor.Entities" data-bind="visible: AllEntities().length > 0">Entities</div>
				<ul class="entity-list" data-bind="foreach: AllEntities()">
					<li
						class="entity-list__item"
						data-bind="attr: { 'data-testid': $parent.dataTestId('items-'+LogicalName())}, multiClick: $parent.OnAvailableItemClick.bind($parent), dragZone: { name: 'allAvailable' },css:{itemSelected:$parent.SelectedAvailable()===$data}"
					>
						<i class="woodfordsprite icon-woodford_HomeEditor_Move_14"></i>
						<span data-bind="attr:{title:ExtendedDisplayName()}, text: ExtendedDisplayName()"></span>
					</li>
				</ul>
				<div
					style="padding-left: 50px;"
					data-bind="visible: ( AllSpecials().length == 0 && AllComponents().length == 0 &&  AllEntities().length == 0)"
				>
					No items matching your query
				</div>
			</div>
			<div
				class="imageSection"
				data-bind="css:{activityDisabled : !SelectedSelected() || !SelectedSelected().IconAllowed},visible:isImagePanelDisplayed()"
			>
				<!-- ko template: {name: "tmplRescoImageGallery", data: galleryControl} -->
				<!-- /ko-->
			</div>
		</div>
	</div>
</script>

<script id="tmplHomeEditorNestedGroup" type="text/html">
	<div data-bind="foreach: folders">
		<p
			style="margin:0;padding:5px;min-height:1.5em;white-space:nowrap"
			data-bind="click: $parent.Editor.OnGroupItemClick.bind($parent.Editor, $data), text: Label, style: { backgroundColor: $parent.Editor.SelectedGroup() === $data ? '#ADD8E6' : '' }"
		></p>
		<div
			data-bind="visible: Folders().length, template: { name:  'tmplHomeEditorNestedGroup', data: { folders: Folders(), Editor:$parent.Editor } }"
			style="margin-left:10px;display:inline-block;"
		></div>
	</div>
</script>
<!-- BEGIN: tmplImagesEditor -->
<script id="tmplImagesEditor" type="text/html">
	<div style="height:100%; overflow: auto">
		<!-- ko if: !newImageComponentVisible() -->
		<div class="Images-component--old">
			<!-- ko foreach: Platforms -->
			<input type="checkbox" data-bind="checked: Visible" /> <span data-bind="text: Label"></span> |
			<!-- /ko -->
			Directory:
			<select data-bind="options: ImageFolders, value: ActiveFolder, optionsText: 'Name'" style="width: 200px"></select>
			<span style="color: blue; cursor: pointer; text-decoration: underline" data-bind="click: AddDirectory">Add Directory</span>
			<br />
			<br />
			<div>
				<!-- ko foreach: Platforms -->
				<!-- ko if: Visible() -->
				<div style="display: inline-block">
					<div style="text-align: center" data-bind="text: Label"></div>
					<!-- ko foreach: DPIs -->
					<div style="display: inline-block; text-align: center; width: 100px" data-bind="text: $data"></div>
					<!-- /ko -->
				</div>
				<!-- /ko -->
				<!-- /ko -->
			</div>
			<!-- ko foreach: Images -->
			<div style="border-bottom: solid 1px silver" data-bind="visible: MeetsFilter($parent.FilterText())">
				<span data-bind="text: Label + (Folder ? ' (' + Folder + ')' : '')"></span>
				<!-- ko if: IsCustom -->
				<span style="color: blue; cursor: pointer; text-decoration: underline" data-bind="click: $parent.DeleteRow.bind($parent)">Delete</span>
				<!-- /ko -->
				<br />
				<!-- ko foreach: $parent.Platforms -->
				<!-- ko if: Visible() -->
				<!-- ko foreach: $parent.Images.getValue($data) -->
				<div
					style="display: inline-block; width: 100px; height: 100px; text-align: center; line-height: 100px; cursor: pointer"
					data-bind="style: {backgroundColor: HasCustomImage() ? '#cccccc' : 'transparent'}, click: $parents[2].EditImage.bind($parents[2])"
				>
					<!-- ko if: DisplayImage() === MobileCRM.Woodford.Editor.ImagesEditor.PlaceholderName -->
					<div
						style="margin: 25px"
						data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_' + MobileCRM.Woodford.Editor.ImagesEditor.PlaceholderName }"
					></div>
					<!-- /ko -->
					<!-- ko if: DisplayImage() !== MobileCRM.Woodford.Editor.ImagesEditor.PlaceholderName -->
					<div
						style="width: 100%; height: 100%; background-position-x: center; background-position-y: center; background-repeat: no-repeat"
						data-bind="style: {backgroundImage: 'url(\'' + DisplayImage() + '\')'}"
					></div>
					<!-- /ko -->
				</div>
				<!-- /ko -->
				<!-- /ko -->
				<!-- /ko -->
			</div>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<div data-bind="visible:newImageComponentVisible()" class="Images-component--new">
			<div class="imagesEditor">
				<div class="section-header">
					<span data-bind="text:Label"></span>
					<div class="toggleImagestyle">
						<span data-bind="click:displayNewImageComponent, css: { activeStyle: newImageComponentVisible()}">Default</span>
						<span data-bind="click:displayOldImageComponent , css: { activeStyle: !newImageComponentVisible()}">Legacy</span>
						<div class="toggleWarning" data-bind="click:showWarningMessage ,visible:!ShowWarningMessage()">
							<i class="woodfordsprite icon-woodford_ImageEditor_Warning_18"></i>
						</div>
					</div>
					<div class="search">
						<input
							id="searchbox"
							class="search__input"
							type="text"
							data-bind="value: FilterText, valueUpdate: 'afterkeydown'"
							placeholder="Search..."
						/>
					</div>
				</div>
				<div class="warningMessage" data-bind="css:{warningMessage__hide:!ShowWarningMessage()}">
					<div class="warningMessage__icon"><i class="woodfordsprite icon-woodford_ImageEditor_Warning_18"></i></div>
					<div class="warningMessage__info">
						<p class="warningMessage__header">Important info</p>
						<p data-bind="visible:ShowWarningMessage()" class="warningMessage__text">
							You're now looking at a modern, simplified image manager. To access platform-specific versions of icons (generally not recommended or
							necessary), switch to the legacy view. See
							<a target="_blank" href="https://docs.resco.net/wiki/Images#Project_images">Resco wiki</a> for more information.
						</p>
					</div>
					<div class="warningMessage__close">
						<i data-bind="click:hideWarningMessage" class="woodfordsprite icon-woodford_HomeEditor_Delete_18"></i>
					</div>
				</div>
				<!-- ko if: !ShowAllIcons() -->
				<div class="images">
					<div class="folders__title">
						<i class="woodfordsprite icon-woodford_ImageEditor_Folder_17"></i>
						<span data-bind="text:ActiveFolder().Name"></span>
					</div>
					<div class="imageBox__wrapper">
						<div class="imageBox">
							<div class="imageBox" data-bind="click:AddImage">
								<div class="imageBox__icon imageBox__addImage">
									<i class="woodfordsprite icon-woodford_ImageEditor_AddNew_26"></i>
									<span>Add new icon</span>
								</div>
							</div>
						</div>
						<!-- ko foreach: Images -->
						<div class="imageBox" data-bind="visible: MeetsFilter($parent.FilterText())">
							<!-- ko foreach:Images.getValue($parent.Platforms[0]) -->
							<!-- ko if: DPI==="XHDPI" -->
							<div class="imageBox__icon" data-bind="click: $parents[1].EditImage.bind($parents[1])">
								<!-- ko if: DisplayImage() === MobileCRM.Woodford.Editor.ImagesEditor.PlaceholderName -->
								<div
									style="margin: 25px"
									data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_' + MobileCRM.Woodford.Editor.ImagesEditor.PlaceholderName +'_50'}"
								></div>
								<!-- /ko -->
								<!-- ko if: DisplayImage() !== MobileCRM.Woodford.Editor.ImagesEditor.PlaceholderName -->
								<div
									style="width: 100%; height: 100%; background-position-x: center; background-position-y: center; background-repeat: no-repeat"
									data-bind="style: {backgroundImage: 'url(\'' + DisplayImage() + '\')'}"
								></div>
								<!-- /ko -->
							</div>
							<!-- /ko -->
							<!-- /ko -->
							<span class="imageBox__imageName" data-bind="text: Label + (Folder ? ' (' + Folder + ')' : '')"></span>
							<!-- ko if: IsCustom -->
							<i
								class="woodfordsprite icon-woodford_HomeEditor_Delete_18 delete-button"
								data-bind="click: $parent.DeleteRow.bind($parent), attr: { 'data-testid': dataTestId(Label + '-delete')}"
							></i>
							<!-- /ko -->
						</div>
						<!-- /ko -->
					</div>
				</div>
				<!-- /ko -->
				<!-- ko if: ShowAllIcons() -->
				<div class="images">
					<!-- ko foreach: ImageFolders -->
					<div class="folders__title">
						<i class="woodfordsprite icon-woodford_ImageEditor_Folder_17"></i>
						<span data-bind="text:Name"></span>
					</div>
					<div class="imageBox__wrapper">
						<div class="imageBox" data-bind="click:$parent.addImageFromEditor.bind($parent), attr: { 'data-testid': Name + '-add-new-icon' }">
							<div class="imageBox__icon imageBox__addImage">
								<i class="woodfordsprite icon-woodford_ImageEditor_AddNew_26"></i>
								<span>Add new icon</span>
							</div>
						</div>
						<!-- ko foreach: displayAllImages -->
						<div class="imageBox" data-bind="visible: MeetsFilter($parents[1].FilterText())">
							<!-- ko foreach:Images.getValue($parents[1].Platforms[0]) -->
							<!-- ko if: DPI==="XHDPI" -->
							<div class="imageBox__icon" data-bind="click: $parents[2].EditImage.bind($parents[2])">
								<!-- ko if: DisplayImage() === MobileCRM.Woodford.Editor.ImagesEditor.PlaceholderName -->
								<div
									style="margin: 25px"
									data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_' + MobileCRM.Woodford.Editor.ImagesEditor.PlaceholderName+'_50' }"
								></div>
								<!-- /ko -->
								<!-- ko if: DisplayImage() !== MobileCRM.Woodford.Editor.ImagesEditor.PlaceholderName -->
								<div
									style="width: 100%; height: 100%; background-position-x: center; background-position-y: center; background-repeat: no-repeat"
									data-bind="style: {backgroundImage: 'url(\'' + DisplayImage() + '\')'}"
								></div>
								<!-- /ko -->
							</div>
							<!-- /ko -->
							<!-- /ko -->
							<span class="imageBox__imageName" data-bind="text: Label + (Folder ? ' (' + Folder + ')' : '')"></span>
							<!-- ko if: IsCustom -->
							<i
								class="woodfordsprite icon-woodford_HomeEditor_Delete_18 delete-button"
								data-bind="click: $parents[1].DeleteRowFromAllImages.bind($parents[1],$parents[0]), attr: { 'data-testid': dataTestId(Label + '-delete')}"
							></i>
							<!-- /ko -->
						</div>
						<!-- /ko -->
					</div>
					<!-- /ko -->
				</div>
				<!-- /ko -->
			</div>
			<div class="folders__wrapper">
				<div class="section-header">
					<span>Directory List</span>
					<div class="folders__addFolder" data-bind="click: AddDirectory">
						<span class="folders__addFolder__label">Add new</span>
						<i class="woodfordsprite icon-woodford_ImageEditor_AddFolder_24"></i>
					</div>
				</div>
				<ul class="folders__list">
					<li class="folders__list--item" data-bind="click:DisplayAllIcons,css: { folder__selected:ShowAllIcons()}">
						<i class="woodfordsprite icon-woodford_ImageEditor_Folder_12"></i>
						<span>Show All Media</span>
					</li>
					<!-- ko foreach: ImageFolders -->
					<li
						class="folders__list--item"
						data-bind="click:$parent.changeFolder.bind($parent),css:{folder__selected:$parent.ActiveFolder()===$data && !$parent.ShowAllIcons()}"
					>
						<i class="woodfordsprite icon-woodford_ImageEditor_Folder_12"></i>
						<span data-bind="text:Name"></span>
					</li>
					<!-- /ko -->
				</ul>
			</div>
		</div>
	</div>
</script>
<!-- END: tmplImagesEditor -->

<!-- BEGIN: tmplImagePropertiesDialog -->
<script id="tmplImagePropertiesDialog" type="text/html">
	<form data-bind="event: { keypress: absorbEnter }">
		<div class="project__option">
			<div class="project__option--title">
				<span>Directory</span>
			</div>
			<!-- ko if: !CreateNew -->
			<input disabled data-bind="attr: {placeholder: Image.Directory}" />
			<!-- /ko -->
			<!-- ko if: CreateNew -->
			<select data-bind="options: Directories, value: Image.Directory"></select>
			<!-- /ko -->
		</div>
		<div class="project__option">
			<div class="project__option--title">
				<span>Name</span>
			</div>
			<!-- ko if: !CreateNew -->
			<input disabled data-bind="attr: {placeholder: Image.Name}" />
			<!-- /ko -->
			<!-- ko if: CreateNew -->
			<input type="text" data-bind="value: Image.Name" />
			<!-- /ko -->
		</div>
		<!-- ko if: !isNewImages -->
		<div class="project__option">
			<div class="project__option--title">
				<span>Platform</span>
			</div>
			<!-- ko if: !CreateNew -->
			<input disabled data-bind="attr: {placeholder: Image.Platform().Label}" />
			<!-- /ko -->
			<!-- ko if: CreateNew -->
			<select data-bind="options: Platforms, optionsText: 'Label', value: Image.Platform"></select>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- ko if: !isNewImages -->
		<div class="project__option">
			<div class="project__option--title">
				<span>DPI</span>
			</div>
			<!-- ko if: !CreateNew -->
			<input disabled data-bind="attr: {placeholder: Image.DPI}" />
			<!-- /ko -->
			<!-- ko if: CreateNew && Image.Platform() -->
			<select data-bind="options: Image.Platform().DPIs, value: Image.DPI"></select>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<div class="project__option">
			<div class="project__option--title">
				<span>Colorize</span>
				<div class="project__option--checkbox">
					<input id="cbColorize" type="checkbox" data-bind="checked: Image.Colorize, enable: Image.HasCustomImage" />
					<label for="cbColorize"><span>Colorize the Image</span></label>
				</div>
			</div>
		</div>
	</form>
	<br />
	<br />
	<table style="width: 100%">
		<tr>
			<!-- ko if: !CreateNew && !Image.ImageRow.IsCustom -->
			<td align="center" style="width: 50%"><b>Default</b></td>
			<td align="center" style="width: 50%"><b>Custom</b></td>
			<!-- /ko -->
			<!-- ko if: CreateNew || Image.ImageRow.IsCustom -->
			<td align="center" style="width: 100%"><b>Image</b></td>
			<!-- /ko -->
		</tr>
		<tr>
			<!-- ko if: !CreateNew && !Image.ImageRow.IsCustom -->
			<td align="center">
				<div style="display: inline-block; width: 100%; height: 150px; text-align: center">
					<!-- ko if: Image.DefaultImageSrc() === MobileCRM.Woodford.Editor.ImagesEditor.PlaceholderName -->
					<div
						style="margin: 50px 25px"
						data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_' + MobileCRM.Woodford.Editor.ImagesEditor.PlaceholderName + '_50' }"
					></div>
					<!-- /ko -->
					<!-- ko if: Image.DefaultImageSrc() !== MobileCRM.Woodford.Editor.ImagesEditor.PlaceholderName -->
					<div
						style="width: 100%; height: 100%; background-position-x: center; background-position-y: center; background-repeat: no-repeat"
						data-bind="style: {backgroundImage: 'url(\'' + Image.DefaultImageSrc() + '\')'}"
					></div>
					<!-- /ko -->
				</div>
			</td>
			<!-- /ko -->
			<td align="center">
				<div
					data-testid="select-image"
					style="display: inline-block; width: 100%; height: 150px; text-align: center; cursor: pointer"
					data-bind="click: Image.SelectCustomImage.bind(Image)"
				>
					<!-- ko if: Image.CustomImageSrc() === MobileCRM.Woodford.Editor.ImagesEditor.PlaceholderName -->
					<div
						style="margin: 50px 25px"
						data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_' + MobileCRM.Woodford.Editor.ImagesEditor.PlaceholderName + '_50' }"
					></div>
					<!-- /ko -->
					<!-- ko if: Image.CustomImageSrc() !== MobileCRM.Woodford.Editor.ImagesEditor.PlaceholderName -->
					<div
						style="width: 100%; height: 100%; background-position-x: center; background-position-y: center; background-repeat: no-repeat"
						data-bind="style: {backgroundImage: 'url(\'' + Image.CustomImageSrc() + '\')'}"
					></div>
					<!-- /ko -->
				</div>
			</td>
		</tr>
		<!-- ko if: !CreateNew -->
		<tr>
			<!-- ko if: !Image.ImageRow.IsCustom -->
			<td align="center">
				<button type="button" data-bind="enable: Image.DefaultImage() ? true : false, click: Image.CopyDefaultImageToCustom.bind(Image)">Copy</button>
			</td>
			<!-- /ko -->
			<td align="center">
				<button type="button" data-bind="enable: Image.CustomImage() ? true : false, click: Image.DeleteCustomImage.bind(Image)">Delete</button>
			</td>
		</tr>
		<!-- /ko -->
	</table>
</script>
<!-- END: tmplImagePropertiesDialog -->

<!-- BEGIN: tmplNewImageDirectoryDialog -->
<script id="tmplNewImageDirectoryDialog" type="text/html">
	<table>
		<tr>
			<td><b>Parent</b></td>
			<td><select data-bind="options: Directories, value: Parent, optionsText: 'Name'" style="width: 200px"></select></td>
		</tr>
		<tr>
			<td><b>Name</b></td>
			<td><input type="text" data-bind="value: Name" style="width: 200px" /></td>
		</tr>
	</table>
</script>
<!-- END: tmplNewImageDirectoryDialog -->
<!--
		tmplInspectionsEditor Editor Template
	-->
<script id="tmplInspectionsEditor" type="text/html">
	<table style="width:100%">
		<tbody>
			<tr>
				<td colspan="2" style="padding:1em;background-color:lightcoral">
					Resco Inspections is a separate product with its own respective license.<br />
					If you are not sure if this organisation has the appropriate license, please contact your account manager at Resco or email us at
					<a href="mailto:sales@resco.net">sales@resco.net</a>.
				</td>
			</tr>
			<tr>
				<td>
					<input id="cbEnable" type="checkbox" data-bind="checked: enable" />
					<label for="cbEnable" style="padding:2px">Enable Inspections</label>
				</td>
			</tr>
			<tr data-bind="visible: enable">
				<td>
					<ol>
						<li data-bind="visible: showMessage">
							Following items will be added:<br />
							Entities: Questionnaire, Question Group, Question<br />
							Views: Questionnaire Views<br />
							Styles: 01 inspections<br />
							Images Directory: inspections<br />
							Mobile Reports: AutomaticReport<br />
							<b>Please click Save to confirm.</b><br />
							<br />
						</li>
						<li>To add Inspections to Home, please click on <b>Add to Home</b> button. <br /><br /></li>
						<li>To add Inspections to a Form, please click on <b>Add to Form</b> button. <br /><br /></li>
						<li>To install preconfigured Generic Inspections Report (Legacy), please click on <b>Install Report</b> button. <br /><br /></li>
						<li data-bind="visible: inspectionsUrl">
							To install sample Questionnaire templates, please click
							<a target="_blank" data-bind="attr: {href: inspectionsUrl}">here</a>
						</li>
					</ol>
				</td>
			</tr>
		</tbody>
	</table>
</script>
<!--
		Integration Editor Template
	-->
<script id="tmplIntegrationEditor" type="text/html">
	<div style="padding: 5px;height:100%">
		<table class="ieTable" style="flex:0 1 auto">
			<tr>
				<th style="padding: 0 5px;">
					<h3 style="margin-top:0px; float:left;">Entity</h3>
				</th>
				<th style="padding: 0 5px;">
					<h3 style="margin-top:0px; float:left;">Days To Sync</h3>
				</th>
			</tr>
			<tr>
				<td style="padding: 0 5px;">
					<div class="switch">
						<input class="switch__input" id="ieEmail" type="checkbox" data-bind="checked: Email, enable: IsEmailEnabled" />
						<label class="switch__label" for="ieEmail" data-bind="text: 'Email'"></label>
					</div>
				</td>
				<td style="padding: 0 5px;">
					<div>
						<input id="ieDaysToSyncEmails" type="number" data-bind="value: DaysToSyncEmails, enable: IsEmailEnabled" />
						<label for="ieDaysToSyncEmails" data-bind="text: DaysToSyncEmailsText"></label>
					</div>
				</td>
			</tr>
			<tr data-bind="visible: IsCalendarVisible">
				<td style="padding: 0 5px;">
					<div class="switch">
						<input class="switch__input" id="ieCalendar" type="checkbox" data-bind="checked: Calendar" />
						<label class="switch__label" for="ieCalendar" data-bind="text: 'Calendar'"></label>
					</div>
				</td>
				<td style="padding: 0 5px;">
					<div>
						<input id="ieDaysToSyncAppointments" type="number" data-bind="value: DaysToSyncAppointments" />
						<label for="ieDaysToSyncAppointments" data-bind="text: DaysToSyncAppointmentsText()"></label>
					</div>
				</td>
			</tr>
			<tr data-bind="visible: IsCalendarVisible">
				<td></td>
				<td style="padding: 0 5px;">
					<div class="switch">
						<input class="switch__input" id="ieMarkPastAppointmentCompleted" type="checkbox" data-bind="checked: MarkPastAppointmentCompleted" />
						<label class="switch__label" for="ieMarkPastAppointmentCompleted">Mark Past Appointment as Completed</label>
					</div>
					<div>
						<input id="ieDaysToExpand" type="number" data-bind="value: DaysToExpand" />
						<label for="ieDaysToExpand"
							>Generate recurrent appointments <span data-bind="text: DaysToExpand"></span> days in advance. (Min:0, Max:3650, Default: 100)</label
						>
					</div>
				</td>
			</tr>
			<tr data-bind="visible: IsContactVisible">
				<td style="padding: 0 5px;">
					<div class="switch">
						<input class="switch__input" id="ieContact" type="checkbox" data-bind="checked: Contact" />
						<label class="switch__label" for="ieContact" data-bind="text: 'Contact'"></label>
					</div>
				</td>
			</tr>
		</table>
	</div>
</script>
<!-- BEGIN: Maintenance -->
<script id="tmplMaintenanceEditor" type="text/html">
	<div style="margin:5px">
		<tabcontrol data-id="MaintenanceTab" params="parent: $data">
			<tabitem data-id="MobileAudit" data-viewid="MaintenanceTabView" data-label="Mobile Audit"></tabitem>
			<tabitem data-id="MobileTracking" data-viewid="MaintenanceTabView" data-label="Mobile Tracking"></tabitem>
			<tabview data-id="MaintenanceTabView">
				<div style="font-weight:bold;border-bottom:1px solid silver">Settings</div>
				<table cellpadding="2">
					<tr>
						<td>Last Run</td>
						<td data-bind="text: LastRun() ? moment(LastRun()).format('dddd, MMMM DD, YYYY hh:mm:ss A') : ''"></td>
					</tr>
					<tr>
						<td>Next Run</td>
						<td data-bind="text: NextRun() ? moment(NextRun()).format('dddd, MMMM DD, YYYY hh:mm:ss A') : ''"></td>
					</tr>
					<tr>
						<td style="vertical-align:top">Start At</td>
						<td>
							<input data-bind="datetimepicker: StartAt, datetimepicker-options: { step: 30 }" type="text" readonly="readonly" style="width: 200px" />
						</td>
					</tr>
					<tr>
						<td>Run Every</td>
						<td>
							<select data-bind="value: RunEvery">
								<option value="1">1 day</option>
								<option value="7">1 week</option>
								<option value="14">2 weeks</option>
								<option value="28">4 weeks</option>
								<option value="91">13 weeks</option>
								<option value="182">26 weeks</option>
								<option value="364">52 weeks</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>Keep Last</td>
						<td>
							<select data-bind="value: LastXMonths">
								<option value="1">1 month</option>
								<option value="2">2 months</option>
								<option value="3">3 months</option>
								<option value="4">4 months</option>
								<option value="5">5 months</option>
								<option value="6">6 months</option>
								<option value="12">12 months</option>
								<option value="18">18 months</option>
								<option value="24">24 months</option>
								<option value="36">36 months</option>
							</select>
						</td>
					</tr>
				</table>
				<br />
				<br />
				<div style="font-weight:bold;border-bottom:1px solid silver">Statistics</div>
				<div data-bind="text: Statistics" style="white-space: pre"></div>
				<div data-bind="visible: StatisticsError() != null" style="margin-top:20px">
					<div style="color:red"><b>WARNING:</b> Failed to load the statistics.</div>
					<div>
						<div data-bind="click: SwitchVisibility" style="color:#0000ee;cursor:pointer">Show details...</div>
						<div data-bind="text: StatisticsError" style="visibility:collapse;white-space:pre;margin-top: 5px"></div>
					</div>
				</div>
			</tabview>
		</tabcontrol>
	</div>
</script>
<!-- END: Maintenance -->
<script id="tmplManageDependenciesDialog" type="text/html">
	<div style="flex: 0 0 auto; display:flex">
		<!-- ko foreach: Tabbar -->
		<div class="tabControlItem" data-bind="css: { tabControlItemSelected: Selected() }, click: Clicked, visible: Visible">
			<span style="padding:0.3em" data-bind="text: Name"></span>
		</div>
		<!-- /ko -->
	</div>
	<!-- ko if:  SelectedTabIndex() < 2-->
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<!-- /ko -->
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===2, template: { name: 'tmplUsedFields', data: ManageUsageEntityControl}"
	></div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===0, template: { name: 'tmplUnusedFields', data: ManageUnusedUsageEntityControl}"
	></div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===1, template: { name: 'tmplPossibleUnusedFields', data: ManagePossibleUnusedUsageEntityControl}"
	></div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===3, template: { name: 'tmplSearchUsage', data: SearchUsageEntityControl}"
	></div>

	<div style="flex:1 1 auto; flex-direction:column" class="flexDiv" data-bind="visible: SelectedTabIndex()===5"></div>
</script>
<!--
		Mobile Projects Editor Template
		This editor is used to display the list of mobile projects for the organization
	-->
<script id="tmplMobileProjectsEditor" type="text/html">
	<div class="mobileProjectEditor" style="height: 100%" data-bind="style: {height: ShowNews() ? 'calc(100% - 200px)' : 'calc(100% - 35px)'}">
		<!--<div style="position:absolute;left:0px;top:0px;background-color:yellow; width:500px;height:500px;overflow:auto;z-index:1" data-bind="template: { name: 'TreeViewItem', data: RootNode, as: 'node' }"></div>-->
		<div data-bind="grid: GridProjects" data-definitiononly="false" data-groupbinding="AppName" style="height: 100%">
			<div data-columnname="Project Name" data-flex="5 0 180px" data-binding="Name" data-sortable="true" data-horalign="left" data-sort="ascending">
				<div style="height:100%; display:flex; align-items:center">
					<i
						class="woodfordsprite"
						data-bind="css: !data.IsActive ? 'icon-woodford_Deactivate_16' : (data.IsPublished ? 'icon-woodford_Published_16' : 'icon-woodford_IsDirty_16')"
						style="margin:0px 5px;"
					></i>
					<div style="width:80%;" data-bind="text: data.Name"></div>
				</div>
			</div>
			<div data-columnname="Priority" data-flex="1 1 50px" data-horalign="center"></div>
			<div data-columnname="Parent" data-binding="ParentProjectsLabel" data-flex="2 1 125px"></div>
			<div data-columnname="Published On" data-binding="PublishedOn" data-flex="2 1 150px">
				<div style="padding: 5px">
					<span data-bind="text: (data.PublishedOn && data.PublishedOn.Value) ? dateAsLongDateString(data.PublishedOn.Value) : ''"></span>
				</div>
			</div>
			<div data-columnname="Custom Version ID" data-binding="ProjectVersion" data-flex="2 1 150px" data-horalign="left">
				<div style="padding: 5px">
					<span data-bind="text: data.ProjectVersion ? data.ProjectVersion : ''"></span>
				</div>
			</div>
			<div data-columnname="Type" data-flex="1 1 100px">
				<div style="padding: 5px">
					<span data-bind="text: MobileCRM.Woodford.Data.MobileProjectType[data.Type]"></span>
				</div>
			</div>
			<div data-columnname="Format" data-binding="VersionLabel" data-flex="1 1 65px" data-horalign="left"></div>
		</div>
	</div>
	<div
		style="display: flex; flex-direction: column; height: 200px; width: 100%; background: #EEE; border-top: solid 1px #B7B7B7; padding: 0px"
		data-bind="style: { height: ShowNews() ? '200px' : '35px' }"
	>
		<div class="news" data-bind="click: ToggleNews">
			<div style="width: 100%">Info Panel</div>
			<i data-bind="attr:{ 'class': 'news__icon woodfordsprite icon-woodford_' + (ShowNews() ? 'Minimize_24' : 'Open_24') }"></i>
		</div>
		<!-- ko if: ShowNews() -->
		<iframe src="https://resco.net/whatsnew/" style="width: 100%; height: 100%; border: 0px"></iframe>
		<!-- /ko -->
	</div>
</script>

<!-- BEGIN: TreeView -->
<script type="text/html" id="TreeViewItem">
	<li class="TreeViewItem" menuid="">
		<div data-bind="css: node.ParentClass">
			<div
				data-bind="style: { visibility: node.HasChildren() ? 'visible' : 'hidden' }, click: node.ToggleExpanded.bind(node), css: node.ExpandedClass, attr: { 'data-testid': node.Label  }"
				class="arrow-container"
			>
				<div></div>
			</div>
			<input
				type="checkbox"
				data-bind="visible: node.Root.CheckedName, checked: node.IsChecked, css: node.NotcheckedClass"
				style="margin: 0 0 0 4px"
			/>
			<img data-bind="visible: node.Data.Image, attr: { 'class': 'woodfordsprite icon-woodford_' + node.Data.Image }" style="margin: 0 0 0 4px" />
			<span
				data-bind="text: node.Label, multiClick: node.OnClick.bind(node), css: node.SelectedClass"
				style="margin: 0 0 0 4px; padding: 1px; cursor: pointer; white-space: nowrap"
			></span>
		</div>
		<!-- ko if: node.IsExpanded() -->
		<ul class="TreeViewItemsPanel sub-list" data-bind="template: { name: 'TreeViewItem', foreach: node.Children, as: 'node' }"></ul>
		<!-- /ko -->
	</li>
</script>
<!-- BEGIN: Mobile Users -->
<script id="tmplMobileUsersEditor" type="text/html">
	<div class="license-view-container">
		<section class="license-view-headers">
			<div class="users-name-container">
				<h1 class="users-header" style="flex:1 1 auto">Mobile Users</h1>
				<div style="flex: 0 0 auto">
					<input type="text" data-bind="value: FilterText, valueUpdate: 'afterkeydown'" placeholder="Search..." />
				</div>
				<div style="flex: 0 0 auto;cursor:pointer;margin-left:10px;position:relative">
					<i data-bind="click: OnFilterShow" class="woodfordsprite icon-woodford_FilterFields_16" title="Filter"></i>
					<div style="position:absolute;border:1px solid silver;padding:8px;background-color:white;z-index:1" data-bind="visible: FilterVisible">
						<div style="margin-bottom:16px">
							<b>Product</b>
							<div><input id="mu-p--1" type="checkbox" checked="checked" /><label for="mu-p--1">None</label></div>
							<!-- ko foreach: Subscriptions -->
							<!-- ko if: Product > 0 -->
							<div>
								<input type="checkbox" checked="checked" data-bind="attr: { id: 'mu-p-' + Product }" /><label
									data-bind="text: Name, attr: { for: 'mu-p-' + Product }"
								></label>
							</div>
							<!-- /ko -->
							<!-- /ko -->
						</div>

						<div style="margin-bottom:16px">
							<b>License</b>
							<div><input id="mu-l-0" type="checkbox" checked="checked" /><label for="mu-l-0">Assigned</label></div>
							<div><input id="mu-l-1" type="checkbox" checked="checked" /><label for="mu-l-1">Disabled</label></div>
							<div><input id="mu-l-2" type="checkbox" checked="checked" /><label for="mu-l-2">Pending</label></div>
						</div>

						<div style="display:flex">
							<button style="background-color:white;border:1px solid silver;margin-right:8px" data-bind="click: OnFilterApply">Apply</button
							><button style="background-color:white;border:1px solid silver" data-bind="click: OnFilterCancel">Cancel</button>
						</div>
					</div>
				</div>
				<div data-bind="click: OnRefreshClicked" style="flex:0 0 auto;cursor:pointer;margin-left:10px">
					<i class="woodfordsprite icon-woodford_Refresh" title="Refresh"></i>
				</div>
			</div>
			<div class="subscriptions-name-container">
				<h1 class="subscriptions-header">Subscriptions</h1>
			</div>
		</section>
		<section class="license-view-content">
			<div class="users-table-container">
				<div
					data-bind="grid: MobileUsers"
					data-definitiononly="false"
					data-multiselect="true"
					style="height: 100%;white-space:nowrap;margin-top:10px"
				>
					<div
						data-columnname="Full Name"
						data-flex="1 1 200px"
						data-binding="Attributes.fullname"
						data-sortable="true"
						data-horalign="left"
						data-sort="ascending"
					></div>
					<div
						data-columnname="Primary Email"
						data-flex="1 1 200px"
						data-binding="Attributes.internalemailaddress"
						data-sortable="true"
						data-horalign="left"
					>
						<div data-bind="text: data.Attributes.internalemailaddress || ''" style="padding: 5px"></div>
					</div>
					<div
						data-columnname="Business Unit"
						data-flex="1 1 150px"
						data-binding="Attributes.businessunitid"
						data-sortable="true"
						data-horalign="left"
					>
						<div data-bind="text: data.Attributes.businessunitid ?  data.Attributes.businessunitid.Name : ''" style="padding: 5px"></div>
					</div>
					<div data-columnname="Products" data-flex="1 1 125px" data-binding="Products" data-sortable="true" data-horalign="left">
						<div data-bind="html: data.Products" style="padding: 5px"></div>
					</div>
					<div data-columnname="Synchronized On" data-binding="SynchronizedOn" data-flex="1 1 125px" data-horalign="left">
						<div style="padding: 5px">
							<span
								data-bind="text: (data.SynchronizedOn && data.SynchronizedOn.Value) ? dateAsLongDateString(data.SynchronizedOn.Value) : ''"
							></span>
						</div>
					</div>
				</div>
			</div>
			<div class="subscriptions-container">
				<div style="padding:10px 5px 5px 5px">
					<!-- ko foreach: Subscriptions -->
					<div>
						<div style="margin-bottom: 2px"><b data-bind="text: Name"></b></div>
						<div data-bind="text: Info" style="margin-bottom: 8px"></div>
						<!-- ko if: License -->
						<div
							class="three-state-button"
							data-bind="css: { 'state-assigned': License().Is('Assigned'), 'state-disabled': License().Is('Disabled'), 'state-pending': License().Is('Pending'), 'state-unassigned': License().Is('Unassigned') }"
						>
							<span
								class="button-part part-one"
								data-bind="attr: { title: License().Title('Disabled') }, click: function(event) { $parent.SetLicense($data, 'Disabled') }"
							></span>
							<span
								class="button-part part-two"
								data-bind="attr: { title: License().Title('Unassigned') }, click: function(event) { $parent.SetLicense($data, 'Unassigned') }"
							></span>
							<span
								class="button-part part-three"
								data-bind="attr: { title: License().Title('Assigned') }, click: function(event) { $parent.SetLicense($data, 'Assigned') }"
							></span>
						</div>
						<div data-bind="text: License().Summary" title="Total, Assigned, Disabled, Pending, Unassigned" style="margin-top:8px"></div>
						<!-- /ko -->
					</div>
					<!-- /ko -->
				</div>
			</div>
		</section>
	</div>
</script>
<!-- END: Mobile Users -->
<!--
		tmplNewMobileProjectDialog Editor Template
	-->
<script id="tmplNewMobileProjectDialog" type="text/html">
	<form data-bind="event: { keypress: absorbEnter }">
		<div>
			<!-- BEGIN: WizardPage.Type: Selecting the project type -->
			<div data-bind="visible: CurrentPage() === WizardPage.Type">
				<div class="project__option">
					<div class="project__option--title"><span>Select a project type</span></div>
					<div class="templateBox__wrapper">
						<div class="templateBox" data-bind="click:() => next(false)">
							<span class="templateBox__title">Standard Users</span>
							<span class="templateBox__description">Build app for internal users who have their own accounts within the organization.</span>
						</div>
						<div class="templateBox" data-bind="click:() => next(true)">
							<span class="templateBox__title">External Users</span>
							<span class="templateBox__description"
								>Build app for external users, either those belonging to a particular CRM entity like Partners or completely anonymous.</span
							>
						</div>
					</div>
				</div>
			</div>
			<!-- END: WizardPage.Type -->

			<!-- BEGIN: WizardPage.Template: Selecting the project template -->
			<div data-bind="visible: CurrentPage() === WizardPage.Template">
				<div class="project__option">
					<div class="project__option--title"><span>Choose template from gallery</span></div>
					<div data-bind="foreach: Templates" class="templateBox__wrapper">
						<div class="templateBox" data-bind="click:() => $parent.next($data)">
							<div class="templateBox__icon">
								<i data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_' + iconName}"></i>
							</div>
							<span class="templateBox__title" data-bind="text:DisplayName"></span>
							<span class="templateBox__description" data-bind="text:Description"></span>
						</div>
					</div>
				</div>
			</div>
			<!-- END: WizardPage.Template -->

			<!-- BEGIN: WizardPage.ChoosePowerApp: Choose PowerApp as import template -->
			<div data-bind="visible: CurrentPage() === WizardPage.ChoosePowerApp">
				<div class="project__option">
					<div class="project__option--title"><span>Choose source PowerApp</span></div>
					<div data-bind="foreach: PowerAppsList" class="templateBox__wrapper">
						<div class="templateBox" data-bind="click:() => $parent.next($data)">
							<div class="templateBox__icon" style="background-color: #ebebeb; height:64px;">
								<image data-bind="attr:{ 'src': image() }" style="height: 48px;"></image>
							</div>
							<span class="templateBox__title" data-bind="text: name, attr:{'title': name}"></span>
							<span class="templateBox__description" data-bind="text: description, attr:{'title': description}"></span>
						</div>
					</div>
				</div>
			</div>
			<!-- END: WizardPage.ChoosePowerApp -->

			<!-- BEGIN: WizardPage.ChooseAppSiteMap -->
			<div data-bind="visible: CurrentPage() === WizardPage.ChooseAppSiteMap">
				<div class="project__option--title"><span>Choose App Content</span></div>
				<div style="flex: 1 1 auto;overflow:auto; background:white;" data-bind="template: { name: 'TreeView', data: AppSiteMap, as: 'x' }"></div>
			</div>
			<!-- END: WizardPage.ChooseAppSiteMap -->

			<!-- BEGIN: WizardPage.App: Selecting the app -->
			<div data-bind="visible: CurrentPage() === WizardPage.App">
				<div class="project__option">
					<p>Please carefully select app in which you want to create the project. To create new app, select "Create a new app...".</p>
					<div class="project__option--title"><span>App</span></div>
					<select style="width:100%" data-bind="options: AllApps, optionsText: 'AppName', value: ParentApp, valueAllowUnset: false"></select>
				</div>
				<div class="project__option" data-bind="visible: ParentApp().AppID === null">
					<div class="project__option--title"><span>New App Name</span></div>
					<input type="text" data-bind="value:NewAppID" />
				</div>
			</div>
			<!-- END: WizardPage.App -->

			<!-- BEGIN: WizardPage.Properties: Defining the properties -->
			<div data-bind="visible: CurrentPage() === WizardPage.Properties">
				<div data-bind="visible: ShowAppID()">
					<div class="project__option">
						<div class="project__option--title"><span>App</span></div>
						<select style="width:100%" data-bind="options: AllApps, optionsText: 'AppName', value: ParentApp, valueAllowUnset: false"></select>
					</div>
					<div data-bind="visible: ParentApp().AppID === null">
						<div class="project__option">
							<div class="project__option"><span>New App Name</span></div>
							<input type="text" data-bind="value:NewAppID" />
						</div>
					</div>
				</div>
				<div class="project__option">
					<div class="project__option--title"><span>Name</span></div>
					<input type="text" data-bind="value:Name" />
				</div>
				<div class="project__option">
					<div class="project__option--title"><span>Priority</span></div>
					<input type="number" data-bind="value:Priority" min="-2147483648" max="2147483647" />
				</div>
				<div class="project__option">
					<div class="project__option--title"><span>Custom Version Identifier (Optional)</span></div>
					<input
						type="text"
						data-bind="value:ProjectVersion"
						placeholder="Optional text identifying the specific project version (e.g. “Sprint 10”, “Production version” …)"
					/>
				</div>
				<div class="project__option--title"><span>Roles</span></div>
				<div style="flex: 1 1 auto;overflow:auto; background:white;" data-bind="template: { name: 'TreeView', data: ViewTree, as: 'x' }"></div>
			</div>
			<!-- END: WizardPage.Properties -->

			<!-- BEGIN: WizardPage.Connection || WizardPage.IdentityProvider: Defining connection and identity provider properties for external project -->
			<div data-bind="visible: CurrentPage() === WizardPage.Connection || CurrentPage() === WizardPage.IdentityProvider">
				<div class="project__section" style="margin-top:0px;">External Project</div>
				<!-- BEGIN: WizardPage.Connection: Defining connection properties for external project -->
				<div data-bind="visible: CurrentPage() === WizardPage.Connection">
					<div class="project__option">
						<div class="project__option--title"><span>Server Alias</span></div>
						<input type="text" data-bind="value: Name" style="width:100%; box-sizing:border-box" />
					</div>
					<div class="project__option">
						<div class="project__option--title"><span>Custom Version Identifier (Optional)</span></div>
						<input
							type="text"
							data-bind="value: ProjectVersion"
							placeholder="Optional text identifying the specific project version (e.g. “Sprint 10”, “Production version” …)"
						/>
					</div>
					<div class="project__section">Connection</div>
					<div class="project__option">
						<div class="project__option--title"><span>External URL</span></div>
						<input type="text" data-bind="value: ExternalUrl" />
					</div>
					<div style="display:flex;flex-wrap:nowrap;gap:10px">
						<div class="project__option" style="flex:1">
							<div class="project__option--title"><span>User</span></div>
							<input type="text" data-bind="value: User, click: SelectUser" readonly="readonly" />
						</div>
						<div class="project__option" style="flex:1">
							<div class="project__option--title"><span>Password</span></div>
							<input type="password" data-bind="value: Password" />
						</div>
					</div>
				</div>
				<!-- END: WizardPage.Connection -->

				<!-- BEGIN: WizardPage.IdentityProvider: Defining identity provider properties for external project -->
				<div data-bind="visible: CurrentPage() === WizardPage.IdentityProvider">
					<div class="project__section">Identity Provider</div>
					<div data-bind="foreach: IdPTypes" class="segmented-buttons" style="padding-bottom:20px;display:flex;justify-content:center;">
						<div
							data-bind="click: () => $parent.IdP($data.value), text: $data.name, attr: { 'class': $parent.IdP() === $data.value ? 'segmented-button-on': 'segmented-button-off' }"
						></div>
					</div>
					<div data-bind="visible: showIdP()">
						<div class="project__option">
							<div class="project__option--title"><span>Authentication Entity</span></div>
							<select
								data-bind="options: Entities, optionsText: function(e) { return e.GetLabel(); }, optionsValue: 'LogicalName', value: IdPEntity, optionsCaption: '', valueAllowUnset: true"
							></select>
						</div>
						<div style="display:flex;flex-wrap:wrap;gap:20px">
							<div class="project__option" style="flex:1">
								<div class="project__option--title"><span>User Field</span></div>
								<select
									data-bind="options: StringFields, optionsText: function(e) { return e.GetLabel(); }, optionsValue: 'LogicalName', value: IdPUserField, optionsCaption: '', valueAllowUnset: true"
								></select>
							</div>
							<div class="project__option" style="flex:1" data-bind="style: { visible: !isOAuth() }">
								<div class="project__option--title"><span data-bind="text: isOAuth() ? 'OAuth Source Field' : 'Password Field'"></span></div>
								<select
									data-bind="options: (isOAuth() ? PicklistFields : StringFields), optionsText: function(e) { return e.GetLabel(); }, optionsValue: 'LogicalName', value: IdPSourceOrPasswordField, optionsCaption: '', valueAllowUnset: true"
								></select>
							</div>
						</div>
						<div style="display:flex;flex-wrap:wrap;gap:20px">
							<div class="project__option" style="flex:1">
								<div class="project__option--title"><span>CustomerId Field</span></div>
								<select
									data-bind="options: LookupFields, optionsText: function(e) { return e.GetLabel(); }, optionsValue: 'LogicalName', value: IdPCustomerField, optionsCaption: '', valueAllowUnset: true"
								></select>
							</div>
							<div class="project__option" style="flex:1">
								<div class="project__option--title"><span>Customer Lookup Field</span></div>
								<input type="text" data-bind="value: IdPCustomerLookupField(), click: SelectCustomerLookupField" readonly="readonly" />
							</div>
						</div>
						<div data-bind="style:{visibility: showIdPIssuer() ? 'visible' : 'hidden', minHeight: '110px' }">
							<div class="project__option">
								<div class="project__option--title"><span>Issuer</span></div>
								<input type="text" data-bind="value: IdPIssuer" />
							</div>
							<div class="project__option" data-bind="visible: showIdPClientId()">
								<div class="project__option--title"><span>Client Id</span></div>
								<input type="text" data-bind="value: IdPClientId" />
							</div>
							<div class="project__option" data-bind="visible: showIdPValidation()">
								<label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
									<input type="checkbox" data-bind="checked: IdPValidation" />
									Enable Certificate Validation
								</label>
							</div>
						</div>
						<div class="project__section">Registration</div>
						<div data-bind="foreach: Registrations" class="segmented-buttons" style="padding-bottom:20px;display:flex;justify-content:center;">
							<div
								data-bind="click: () => $parent.Registration($data.value), text: $data.name, attr: { 'class': $parent.Registration() === $data.value ? 'segmented-button-on': 'segmented-button-off' }"
							></div>
						</div>
						<div style="display:flex;flex-wrap:wrap;gap:20px" data-bind="style: { visibility: showRegistration() ? 'visible' : 'hidden' }">
							<div class="project__option" style="flex:1">
								<div class="project__option--title"><span>Registration Form</span></div>
								<input type="text" data-bind="value: RegistrationForm(), click: EditRegistrationForm" readonly="readonly" />
							</div>
							<div class="project__option" style="flex:1" data-bind="style: { visibility: showRegistrationEndpoint() ? 'visible' : 'hidden' }">
								<div class="project__option--title"><span>Registration Endpoint</span></div>
								<input type="text" data-bind="value: RegistrationEndpoint" />
							</div>
						</div>
					</div>
				</div>
				<!-- END: WizardPage.IdentityProvider -->
			</div>
			<!-- END: WizardPage.Connection || WizardPage.IdentityProvider -->
		</div>
	</form>
</script>
<!-- BEGIN: tmplPageDialog-->
<script id="tmplPageDialog" type="text/html">
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div style="flex:1 1 auto; flex-direction:column; overflow: auto" class="flexDiv">
		<div style="position: relative; height: 100%">
			<div
				class="page"
				style="top: 0px; height:100%"
				data-bind="template: { name: 'tmplPageDialogPage', data: Page, afterRender: function(elements, form) { Page().Appended(elements); } }"
			></div>
		</div>
	</div>
</script>

<script id="tmplPageDialogPage" type="text/html">
	<!-- ko if: Editor() -->
	<div style="flex: 1 1 100%">
		<!-- ko template: { name: 'tmplRescoEditor', data: Editor, afterRender: function(elements, editor) { Editor().Appended(elements) } } --><!-- /ko -->
	</div>
	<!-- /ko -->
</script>
<!-- BEGIN: Plugins -->
<script id="tmplPluginsEditor" type="text/html">
	<div style="margin:5px">
		<div data-bind="style: { height: (Size.Height() - 232) + 'px'}" style="overflow-y:auto;overflow-x:hidden">
			<div data-bind="grid: PluginsGrid" data-definitiononly="false" style="height:calc(100% - 5px)">
				<div
					data-columnname="Plugin name"
					data-binding="Label"
					data-flex="4 1 100px"
					data-sortable="true"
					data-horalign="left"
					data-sort="ascending"
				></div>
				<div data-columnname="Plugin type" data-binding="Type" data-flex="4 1 100px" data-sortable="true" data-horalign="left"></div>
				<div
					data-columnname="Enabled"
					data-binding="Track"
					data-columntype="checkbox"
					data-flex="4 1 100px"
					data-sortable="true"
					data-horalign="left"
				></div>
				<div data-columnname="Custom Entity" data-binding="isCustom" data-flex="4 1 100px" data-sortable="true" data-horalign="left"></div>
			</div>
		</div>
	</div>
</script>
<!-- END: Plugins -->
<!-- BEGIN: Profile -->
<script id="tmplProfileEditor" type="text/html">
	<div class="content-wrapper">
		<p>
			Please, fill in your contact information below. These details help us identify and track support cases and, in the end, help us improve the
			quality of the support we provide.
		</p>
		<p>Make sure you enter a valid email address – otherwise, we will not be able to respond to your queries.</p>
		<table>
			<tr>
				<td>Email:</td>
				<td><input type="text" data-bind="value:Email" style="box-sizing:border-box;width:300px" /></td>
			</tr>
			<tr>
				<td>Company:</td>
				<td><input type="text" data-bind="value:Company" style="box-sizing:border-box;width:300px" /></td>
			</tr>
			<tr>
				<td>First Name:</td>
				<td><input type="text" data-bind="value:FirstName" style="box-sizing:border-box;width:300px" /></td>
			</tr>
			<tr>
				<td>Last Name:</td>
				<td><input type="text" data-bind="value:LastName" style="box-sizing:border-box;width:300px" /></td>
			</tr>
			<tr>
				<td>Job Title:</td>
				<td><input type="text" data-bind="value:JobTitle" style="box-sizing:border-box;width:300px" /></td>
			</tr>
			<tr>
				<td>Phone:</td>
				<td><input type="text" data-bind="value:Phone" style="box-sizing:border-box;width:300px" /></td>
			</tr>
			<tr>
				<td>Country:</td>
				<td><input type="text" data-bind="value:Country" style="box-sizing:border-box;width:300px" /></td>
			</tr>
		</table>
		<p>
			Check out our <a href="https://www.resco.net/privacy-note/" target="_blank">privacy note and policy</a> for the full story on how we protect and
			manage your submitted data.
		</p>
	</div>
</script>
<!-- END: Profile -->
<!--
		tmplProjectGitCheckoutProgress Template
	-->
<script id="tmplProjectGitCheckoutProgress" type="text/html">
	<div><b>Loading project data...</b></div>
	<progress style="width: 100%; margin-top: 5px; margin-bottom: 5px;" data-bind="attr: { value:progressDone, max:progressTotal }"></progress>
</script>
<!--
		tmplProjectGitCommitDialog Template
	-->
<script id="tmplProjectGitCommitDialog" type="text/html">
	<div style="display: flex; flex-direction: column; flex-grow: 1;">
		<div style="flex-grow: 4;"><strong>Project Name</strong>&nbsp;<span data-bind="text: projectName"></span></div>
		<div style="flex-grow: 4;"><strong>Branch Name</strong>&nbsp;<span data-bind="text: branchName"></span></div>
		<div style="display: flex; flex-direction: column; flex-grow: 93;">
			<div><b>Description</b></div>
			<textarea id="commitDescription" data-bind="value: commitDescription()" style="flex-grow: 1" maxlength="5000"></textarea>
		</div>
		<progress
			style="width: 100%; margin-top: 5px; margin-bottom: 5px;"
			data-bind="visible:progressVisible, attr: { value:progressDone, max:progressTotal }"
		></progress>
		<div data-bind="visible:commitPerformed"><span data-bind="text:commitResult"></span></div>
	</div>
</script>
<!--
		tmplProjectGitHistoryDialog Template
	-->
<script id="tmplProjectGitHistoryDialog" type="text/html">
	<div style="margin: 7px"><strong>Branch Name</strong>&nbsp;<span data-bind="text: branchName"></span></div>
	<div data-bind="grid: Grid" data-definitiononly="false">
		<div
			data-columnname="Date"
			data-flex="0 0 150px"
			data-binding="date"
			data-sort="date"
			data-sortable="true"
			data-horalign="left"
			data-sort="descending"
		>
			<span data-bind="text: dateAsLongDateString(data.date)"></span>
		</div>
		<div data-columnname="Message" data-flex="1 0 150px" data-binding="message" data-sortable="true" data-horalign="left"></div>
	</div>
</script>
<!--
		tmplProjectListGitDialog Editor Template
	-->
<script id="tmplProjectListGitDialog" type="text/html">
	<div style="padding:3px"><strong>Branch Name</strong>&nbsp;<span data-bind="text: branchName"></span></div>
	<div data-bind="grid: Grid" data-definitiononly="false">
		<div data-columnname="Name" data-flex="1 0 150px" data-binding="name" data-sortable="true" data-horalign="left"></div>
	</div>
</script>
<!-- BEGIN: RegistrationFormDesigner -->
<script id="tmplRegistrationFormDesigner" type="text/html">
	<div data-bind="style: {height:Size.Height() + 'px'}" style="display:flex">
		<div class="designerPanelOuter" style="flex:4 1 auto;">
			<div class="wfheader">
				<label class="label">Designer</label>
				<input type="range" min="1" max="4" step="0.1" style="flex:0 0 100px" data-bind="value:ZoomLevel" />
			</div>
			<div
				class="designerPanel"
				id="designerRowContainer"
				style="display:flex;align-items:flex-start;justify-content:center;border-left:0;overflow:auto;"
			>
				<div
					style="position:relative; display:flex; flex-direction:row; width:390px;min-height:400px; transform:scale(2); transform-origin:top; overflow:auto"
					data-bind="style:{ transform: ZoomLevelScale }"
				>
					<div
						class="designerPanel"
						style="display:flex;flex-direction:column;width:140px;min-height:200px"
						data-bind="dropZone: { accepts: ['AvailFields'], drop: OnItemDrop.bind($data), dragOver: OnDetailItemDragOver.bind($data), dragLeave: OnDetailItemDragLeave.bind($data) }"
					>
						<!-- ko foreach: DetailItems -->
						<div
							style="display:flex; flex-direction:row; flex: 0 0 auto; padding:5px;"
							data-bind="multiClick: $parent.OnDetailItemListClicked.bind($parent), dbclick: $parent.OnDetailItemListDbClicked.bind($parent), style: {backgroundColor: (Selected() ? '#9ecfe9':''), flexDirection: LabelPosition },
									dragZone: { name: 'AvailFields', dragStart: $parent.OnItemDragStart.bind($parent), element: 'tmplFormDragItem' } "
						>
							<div
								class="DetailItemLabel"
								style="width:100px"
								data-bind="text: Value, visible: LabelVisible, style: {alignSelf: LabelAlign, width: LabelWidth }"
							></div>
							<div style="flex:1 1 auto; background-color:#EEE; min-height:3px" data-bind="text: DisplayName"></div>
						</div>
						<!-- /ko -->
					</div>
				</div>
			</div>
		</div>
		<div class="designerPanelOuter" style="min-width:200px">
			<div class="wfheader" style="border-left:0">
				<label class="label" style="white-space:nowrap;margin-right:5px">Fields</label>
				<input type="text" data-bind="textInput: FieldSearch" placeholder="Search" />
			</div>
			<div class="designerPanel" style="border-left:0;height:200px;overflow:auto;display:flex;flex-direction:column">
				<!-- ko foreach: Fields -->
				<div
					style="flex: 0 0 auto; padding:5px; display:flex;align-items:center"
					data-bind="dragZone: { name: 'AvailFields', dragStart: $parent.OnItemDragStart.bind($parent) }, multiClick: $parent.OnFieldsListClicked.bind($parent), dblclick: $parent.OnFieldsListDbClicked.bind($parent), style: {backgroundColor: (Selected() ? '#9ecfe9':'') }"
				>
					<span data-bind="text: DisplayName, attr:{ title: LogicalName }" style="flex:1 1 auto"></span>
				</div>
				<!-- /ko -->
			</div>
		</div>
	</div>
</script>
<!-- END: RegistrationFormDesigner -->
<!-- BEGIN: tmpReminderEditor -->
<script id="tmpReminderEditor" type="text/html">
	<div style="padding: 5px;height:100%">
		<div data-bind="grid: Grid" data-definitiononly="false" data-twowaybinding="true" style="white-space:nowrap; height: 100%">
			<div data-columnname="EntityLabel" data-flex="1 1 200px" data-horalign="left" data-sort="ascending"></div>
			<div data-columnname="KindLabel" data-flex="1 1 200px" data-horalign="left" data-sort="ascending"></div>
		</div>
	</div>
</script>
<!-- END: tmpReminderEditor -->
<script id="tmplRescoCRMConnectionDialog" type="text/html">
	<table style="width:100%;height:100%">
		<tr>
			<td colspan="2">
				<b>Resco CRM Login</b>
				<hr />
			</td>
		</tr>
		<tr>
			<td style="width:110px"><b>Url</b></td>
			<td><input type="text" data-bind="value:RescoUrl, enable: !IsXrm" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr data-bind="visible: !IsXrm">
			<td><b>Username (email)</b></td>
			<td><input type="text" data-bind="value: RescoUsername" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr data-bind="visible: !IsXrm">
			<td><b>Password</b></td>
			<td><input type="password" data-bind="value: RescoPassword" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr data-bind="visible: IsNew && !IsXrm">
			<td><b>Confirm Password</b></td>
			<td><input type="password" data-bind="value: RescoConfirmPassword" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td colspan="2">
				<br />
				<br />
				<select id="providerSyncSelector" style="width:100%" data-bind="options: Providers, valueAllowUnset: false"></select>
				<hr />
			</td>
		</tr>
		<tr>
			<td><b>Url</b></td>
			<td><input type="text" data-bind="value: DynamicsUrl, enable: IsXrm" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td><b>Username</b></td>
			<td><input type="text" data-bind="value: DynamicsUsername" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td><b>Password</b></td>
			<td><input type="password" data-bind="value: DynamicsPassword" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr data-bind="visible: IsNew">
			<td colspan="2">
				<br />
				<br />
				<label
					><input type="checkbox" data-bind="checked: PrivacyConsent" />I have read and agree with
					<a href="https://www.resco.net/privacy-notice/" target="_blank">RESCO Privacy notice</a> and
					<a href="https://www.resco.net/downloads/RESCO_General_Terms_and_Conditions.pdf" target="_blank">RESCO General Terms and Conditions</a
					>.</label
				>
			</td>
		</tr>
		<tr>
			<td colspan="2" valign="bottom" style="height:100%;white-space:nowrap">
				<button
					value="Connect"
					data-bind="text: IsNew ? 'Connect' : 'Update', enable: !IsNew || PrivacyConsent(), click: OnButtonClicked"
					style="margin-right:10px"
				>
					Connect
				</button>
				<button value="Disconnect" data-bind="visible: !IsNew, click: OnButtonClicked">Disconnect</button>
				<button value="Cancel" data-bind="click: OnButtonClicked" style="float:right">Cancel</button>
			</td>
		</tr>
	</table>
</script>
<script id="tmplRescoCRMProgressDialog" type="text/html">
	<div class="builderDialog">
		<header>
			<h3 data-bind="text: Caption"></h3>
			<i id="dialogCloseButton" class="woodfordsprite icon-woodford_Close" data-bind="click: OnCloseClicked, visible:IsCloseVisible"></i>
		</header>
		<main data-bind="style: { margin: Margin + 'px'}">
			<div id="rescoCRMProgressDialogText" data-bind="text: Text" style="overflow:auto;white-space:pre;padding:5px"></div>
		</main>
	</div>
</script>
<!-- BEGIN: Resco CRM Sync -->
<script id="tmplRescoCRMSyncEditor" type="text/html">
	<div style="margin:5px;height:100%;">
		<tabcontrol data-id="RescoCRMSyncTab" params="parent: $data">
			<tabitem data-id="SynchronizationTab" data-viewid="SynchronizationTabView" data-label="Resco CRM Synchronization"></tabitem>
			<tabitem data-id="OfflineTransactionsTab" data-viewid="OfflineTransactionsTabView" data-label="Offline Transactions"></tabitem>
			<tabview data-id="SynchronizationTabView">
				<div
					data-bind="grid: Entities"
					data-definitiononly="false"
					data-multiselect="false"
					style="height: calc(100% - 40px);white-space:nowrap;margin-top:10px;"
				>
					<div
						data-columnname="&nbsp;"
						data-columntype="checkbox"
						data-horalign="center"
						data-flex="0 0 20px"
						data-binding="IsEnabled"
						data-sortable="true"
					></div>
					<div
						data-columnname="Display Name"
						data-flex="1 1 200px"
						data-binding="DisplayName"
						data-sortable="true"
						data-sort="ascending"
						data-horalign="left"
					></div>
					<div data-columnname="Name" data-flex="1 1 200px" data-binding="Name" data-sortable="true" data-horalign="left"></div>
					<div
						data-columnname="Sync Deletion"
						data-columntype="checkbox"
						data-flex="0 0 100px"
						data-binding="SyncDeletion"
						data-sortable="true"
						data-horalign="center"
					></div>
				</div>
			</tabview>
			<tabview data-id="OfflineTransactionsTabView">
				<b>Status:</b>
				<select data-bind="value: Status">
					<option value="0">All</option>
					<option value="1">Pending</option>
					<option value="2">Processed</option>
					<option value="3" selected="selected">Error</option>
					<option value="4">Archived</option>
					<option value="5">Ignored</option>
				</select>
				<br />
				<div
					data-bind="grid: Transactions"
					data-definitiononly="false"
					data-multiselect="false"
					style="height: calc(100% - 60px);white-space:nowrap;margin-top:10px"
				>
					<div data-columnname="&nbsp;" data-horalign="center" data-flex="0 0 20px" data-binding="_selected" data-sortable="true">
						<!-- ko if: data.Attributes.statuscode.Value === 3 || data.Attributes.statuscode.Value === 5 -->
						<input type="checkbox" data-bind="checked: data._selected" />
						<!-- /ko -->
					</div>
					<div data-columnname="Operation" data-flex="1 0 40px" data-binding="Attributes.name" data-sortable="true" data-horalign="left"></div>
					<div
						data-columnname="Entity Name"
						data-flex="2 0 80px"
						data-binding="Attributes.entityname"
						data-sortable="true"
						data-horalign="left"
					></div>
					<div data-columnname="Entity Id" data-flex="2 0 80px" data-binding="Attributes.entityid" data-sortable="true" data-horalign="left"></div>
					<div data-columnname="Created On" data-flex="1 0 40px" data-binding="Attributes.createdon" data-sortable="true" data-horalign="left">
						<div data-bind="text: dateAsLongDateString(data.Attributes.createdon)"></div>
					</div>
					<div
						data-columnname="Version"
						data-flex="1 0 40px"
						data-binding="Attributes.versionnumber"
						data-sortable="true"
						data-sort="descending"
						data-horalign="left"
					></div>
					<div data-columnname="Status" data-flex="1 0 40px" data-binding="Attributes.statuscode" data-sortable="true" data-horalign="left">
						<div data-bind="text: MobileCRM.Woodford.RescoCRMSyncEditor.StatusToString(data.Attributes.statuscode)"></div>
					</div>
					<div data-columnname="Error" data-flex="6 0 240px" data-binding="Attributes.error" data-sortable="true" data-horalign="left">
						<div data-bind="text: data.Attributes.error || ''"></div>
					</div>
				</div>
			</tabview>
		</tabcontrol>
	</div>
</script>
<script id="tmplRescoCRMSyncFieldsDialog" type="text/html">
	<div class="woodfordEditor" style="display: flex; flex-direction: column;">
		<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
		<div class="header">
			<div class="label">
				<span data-bind="text: label"></span>
			</div>
			<div class="search">
				<input id="searchbox" class="search__input" type="text" data-bind="value: filterText, valueUpdate: 'afterkeydown'" placeholder="Search..." />
			</div>
		</div>
		<div class="entityEditor" style="overflow: auto;">
			<div style="display:flex;flex:5;overflow:hidden">
				<div data-bind="grid: grid" data-definitiononly="false" data-twowaybinding="true" style="white-space:nowrap; height: 100%;flex:5;">
					<div
						data-columnname="*"
						data-horalign="center"
						data-flex="0 0 20px"
						data-sortable="true"
						data-bind="opacity:data.Opacity(), enable: data.IsEditable()"
						data-sort="ascending"
					>
						<div style="height:100%; display:flex; align-items:center">
							<input type="checkbox" data-bind="checked: data.IsEnabled, enable: data.IsEditable()" />
						</div>
					</div>
					<div
						data-columnname="DisplayName"
						data-flex="1 1 200px"
						data-horalign="left"
						data-bind="opacity:data.Opacity()"
						data-sortable="true"
						data-sort="ascending"
					></div>

					<div data-columnname="Name" data-sortable="true" data-flex="1 1 200px" data-horalign="left" data-bind="opacity:data.Opacity()"></div>
					<div data-columnname="Type" data-sortable="true" data-flex="1 1 200px" data-horalign="left" data-bind="opacity:data.Opacity()"></div>
					<div data-columnname="Permissions" data-sortable="true" data-flex="1 1 200px" data-horalign="left" data-bind="opacity:data.Opacity()"></div>
				</div>
			</div>
		</div>
		<footer class="entityEditor__footer">
			<div data-bind="text:statusText"></div>
		</footer>
	</div>
</script>
<script id="tmplSchemaEditor" type="text/html">
	<div data-bind="grid: EntityGrid" data-definitiononly="false" data-multiselect="false" style="height: 100%">
		<div
			data-columnname="Display Name"
			data-flex="1 1 100px"
			data-binding="UserDisplayName.Label"
			data-sortable="true"
			data-horalign="left"
			data-sort="ascending"
		></div>
		<div
			data-columnname="Logical Name"
			data-flex="1 1 100px"
			data-binding="LogicalName"
			data-sortable="true"
			data-horalign="left"
			data-sort="ascending"
		></div>
		<div
			data-columnname="Audit Enabled"
			data-flex="1 1 100px"
			data-binding="IsAuditEnabled"
			data-sortable="false"
			data-horalign="center"
			readonly="readonly"
		>
			<input type="checkbox" data-bind="checked: data.IsAuditEnabled, disable: true" /><!-- makes checkbox readonly-->
		</div>
		<div
			data-columnname="Description"
			data-flex="1 1 100px"
			data-binding="Description"
			data-sortable="true"
			data-horalign="left"
			data-sort="ascending"
		>
			<div style="padding: 5px" data-bind="text: data.Description"></div>
		</div>
	</div>
</script>
<!--
		Security Editor - Device Control Template
		This editor is used to display the list of devices with options to lock, wipe or force fullsync on any device that is listed
	-->
<script id="tmplDeviceControl" type="text/html">
	<div style="padding: 5px; height: 100%;">
		<div data-bind="grid: GridDevices" data-definitiononly="false" style="height: 100%" data-groupbinding="Name" data-multiselect="true">
			<div data-columnname="Current User" data-binding="UserFullName" data-flex="2 1 110px" data-horalign="left">
				<div style="padding: 5px">
					<div
						class="lds-dual-ring"
						title="Sync InProgress (please refresh Device Control data grid for actual status)."
						data-bind="visible: data.InProgressLabel"
					></div>
					<span data-bind="text: data.UserFullName"></span>
				</div>
			</div>
			<div data-columnname="Business Unit" data-binding="BusinessUnit" data-flex="2 1 80px" data-horalign="left"></div>
			<div
				data-columnname="Device Name"
				data-flex="2 0 125px"
				data-binding="DeviceName"
				data-sortable="true"
				data-horalign="left"
				data-sort="ascending"
			>
				<div style="height:100%; display:flex; align-items:center">
					<i data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_' + data.DeviceImage }" style="margin:0px 5px;"></i>
					<a
						href="#"
						data-bind="text: data.DeviceName, click: function(e) { MobileCRM.Woodford.SecurityEditor.prototype.ShowDeviceClick(data.DeviceName, data.DeviceId, data.DeviceOS) }"
					></a>
				</div>
			</div>
			<div data-columnname="AppVersion" data-binding="MobileCRMVersion" data-flex="1 1 75px" data-horalign="center"></div>
			<div
				data-columnname="Lock"
				data-binding="LockOut"
				data-flex="1 1 45px"
				data-columntype="checkbox"
				data-horalign="center"
				data-sortable="false"
			></div>
			<div
				data-columnname="Wipe"
				data-binding="WipeOut"
				data-flex="1 1 45px"
				data-columntype="checkbox"
				data-horalign="center"
				data-sortable="false"
			></div>
			<div
				data-columnname="Full Sync"
				data-binding="ForceFullSync"
				data-flex="2 1 40px"
				data-columntype="checkbox"
				data-horalign="center"
				data-sortable="false"
			></div>
			<div data-columnname="Device State" data-binding="State" data-flex="1 1 45px" data-horalign="center"></div>
			<div data-columnname="User Mode" data-binding="UserMode" data-flex="2 1 45px" data-horalign="left"></div>
			<div data-columnname="Synchronized On" data-binding="SynchronizedOn" data-flex="2 1 125px" data-horalign="left">
				<div style="padding: 5px">
					<span data-bind="text: (data.SynchronizedOn && data.SynchronizedOn.Value) ? dateAsLongDateString(data.SynchronizedOn.Value) : ''"></span>
				</div>
			</div>
			<!--<div data-columnname="Project Name" data-binding="ProjectVersion" data-flex="2 1 140px" data-horalign="left" data-sortable="true">
					<div style="height:100%;display: flex; align-items:center" data-bind="visible: data.ProjectVersion">
						<i data-bind="attr:{ 'class': data.PublishIcon, title: !data.IsActive ? 'Not found' : (data.IsPublished ? 'Published' : 'Not published') }" style="margin:0px 5px;"></i>
						<a href="#" data-bind="visible: data.IsActive, text: MobileCRM.Woodford.SecurityEditor.ProjectVersion(data.ProjectVersion, data.CustomVersion), click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowProjectClick(data.ProjectDate, data.PackageVersion, data.PackageDate) }"></a>
						<span data-bind="visible: !data.IsActive, text: data.ProjectVersion, attr: {title: data.ProjectAltText}" />
					</div>
				</div>-->

			<div data-columnname="Sync Result" data-flex="2 1 40px" data-binding="ErrorLabel" data-horalign="center" data-sortable="true">
				<div class="errorlbldiv" data-bind="visible: data.NaLabel" style="padding: 5px;">
					<a
						href="#"
						title="Not available"
						data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowErrorClick('Sync Result and Sync Stats are not available. Either the sync was interrupted or you are using old version of MobileCRM (version 13.1 or higher is required). If you want to access this information for older versions of the app, please use Sync Dashboard.', 'Sync Result - Not available') }"
						>N/A</a
					>
				</div>
				<div class="errorlbldiv" data-bind="visible: data.OkLabel">
					<a
						href="#"
						title="Sync Successful"
						data-bind="click: function(e) { MobileCRM.Woodford.SecurityEditor.prototype.ShowLogClick(Data) }"
						class="elblok"
						><i class="woodfordsprite icon-woodford_okicon"></i
					></a>
				</div>
				<div class="errorlbldiv" data-bind="visible: data.ErrorLabel">
					<a
						href="#"
						title="Sync Error"
						data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowErrorDetail(data.SyncError, 'Error detail') }"
						class="elbl errorlbl"
						>E</a
					>
				</div>
				<div class="errorlbldiv" data-bind="visible: data.WarningLabel">
					<a
						href="#"
						title="Sync Warning"
						data-bind="click: function(e) { MobileCRM.Woodford.SecurityEditor.prototype.ShowLogClick(Data) }"
						class="elbl warninglbl"
						>W</a
					>
				</div>
				<div class="errorlbldiv" data-bind="visible: data.FailedLabel">
					<a
						href="#"
						title="Sync Failed"
						data-bind="click: function(e) { MobileCRM.Woodford.SecurityEditor.prototype.ShowLogClick(Data) }"
						class="elbl failedlbl"
						>F</a
					>
				</div>
				<div class="errorlbldiv" data-bind="visible: data.ConflictLabel">
					<a
						href="#"
						title="Sync Conflict"
						data-bind="click: function(e) { MobileCRM.Woodford.SecurityEditor.prototype.ShowLogClick(Data) }"
						class="elbl performancelbl"
						>C</a
					>
				</div>
			</div>

			<div data-columnname="Sync Stats" data-binding="SyncStats" data-flex="2 1 350px" data-horalign="left">
				<div style="padding: 5px;">
					<span data-bind="text: data.SyncStats"></span>
				</div>
			</div>
		</div>
	</div>
</script>
<!-- BEGIN: SelectFieldsDialog-->
<script id="tmplSelectFieldDropDown" type="text/html">
	<div
		style="flex: 1 1 auto;overflow:auto; margin:0px; border:1px solid black; background:white;max-height:200px"
		data-bind="template: { name: 'TreeView', data: Tree, as: 'x' }"
	></div>
</script>
<!-- END: SelectFieldsDialog -->
<script id="tmplGeocodingSelectViewDialog" type="text/html">
	<div style="display:flex;margin-bottom:10px">
		<div style="flex:0 0 auto;font-weight:bold">Look for</div>
		<select data-bind="value: ViewsType" style="flex:3 0 auto;margin-left: 10px">
			<option value="0" selected>System Views</option>
			<option value="1">Personal Views</option>
		</select>
		<input type="text" style="flex:1 0 100px;margin-left: 10px" />
	</div>
	<div data-bind="grid: ViewsGrid" data-definitiononly="false" style="flex:1 1 auto">
		<div data-columnname="Name" data-binding="Attributes.name" data-flex="1 1 auto" data-horalign="left"></div>
	</div>
</script>
<!--
		tmplServerIntegrationConnectDialog
	-->
<script id="tmplServerIntegrationConnectDialog" type="text/html">
	<div class="project__option">
		<div class="project__option--title"><span>Name</span></div>
		<input type="text" data-bind="value: Name, enable: IsNew" />
	</div>
	<div class="project__option">
		<div class="project__option--title"><span>Connector</span></div>
		<select
			data-bind="options: AvailableServices, optionsText:'Name', value: SelectedService, enable:IsNew, event:{change: OnIntegrationTypeChanged}"
		></select>
	</div>
	<div class="project__option">
		<div class="project__option--title"><span>Description</span></div>
		<div>
			<span data-bind="text: SelectedService().Description"></span>
			<a href="https://docs.resco.net/wiki/Integrations" target="_blank">More information</a>
		</div>
	</div>
	<div data-bind="foreach: Parameters">
		<div class="project__option">
			<div class="project__option--title"><span data-bind="text:Name"></span></div>
			<div data-bind="attr:{class: (inputType === 'Checkbox' ? 'project__option--checkbox' : 'project__option')}">
				<!-- ko if: inputType === 'Checkbox' -->
				<input data-bind="checked: Value, attr: {id: 'server_integration_parameter_id_' + Name, type: inputType, required: Required}" />
				<!-- /ko -->
				<!-- ko ifnot: inputType === 'Checkbox' -->
				<input data-bind="value: Value, attr: {id: 'server_integration_parameter_id_' + Name, type: inputType, required: Required}" />
				<!-- /ko -->
				<label data-bind="text: Description, attr:{for: 'server_integration_parameter_id_' + Name}"></label>
			</div>
		</div>
	</div>
</script>
<!--
		tmplServerIntegrationsEditor Editor Template
	-->
<script id="tmplServerIntegrationsEditor" type="text/html">
	<div data-bind="grid: IntegrationsGrid" data-definitiononly="false" data-multiselect="false" style="height: 100%">
		<div data-columnname="Name" data-flex="1 1 100px" data-binding="Name" data-sortable="true" data-horalign="left"></div>
		<div data-columnname="Connector" data-flex="1 1 100px" data-binding="ServiceName" data-sortable="true" data-horalign="left"></div>
	</div>
</script>
<!-- BEGIN: Settings -->
<script id="tmplSettingsEditor" type="text/html">
	<div class="content-wrapper">
		<div style="padding:0;margin:0" data-bind="visible: Licensed">
			<h1>Organization settings</h1>
			<label><input type="checkbox" data-bind="checked: AutoAssign" />Auto-assign licenses</label><br />
			<label><input type="checkbox" data-bind="checked: AutoFreeup" />Auto-free up unused licenses (not synchronized in last 90 days)</label><br />
			<br />
		</div>
		<h1>User settings</h1>
		<p><input type="checkbox" data-bind="checked: UseEuropeanDate" />Use European date format within Woodford. (day.month.year 24hours)</p>
		<p><input type="checkbox" data-bind="checked: CheckForUpdates" />Check for updates on startup</p>
		<p data-bind="visible: Licensed">
			<input type="checkbox" data-bind="checked: Notify, visible: Licensed" />Send licenses assignment notifications
		</p>
		<p>Enter one email address per line</p>
		<textarea data-bind="value: Recepients" rows="10" style="width:400px;box-sizing:border-box"></textarea>
		<p>
			Check out our <a href="https://www.resco.net/privacy-note/" target="_blank">privacy note and policy</a> for the full story on how we protect and
			manage your submitted data.
		</p>
	</div>
</script>
<!-- END: Settings -->
<!--
		tmplSharepointEditor Editor Template
	-->
<script id="tmplSharepointEditor" type="text/html">
	<table style="width:100%">
		<tbody>
			<tr>
				<td colspan="2">
					<input id="cbDocuments" type="checkbox" data-bind="checked: EnableDocuments" />
					<label for="cbDocuments" style="padding:2px">Enable Documents</label>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input id="cbSharepoint" type="checkbox" data-bind="checked: EnableSharepoint" />
					<label for="cbSharepoint" style="padding:2px">Enable SharePoint</label>
				</td>
			</tr>
			<tr>
				<td colspan="2" style="color:gray">
					Requires the Dynamics CRM built-in SharePoint integration to be enabled.<br />Check to enable SharePoint access from your mobile devices.<br />To
					see the documents related to an entity, open the entity form and add the 'Cloud Documents List'.
				</td>
			</tr>
			<tr>
				<td colspan="2" style="color:gray; padding-top:2em">Optional - Setup your internal to external SharePoint URL mapping.</td>
			</tr>
			<tr>
				<td>Internal</td>
				<td style="width:100%">
					<input style="width:100%;box-sizing:border-box" data-bind="value: InternalUrl, enable: EnableSharepoint" />
				</td>
			</tr>
			<tr>
				<td>External</td>
				<td style="width:100%">
					<input style="width:100%;box-sizing:border-box" data-bind="value: ExternalUrl, enable: EnableSharepoint" />
				</td>
			</tr>
		</tbody>
	</table>
</script>
<!--
		tmplShowUsersDialog Editor Template
	-->
<script id="tmplShowUsersDialog" type="text/html">
	<div data-bind="grid: Grid" data-definitiononly="false">
		<div
			data-columnname="FullName"
			data-flex="1 0 100px"
			data-binding="FullName"
			data-sortable="true"
			data-horalign="left"
			data-sort="ascending"
		></div>
		<div data-columnname="Email" data-flex="0 0 230px" data-binding="Email" data-sortable="true" data-horalign="left"></div>
		<div data-columnname="GrantedBy" data-flex="0 0 150px" data-binding="GrantedBy" data-sortable="true" data-horalign="left"></div>
	</div>
</script>
<!--
		tmplSocialEditor Editor Template
	-->
<script id="tmplSocialEditor" type="text/html">
	<table style="width:100%">
		<tbody>
			<tr>
				<td>
					<input id="cbChat" type="checkbox" data-bind="checked: EnableChat, enable:EditableChat " />
					<label for="cbChat" style="padding:2px">Enable Chat</label>
				</td>
			</tr>
			<tr>
				<td style="color:gray">
					Don't forget to add the Chat item in Home Screen and to enable the N:N Relationships plugin for Chat Post &lt;-&gt; Chat User and Chat Topic
					&lt;-&gt; Chat User entities.
				</td>
			</tr>
			<tr data-bind="visible:ManageUrlVisible">
				<td><a target="_blank" data-bind="attr: { href: ManageUrl }">Manage Chat Channels</a></td>
			</tr>
			<tr data-bind="visible:ShowActivityFeeds">
				<td>
					<input id="cbActivityFeeds" type="checkbox" data-bind="checked: EnableActivityFeeds, enable:EditableActivityFeeds" />
					<label for="cbActivityFeeds" style="padding:2px">Enable Activity Feeds</label>
				</td>
			</tr>
			<tr data-bind="visible:ShowActivityFeeds">
				<td style="color:gray">Don't forget to add the Activity Fields item in Home Screen</td>
			</tr>
			<tr data-bind="visible:ShowActivityFeeds && !EditableActivityFeeds">
				<td style="color:red">Please install Activity Feeds add-on for Dynamics CRM Server.</td>
			</tr>
			<tr data-bind="visible: !EditableChat">
				<td colspan="2" style="color:red">Please Enable Chat in Server Properties.</td>
			</tr>
		</tbody>
	</table>
</script>
<script id="tmplStyleEditor" type="text/html">
	<div class="style-editor-wrapper">
	    <div class="tree__wrapper">
	           <div class="tree-category">Form Styles</div>
		    <div data-bind="template: { name: 'TreeView', data: FormTree, as: 'x' }"></div>
	           <div class="tree-category">View Styles</div>
		    <div data-bind="template: { name: 'TreeView', data: ViewTree, as: 'x' }"></div>
	   </div>
		<div class="properties__wrapper">
			<form class="style-main-section" data-bind="visible: isFormStyle()">
				<!-- ko if: selectedStyle() != null && name() != null && isFormStyle -->
				<div class="tab-wrapper">
					<div class="form-group">
						<label class="style-property-label">Component type</label>
						<input class="style-property-input-field" type="text" data-bind="value: ComponentType[selectedStyle().ComponentType]" disabled ></input>
					</div>
					<div class="form-group">
						<label class="style-property-label" data-bind="text: name().Label"></label>
						<input
							class="style-property-input-field"
							type="text"
							data-bind="click: name.OnClick, valueEnter: name().Value, attr: {placeholder: name().PlaceHolder, readonly: name().IsReadOnly}"
						></input>
					</div>
				</div>
				<!-- /ko -->

				<div class="tabbar-wrapper">
					<!-- ko foreach: tabbar -->
					<div class="tabbar-control-item" data-bind="text: Name,css: { 'tabbar-control-item-selected': Selected() }, click: Clicked"></div>
					<!-- /ko -->
				</div>
				<!-- ko if: selectedStyle() != null -->
					<!-- ko if: selectedTabName() === 'Label' -->
						<!-- ko template: { name: 'tmplLabelProperties' } --><!-- /ko -->
					<!-- /ko -->
					<!-- ko if: selectedTabName() === 'Input' -->
						<!-- ko template: { name: 'tmplInputProperties' } --><!-- /ko -->
					<!-- /ko -->
					<!-- ko if: selectedTabName() === 'Component-specific' -->
						<!-- ko template: { name: 'tmplComponentSpecific' } --><!-- /ko -->
					<!-- /ko -->
					<!-- ko if: selectedTabName() === 'Supporting text' -->
						<!-- ko template: { name: 'tmplSupportingText' } --><!-- /ko -->
					<!-- /ko -->
				<!-- /ko -->
			</form>
	           <form data-bind="visible: !isFormStyle()">
				<!-- ko if: !isFormStyle() && selectedStyle().Type === ViewStyleTypes.ImageCell -->
				<!-- ko template: { name: 'tmplImageCellStylePropertiesEditor' } --><!-- /ko -->
				<!-- /ko -->
				<!-- ko if: !isFormStyle() && selectedStyle().Type === ViewStyleTypes.TextCell -->
				<!-- ko template: { name: 'tmplTextCellStylePropertiesEditor' } --><!-- /ko -->
				<!-- /ko -->
			</form>
		</div>
	</div>
</script>

<script id="tmplLabelProperties" type="text/html">
	<div class="tab-wrapper content-section">
		<property-editor-row params="label: 'Show label', tooltip: 'StyleEditor.Label.ShowLabel'">
			<label class="toggle">
				<input type="checkbox" data-bind="checked: $parent.showLabel" />
				<span class="slider"></span>
			</label>
			<reset-button
				params="property: $parent.labelPosition(), parentComparator: () => $parent.isShowLabelDifferentThanParent.bind($parent)($parent.labelPosition()), resetFunction: () => $parent.resetShowLabel.bind($parent)($parent.labelPosition())"
			></reset-button>
		</property-editor-row>
		<spacer></spacer>

		<!-- ko if: labelPosition() != null && labelPosition().Value() !== LabelPosition.Hidden -->
		<font-name-and-size-property-editor
			params="name: labelFontName(), size: labelFontSize(),options: fontNamesFromOfflineHtml, tooltipFontName: 'StyleEditor.Label.FontName', tooltipRelativeSize: 'StyleEditor.Label.RelativeSize' "
		></font-name-and-size-property-editor>
		<property-editor-row
			params="label: labelHorizontalAlignment().Label, tooltip: 'StyleEditor.Label.Alignment'"
			data-bind="propertyVisible: {tabName: 'label', property: labelHorizontalAlignment()}"
		>
			<segmented-editor params="property: $parent.labelHorizontalAlignment()"></segmented-editor>
			<reset-button params="property: $parent.labelHorizontalAlignment()"></reset-button>
		</property-editor-row>
		<property-editor-row params="label: labelFontWeight().Label, tooltip: 'StyleEditor.Label.Decoration'">
			<segmented-editor params="property: $parent.labelFontWeight()"></segmented-editor>
			<reset-button params="property: $parent.labelFontWeight()"></reset-button>
		</property-editor-row>
		<spacer></spacer>
		<property-editor-row params="label: labelForegroundColor().Label, property: labelForegroundColor, tooltip: 'StyleEditor.Label.TextColor'">
			<color-editor
				params="value: $parent.labelForegroundColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.labelForegroundColor()), defaultValue: $parent.labelForegroundColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.labelForegroundColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.labelForegroundColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.labelForegroundColor())"
			></reset-button>
		</property-editor-row>
		<spacer></spacer>
		<property-editor-row params="label: labelAutoHeight().Label, tooltip: 'StyleEditor.Label.AutoHeight'">
			<label class="toggle">
				<input type="checkbox" data-bind="checked: $parent.labelAutoHeight().Value" />
				<span class="slider"></span>
			</label>
			<reset-button params="property: $parent.labelAutoHeight()"></reset-button>
		</property-editor-row>
		<spacer></spacer>
		<div class="section-title">Container layout</div>
		<property-editor-row params="label: labelPosition().Label, tooltip: 'StyleEditor.Label.LabelPosition'">
			<segmented-editor params="property: $parent.labelPosition()"></segmented-editor>
			<reset-button params="property: $parent.labelPosition()"></reset-button>
		</property-editor-row>

		<!-- ko if: (labelPosition().Value() === LabelPosition.Left || labelPosition().Value() === LabelPosition.Right) && selectedStyle().ComponentType !== ComponentType.Spacer -->
		<spacer></spacer>
		<div class="section-title" data-bind="propertyVisible: {tabName: 'label', property: labelPosition()}">Define width for label and input</div>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'label', property: labelPosition()}"
			params="label: 'Horizontal layout', tooltip: 'StyleEditor.Label.HorizontalLayout'"
		>
			<div class="segmented-buttons" data-bind="foreach: { data: $parent.labelHorizontalLayoutOptions, noChildContext: true, as: 'layout'} ">
				<div
					data-bind="text: layout.name, attr: { 'class': layout === $parent.labelHorizontalLayout() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parent.labelHorizontalLayout(layout)"
				></div>
			</div>
			<reset-button
				params="property: $parent.labelAutoWidth(), parentComparator: () => $parent.isLabelAutoWidthDifferentThanParent.bind($parent)($parent.labelAutoWidth()), resetFunction: () => $parent.resetLabelAutoWidth.bind($parent)($parent.labelAutoWidth())"
			></reset-button>
		</property-editor-row>
		<!-- /ko -->
		<!-- ko if: (labelPosition().Value() === LabelPosition.Left || labelPosition().Value() === LabelPosition.Right) && labelHorizontalLayout() === labelHorizontalLayoutCustom && selectedStyle().ComponentType !== ComponentType.Spacer -->
		<property-editor-row data-bind="propertyVisible: {tabName: 'label', property: labelPosition()}" params="label: 'Label'">
			<div class="multiple-input-editor">
				<number-auto-input params="value: $parent.labelWidth"></number-auto-input>
				<label class="style-property-label">Input</label>
				<number-auto-input params="value: $parent.inputWidth"></number-auto-input>
				<select
					class="style-property-input-field"
					data-bind="options: $parent.horizontalWidthUnitsOptions, optionsText: 'name', value: $parent.horizontalWidthUnit"
				></select>
			</div>
			<reset-button
				params="property: $parent.columns(), parentComparator: () => $parent.isLabelInputDifferentThanParent.bind($parent)($parent.columns()), resetFunction: () => $parent.resetLabelInputLayout.bind($parent)($parent.columns())"
			></reset-button>
		</property-editor-row>
		<!-- /ko -->
		<!-- /ko -->
	</div>
</script>

<script id="tmplInputProperties" type="text/html">
	<div class="tab-wrapper content-section">
		<font-name-and-size-property-editor
			params="name: editorFontName(), size: editorFontSize(),options: fontNamesFromOfflineHtml, tooltipFontName: 'StyleEditor.Input.FontName', tooltipRelativeSize: 'StyleEditor.Input.RelativeSize'"
			data-bind="propertyVisible: {tabName: 'input', property: editorFontName()}"
		></font-name-and-size-property-editor>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorHorizontalAlignment()}"
			params="label: editorHorizontalAlignment().Label, tooltip: 'StyleEditor.Input.Alignment'"
		>
			<segmented-editor params="property: $parent.editorHorizontalAlignment()"></segmented-editor>
			<reset-button params="property: $parent.editorHorizontalAlignment()"></reset-button>
		</property-editor-row>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorFontWeight()}"
			params="label: editorFontWeight().Label, tooltip: 'StyleEditor.Input.Decoration'"
		>
			<segmented-editor params="property: $parent.editorFontWeight()"></segmented-editor>
			<reset-button params="property: $parent.editorFontWeight()"></reset-button>
		</property-editor-row>
		<spacer></spacer>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: wrapText()}"
			params="label: 'Text input height', tooltip: 'StyleEditor.Input.TextInputHeight'"
		>
			<div class="segmented-buttons" data-bind="foreach: { data: $parent.textInputHeightOptions, noChildContext: true, as: 'inputHeight'} ">
				<div
					data-bind="text: inputHeight.name, attr: { 'class': inputHeight === $parent.textInputHeight() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parent.textInputHeight(inputHeight)"
				></div>
			</div>
			<reset-button
				params="parentComparator: () => $parent.isTextInputHeightDifferentThanParent.bind($parent)($parent.wrapText(), $parent.isMultiLine()), resetFunction: () => $parent.resetTextInputHeight.bind($parent)($parent.wrapText(), $parent.isMultiLine())"
			></reset-button>
		</property-editor-row>
		<spacer></spacer>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorBorderWidth()}"
			params="label: editorBorderWidth().Label, tooltip: 'StyleEditor.Input.BorderWidht'"
		>
			<div class="multiple-input-editor">
				<standard-input-editor params="property: $parent.editorBorderWidth()"></standard-input-editor>
				<reset-button params="property: $parent.editorBorderWidth()"></reset-button>
				<label class="style-property-label tooltipsource" data-tooltip="StyleEditor.Input.Radius">Radius</label>
				<standard-input-editor params="property: $parent.editorCornerRadius()"></standard-input-editor>
				<reset-button params="property: $parent.editorCornerRadius()"></reset-button>
			</div>
		</property-editor-row>
		<spacer></spacer>

		<div class="section-title">Color styles</div>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorForegroundColor()}"
			params="label: editorForegroundColor().Label, property: editorForegroundColor, tooltip: 'StyleEditor.Input.EnabledText'"
		>
			<color-editor
				params="value: $parent.editorForegroundColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.editorForegroundColor()), defaultValue: $parent.editorForegroundColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.editorForegroundColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.editorForegroundColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.editorForegroundColor())"
			></reset-button>
		</property-editor-row>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorDisabledColor()}"
			params="label: editorDisabledColor().Label, property: editorDisabledColor, tooltip: 'StyleEditor.Input.DisabledText'"
		>
			<color-editor
				params="value: $parent.editorDisabledColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.editorDisabledColor()), defaultValue: $parent.editorDisabledColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.editorDisabledColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.editorDisabledColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.editorDisabledColor())"
			></reset-button>
		</property-editor-row>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: linkColor()}"
			params="label: linkColor().Label, property: linkColor, tooltip: 'StyleEditor.Input.LinkText'"
		>
			<color-editor
				params="value: $parent.linkColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.linkColor()), defaultValue: $parent.linkColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.linkColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.linkColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.linkColor())"
			></reset-button>
		</property-editor-row>
		<spacer></spacer>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorBackgroundColor()}"
			params="label: editorBackgroundColor().Label, property: editorBackgroundColor, tooltip: 'StyleEditor.Input.Background'"
		>
			<color-editor
				params="value: $parent.editorBackgroundColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.editorBackgroundColor()), defaultValue: $parent.editorBackgroundColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.editorBackgroundColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.editorBackgroundColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.editorBackgroundColor())"
			></reset-button>
		</property-editor-row>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorSelectedBackgroundColor()}"
			params="label: editorSelectedBackgroundColor().Label, property: editorSelectedBackgroundColor, tooltip: 'StyleEditor.Input.SelectedBackground'"
		>
			<color-editor
				params="value: $parent.editorSelectedBackgroundColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.editorSelectedBackgroundColor()), defaultValue: $parent.editorSelectedBackgroundColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.editorSelectedBackgroundColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.editorSelectedBackgroundColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.editorSelectedBackgroundColor())"
			></reset-button>
		</property-editor-row>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorSelectedForegroundColor()}"
			params="label: editorSelectedForegroundColor().Label, property: editorSelectedForegroundColor, tooltip: 'StyleEditor.Input.SelectedForeground'"
		>
			<color-editor
				params="value: $parent.editorSelectedForegroundColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.editorSelectedForegroundColor()), defaultValue: $parent.editorSelectedForegroundColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.editorSelectedForegroundColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.editorSelectedForegroundColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.editorSelectedForegroundColor())"
			></reset-button>
		</property-editor-row>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorBorderColor()}"
			params="label: editorBorderColor().Label, property: editorBorderColor, tooltip: 'StyleEditor.Input.Border'"
		>
			<color-editor
				params="value: $parent.editorBorderColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.editorBorderColor()), defaultValue: $parent.editorBorderColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.editorBorderColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.editorBorderColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.editorBorderColor())"
			></reset-button>
		</property-editor-row>
		<spacer></spacer>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: buttonColor()}"
			params="label: buttonColor().Label, property: buttonColor, tooltip: 'StyleEditor.Input.IconButton'"
		>
			<color-editor
				params="value: $parent.buttonColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.buttonColor()), defaultValue: $parent.buttonColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.buttonColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.buttonColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.buttonColor())"
			></reset-button>
		</property-editor-row>
		<spacer></spacer>

		<div class="section-title" data-bind="propertyVisible: {tabName: 'input', property: bindingTrigger()}">On Change rules trigger</div>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: bindingTrigger()}"
			params="label: bindingTrigger().Label, tooltip: 'StyleEditor.Input.Condition'"
		>
			<select
				class="style-property-input-field"
				data-bind="options: $parent.bindingTrigger().Items, optionsValue: 'Value', optionsText: 'Label', value: $parent.bindingTrigger().Value"
			></select>
			<reset-button params="property: $parent.bindingTrigger()"></reset-button>
		</property-editor-row>
	</div>
</script>

<script id="tmplComponentSpecific" type="text/html">
	<div class="tab-wrapper content-section">

		<div class="section-title" data-bind="propertyVisible: {tabName: 'componentSpecific', property: radioButtonMaxCount()}">Segmented buttons</div>
		<property-editor-row data-bind="propertyVisible: {tabName: 'componentSpecific', property: radioButtonMaxCount()}" params="label: radioButtonMaxCount().Label, tooltip: 'StyleEditor.Specific.MaxItem.Count'">
			<input class="style-property-input-field" type="number" data-bind="value: $parent.radioButtonMaxCount().Value"></input>
			<reset-button params="property: $parent.radioButtonMaxCount()"></reset-button>
		</property-editor-row>

		<property-editor-row
			params="label: segmentedButtonsLayout().Label, tooltip: 'StyleEditor.Specific.SegmentedButtonsLayout'"
			data-bind="propertyVisible: {tabName: 'componentSpecific', property: segmentedButtonsLayout()}"
		>
			<div class="segmented-buttons" data-bind="foreach: { data: $parent.segmentedButtonsLayout().Items, noChildContext: true, as: 'buttonsLayout'} ">
				<div data-bind="text: buttonsLayout.Label, attr: { 'class': buttonsLayout.Value === $parent.segmentedButtonsLayout().Value() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parent.segmentedButtonsLayout().Value(buttonsLayout.Value)"></div>
			</div>
			<reset-button params="property: $parent.segmentedButtonsLayout()"></reset-button>
		</property-editor-row>

		<spacer></spacer>
		<!-- ko if: selectedStyle().ComponentType === ComponentType.Switch -->
			<property-editor-row params="label: imageBasePath().Label">
				<input
					class="style-property-input-field"
					type="text"
					data-bind="click: $parent.imageBasePath().OnClick, valueEnter: $parent.imageBasePath().Value, attr: { placeholder: $parent.imageBasePath().PlaceHolder, readonly: $parent.imageBasePath().IsReadOnly }"
				/>
				<reset-button params="property: $parent.imageBasePath()"></reset-button>
			</property-editor-row>
		<!-- /ko -->
		<!-- ko if: selectedStyle().ComponentType !== ComponentType.Switch -->
			<div class="section-title" data-bind="propertyVisible: {tabName: 'componentSpecific', property: comboBoxImageAlignment()}">Dropdown & segmented buttons</div>
			<property-editor-row data-bind="propertyVisible: {tabName: 'componentSpecific', property: comboBoxImageAlignment()}" params="label: 'Show', tooltip: 'StyleEditor.Specific.Show'">
				<div class="segmented-buttons" data-bind="foreach: { data: $parent.segmentedButtonShowStyleOptions, noChildContext: true, as: 'showStyle'} ">
					<div data-bind="text: showStyle.name, attr: { 'class': showStyle === $parent.segmentedButtonShowStyle() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parent.segmentedButtonShowStyle(showStyle)"></div>
				</div>
				<reset-button params="property: $parent.comboBoxImageAlignment(), parentComparator: () => $parent.isShowIconDifferentThanParent.bind($parent)($parent.comboBoxImageAlignment()), resetFunction: () => $parent.resetShowIcon.bind($parent)($parent.comboBoxImageAlignment())" "></reset-button>
			</property-editor-row>
				<!-- ko if: segmentedButtonShowStyle() !== segmentedButtonIconAlignmentTextOnly -->
			<property-editor-row data-bind="propertyVisible: {tabName: 'componentSpecific', property: comboBoxImageAlignment()}" params="label: imageBasePath().Label, tooltip: 'StyleEditor.Specific.IconFolder'">
				<input
					class="style-property-input-field"
					type="text"
					data-bind="click: $parent.imageBasePath().OnClick, valueEnter: $parent.imageBasePath().Value, attr: { placeholder: $parent.imageBasePath().PlaceHolder, readonly: $parent.imageBasePath().IsReadOnly }"
				/>
				<reset-button params="property: $parent.imageBasePath()"></reset-button>
			</property-editor-row>
			<!-- /ko -->
			<!-- ko if: segmentedButtonShowStyle() === segmentedButtonIconAlignmentTextAndIcon -->
			<property-editor-row data-bind="propertyVisible: {tabName: 'componentSpecific', property: comboBoxImageAlignment()}" params="label: 'Icon alignment', tooltip: 'StyleEditor.Spexific.IconAlignment'">
				<div class="segmented-buttons" data-bind="foreach: { data: $parent.segmentedButtonIconAlignmentOptions, noChildContext: true, as: 'alignment'} ">
					<div data-bind="attr: { 'class': alignment === $parent.segmentedButtonIconAlignment() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parent.segmentedButtonIconAlignment(alignment)">
						<i data-bind="attr:{ 'class':'woodfordsprite icon-woodford_StyleEditor_' + alignment.name}"></i>
					</div>
				</div>
				<reset-button params="property: $parent.comboBoxImageAlignment(), parentComparator: () => $parent.isIconAlignmentDifferentThanParent.bind($parent)($parent.comboBoxImageAlignment()), resetFunction: () => $parent.resetIconAlignment.bind($parent)($parent.comboBoxImageAlignment())" "></reset-button>
			</property-editor-row>
			<!-- /ko -->
		<!-- /ko -->

		<spacer></spacer>
		<div class="section-title" data-bind="propertyVisible: {tabName: 'componentSpecific', property: minuteIncrement()}">Date & time picker intervals</div>
		<property-editor-row data-bind="propertyVisible: {tabName: 'componentSpecific', property: minuteIncrement()}" params="label: minuteIncrement().Label, tooltip: 'StyleEditor.Specific.Minutes'">
			<standard-input-editor params="property: $parent.minuteIncrement()"></standard-input-editor>
			<reset-button params="property: $parent.minuteIncrement()"></reset-button>
		</property-editor-row>

		<spacer></spacer>
		<div class="section-title" data-bind="propertyVisible: {tabName: 'componentSpecific', property: imageQuery()}">Image query</div>
		<property-editor-row data-bind="propertyVisible: {tabName: 'componentSpecific', property: imageQuery()}" params="label: imageQuery().Label, tooltip: 'StyleEditor.Specific.Condition'">
			<standard-input-editor class="image-query-input" params="property: $parent.imageQuery()"></standard-input-editor>
			<i class="setup-button woodfordsprite icon-woodford_StyleEditor_edit" data-bind="click: () => $parent.imageQuery().OnClick()"></i>
			<reset-button params="property: $parent.imageQuery()"></reset-button>
		</property-editor-row>
		<spacer></spacer>
		<div class="section-title">Container style</div>
		<property-editor-row data-bind="propertyVisible: {tabName: 'componentSpecific', property: backgroundColor()}" params="label: backgroundColor().Label, tooltip: 'StyleEditor.Specific.BackgroundColor'">
			<color-editor params="value: $parent.backgroundColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.backgroundColor()), defaultValue: $parent.backgroundColor().defaultValue"></color-editor>
			<reset-button params="property: $parent.backgroundColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.backgroundColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.backgroundColor()) "></reset-button>
		</property-editor-row>
		<property-editor-row data-bind="propertyVisible: {tabName: 'componentSpecific', property: errorColor()}" params="label: errorColor().Label, tooltip: 'StyleEditor.Specific.Error'">
			<color-editor params="value: $parent.errorColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.errorColor()), defaultValue: $parent.errorColor().defaultValue"></color-editor>
			<reset-button params="property: $parent.errorColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.errorColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.errorColor())"></reset-button>
		</property-editor-row>
	</div>
</script>

<script id="tmplSupportingText" type="text/html">
	<div class="tab-wrapper content-section">
		<property-editor-row params="label: 'Show', tooltip: 'StyleEditor.SupportingText.Show'">
			<label class="toggle">
				<input type="checkbox" data-bind="checked: $parent.showSupportingText" />
				<span class="slider"></span>
			</label>
			<reset-button
				params="property: $parent.supportingTextPosition(), parentComparator: () => $parent.isShowSupportingTextDifferentThanParent.bind($parent)($parent.supportingTextPosition()), resetFunction: () => $parent.resetShowSupportingText.bind($parent)($parent.supportingTextPosition())"
			></reset-button>
		</property-editor-row>
		<!-- ko if: showSupportingText -->
		<font-name-and-size-property-editor
			params="name: supportingTextFontName(), size: relativeSupportingTextFontSize(),options: fontNamesFromOfflineHtml, tooltipFontName: 'StyleEditor.SupportingText.FontName', tooltipRelativeSize: 'StyleEditor.SupportingText.RelativeSize'"
		></font-name-and-size-property-editor>
		<property-editor-row
			params="label: supportingTextHorizontalAlignment().Label, tooltip: 'StyleEditor.SupportingText.Alignment'"
			data-bind="propertyVisible: {tabName: 'supportingText', property: supportingTextHorizontalAlignment()}"
		>
			<segmented-editor params="property: $parent.supportingTextHorizontalAlignment()"></segmented-editor>
			<reset-button params="property: $parent.supportingTextHorizontalAlignment()"></reset-button>
		</property-editor-row>
		<property-editor-row params="label: supportingTextPosition().Label, tooltip: 'StyleEditor.SupportingText.Position'">
			<segmented-editor params="property: $parent.supportingTextPosition()"></segmented-editor>
			<reset-button params="property: $parent.supportingTextPosition()"></reset-button>
		</property-editor-row>

		<spacer></spacer>
		<div class="section-title">Color styles</div>
		<property-editor-row params="label: supportingTextForegroundColor().Label, tooltip: 'StyleEditor.SupportingText.Text'">
			<color-editor
				params="value: $parent.supportingTextForegroundColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.supportingTextForegroundColor()), defaultValue: $parent.supportingTextForegroundColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.supportingTextForegroundColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.supportingTextForegroundColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.supportingTextForegroundColor())"
			></reset-button>
		</property-editor-row>
		<!-- /ko -->
	</div>
</script>

<script id="tmplImageCellStylePropertiesEditor" type="text/html">
	<property-editor-row
		data-bind="params: { property: name()}"
		params=" label: 'Style name', tooltip: 'ViewDesigner.StyleName'">
		<input class="style-property-input-field" type="text" data-bind="value: $parent.name().Value"></input>
	</property-editor-row>
	<div class="view-header-separator" ></div>
	<div class="view-section-title">Image query</div>
	<property-editor-row
		data-bind="params: { property: imageQuery()}"
		params=" label: 'Condition', tooltip: 'ViewDesigner.Condition'">
		<input class="style-property-input-field" type="text" data-bind="value: $parent.imageQuery().Value, attr: { placeholder: $parent.imageQuery().PlaceHolder }"></input>
		<i class="setup-button woodfordsprite icon-woodford_StyleEditor_edit" data-bind="click: () => $parent.imageQuery().OnClick()"></i>
		<reset-button params="property: $parent.imageQuery"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<spacer></spacer>
	<spacer></spacer>
	<property-editor-row
		data-bind="params: { property: format()}"
		params=" label: format().Label, tooltip: 'ViewDesigner.FormatString'">
		<input class="style-property-input-field" type="text" data-bind="value: $parent.format().Value, attr: { placeholder: $parent.format().PlaceHolder }"></input>
		<reset-button params="property: $parent.format"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		params="label: horizontalAlignment().Label, tooltip: 'ViewDesigner.HorizontalAlignment'"
		data-bind="params: { property: horizontalAlignment()}">
		<div class="segmented-buttons" data-bind="foreach: { data: $parent.horizontalAlignmentOptions, as: 'layout'}">
			<div data-bind="attr: { 'class': layout.value === $parents[1].horizontalAlignment().Value() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parents[1].setHorizontalAlignment(layout)">
				<i data-bind="attr:{ 'class':'woodfordsprite icon-woodford_StyleEditor_' + layout.name}"></i>
			</div>
		</div>
		<reset-button params="property: $parent.horizontalAlignment"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		params="label: verticalAlignment().Label, tooltip: 'ViewDesigner.VerticalAlignment'"
		data-bind="params: { property: $parent.verticalAlignment()}">
		<div class="segmented-buttons" data-bind="foreach: { data: $parent.verticalAlignmentOptions, as: 'layout'}">
			<div data-bind="attr: { 'class': layout.value === $parents[1].verticalAlignment().Value() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parents[1].setVerticalAlignment(layout)">
				<i data-bind="attr:{ 'class':'woodfordsprite icon-woodford_StyleEditor_' + layout.name}"></i>
			</div>
		</div>
		<reset-button params="property: $parent.verticalAlignment"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		data-bind="params: { property: cornerRadius()}"
		params=" label: cornerRadius().Label, tooltip: 'ViewDesigner.BorderRadius'">
		<input class="style-property-input-field" type="number" data-bind="value: $parent.cornerRadius().Value" style="width: 100px;"></input>
		<reset-button params="property: $parent.cornerRadius"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		data-bind="params: { property: $parent.imageFit()}"
		params="label: imageFit().Label, tooltip: 'ViewDesigner.ImageFit'">
		<div class="segmented-buttons" data-bind="foreach: { data: $parent.imageFitOptions, as: 'layout'}">
			<div data-bind="text: layout.name, attr: { 'class': layout.value === $parents[1].imageFit().Value() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parents[1].setImageFit(layout)"></div>
		</div>
		<reset-button params="property: $parent.imageFit"></reset-button>
	</property-editor-row>
	<spacer></spacer>

	<div class="view-section-title">Color styles</div>
	<property-editor-row
		data-bind="params: { property: $parent.foreColor()}"
		params="label: 'Icon color', tooltip: 'ViewDesigner.ForegroundIconColor'">
		<color-editor params="value: $parent.foreColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.foreColor()), defaultValue: $parent.foreColor().defaultValue"></color-editor>
		<reset-button params="property: $parent.foreColor, parentComparator: $parent.isColorDifferentThanParent.bind($parent)($parent.foreColor()), resetFunction:  () =>  $parent.resetColor.bind($parent)($parent.foreColor())"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		data-bind="params: { property: $parent.backColor()}"
		params="label: backColor().Label, tooltip: 'ViewDesigner.BackgroundColor'">
		<color-editor params="value: $parent.backColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.backColor()), defaultValue: $parent.backColor().defaultValue"></color-editor>
		<reset-button params="property: $parent.backColor, parentComparator: $parent.isColorDifferentThanParent.bind($parent)($parent.backColor()), resetFunction:  () =>  $parent.resetColor.bind($parent)($parent.backColor())"></reset-button>
	</property-editor-row>
</script>

<script id="tmplTextCellStylePropertiesEditor" type="text/html">
	<property-editor-row
		data-bind="params: { property: name()}"
		params=" label: 'Style name', tooltip: 'ViewDesigner.StyleName'">
		<input class="style-property-input-field" type="text" data-bind="value: $parent.name().Value"></input>
	</property-editor-row>
	<div class="view-header-separator" ></div>
	<spacer></spacer>
	<spacer></spacer>
	<property-editor-row
		data-bind="params: { property: fontName()}"
		params=" label: fontName().Label, tooltip: 'ViewDesigner.FontName'">
		<select
			class="style-property-input-field"
			data-bind="options: $parent.fontNamesFromOfflineHtml, value: $parent.fontName().Value, optionsCaption: 'System default'"
		></select>
		<reset-button params="property: $parent.fontName"></reset-button>
		<property-editor-row
			data-bind="params: { property: $parent.fontSize()}"
			params=" label: $parent.fontSize().Label, tooltip: 'ViewDesigner.FontSize'">
			<input class="style-property-input-field" type="number" data-bind="value: $parents[1].fontSizeObservable" style="width: 50px;"></input>
			<reset-button params="property: $parents[1].fontSize, resetFunction: () => $parents[1].resetFontSize.bind($parents[1])($parents[1].fontSize())"></reset-button>
		</property-editor-row>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		params="label: horizontalAlignment().Label, tooltip: 'ViewDesigner.HorizontalAlignment'"
		data-bind="params: { property: horizontalAlignment()}">
		<div class="segmented-buttons" data-bind="foreach: { data: $parent.horizontalAlignmentOptions, as: 'layout'}">
			<div data-bind="attr: { 'class': layout.value === $parents[1].horizontalAlignment().Value() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parents[1].setHorizontalAlignment(layout)">
				<i data-bind="attr:{ 'class':'woodfordsprite icon-woodford_StyleEditor_' + layout.name}"></i>
			</div>
		</div>
		<reset-button params="property: $parent.horizontalAlignment"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		params="label: verticalAlignment().Label, tooltip: 'ViewDesigner.VerticalAlignment'"
		data-bind="params: { property: $parent.verticalAlignment()}">
		<div class="segmented-buttons" data-bind="foreach: { data: $parent.verticalAlignmentOptions, as: 'layout'}">
			<div data-bind="attr: { 'class': layout.value === $parents[1].verticalAlignment().Value() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parents[1].setVerticalAlignment(layout)">
				<i data-bind="attr:{ 'class':'woodfordsprite icon-woodford_StyleEditor_' + layout.name}"></i>
			</div>
		</div>
		<reset-button params="property: $parent.verticalAlignment"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		params="label: fontWeight().Label, tooltip: 'ViewDesigner.Decoration'"
		data-bind="params: { property: $parent.fontWeight()}">
		<div class="segmented-buttons" data-bind="foreach: { data: $parent.fontWeightOptions, as: 'layout'}">
			<div data-bind="attr: { 'class': layout.value === $parents[1].fontWeight().Value() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parents[1].setFontWeight(layout)">
				<i data-bind="attr:{ 'class':'woodfordsprite icon-woodford_StyleEditor_' + layout.name}"></i>
			</div>
		</div>
		<reset-button params="property: $parent.fontWeight"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		params="label: autoHeight().Label, tooltip: 'ViewDesigner.Autoheight'">
		<label class="toggle">
			<input type="checkbox" data-bind="checked: $parent.autoHeight().Value" />
			<span class="slider"></span>
		</label>
		<reset-button params="property: $parent.autoHeight"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		data-bind="params: { property: ellipsisPosition()}"
		params="label: ellipsisPosition().Label, tooltip: 'ViewDesigner.Ellipsis'">
		<div class="segmented-buttons" data-bind="foreach: { data: $parent.ellipsisPositionOptions, as: 'layout'}">
			<div data-bind="text: layout.name, attr: { 'class': layout.value === $parents[1].ellipsisPosition().Value() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parents[1].setEllipsisPosition(layout)"></div>
		</div>
		<reset-button params="property: $parent.ellipsisPosition"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		data-bind="params: { property: format()}"
		params=" label: format().Label, tooltip: 'ViewDesigner.FormatString'">
		<input class="style-property-input-field" type="text" data-bind="value: $parent.format().Value, attr: { placeholder: $parent.format().PlaceHolder }"></input>
		<reset-button params="property: $parent.format"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<div class="view-section-title">Color styles</div>
	<property-editor-row
		data-bind="params: { property: $parent.foreColor()}"
		params="label: 'Text color', tooltip: 'ViewDesigner.ForegroundTextColor'">
		<color-editor params="value: $parent.foreColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.foreColor()), defaultValue: $parent.foreColor().defaultValue"></color-editor>
		<reset-button params="property: $parent.foreColor, parentComparator: $parent.isColorDifferentThanParent.bind($parent)($parent.foreColor()), resetFunction:  () =>  $parent.resetColor.bind($parent)($parent.foreColor())"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		data-bind="params: { property: $parent.backColor()}"
		params="label: backColor().Label, tooltip: 'ViewDesigner.BackgroundColor'">
		<color-editor params="value: $parent.backColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.backColor()), defaultValue: $parent.backColor().defaultValue"></color-editor>
		<reset-button params="property: $parents[1].backColor, parentComparator: $parent.isColorDifferentThanParent.bind($parent)($parent.backColor()), resetFunction:  () =>  $parent.resetColor.bind($parent)($parent.backColor())"></reset-button>
	</property-editor-row>
</script>
<!--
		 tmplSyncProjectDialog Editor Template
	-->
<script id="tmplSyncProjectDialog" type="text/html">
	<div>
		<table cellpadding="7" cellspacing="0" width="100%">
			<!--<tr>
					<td><b>Project Date:</b></td>
					<td><span data-bind="text:projectDate"></span></td>
				</tr>-->
			<tr>
				<td><b>Package Version:</b></td>
				<td><span data-bind="text:packageVersion"></span></td>
			</tr>
			<!--<tr>
					<td><b>Package Date:</b></td>
					<td><span data-bind="text:packageDate"></span></td>
				</tr>-->
			<tr>
				<td class="rowbackground"><b>Current AppID:</b></td>
				<td class="rowbackground"><span data-bind="text:currentAppID"></span></td>
			</tr>
		</table>
	</div>
</script>
<!--
		 tmplSyncStatsDialog Editor Template
	-->
<script id="tmplSyncStatsDialog" type="text/html">
	<div id="logdetail">
		<div data-bind="html:startLog"></div>
		<div data-bind="html:continuationLog"></div>
	</div>
</script>
<!--
		 tmplSyncStatsEditor Editor Template
	 -->
<script id="tmplSyncStatsEditor" type="text/html">
	<div style="padding: 5px;flex:1 1 auto; height: 100%">
		<div class="statsearch">
			<div class="statsearchitem">
				<div class="statsearch">
					<div style="width:157px">
						<div class="synclbl"><b>Sync Start At</b></div>
						<div class="syncitm">
							<input
								id="StartSyncAt"
								data-bind="datetimepicker: StartSyncAt, datetimepicker-options: { step: 30 }"
								type="text"
								readonly="readonly"
								style="width: 150px"
							/>
						</div>

						<div class="synclbl"><b>Sync End At</b></div>
						<div>
							<input
								id="EndSyncAt"
								data-bind="datetimepicker: EndSyncAt, datetimepicker-options: { step: 30 }"
								type="text"
								readonly="readonly"
								style="width: 150px"
							/>
						</div>
					</div>
					<div class="daybtn">
						<div><button value="0" data-bind="click: TodayClick" style="width:90px">Today</button></div>
						<div><button value="0" data-bind="click: Last3DaysClick" style="width:90px">Last 3 Days</button></div>
						<div><button value="0" data-bind="click: Last7DaysClick" style="width:90px">Last 7 Days</button></div>
					</div>
				</div>
			</div>

			<div class="statsearchitem">
				<div>
					<div class="synclbl"><b>Filter by User</b></div>
					<div class="syncitm"><input id="userFilter" type="text" data-bind="value: EntityNameFilter()" style="width: 150px" /></div>
					<div class="synclbl"><b>Max Result Count</b></div>
					<div class="syncitm"><input id="maxResultCount" type="text" data-bind="value: maxResultCount" style="width: 150px" /></div>
				</div>
			</div>

			<div class="statsearchitem">
				<div class="synclbl"><b>Sync Type:</b></div>
				<table cellpadding="3">
					<tr>
						<td width="15">
							<input type="radio" name="SyncGroup" id="SyncGroupAll" data-bind="checked: SyncGroupOptionValue" value="all" />
						</td>
						<td>All</td>
					</tr>
					<tr>
						<td><input type="radio" name="SyncGroup" id="SyncGroupFull" data-bind="checked: SyncGroupOptionValue" value="full" /></td>
						<td>Full</td>
					</tr>
					<tr>
						<td><input type="radio" name="SyncGroup" id="SyncGroupInc" data-bind="checked: SyncGroupOptionValue" value="inc" /></td>
						<td>Inc</td>
					</tr>
				</table>
			</div>
			<div class="statsearchitem">
				<div class="synclbl"><b>OS Type:</b></div>
				<table cellpadding="3">
					<tr>
						<td width="15"><input type="checkbox" name="ostypeios" id="ostypeios" data-bind="checked: osTypeiOsOptionValue" /></td>
						<td>iOS</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="ostypeandroid" id="ostypeandroid" data-bind="checked: osTypeAndroidOptionValue" /></td>
						<td>Android</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="ostypewindows" id="ostypewindows" data-bind="checked: osTypeWindowsOptionValue" /></td>
						<td>Windows</td>
					</tr>
				</table>
			</div>
			<div class="statsearchitem">
				<div class="synclbl"><b>Item Type:</b></div>
				<table cellpadding="3">
					<tr>
						<td><input type="checkbox" name="itemtypesuccess" id="itemtypesuccess" data-bind="checked: itemTypeSuccessOptionValue" /></td>
						<td>Success</td>
						<td><input type="checkbox" name="itemtypetips" id="itemtypetips" data-bind="checked: itemTypeTipsOptionValue" /></td>
						<td>Tips</td>
					</tr>
					<tr>
						<td><input type="checkbox" name="itemtypeerrors" id="itemtypeerrors" data-bind="checked: itemTypeErrorsOptionValue" /></td>
						<td>Errors</td>
						<td>
							<input type="checkbox" name="itemtypeconflicts" id="itemtypeconflicts" data-bind="checked: itemTypeConflictsOptionValue" />
						</td>
						<td>Conflicts</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox" name="itemtypewarnings" id="itemtypewarnings" data-bind="checked: itemTypeWarningsOptionValue" />
						</td>
						<td>
							Warnings<!--<a href="#" data-bind="click: _WarningMessagesDisplayOptions" title="Warning messages display options">Warnings</a>-->
						</td>
						<td>&nbsp;</td>
						<td>&nbsp;</td>
					</tr>
				</table>
			</div>
			<div class="statsearchitem">
				<table cellpadding="3">
					<tr>
						<td class="center">
							<button value="0" data-bind="click: UpdateStatsClick" style="width:120px" id="btnUpdateStats">Apply</button>
						</td>
					</tr>
					<tr>
						<td class="center"><button value="1" data-bind="click: ResetStatsClick" style="width:120px">Reset</button></td>
					</tr>
					<tr>
						<td style="justify-content: center;display:flex">
							<a
								data-bind="click: _Export"
								style="height:100%; display:flex; align-items:center;border:1px solid #CCC;text-decoration:none;text-align:center;padding:1px 0px 1px 25px;color:black;cursor:pointer;width:93px"
							>
								<i class="woodfordsprite icon-woodford_DateFields_16" style="margin:0px 5px;"></i>
								<div>Export</div>
							</a>
						</td>
					</tr>
					<tr>
						<td class="center">
							<div class="smallerText">Updated: <span id="updateDateTime" data-bind="text: updateDateTime"></span></div>
						</td>
					</tr>
				</table>
			</div>
		</div>

		<div class="nodata" id="nodata" data-bind="visible: $data.MobileReports().length == 0">No data found!</div>
		<tabcontrol data-id="SyncStatsTab" data-bind="visible: $data.MobileReports().length > 0" params="parent: $data" id="SyncStatsTab">
			<tabitem data-id="SessionTab" data-viewid="SessionTabView" data-label="Session View"></tabitem>
			<tabitem data-id="DayTab" data-viewid="DayTabView" data-label="Day View"></tabitem>
			<tabitem data-id="DeviceTab" data-viewid="DeviceTabView" data-label="Device View"></tabitem>

			<tabview data-id="DeviceTabView">
				<div data-bind="style: { height: (Size.Height() - 242) + 'px'}" class="charttab">
					<div class="piechart">
						<div class="piechartmargin">
							<h3>View per device: Number of Success Syncs / Error Syncs</h3>
							<div class="dayviewbarcharts"><canvas data-bind="deviceviewchartjs: $data" width="900" height="200"></canvas></div>
						</div>
					</div>
					<br />
					<div class="piechart">
						<div class="piechartmargin">
							<h3>View per device: Average Duration from syncs / Max Duration from Success and Error</h3>
							<div class="dayviewbarcharts"><canvas data-bind="deviceviewavgmaxchartjs: $data" width="900" height="200"></canvas></div>
						</div>
					</div>

					<br />

					<!-- ko foreach: GridsDeviceStatistics -->
					<div class="wrap-collabsible">
						<input class="toggle collapseinput" type="checkbox" data-bind="attr: { id: 'collapsible' + $index() }" />
						<label
							class="lbl-toggle"
							data-bind="attr: { for: 'collapsible' + $index() }, text: $data.itemsSource()[0].DeviceLabel + ' (' + $data.itemsSource()[0].DeviceDescriptionLabel + ')'"
						></label>
						<div class="collapsible-content">
							<div class="content-inner">
								<div data-bind="grid: $data" data-definitiononly="false" class="syncstatsgrid">
									<div data-columnname="SyncStart" data-binding="Date" data-flex="1 1 150px" data-horalign="left" data-sortable="true">
										<div class="divpadding" data-bind="text: moment(data.Date).format(data.DateTimeFormat)"></div>
									</div>
									<div data-columnname="SyncType" data-binding="SyncTypeLabel" data-flex="2 1 90px" data-horalign="left" data-sortable="true"></div>
									<div
										data-columnname="Times Total (hrs:min:sec)"
										data-binding="TimesTotalLabel"
										data-flex="2 1 130px"
										data-horalign="left"
										data-sortable="true"
									>
										<div class="standard" data-bind="text: data.TimeLabel"></div>
									</div>
									<div data-columnname="Mode" data-binding="ModeLabel" data-flex="2 1 100px" data-horalign="left" data-sortable="true"></div>
									<div data-columnname="Sent" data-binding="SentLabel" data-flex="2 1 70px" data-horalign="left" data-sortable="true"></div>
									<div data-columnname="Recv" data-binding="RecvLabel" data-flex="2 1 70px" data-horalign="left" data-sortable="true"></div>
									<div data-columnname="Error" data-flex="2 1 150px" data-binding="ErrorLabel" data-horalign="center" data-sortable="true">
										<div class="errorlbldiv" data-bind="visible: data.ErrorLabel">
											<a
												href="#"
												title="Error Detail"
												data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowErrorClick(data.ErrorLabel, 'Error Detail') }"
												class="elbl errorlbl"
												>E</a
											>
										</div>
										<div class="errorlbldiv" data-bind="visible: data.AnalysisLabel">
											<a
												href="#"
												title="Warning Detail"
												data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowErrorClick(data.AnalysisLabel, 'Warning Detail') }"
												class="elbl warninglbl"
												>W</a
											>
										</div>
										<div class="errorlbldiv" data-bind="visible: data.TipLabel">
											<a
												href="#"
												title="Info Detail"
												data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowErrorClick(data.TipLabel, 'Info Detail') }"
												class="elbl tiplbl"
												>I</a
											>
										</div>
										<div class="errorlbldiv" data-bind="visible: Object.keys(data.ConflictLabel).length != 0">
											<a
												href="#"
												title="Conflict Detail"
												data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowConflictClick($data) }"
												class="elbl performancelbl"
												>C</a
											>
										</div>
									</div>
									<div
										data-columnname="Project version / Date"
										data-binding="ProjectVersion"
										data-flex="2 1 300px"
										data-horalign="left"
										data-sortable="true"
									>
										<div class="divpadding">
											<span data-bind="visible: !data.PackageVersion, text: data.ProjectVersion"></span>
											<a
												href="#"
												title="Package version"
												data-bind="visible: data.PackageVersion, text: data.ProjectVersion, click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowProjectClick(data.ProjectDate, data.PackageVersion, data.PackageDate, data.CurrentAppID) }"
											></a>
										</div>
									</div>
									<div
										data-columnname="Custom Version"
										data-binding="CustomVersion"
										data-flex="2 1 60px"
										data-horalign="left"
										data-sortable="true"
									></div>
									<div data-columnname="User" data-binding="UserLabel" data-flex="2 1 150px" data-horalign="left" data-sortable="true"></div>
									<div data-columnname="Device" data-flex="2 1 190px" data-binding="DeviceLabel" data-sortable="true" data-horalign="left">
										<div style="height:100%; display:flex; align-items:center">
											<i class="woodfordsprite" data-bind="css: data.DeviceImage" style="margin:0px 5px;"></i>
											<div data-bind="text: data.DeviceLabel"></div>
										</div>
									</div>
									<div
										data-columnname="Detail"
										data-flex="2 1 50px"
										data-columntype="command"
										data-commands="Detail"
										data-horalign="center"
										data-sortable="false"
									></div>
								</div>
							</div>
						</div>
					</div>
					<!-- /ko -->
				</div>
			</tabview>
			<tabview data-id="DayTabView">
				<div data-bind="style: { height: (Size.Height() - 242) + 'px'}" class="charttab">
					<div class="piechart">
						<div class="piechartmargin">
							<h3>View per day: Number of Success Syncs / Error Syncs</h3>
							<div class="dayviewbarcharts"><canvas data-bind="dayviewchartjs: $data" width="900" height="200"></canvas></div>
						</div>
					</div>
					<br />
					<div class="piechart">
						<div class="piechartmargin">
							<h3>View per day: Average Duration from syncs / Max Duration from Success and Error</h3>
							<div class="dayviewbarcharts"><canvas data-bind="dayviewavgmaxchartjs: $data" width="900" height="200"></canvas></div>
						</div>
					</div>

					<br />

					<!-- ko foreach: GridsStatistics -->
					<div class="wrap-collabsible">
						<input class="toggle collapseinput" type="checkbox" data-bind="attr: { id: 'collapsibled' + $index() }" />
						<label
							class="lbl-toggle"
							data-bind="attr: { for: 'collapsibled' + $index() }, text: moment($data.itemsSource()[0].Date).format($data.itemsSource()[0].DateFormat)"
						></label>
						<div class="collapsible-content">
							<div class="content-inner">
								<div data-bind="grid: $data" data-definitiononly="false" class="syncstatsgrid">
									<div data-columnname="SyncStart" data-binding="Date" data-flex="1 1 150px" data-horalign="left" data-sortable="true">
										<div class="divpadding" data-bind="text: moment(data.Date).format(data.DateTimeFormat)"></div>
									</div>
									<div data-columnname="SyncType" data-binding="SyncTypeLabel" data-flex="2 1 90px" data-horalign="left" data-sortable="true"></div>
									<div
										data-columnname="Times Total (hrs:min:sec)"
										data-binding="TimesTotalLabel"
										data-flex="2 1 130px"
										data-horalign="left"
										data-sortable="true"
									>
										<div class="standard" data-bind="text: data.TimeLabel"></div>
									</div>
									<div data-columnname="Mode" data-binding="ModeLabel" data-flex="2 1 100px" data-horalign="left" data-sortable="true"></div>
									<div data-columnname="Sent" data-binding="SentLabel" data-flex="2 1 70px" data-horalign="left" data-sortable="true"></div>
									<div data-columnname="Recv" data-binding="RecvLabel" data-flex="2 1 70px" data-horalign="left" data-sortable="true"></div>
									<div data-columnname="Error" data-flex="2 1 150px" data-binding="ErrorLabel" data-horalign="center" data-sortable="true">
										<div class="errorlbldiv" data-bind="visible: data.ErrorLabel">
											<a
												href="#"
												title="Error Detail"
												data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowErrorClick(data.ErrorLabel, 'Error Detail') }"
												class="elbl errorlbl"
												>E</a
											>
										</div>
										<div class="errorlbldiv" data-bind="visible: data.AnalysisLabel">
											<a
												href="#"
												title="Warning Detail"
												data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowErrorClick(data.AnalysisLabel, 'Warning Detail') }"
												class="elbl warninglbl"
												>W</a
											>
										</div>
										<div class="errorlbldiv" data-bind="visible: data.TipLabel">
											<a
												href="#"
												title="Info Detail"
												data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowErrorClick(data.TipLabel, 'Info Detail') }"
												class="elbl tiplbl"
												>I</a
											>
										</div>
										<div class="errorlbldiv" data-bind="visible: Object.keys(data.ConflictLabel).length != 0">
											<a
												href="#"
												title="Conflict Detail"
												data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowConflictClick($data) }"
												class="elbl performancelbl"
												>C</a
											>
										</div>
									</div>
									<div
										data-columnname="Project version / Date"
										data-binding="ProjectVersion"
										data-flex="2 1 300px"
										data-horalign="left"
										data-sortable="true"
									>
										<div class="divpadding">
											<span data-bind="visible: !data.PackageVersion, text: data.ProjectVersion"></span>
											<a
												href="#"
												title="Package version"
												data-bind="visible: data.PackageVersion, text: data.ProjectVersion, click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowProjectClick(data.ProjectDate, data.PackageVersion, data.PackageDate, data.CurrentAppID) }"
											></a>
										</div>
									</div>
									<div
										data-columnname="Custom Version"
										data-binding="CustomVersion"
										data-flex="2 1 60px"
										data-horalign="left"
										data-sortable="true"
									></div>
									<div data-columnname="User" data-binding="UserLabel" data-flex="2 1 150px" data-horalign="left" data-sortable="true"></div>
									<div data-columnname="Device" data-flex="2 1 190px" data-binding="DeviceLabel" data-sortable="true" data-horalign="left">
										<div style="height:100%; display:flex; align-items:center">
											<i class="woodfordsprite" data-bind="css: data.DeviceImage" style="margin:0px 5px;"></i>
											<div data-bind="text: data.DeviceLabel"></div>
										</div>
									</div>
									<div
										data-columnname="Detail"
										data-flex="2 1 50px"
										data-columntype="command"
										data-commands="Detail"
										data-horalign="center"
										data-sortable="false"
									></div>
								</div>
							</div>
						</div>
					</div>
					<!-- /ko -->
				</div>
			</tabview>

			<tabview data-id="SessionTabView">
				<div data-bind="style: { height: (Size.Height() - 242) + 'px'}" class="charttab">
					<div style="display:block;width:100%">
						<div class="chartTable">
							<div class="chartTableRow">
								<div class="chartTableCell">
									<div class="syncchart">
										<h3>Sync Logs</h3>
										<div class="syncstatspiecharts">
											<canvas data-bind="chartjs: $data" width="250" height="250"></canvas>
										</div>
										<span data-bind="text: ErrorsChart().values[1]"></span> errors, <span data-bind="text: ErrorsChart().values[2]"></span> Warnings,
										<span data-bind="text: ErrorsChart().values[3]"></span> Tips, <span data-bind="text: ErrorsChart().values[4]"></span> Conflicts
										out of <span data-bind="text: DurationChart().total"></span> total logs
									</div>
								</div>
								<div class="cellSpace">&nbsp;</div>
								<div class="chartTableCell">
									<div class="syncchart">
										<h3>Devices</h3>
										<div class="syncstatspiecharts">
											<canvas data-bind="devicechartjs: $data" width="250" height="250"></canvas>
										</div>
										<span data-bind="text: DeviceChart().values[2]"></span> Windows / <span data-bind="text: DeviceChart().values[1]"></span> Android
										/ <span data-bind="text: DeviceChart().values[0]"></span> iOS
									</div>
								</div>
								<div class="cellSpace">&nbsp;</div>
								<div class="chartTableCell">
									<div class="syncchart">
										<h3>Sync Type</h3>
										<div class="syncstatspiecharts">
											<canvas data-bind="synctypechartjs: $data" width="250" height="250"></canvas>
										</div>
										SyncType: <span data-bind="text: SyncTypeChart().values[0]"></span> IncSyncs /
										<span data-bind="text: SyncTypeChart().values[1]"></span> FullSyncs /
										<span data-bind="text: SyncTypeChart().values[2]"></span> NoSyncs /
										<span data-bind="text: SyncTypeChart().values[3]"></span> InProgress
									</div>
								</div>
								<div class="cellSpace">&nbsp;</div>
								<div class="chartTableCell">
									<div class="syncchart">
										<h3>Records</h3>
										<div class="syncstatspiecharts">
											<canvas data-bind="sendrecvchartjs: $data" width="250" height="250"></canvas>
										</div>
										<span data-bind="text: SendRecvChart().values[0]"></span> Sent /
										<span data-bind="text: SendRecvChart().values[1]"></span> Received
									</div>
								</div>
							</div>
						</div>

						<!--<div class="syncchart">
								<h3><span data-bind="text: Errors"></span> errors, <span data-bind="text: Warnings"></span> Warnings, <span data-bind="text: Tips"></span> Tips, <span data-bind="text: Conflicts"></span> Conflicts out of <span data-bind="text: Total"></span> total logs</h3>
								<div class="syncstatspiecharts">
									<canvas data-bind="chartjs: $data" width="250" height="250"></canvas>
								</div>
							</div>

							<div class="syncchart">
								<h3><span data-bind="text: Windows"></span> Windows / <span data-bind="text: Android"></span> Android / <span data-bind="text: Ios"></span> iOS</h3>
								<div class="syncstatspiecharts">
									<canvas data-bind="devicechartjs: $data" width="250" height="250"></canvas>
								</div>
							</div>

							<div class="syncchart">
								<h3>SyncType: <span data-bind="text: IncSync"></span> IncSyncs / <span data-bind="text: FullSync"></span> FullSyncs / <span data-bind="text: NoSync"></span> NoSyncs</h3>
								<div class="syncstatspiecharts">
									<canvas data-bind="synctypechartjs: $data" width="250" height="250"></canvas>
								</div>
							</div>

							<div class="syncchart">
								<h3><span data-bind="text: Send"></span> Send / <span data-bind="text: Recv"></span> Received</h3>
								<div class="syncstatspiecharts">
									<canvas data-bind="sendrecvchartjs: $data" width="250" height="250"></canvas>
								</div>
							</div>-->

						<div class="piechart">
							<div style="margin:0px 20px 0px 20px">
								<h3>Warning Messages</h3>

								<div class="warningChartRow">
									<div class="warningChartColumn" style="border: 1px solid #DDDDDD;background:#FBFBFB">
										<div style="position:relative;text-align:right;margin:10px" data-bind="visible: chartResetButton">
											<button value="1" data-bind="click: ResetWarningChartClick" style="width:120px">Reset</button>
										</div>
										<div class="dayviewbarcharts">
											<canvas data-bind="warningschartjs: $data" width="500" height="350"></canvas>
										</div>
									</div>
									<div class="warningChartColumn">
										<div>
											<table class="syncstattable">
												<tr>
													<td width="15">
														<input type="checkbox" name="warn001" id="warn001" data-bind="checked: warn001OptionValue" />
													</td>
													<td>001</td>
													<td>DEMO customization used.</td>
												</tr>
												<tr>
													<td>
														<input type="checkbox" name="warn002" id="warn002" data-bind="checked: warn002OptionValue" />
													</td>
													<td>002</td>
													<td>Old customization used.</td>
												</tr>
												<tr>
													<td>
														<input type="checkbox" name="warn003" id="warn003" data-bind="checked: warn003OptionValue" />
													</td>
													<td>003</td>
													<td>FileDownload: Slow.</td>
												</tr>
												<tr>
													<td>
														<input type="checkbox" name="warn004" id="warn004" data-bind="checked: warn004OptionValue" />
													</td>
													<td>004</td>
													<td>
														Minor perf problem (unneeded downloads): 404 records were first downloaded, but they were later deleted as they did not
														match SyncFilter at the client. Problem is usually caused by inconsistent links in the SyncFilter definition.
													</td>
												</tr>
												<tr>
													<td>
														<input type="checkbox" name="warn005" id="warn005" data-bind="checked: warn005OptionValue" />
													</td>
													<td>005</td>
													<td>
														Major perf problem (unneeded downloads): 57616 records were first downloaded, but they were later deleted as they did not
														match SyncFilter at the client. Problem is usually caused by inconsistent links in the SyncFilter definition.
													</td>
												</tr>
												<tr>
													<td>
														<input type="checkbox" name="warn006" id="warn006" data-bind="checked: warn006OptionValue" />
													</td>
													<td>006</td>
													<td>
														Downloaded data are incomplete: Download of some entities was interrupted (Warning 'max # of objects received'). Cleanup
														deleted additional 12345 records which became orphaned (probably) due to missing records.
													</td>
												</tr>
												<tr>
													<td>
														<input type="checkbox" name="warn007" id="warn007" data-bind="checked: warn007OptionValue" />
													</td>
													<td>007</td>
													<td>Long record cleanup.</td>
												</tr>
												<tr>
													<td>
														<input type="checkbox" name="warn008" id="warn008" data-bind="checked: warn008OptionValue" />
													</td>
													<td>008</td>
													<td>Many deletes in record cleanup.</td>
												</tr>
												<tr>
													<td>
														<input type="checkbox" name="warn009" id="warn009" data-bind="checked: warn009OptionValue" />
													</td>
													<td>009</td>
													<td>Long documents cleanup.</td>
												</tr>
												<tr>
													<td>
														<input type="checkbox" name="warn010" id="warn010" data-bind="checked: warn010OptionValue" />
													</td>
													<td>010</td>
													<td>Many deletes in documents cleanup.</td>
												</tr>
												<tr>
													<td>
														<input type="checkbox" name="warn011" id="warn011" data-bind="checked: warn011OptionValue" />
													</td>
													<td>011</td>
													<td>Slow entity image download.</td>
												</tr>
												<tr>
													<td>
														<input type="checkbox" name="warn012" id="warn012" data-bind="checked: warn012OptionValue" />
													</td>
													<td>012</td>
													<td>Long time spent in MarketingList download.</td>
												</tr>
												<tr>
													<td>
														<input type="checkbox" name="warn013" id="warn013" data-bind="checked: warn013OptionValue" />
													</td>
													<td>013</td>
													<td>Incomplete entities: account contact.</td>
												</tr>
												<tr>
													<td>
														<input type="checkbox" name="warn014" id="warn014" data-bind="checked: warn014OptionValue" />
													</td>
													<td>014</td>
													<td>Other warning messages.</td>
												</tr>
												<!--<tr><td>001</td><td>DEMO customization used.</td></tr>
													<tr><td>002</td><td>Old customization used.</td></tr>
													<tr><td>003</td><td>FileDownload: Slow.</td></tr>
													<tr><td>004</td><td>Minor perf problem (unneeded downloads): 404 records were first downloaded, but they were later deleted as they did not match SyncFilter at the client. Problem is usually caused by inconsistent links in the SyncFilter definition.</td></tr>
													<tr><td>005</td><td>Major perf problem (unneeded downloads): 57616 records were first downloaded, but they were later deleted as they did not match SyncFilter at the client. Problem is usually caused by inconsistent links in the SyncFilter definition.</td></tr>
													<tr><td>006</td><td>Downloaded data are incomplete: Download of some entities was interrupted (Warning 'max # of objects received'). Cleanup deleted additional 12345 records which became orphaned (probably) due to missing records.</td></tr>
													<tr><td>007</td><td>Long record cleanup.</td></tr>
													<tr><td>008</td><td>Many deletes in record cleanup.</td></tr>
													<tr><td>009</td><td>Long documents cleanup.</td></tr>
													<tr><td>010</td><td>Many deletes in documents cleanup.</td></tr>
													<tr><td>011</td><td>Slow entity image download.</td></tr>
													<tr><td>012</td><td>Long time spent in MarketingList download.</td></tr>
													<tr><td>013</td><td>Incomplete entities: account contact.</td></tr>
													<tr><td>014</td><td>Other warning messages.</td></tr>-->
											</table>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="piechart">
							<div style="margin:0px 20px 0px 20px">
								<h3>Total sync times per session</h3>
								<div class="dayviewbarcharts"><canvas data-bind="durationchartjs: $data" width="900" height="150"></canvas></div>
							</div>
						</div>
					</div>

					<br />

					<div data-bind="grid: DataGrid" data-definitiononly="false" class="syncstatsgrid">
						<div data-columnname="SyncStart" data-binding="Date" data-flex="1 1 170px" data-horalign="left" data-sortable="true">
							<div class="divpadding" data-bind="text: moment(data.Date).format(data.DateTimeFormat)"></div>
						</div>
						<div data-columnname="SyncType" data-binding="SyncTypeLabel" data-flex="2 1 90px" data-horalign="left" data-sortable="true"></div>
						<div
							data-columnname="Times Total (hrs:min:sec)"
							data-binding="TimesTotalLabel"
							data-flex="2 1 130px"
							data-horalign="left"
							data-sortable="true"
						>
							<div class="standard" data-bind="text: data.TimeLabel"></div>
						</div>
						<div data-columnname="Mode" data-binding="ModeLabel" data-flex="2 1 100px" data-horalign="left" data-sortable="true"></div>
						<div data-columnname="Sent" data-binding="SentLabel" data-flex="2 1 60px" data-horalign="left" data-sortable="true"></div>
						<div data-columnname="Recv" data-binding="RecvLabel" data-flex="2 1 60px" data-horalign="left" data-sortable="true"></div>
						<div data-columnname="Error" data-flex="2 1 150px" data-binding="ErrorLabel" data-horalign="center" data-sortable="true">
							<div class="errorlbldiv" data-bind="visible: data.ErrorLabel">
								<a
									href="#"
									title="Error Detail"
									data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowErrorClick(data.ErrorLabel, 'Error Detail') }"
									class="elbl errorlbl"
									>E</a
								>
							</div>
							<div class="errorlbldiv" data-bind="visible: data.AnalysisLabel">
								<a
									href="#"
									title="Warning Detail"
									data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowErrorClick(data.AnalysisLabel, 'Warning Detail') }"
									class="elbl warninglbl"
									>W</a
								>
							</div>
							<div class="errorlbldiv" data-bind="visible: data.TipLabel">
								<a
									href="#"
									title="Info Detail"
									data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowErrorClick(data.TipLabel, 'Info Detail') }"
									class="elbl tiplbl"
									>I</a
								>
							</div>
							<div class="errorlbldiv" data-bind="visible: Object.keys(data.ConflictLabel).length != 0">
								<a
									href="#"
									title="Conflict Detail"
									data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowConflictClick($data) }"
									class="elbl performancelbl"
									>C</a
								>
							</div>
						</div>
						<div
							data-columnname="Project version / Date"
							data-binding="ProjectVersion"
							data-flex="2 1 300px"
							data-horalign="left"
							data-sortable="true"
						>
							<div class="divpadding">
								<span data-bind="visible: !data.PackageVersion, text: data.ProjectVersion"></span>
								<a
									href="#"
									title="Package version"
									data-bind="visible: data.PackageVersion, text: data.ProjectVersion, click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowProjectClick(data.ProjectDate, data.PackageVersion, data.PackageDate, data.CurrentAppID) }"
								></a>
							</div>
						</div>
						<div data-columnname="Custom Version" data-binding="CustomVersion" data-flex="2 1 60px" data-horalign="left" data-sortable="true"></div>
						<div data-columnname="User" data-binding="UserLabel" data-flex="2 1 140px" data-horalign="left" data-sortable="true"></div>

						<div data-columnname="Device" data-flex="2 1 190px" data-binding="DeviceLabel" data-sortable="true" data-horalign="left">
							<div style="height:100%; display:flex; align-items:center">
								<i class="woodfordsprite" data-bind="css: data.DeviceImage" style="margin:0px 5px;"></i>
								<div data-bind="text: data.DeviceLabel"></div>
							</div>
						</div>

						<div
							data-columnname="Detail"
							data-flex="2 1 50px"
							data-columntype="command"
							data-commands="Detail"
							data-horalign="center"
							data-sortable="false"
						></div>
					</div>
				</div>
			</tabview>
		</tabcontrol>
	</div>
</script>
<!--
		 tmplSyncStatsTestingEditor Editor Template
	 -->
<script id="tmplSyncStatsTestingEditor" type="text/html">
	<div style="padding: 5px;flex:1 1 auto; height: 100%">
		<div style="display:block;margin-bottom:20px">
			<div style="padding-right:6px">
				<textarea id="PerformanceLogs" rows="5" type="text" data-bind="value:PerformanceLogs" style="width:100%;height:400px"></textarea>
			</div>
			<div style="float:left;width:100%;padding-bottom:20px">
				<div style="float:right">Total Parsing Time in Ms: <span data-bind="text: ParsingTime" style="font-weight:bold"></span></div>
				<div style="float:left">
					<button value="0" data-bind="click: UpdatePerformanceLogs" style="width:120px" id="btnUpdatePerformanceLogs">Test</button>
				</div>
			</div>

			<div style="display:block;width:100%">
				<div data-bind="grid: DataGrid" data-definitiononly="false" class="syncstatsgrid">
					<div data-columnname="SyncStart" data-binding="Date" data-flex="1 1 170px" data-horalign="left" data-sortable="true">
						<div class="divpadding" data-bind="text: moment(data.Date).format('DD/MM/YYYY hh:mm:ss A')"></div>
					</div>
					<div data-columnname="SyncType" data-binding="SyncTypeLabel" data-flex="2 1 90px" data-horalign="left" data-sortable="true"></div>
					<div
						data-columnname="Times Total (hrs:min:sec)"
						data-binding="TimesTotalLabel"
						data-flex="2 1 130px"
						data-horalign="left"
						data-sortable="true"
					>
						<div class="standard" data-bind="text: data.TimeLabel"></div>
					</div>
					<div data-columnname="Mode" data-binding="ModeLabel" data-flex="2 1 100px" data-horalign="left" data-sortable="true"></div>
					<div data-columnname="Sent" data-binding="SentLabel" data-flex="2 1 60px" data-horalign="left" data-sortable="true"></div>
					<div data-columnname="Recv" data-binding="RecvLabel" data-flex="2 1 60px" data-horalign="left" data-sortable="true"></div>
					<div data-columnname="Error" data-flex="2 1 150px" data-binding="ErrorLabel" data-horalign="center" data-sortable="true">
						<div class="errorlbldiv" data-bind="visible: data.ErrorLabel">
							<a
								href="#"
								title="Error Detail"
								data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowErrorClick(data.ErrorLabel, 'Error Detail') }"
								class="elbl errorlbl"
								>E</a
							>
						</div>
						<div class="errorlbldiv" data-bind="visible: data.AnalysisLabel">
							<a
								href="#"
								title="Warning Detail"
								data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowErrorClick(data.AnalysisLabel, 'Warning Detail') }"
								class="elbl warninglbl"
								>W</a
							>
						</div>
						<div class="errorlbldiv" data-bind="visible: data.TipLabel">
							<a
								href="#"
								title="Info Detail"
								data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowErrorClick(data.TipLabel, 'Info Detail') }"
								class="elbl tiplbl"
								>I</a
							>
						</div>
						<div class="errorlbldiv" data-bind="visible: Object.keys(data.ConflictLabel).length != 0">
							<a
								href="#"
								title="Conflict Detail"
								data-bind="click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowConflictClick($data) }"
								class="elbl performancelbl"
								>C</a
							>
						</div>
					</div>
					<div data-columnname="Project version / Date" data-binding="ProjectVersion" data-flex="2 1 300px" data-horalign="left" data-sortable="true">
						<div class="divpadding">
							<span data-bind="visible: !data.PackageVersion, text: data.ProjectVersion"></span>
							<a
								href="#"
								title="Package version"
								data-bind="visible: data.PackageVersion, text: data.ProjectVersion, click: function(e) { MobileCRM.Woodford.SyncStatsEditor.prototype.ShowProjectClick(data.ProjectDate, data.PackageVersion, data.PackageDate, data.CurrentAppID) }"
							></a>
						</div>
					</div>
					<div data-columnname="Custom Version" data-binding="CustomVersion" data-flex="2 1 60px" data-horalign="left" data-sortable="true"></div>
					<div data-columnname="User" data-binding="UserLabel" data-flex="2 1 140px" data-horalign="left" data-sortable="true"></div>

					<div data-columnname="Device" data-flex="2 1 190px" data-binding="DeviceLabel" data-sortable="true" data-horalign="left">
						<div style="height:100%; display:flex; align-items:center">
							<i class="woodfordsprite" data-bind="css: data.DeviceImage" style="margin:0px 5px;"></i>
							<div data-bind="text: data.DeviceLabel"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</script>
<script id="tmplTestDialog" type="text/html">
	<main style="flex:1 1 auto;display:initial;margin:5px">Ahoj</main>
</script>
<!-- BEGIN: tmplTextInputDialog -->
<script id="tmplTextInputDialog" type="text/html">
	<div data-bind="html: Message"></div>
	<input id="textInput" style="width:100%; box-sizing:border-box" type="text" data-bind="value: Value, enterkey: OnEnterKey, hasfocus: true" />
</script>
<!-- END: tmplTextInputDialog -->
<!-- BEGIN: tmplThemeEditor-->
<script id="tmplThemeEditor" type="text/html">
	<div id="themeEditorBody">
		<div id="main-container">
			<header class="section-header-main">
				<p class="section-header-main-title">Theme</p>
				<div class="tab-bar">
					<div class="tab-bar-item" data-bind="click: function(data, event) { changeView(0) }, css: { active: SelectedView() === 0}">Phone</div>
					<div class="tab-bar-item" data-bind="click: function(data, event) { changeView(1) }, css: { active: SelectedView() === 1}">Tablet</div>
				</div>
			</header>
			<div id="screens-container" data-bind="click: onScreenContainerClick">
				<div data-bind="attr: { class: ViewTemplate()}">
					<div class="phone-screen">
						<div
							class="header-menu tooltipsource"
							data-bind="style:{ 'background-color':  previewColor('title_background') }"
							data-tooltip="ThemeEditor.TopAppBarBackground"
						>
							<div class="status-bar">
								<i class="woodfordsprite icon-woodford_ThemeEditor_status_bar_left"></i>
								<i class="woodfordsprite icon-woodford_ThemeEditor_status_bar_right" data-bind="css:{hidden:!IsPhoneView()}"></i>
							</div>

							<div class="status-bar">
								<i
									class="material-icons arrow-back tooltipsource"
									data-bind="style:{ 'color' :  previewColor('title_foreground') }"
									data-tooltip="ThemeEditor.TopAppBarForeground"
								>
									cast_connected
								</i>
								<h1
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('title_foreground') }"
									data-tooltip="ThemeEditor.TopAppBarForeground"
								>
									Resco Mobile CRM
								</h1>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('title_foreground') }"
									data-tooltip="ThemeEditor.TopAppBarForeground"
								>
									sync
								</i>
							</div>
						</div>
						<ul class="main-view-list" data-bind="visible: IsCustomHome, style:{ 'background-color' :  previewColor('home_list_background') }">
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('home_list_background') }"
								data-tooltip="ThemeEditor.HomeListBackground"
							>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('home_list_sel_foreground') }"
									data-tooltip="ThemeEditor.HomeListSelectedForeground"
									>dashboard</i
								><span
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('home_list_foreground') }"
									data-tooltip="ThemeEditor.HomeListForeground"
									>Dashboard</span
								>
							</li>
							<div class="listSeparator" data-bind="style:{ 'border-color' :  previewColor('home_list_separator') }">
								<div data-bind="style:{ 'color' :  previewColor('home_list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('home_list_background') }"
								data-tooltip="ThemeEditor.HomeListBackground"
							>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('home_list_sel_foreground') }"
									data-tooltip="ThemeEditor.HomeListSelectedForeground"
									>map</i
								><span
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('home_list_foreground') }"
									data-tooltip="ThemeEditor.HomeListForeground"
									>Map</span
								>
							</li>
							<div class="listSeparator" data-bind="style:{ 'border-color' :  previewColor('home_list_separator') }">
								<div data-bind="style:{ 'color' :  previewColor('home_list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('home_list_background') }"
								data-tooltip="ThemeEditor.HomeListBackground"
							>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('home_list_sel_foreground') }"
									data-tooltip="ThemeEditor.HomeListSelectedForeground"
									>local_activity</i
								><span
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('home_list_foreground') }"
									data-tooltip="ThemeEditor.HomeListForeground"
									>Activities</span
								>
							</li>
							<div class="listSeparator" data-bind="style:{ 'border-color' :  previewColor('home_list_separator') }">
								<div data-bind="style:{ 'color' :  previewColor('home_list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('home_list_background') }"
								data-tooltip="ThemeEditor.HomeListBackground"
							>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('home_list_sel_foreground') }"
									data-tooltip="ThemeEditor.HomeListSelectedForeground"
									>calendar_today</i
								><span
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('home_list_foreground') }"
									data-tooltip="ThemeEditor.HomeListForeground"
									>Calendar</span
								>
							</li>
							<div class="listSeparator" data-bind="style:{ 'border-color' :  previewColor('home_list_separator') }">
								<div data-bind="style:{ 'color' :  previewColor('home_list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('home_list_section_background') }"
								data-tooltip="ThemeEditor.HomeSectionBackground"
							>
								<span
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('home_list_section_foreground') }"
									data-tooltip="ThemeEditor.HomeSectionForeground"
									>Section</span
								>
							</li>
							<div class="listSeparator" data-bind="style:{ 'border-color' :  previewColor('home_list_separator') }">
								<div data-bind="style:{ 'color' :  previewColor('home_list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('home_list_background') }"
								data-tooltip="ThemeEditor.HomeListBackground"
							>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('home_list_sel_foreground') }"
									data-tooltip="ThemeEditor.HomeListSelectedForeground"
									>account_box</i
								><span
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('home_list_foreground') }"
									data-tooltip="ThemeEditor.HomeListForeground"
									>Accounts</span
								>
							</li>
							<div class="listSeparator" data-bind="style:{ 'border-color' :  previewColor('home_list_separator') }">
								<div data-bind="style:{ 'color' :  previewColor('home_list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="selected tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('home_list_sel_background') }"
								data-tooltip="ThemeEditor.HomeListSelectedBackground"
							>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('home_list_sel_foreground') }"
									data-tooltip="ThemeEditor.HomeListSelectedForeground"
									>contacts</i
								><span
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('home_list_sel_foreground') }"
									data-tooltip="ThemeEditor.HomeListSelectedForeground"
									>Contacts</span
								>
							</li>
							<div class="listSeparator" data-bind="style:{ 'border-color' :  previewColor('home_list_separator') }">
								<div data-bind="style:{ 'color' :  previewColor('home_list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('home_list_background') }"
								data-tooltip="ThemeEditor.HomeListBackground"
							>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('home_list_sel_foreground') }"
									data-tooltip="ThemeEditor.HomeListSelectedForeground"
									>phone_in_talk</i
								><span
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('home_list_foreground') }"
									data-tooltip="ThemeEditor.HomeListForeground"
									>Leads</span
								>
							</li>
							<div class="listSeparator" data-bind="style:{ 'border-color' :  previewColor('home_list_separator') }">
								<div data-bind="style:{ 'color' :  previewColor('home_list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('home_list_background') }"
								data-tooltip="ThemeEditor.HomeListBackground"
							>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('home_list_sel_foreground') }"
									data-tooltip="ThemeEditor.HomeListSelectedForeground"
									>list_alt</i
								><span
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('home_list_foreground') }"
									data-tooltip="ThemeEditor.HomeListForeground"
									>Opportunitites</span
								>
							</li>
							<div class="listSeparator" data-bind="style:{ 'border-color' :  previewColor('home_list_separator') }">
								<div data-bind="style:{ 'color' :  previewColor('home_list_separator') }" class="clickableArea"></div>
							</div>
						</ul>
						<ul
							class="main-view-list tooltipsource"
							data-bind="visible: !IsCustomHome(), style:{ 'background-color' :  previewColor('list_background') }"
							data-tooltip="ThemeEditor.ViewListContentBackground"
						>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('list_background') }"
								data-tooltip="ThemeEditor.ViewListContentBackground"
							>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>dashboard</i
								><span
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_foreground') }"
									data-tooltip="ThemeEditor.ViewListContentForeground"
									>Dashboard</span
								>
							</li>
							<div
								class="listSeparator tooltipsource"
								data-bind="style:{ 'border-color' :  previewColor('list_separator') }"
								data-tooltip="ThemeEditor.ViewListContentDivider"
							>
								<div data-bind="style:{ 'color' :  previewColor('list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('list_background') }"
								data-tooltip="ThemeEditor.ViewListContentBackground"
							>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>map</i
								><span
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_foreground') }"
									data-tooltip="ThemeEditor.ViewListContentForeground"
									>Map</span
								>
							</li>
							<div
								class="listSeparator tooltipsource"
								data-bind="style:{ 'border-color' :  previewColor('list_separator') }"
								data-tooltip="ThemeEditor.ViewListContentDivider"
							>
								<div data-bind="style:{ 'color' :  previewColor('list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('list_background') }"
								data-tooltip="ThemeEditor.ViewListContentBackground"
							>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>local_activity</i
								><span
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_foreground') }"
									data-tooltip="ThemeEditor.ViewListContentForeground"
									>Activities</span
								>
							</li>
							<div
								class="listSeparator tooltipsource"
								data-bind="style:{ 'border-color' :  previewColor('list_separator') }"
								data-tooltip="ThemeEditor.ViewListContentDivider"
							>
								<div data-bind="style:{ 'color' :  previewColor('list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('list_background') }"
								data-tooltip="ThemeEditor.ViewListContentBackground"
							>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>calendar_today</i
								><span
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_foreground') }"
									data-tooltip="ThemeEditor.ViewListContentForeground"
									>Calendar</span
								>
							</li>
							<div
								class="listSeparator tooltipsource"
								data-bind="style:{ 'border-color' :  previewColor('list_separator') }"
								data-tooltip="ThemeEditor.ViewListContentDivider"
							>
								<div data-bind="style:{ 'color' :  previewColor('list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('list_background') }"
								data-tooltip="ThemeEditor.ViewListContentBackground"
							>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>account_box</i
								><span
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_foreground') }"
									data-tooltip="ThemeEditor.ViewListContentForeground"
									>Accounts</span
								>
							</li>
							<div
								class="listSeparator tooltipsource"
								data-bind="style:{ 'border-color' :  previewColor('list_separator') }"
								data-tooltip="ThemeEditor.ViewListContentDivider"
							>
								<div data-bind="style:{ 'color' :  previewColor('list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="selected tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('list_sel_background') }"
								data-tooltip="ThemeEditor.ViewListSelectedContentBackground"
							>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>contacts</i
								><span
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>Contacts</span
								>
							</li>
							<div
								class="listSeparator tooltipsource"
								data-bind="style:{ 'border-color' :  previewColor('list_separator') }"
								data-tooltip="ThemeEditor.ViewListContentDivider"
							>
								<div data-bind="style:{ 'color' :  previewColor('list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('list_background') }"
								data-tooltip="ThemeEditor.ViewListContentBackground"
							>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>phone_in_talk</i
								><span
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_foreground') }"
									data-tooltip="ThemeEditor.ViewListContentForeground"
									>Leads</span
								>
							</li>
							<div
								class="listSeparator tooltipsource"
								data-bind="style:{ 'border-color' :  previewColor('list_separator') }"
								data-tooltip="ThemeEditor.ViewListContentDivider"
							>
								<div data-bind="style:{ 'color' :  previewColor('list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('list_background') }"
								data-tooltip="ThemeEditor.ViewListContentBackground"
							>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>list_alt</i
								><span
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_foreground') }"
									data-tooltip="ThemeEditor.ViewListContentForeground"
									>Opportunitites</span
								>
							</li>
							<div
								class="listSeparator tooltipsource"
								data-bind="style:{ 'border-color' :  previewColor('list_separator') }"
								data-tooltip="ThemeEditor.ViewListContentDivider"
							>
								<div data-bind="style:{ 'color' :  previewColor('list_separator') }" class="clickableArea"></div>
							</div>
						</ul>
						<div
							class="bottom-menu sync tooltipsource"
							data-bind="style:{ 'background-color' :  previewColor('tab_background') }"
							data-tooltip="ThemeEditor.TabHeaderBackground"
						>
							<span
								class="sync-notation tooltipsource"
								data-bind="style:{ 'color' :  previewColor('tab_foreground') }"
								data-tooltip="ThemeEditor.TabHeaderForeground"
								>Synced Tuesday, 25. 09. 2018</span
							>
						</div>
					</div>
					<div class="phone-screen">
						<div
							class="header-menu tooltipsource"
							data-bind="style:{ 'background-color' :  previewColor('title_background') }"
							data-tooltip="ThemeEditor.TopAppBarBackground"
						>
							<div class="status-bar" data-bind="css:{hidden:!IsPhoneView()}">
								<i class="woodfordsprite icon-woodford_ThemeEditor_status_bar_left"></i>
								<i class="woodfordsprite icon-woodford_ThemeEditor_status_bar_right"></i>
							</div>
							<div class="status-bar">
								<i
									class="material-icons arrow-back tooltipsource"
									data-bind="style:{ 'color' :  previewColor('title_foreground') }"
									data-tooltip="ThemeEditor.TopAppBarForeground"
								>
									arrow_back_ios
								</i>
								<h1
									class="centered tooltipsource"
									data-bind="style:{ 'color' :  previewColor('title_foreground') }"
									data-tooltip="ThemeEditor.TopAppBarForeground"
								>
									Accounts
								</h1>
							</div>
						</div>
						<div
							class="sort-by-menu tooltipsource"
							data-bind="style:{ 'background-color' :  previewColor('list_header_background') }"
							data-tooltip="ThemeEditor.ViewListHeaderBackground"
						>
							<div class="main-info-container">
								<span
									class="name tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_header_foreground') }"
									data-tooltip="ThemeEditor.ViewListHeaderForeground"
									><i
										class="material-icons tooltipsource"
										data-bind="style:{ 'color' :  previewColor('list_header_foreground') }"
										data-tooltip="ThemeEditor.ViewListHeaderForeground"
										>arrow_drop_up</i
									>Name</span
								>
								<span
									class="street tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_header_foreground') }"
									data-tooltip="ThemeEditor.ViewListHeaderForeground"
									>Address</span
								>
							</div>
							<span
								class="status tooltipsource"
								data-bind="style:{ 'color' :  previewColor('list_header_foreground') }"
								data-tooltip="ThemeEditor.ViewListHeaderForeground"
								>Status</span
							>
						</div>
						<ul
							class="main-view-list tooltipsource"
							data-bind="style:{ 'background-color' :  previewColor('list_background')}"
							data-tooltip="ThemeEditor.ViewListContentBackground"
						>
							<li
								class="toolbar-menu tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('list_background') }"
								data-tooltip="ThemeEditor.ViewListContentBackground"
							>
								<div
									class="toolbar"
									data-bind="style:{ 'background-color' :  previewColor('search_background'), 'color' :  previewColor('search_foreground') }"
								>
									<div
										class="toolbar-item tooltipsource"
										data-bind="style:{ 'background-color' :  previewColor('search_background') }"
										data-tooltip="ThemeEditor.SearchBackground"
									>
										<i
											data-bind="style:{ 'color' :  previewColor('search_foreground') }"
											class="material-icons tooltipsource"
											data-tooltip="ThemeEditor.SearchForeground"
											>search</i
										>
										<div
											class="tooltipsource"
											data-bind="style:{ 'color' :  previewColor('search_foreground') }"
											data-tooltip="ThemeEditor.SearchForeground"
										>
											Search
										</div>
									</div>
									<div
										class="toolbar-item tooltipsource"
										data-bind="style:{ 'background-color' :  previewColor('search_background') }"
										data-tooltip="ThemeEditor.SearchBackground"
									>
										<i
											data-bind="style:{ 'color' :  previewColor('search_foreground') }"
											class="material-icons tooltipsource"
											data-tooltip="ThemeEditor.SearchForeground"
											>bolt</i
										>
										<div
											class="tooltipsource"
											data-bind="style:{ 'color' :  previewColor('search_foreground') }"
											data-tooltip="ThemeEditor.SearchForeground"
										>
											Filter
										</div>
									</div>
									<div
										class="toolbar-item selected tooltipsource"
										data-bind="style:{ 'color' :  previewColor('search_sel_foreground') }"
										data-tooltip="ThemeEditor.SearchSelectedForeground"
									>
										<i
											class="material-icons tooltipsource"
											data-bind="style:{ 'color' :  previewColor('search_sel_foreground') }"
											data-tooltip="ThemeEditor.SearchSelectedForeground"
											>arrow_upward</i
										>Name
									</div>
								</div>
							</li>
							<div
								class="listSeparator tooltipsource"
								data-bind="style:{ 'border-color' :  previewColor('list_separator') }"
								data-tooltip="ThemeEditor.ViewListContentDivider"
							>
								<div data-bind="style:{ 'color' :  previewColor('list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('list_background') }"
								data-tooltip="ThemeEditor.ViewListContentBackground"
							>
								<i
									class="material-icons screen-2 tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>location_city</i
								>
								<div class="main-info-container">
									<span
										class="name tooltipsource"
										data-bind="style:{ 'color' :  previewColor('list_foreground') }"
										data-tooltip="ThemeEditor.ViewListContentForeground"
										>Apollo Apartment Building</span
									>
									<span
										class="street tooltipsource"
										data-bind="style:{ 'color' :  previewColor('list_foreground') }"
										data-tooltip="ThemeEditor.ViewListContentForeground"
										>1635 Snyder Avenue</span
									>
								</div>
								<span
									class="status tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_foreground') }"
									data-tooltip="ThemeEditor.ViewListContentForeground"
									>MA</span
								>
							</li>
							<div
								class="listSeparator tooltipsource"
								data-bind="style:{ 'border-color' :  previewColor('list_separator') }"
								data-tooltip="ThemeEditor.ViewListContentDivider"
							>
								<div data-bind="style:{ 'color' :  previewColor('list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('list_background') }"
								data-tooltip="ThemeEditor.ViewListContentBackground"
							>
								<i
									class="material-icons screen-2 tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>location_city</i
								>
								<div class="main-info-container">
									<span
										class="name tooltipsource"
										data-bind="style:{ 'color' :  previewColor('list_foreground') }"
										data-tooltip="ThemeEditor.ViewListContentForeground"
										>Art Shopping Mall</span
									>
									<span
										class="street tooltipsource"
										data-bind="style:{ 'color' :  previewColor('list_foreground') }"
										data-tooltip="ThemeEditor.ViewListContentForeground"
										>02114 William Cardinal O'Connel Way</span
									>
								</div>
								<span
									class="status tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_foreground') }"
									data-tooltip="ThemeEditor.ViewListContentForeground"
									>VT</span
								>
							</li>
							<div
								class="listSeparator tooltipsource"
								data-bind="style:{ 'border-color' :  previewColor('list_separator') }"
								data-tooltip="ThemeEditor.ViewListContentDivider"
							>
								<div data-bind="style:{ 'color' :  previewColor('list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('list_background') }"
								data-tooltip="ThemeEditor.ViewListContentBackground"
							>
								<i
									class="material-icons screen-2 tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>location_city</i
								>
								<div class="main-info-container">
									<span
										class="name tooltipsource"
										data-bind="style:{ 'color' :  previewColor('list_foreground') }"
										data-tooltip="ThemeEditor.ViewListContentForeground"
										>Blue Keys Hotel</span
									>
									<span
										class="street tooltipsource"
										data-bind="style:{ 'color' :  previewColor('list_foreground') }"
										data-tooltip="ThemeEditor.ViewListContentForeground"
										>02143 Prospect Hill Parkway</span
									>
								</div>
								<span
									class="status tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_foreground') }"
									data-tooltip="ThemeEditor.ViewListContentForeground"
									>MA</span
								>
							</li>
							<div
								class="listSeparator tooltipsource"
								data-bind="style:{ 'border-color' :  previewColor('list_separator') }"
								data-tooltip="ThemeEditor.ViewListContentDivider"
							>
								<div data-bind="style:{ 'color' :  previewColor('list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('list_background') }"
								data-tooltip="ThemeEditor.ViewListContentBackground"
							>
								<i
									class="material-icons screen-2 tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>location_city</i
								>
								<div class="main-info-container">
									<span
										class="name tooltipsource"
										data-bind="style:{ 'color' :  previewColor('list_foreground') }"
										data-tooltip="ThemeEditor.ViewListContentForeground"
										>Buders Building</span
									>
									<span
										class="street tooltipsource"
										data-bind="style:{ 'color' :  previewColor('list_foreground') }"
										data-tooltip="ThemeEditor.ViewListContentForeground"
										>02149 Woodland Street</span
									>
								</div>
								<span
									class="status tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_foreground') }"
									data-tooltip="ThemeEditor.ViewListContentForeground"
									>NY</span
								>
							</li>
							<div
								class="listSeparator tooltipsource"
								data-bind="style:{ 'border-color' :  previewColor('list_separator') }"
								data-tooltip="ThemeEditor.ViewListContentDivider"
							>
								<div data-bind="style:{ 'color' :  previewColor('list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="swiped tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('list_sel_background') }"
								data-tooltip="ThemeEditor.ViewListSelectedContentBackground"
							>
								<i
									class="material-icons screen-2 tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>location_city</i
								>
								<div class="main-info-container">
									<span
										class="name tooltipsource"
										data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
										data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
										>Conan Skyscraper</span
									>
									<span
										class="street tooltipsource"
										data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
										data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
										>02151 John Mooney Road</span
									>
								</div>
								<span
									class="status tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground'), 'margin-right' : '10px' }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>NJ</span
								>
								<div
									class="call-button tooltipsource"
									data-bind="style:{ 'background' :  previewColor('title_background') }"
									data-tooltip="ThemeEditor.TopAppBarBackground"
								>
									<span
										class="tooltipsource"
										data-bind="style:{ 'color' :  previewColor('title_foreground') }"
										data-tooltip="ThemeEditor.TopAppBarForeground"
										>Call</span
									>
								</div>
							</li>
							<div
								class="listSeparator tooltipsource"
								data-bind="style:{ 'border-color' :  previewColor('list_separator') }"
								data-tooltip="ThemeEditor.ViewListContentDivider"
							>
								<div data-bind="style:{ 'color' :  previewColor('list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('list_background') }"
								data-tooltip="ThemeEditor.ViewListContentBackground"
							>
								<i
									class="material-icons screen-2 tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>location_city</i
								>
								<div class="main-info-container">
									<span
										class="name tooltipsource"
										data-bind="style:{ 'color' :  previewColor('list_foreground') }"
										data-tooltip="ThemeEditor.ViewListContentForeground"
										>Crown Business Center</span
									>
									<span
										class="street tooltipsource"
										data-bind="style:{ 'color' :  previewColor('list_foreground') }"
										data-tooltip="ThemeEditor.ViewListContentForeground"
										>02151 Garfield Avenue</span
									>
								</div>
								<span
									class="status tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_foreground') }"
									data-tooltip="ThemeEditor.ViewListContentForeground"
									>NJ</span
								>
							</li>
							<div
								class="listSeparator tooltipsource"
								data-bind="style:{ 'border-color' :  previewColor('list_separator') }"
								data-tooltip="ThemeEditor.ViewListContentDivider"
							>
								<div data-bind="style:{ 'color' :  previewColor('list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('list_background') }"
								data-tooltip="ThemeEditor.ViewListContentBackground"
							>
								<i
									class="material-icons screen-2 tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>location_city</i
								>
								<div class="main-info-container">
									<span
										class="name tooltipsource"
										data-bind="style:{ 'color' :  previewColor('list_foreground') }"
										data-tooltip="ThemeEditor.ViewListContentForeground"
										>Elevator Zone</span
									>
									<span
										class="street tooltipsource"
										data-bind="style:{ 'color' :  previewColor('list_foreground') }"
										data-tooltip="ThemeEditor.ViewListContentForeground"
										>02149 Wellington Avenue</span
									>
								</div>
								<span
									class="status tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_foreground') }"
									data-tooltip="ThemeEditor.ViewListContentForeground"
									>MA</span
								>
							</li>
							<div
								class="listSeparator tooltipsource"
								data-bind="style:{ 'border-color' :  previewColor('list_separator') }"
								data-tooltip="ThemeEditor.ViewListContentDivider"
							>
								<div data-bind="style:{ 'color' :  previewColor('list_separator') }" class="clickableArea"></div>
							</div>
							<li
								class="tooltipsource"
								data-bind="style:{ 'background-color' :  previewColor('list_background') }"
								data-tooltip="ThemeEditor.ViewListContentBackground"
							>
								<i
									class="material-icons screen-2 tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_sel_foreground') }"
									data-tooltip="ThemeEditor.ViewListSelectedContentForeground"
									>location_city</i
								>
								<div class="main-info-container">
									<span
										class="name tooltipsource"
										data-bind="style:{ 'color' :  previewColor('list_foreground') }"
										data-tooltip="ThemeEditor.ViewListContentForeground"
										>Erigones</span
									>
									<span
										class="street tooltipsource"
										data-bind="style:{ 'color' :  previewColor('list_foreground') }"
										data-tooltip="ThemeEditor.ViewListContentForeground"
										>02143 Calvin Street</span
									>
								</div>
								<span
									class="status tooltipsource"
									data-bind="style:{ 'color' :  previewColor('list_foreground') }"
									data-tooltip="ThemeEditor.ViewListContentForeground"
									>VT</span
								>
							</li>
							<div
								class="listSeparator tooltipsource"
								data-bind="style:{ 'border-color' :  previewColor('list_separator') }"
								data-tooltip="ThemeEditor.ViewListContentDivider"
							>
								<div data-bind="style:{ 'color' :  previewColor('list_separator') }" class="clickableArea"></div>
							</div>
						</ul>
						<div class="bottom-menu " data-bind="style:{ 'background-color' : 'transparent' }"></div>
					</div>
					<div
						class="phone-screen last-screen tooltipsource"
						data-bind="style:{ 'background-color' :  previewColor('form_background') }"
						data-tooltip="ThemeEditor.FormBackground"
					>
						<div
							class="header-menu tooltipsource"
							data-bind="style:{ 'background-color' :  previewColor('title_background') }"
							data-tooltip="ThemeEditor.TopAppBarBackground"
						>
							<div class="status-bar">
								<i class="woodfordsprite icon-woodford_ThemeEditor_status_bar_left" data-bind="css:{hidden:!IsPhoneView()}"></i>
								<i class="woodfordsprite icon-woodford_ThemeEditor_status_bar_right"></i>
							</div>
							<div class="status-bar">
								<i
									class="material-icons arrow-back tooltipsource"
									data-bind="style:{ 'color' :  previewColor('title_foreground') }"
									data-tooltip="ThemeEditor.TopAppBarForeground"
								>
									arrow_back_ios
								</i>
								<h1
									class="tooltipsource"
									data-bind="style:{ 'color' :  previewColor('title_foreground') }"
									data-tooltip="ThemeEditor.TopAppBarForeground"
								>
									Conan Skyscraper
								</h1>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('title_foreground') }"
									data-tooltip="ThemeEditor.TopAppBarForeground"
								>
									save
								</i>
								<i
									class="material-icons tooltipsource"
									data-bind="style:{ 'color' :  previewColor('title_foreground') }"
									data-tooltip="ThemeEditor.TopAppBarForeground"
								>
									menu
								</i>
							</div>
						</div>
						<form class="screen-3-form">
							<div
								class="card-wrapper tooltipsource"
								data-bind="style:{'background-color' : previewColor('card_background'), 'border-color' : previewColor('card_border')}"
								data-tooltip="ThemeEditor.CardBackground"
							>
								<div
									class="card-header-wrapper"
									data-bind="style:{ 'background-color' : previewColor('card_background'), 'border-color' : previewColor('card_border')}"
								>
									<i
										class="material-icons tooltipsource"
										data-bind="style:{ 'color' :  previewColor('card_foreground') }"
										data-tooltip="ThemeEditor.CardForeground"
									>
										info
									</i>
									<div
										class="card-header-text tooltipsource"
										data-bind="style:{ 'color' :  previewColor('card_foreground') }"
										data-tooltip="ThemeEditor.CardForeground"
									>
										Info
									</div>
									<i
										class="material-icons tooltipsource"
										data-bind="style:{ 'color' :  previewColor('card_interactive_foreground'), 'margin-left': 'auto' }"
										data-tooltip="ThemeEditor.CardInteractiveItems"
									>
										keyboard_arrow_up
									</i>
								</div>
								<div class="card-content-wrapper">
									<section
										class="tooltipsource"
										data-bind="style: { 'background-color': previewColor('form_item_background')}"
										data-tooltip="ThemeEditor.FormComponentBackground"
									>
										<div
											class="section-wrapper tooltipsource"
											data-bind="style: { 'background-color': previewColor('form_item_background')}"
											data-tooltip="ThemeEditor.FormComponentBackground"
										>
											<div class="input-title" data-bind="style:{ 'background-color' :  previewColor('form_item_background') }">
												<div
													class="tooltipsource"
													data-bind="style:{ 'color' :  previewColor('form_item_label_foreground') }"
													data-tooltip="ThemeEditor.FormLabelText"
												>
													Primary contact
												</div>
											</div>
											<div
												class="input-wrapper"
												data-bind="style:{ 'background-color' :  previewColor('form_item_editor_background'), 'border-color': previewColor('form_item_border')}"
											>
												<div
													class="input-info tooltipsource"
													data-bind="style:{ 'background-color' :  previewColor('form_item_editor_background') }"
													data-tooltip="ThemeEditor.FormInputBackground"
												>
													<p
														class="tooltipsource"
														data-bind="style:{ 'color' :  previewColor('form_item_link'), 'text-decoration': 'underline' }"
														data-tooltip="ThemeEditor.FormInputLinkText"
													>
														support@conanskyscraper.com
													</p>
													<i
														class="material-icons tooltipsource"
														data-bind="style:{ 'color' :  previewColor('form_item_button'), 'margin-left': 'auto' }"
														data-tooltip="ThemeEditor.FormInputIconButton"
													>
														arrow_drop_down
													</i>
												</div>
											</div>
										</div>
									</section>
									<section
										class="tooltipsource"
										data-bind="style: { 'background-color': previewColor('form_item_background')}"
										data-tooltip="ThemeEditor.FormComponentBackground"
									>
										<div
											class="section-wrapper tooltipsource"
											data-bind="style: { 'background-color': previewColor('form_item_background')}"
											data-tooltip="ThemeEditor.FormComponentBackground"
										>
											<div class="input-title" data-bind="style:{ 'background-color' :  previewColor('form_item_background') }">
												<div
													class="tooltipsource"
													data-bind="style:{ 'color' : previewColor('form_item_label_foreground') }"
													data-tooltip="ThemeEditor.FormLabelText"
												>
													Email (disabled field)
												</div>
											</div>
											<div
												class="input-wrapper"
												data-bind="style:{ 'background-color' :  previewColor('form_item_editor_background'), 'border-color': previewColor('form_item_border') }"
											>
												<div
													class="input-info tooltipsource"
													data-bind="style:{ 'background-color' :  previewColor('form_item_editor_background') }"
													data-tooltip="ThemeEditor.FormInputBackground"
												>
													<div
														class="tooltipsource"
														data-bind="style:{ 'color' : previewColor('form_item_disabled') }"
														data-tooltip="ThemeEditor.FormInputDisabledText"
													>
														support@conanskyscraper.com
													</div>
													<i
														class="material-icons tooltipsource"
														data-bind="style:{ 'color' :  previewColor('form_item_button'), 'margin-left': 'auto' }"
														data-tooltip="ThemeEditor.FormInputIconButton"
														>mail_outline</i
													>
												</div>
											</div>
										</div>
									</section>
									<section
										class="tooltipsource"
										data-bind="style: { 'background-color': previewColor('form_item_background')}"
										data-tooltip="ThemeEditor.FormComponentBackground"
									>
										<div
											class="section-wrapper tooltipsource"
											data-bind="style: { 'background-color': previewColor('form_item_background')}"
											data-tooltip="ThemeEditor.FormComponentBackground"
										>
											<div class="input-title" data-bind="style:{ 'background-color' :  previewColor('form_item_background') }">
												<div
													class="tooltipsource"
													data-bind="style:{ 'color' : previewColor('form_error') }"
													data-tooltip="ThemeEditor.FormComponentError"
												>
													Phone number (error)
												</div>
											</div>
											<div
												class="input-wrapper"
												data-bind="style:{ 'background-color' :  previewColor('form_item_editor_background'), 'border-color': previewColor('form_item_border') }"
											>
												<div
													class="input-info tooltipsource"
													data-bind="style:{ 'background-color' :  previewColor('form_item_editor_background') }"
													data-tooltip="ThemeEditor.FormInputBackground"
												>
													<p
														class="tooltipsource"
														data-bind="style:{ 'color' : previewColor('form_item_foreground') }"
														data-tooltip="ThemeEditor.FormInputEnabledText"
													>
														735-8546
													</p>
												</div>
											</div>
										</div>
									</section>
									<div
										class="form-separator tooltipsource"
										data-bind="style: { 'background-color': previewColor('form_item_separator')}"
										data-tooltip="ThemeEditor.FormComponentSeparator"
									></div>
									<section
										class="tooltipsource"
										data-bind="style: { 'background-color': previewColor('form_item_background')}"
										data-tooltip="ThemeEditor.FormComponentBackground"
									>
										<div
											class="section-wrapper tooltipsource"
											data-bind="style: { 'background-color': previewColor('form_item_background')}"
											data-tooltip="ThemeEditor.FormComponentBackground"
										>
											<div class="input-title" data-bind="style:{ 'background-color' :  previewColor('form_item_background') }">
												<div
													class="tooltipsource"
													data-bind="style:{ 'color' : previewColor('form_item_label_foreground') }"
													data-tooltip="ThemeEditor.FormLabelText"
												>
													Relationship
												</div>
											</div>
											<div
												class="multi-select-wrapper"
												data-bind="style:{ 'background-color' :  previewColor('form_item_background'), 'border-color': previewColor('form_item_border') }"
											>
												<div
													class="multi-select-input tooltipsource"
													data-bind="style:{ 'background-color' :  previewColor('form_item_selected_background'), 'border-color': previewColor('form_item_border') }"
													data-tooltip="ThemeEditor.FormInputSelectedBackground"
												>
													<i
														class="material-icons tooltipsource"
														data-bind="style:{ 'color' :  previewColor('form_item_button')}"
														data-tooltip="ThemeEditor.FormInputIconButton"
														>check</i
													>
													<div
														class="multi-select-input-text tooltipsource"
														data-bind="style:{ 'color' :  previewColor('form_item_selected_foreground') }"
														data-tooltip="ThemeEditor.FormInputSelectedText"
													>
														<p>Customer</p>
														<p></p>
													</div>
												</div>
												<div
													class="multi-select-input tooltipsource"
													data-bind="style:{ 'background-color' :  previewColor('form_item_editor_background'),'border-color': previewColor('form_item_border') }"
													data-tooltip="ThemeEditor.FormInputBackground"
												>
													<div
														class="multi-select-input-text tooltipsource"
														data-bind="style:{ 'color' : previewColor('form_item_foreground') }"
														data-tooltip="ThemeEditor.FormInputEnabledText"
													>
														<p>Partner</p>
														<p></p>
													</div>
												</div>
												<div
													class="multi-select-input tooltipsource"
													data-bind="style:{ 'background-color' :  previewColor('form_item_editor_background'), 'border-color': previewColor('form_item_border') }"
													data-tooltip="ThemeEditor.FormInputBackground"
												>
													<div
														class="multi-select-input-text tooltipsource"
														data-bind="style:{ 'color' : previewColor('form_item_foreground') }"
														data-tooltip="ThemeEditor.FormInputEnabledText"
													>
														<p>Investor</p>
														<p></p>
													</div>
												</div>
											</div>
										</div>
									</section>
									<section
										class="tooltipsource"
										data-bind="style: { 'background-color': previewColor('form_item_background')}"
										data-tooltip="ThemeEditor.FormComponentBackground"
									>
										<div
											class="section-wrapper tooltipsource"
											data-bind="style: { 'background-color': previewColor('form_item_background')}"
											data-tooltip="ThemeEditor.FormComponentBackground"
										>
											<div class="input-title" data-bind="style:{ 'background-color' :  previewColor('form_item_background') }">
												<div
													class="tooltipsource"
													data-bind="style:{ 'color' : previewColor('form_item_label_foreground') }"
													data-tooltip="ThemeEditor.FormLabelText"
												>
													Languages
												</div>
											</div>
											<div
												class="chips-wrapper tooltipsource"
												data-bind="style:{ 'background-color' :  previewColor('form_item_editor_background'), 'border-color': previewColor('form_item_border') }"
												data-tooltip="ThemeEditor.FormInputBackground"
											>
												<div
													class="chip tooltipsource"
													data-bind="style:{ 'background-color' :  previewColor('form_item_background') }"
													data-tooltip="ThemeEditor.FormComponentBackground"
												>
													<p
														class="tooltipsource"
														data-bind="style:{ 'color' : previewColor('form_item_foreground'), 'background-color' : previewColor('form_item_background') }"
														data-tooltip="ThemeEditor.FormInputEnabledText"
													>
														French
													</p>
													<i
														class="material-icons tooltipsource"
														data-bind="style:{ 'color' :  previewColor('form_item_button') }"
														data-tooltip="ThemeEditor.FormInputIconButton"
														>close</i
													>
												</div>
												<div
													class="chip tooltipsource"
													data-bind="style:{ 'background-color' :  previewColor('form_item_background') }"
													data-tooltip="ThemeEditor.FormComponentBackground"
												>
													<p
														class="tooltipsource"
														data-bind="style:{ 'color' : previewColor('form_item_foreground'), 'background-color' : previewColor('form_item_background') }"
														data-tooltip="ThemeEditor.FormInputEnabledText"
													>
														English
													</p>
													<i
														class="material-icons tooltipsource"
														data-bind="style:{ 'color' :  previewColor('form_item_button') }"
														data-tooltip="ThemeEditor.FormInputIconButton"
														>close</i
													>
												</div>
											</div>
											<div
												class="supporting-text tooltipsource"
												data-bind="style:{ 'color': previewColor('form_item_supporting_text_foreground')}"
												data-tooltip="ThemeEditor.FormSupportingText"
											>
												Select the languages used to communicate with this account.
											</div>
										</div>
									</section>
								</div>
							</div>
							<div
								class="card-wrapper"
								data-bind="style:{ 'border-color' : previewColor('card_border'), 'background-color' : previewColor('card_background')}"
							>
								<section>
									<div
										class="card-header-closed tooltipsource"
										data-bind="style:{ 'background-color' : previewColor('card_background')}"
										data-tooltip="ThemeEditor.CardBackground"
									>
										<i
											class="material-icons tooltipsource"
											data-bind="style:{ 'color' :  previewColor('card_foreground') }"
											data-tooltip="ThemeEditor.CardForeground"
										>
											account_circle</i
										>
										<div class="text-wrapper">
											<div
												class="card-small-text tooltipsource"
												data-bind="style:{ 'color' :  previewColor('card_foreground') }"
												data-tooltip="ThemeEditor.CardForeground"
											>
												Contacts
											</div>
											<div
												class="card-main-text tooltipsource"
												data-bind="style:{ 'color' :  previewColor('card_interactive_foreground') }"
												data-tooltip="ThemeEditor.CardInteractiveItems"
											>
												All My Contacts
												<i
													class="material-icons tooltipsource"
													data-bind="style:{ 'color' :  previewColor('card_interactive_foreground') }"
													data-tooltip="ThemeEditor.CardInteractiveItems"
												>
													arrow_drop_down
												</i>
											</div>
										</div>
										<i
											class="material-icons image tooltipsource"
											data-bind="style:{ 'color' :  previewColor('card_interactive_foreground'), 'margin-left' : 'auto' }"
											data-tooltip="ThemeEditor.CardInteractiveItems"
										>
											location_on
										</i>
										<i
											class="material-icons image tooltipsource"
											data-bind="style:{ 'color' : previewColor('card_interactive_foreground') }"
											data-tooltip="ThemeEditor.CardInteractiveItems"
										>
											add
										</i>
										<div class="separator"></div>
										<i
											class="material-icons image tooltipsource"
											data-bind="style:{ 'color' :  previewColor('card_interactive_foreground') }"
											data-tooltip="ThemeEditor.CardInteractiveItems"
										>
											keyboard_arrow_down
										</i>
									</div>
								</section>
							</div>
						</form>
						<div
							class="bottom-menu tooltipsource"
							data-bind="style:{ 'background-color' :  previewColor('tab_background') }"
							data-tooltip="ThemeEditor.TabHeaderBackground"
						>
							<i
								class="material-icons selected tooltipsource"
								data-bind="style:{ 'color' :  previewColor('tab_sel_foreground') }"
								data-tooltip="ThemeEditor.TabHeaderSelectedForeground"
							>
								info
							</i>
							<i
								class="material-icons tooltipsource"
								data-bind="style:{ 'color' :  previewColor('tab_foreground') }"
								data-tooltip="ThemeEditor.TabHeaderForeground"
							>
								map
							</i>
							<i
								class="material-icons tooltipsource"
								data-bind="style:{ 'color' :  previewColor('tab_foreground') }"
								data-tooltip="ThemeEditor.TabHeaderForeground"
							>
								location_on
							</i>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="colors-side-menu">
			<header class="section-header-main">Color</header>
			<div class="color-section-wrapper">
				<section class="colors-menu-section">
					<div class="color-side-panel-row">
						<span>Brand color</span>
						<div class="transparent-background-container">
							<span class="color-container" data-bind="style:{ 'background-color': getCssColor(brandColor())}, click: onBrandColorClick"></span>
						</div>
					</div>
					<div class="color-side-panel-row">
						<span>Theme</span>
						<div class="segmented-buttons" data-bind="css: {'theme-dark-light-disabled': !tokenizedTheme()}">
							<div
								class="segmented-button"
								data-bind="attr: { 'class': !isDarkTheme() && tokenizedTheme() ? 'segmented-button-on': 'segmented-button-off' }, click: tokenizedTheme() ? () => isDarkTheme(false) : null"
							>
								Light
							</div>
							<div
								class="segmented-button"
								data-bind="attr: { 'class': isDarkTheme() && tokenizedTheme() ? 'segmented-button-on': 'segmented-button-off' }, click: tokenizedTheme() ? () => isDarkTheme(true) : null"
							>
								Dark
							</div>
						</div>
					</div>
					<div class="color-side-panel-row">
						<span>Advanced color settings</span>
						<label class="toggle">
							<input type="checkbox" data-bind="checked: advancedColorsVisible" />
							<span class="slider"></span>
						</label>
					</div>

					<div class="theme-advanced-colors">
						<!-- ko if: advancedColorsVisible() -->
						<!-- ko foreach: { data: visibleThemeColors, noChildContext: true, as: 'subGroupOrColorGroup'} -->
						<div data-bind="text: subGroupOrColorGroup.label" class="color-group-label"></div>
						<!-- ko if: ('groups' in subGroupOrColorGroup) -->
						<!-- ko foreach: { data: subGroupOrColorGroup.groups, noChildContext: true, as: 'colorGroup' } -->
						<div class="subgroup-label" data-bind="text: colorGroup.label, visible: colorGroup.label != null"></div>
						<!-- ko template: {name: "colorGroup", data: { colors: colorGroup.colors, tokenToLabelMap: tokenToLabelMap, getCssColor: getCssColor, onColorClick: onColorClick.bind($data), isToken: isToken }} --><!-- /ko -->
						<!-- /ko -->
						<!-- /ko -->
						<!-- ko ifnot: ('groups' in subGroupOrColorGroup) -->
						<!-- ko template: {name: "colorGroup", data: { colors: subGroupOrColorGroup.colors, tokenToLabelMap: tokenToLabelMap, getCssColor: getCssColor, onColorClick: onColorClick.bind($data), isToken: isToken } } --><!-- /ko -->
						<!-- /ko -->
						<!-- /ko -->
						<!-- /ko -->
					</div>
				</section>
			</div>
		</div>
	</div>
</script>

<script id="colorGroup" type="text/html">
	<div class="color-group-wrapper">
		<!-- ko foreach: { data: colors, as: 'propertyColor', noChildContext: true } -->
		<div class="color-wrapper">
			<span data-bind="text: propertyColor.label"></span>
			<div class="token-wrapper">
				<!-- ko if: isToken(propertyColor.color()) -->
				<span data-bind="text: tokenToLabelMap[propertyColor.color().name()]"></span>
				<!-- /ko -->
				<div class="transparent-background-container">
					<span
						class="color-container"
						data-bind="style:{ 'background-color': getCssColor(propertyColor.color())}, click: () => onColorClick(propertyColor), attr: { 'data-testid': $parent.dataTestId(propertyColor.label) }"
					></span>
				</div>
			</div>
		</div>
		<!-- /ko -->
	</div>
</script>
<!-- BEGIN: tmplVerifyEmailDialog -->
<script id="tmplVerifyEmailDialog" type="text/html">
	<div style="padding-bottom:20px">
		An email with a verification code has been sent to <span data-bind="text: Email"></span>. Please enter the code here:
	</div>
	<input data-bind="value: _code" />
</script>
<!-- END: tmplVerifyEmailDialog -->
<!--
		 tmplWarningOptionsDialog Editor Template
	-->
<script id="tmplWarningOptionsDialog" type="text/html">
	<div>
		<table width="100%" cellpadding="4" cellspacing="0">
			<tr>
				<td width="15"><input type="checkbox" name="warn001" id="warn001" data-bind="checked: warn001OptionValue" /></td>
				<td>001</td>
				<td>DEMO customization used.</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="warn002" id="warn002" data-bind="checked: warn002OptionValue" /></td>
				<td>002</td>
				<td>Old customization used.</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="warn003" id="warn003" data-bind="checked: warn003OptionValue" /></td>
				<td>003</td>
				<td>FileDownload: Slow.</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="warn004" id="warn004" data-bind="checked: warn004OptionValue" /></td>
				<td>004</td>
				<td>
					Minor perf problem (unneeded downloads): 404 records were first downloaded, but they were later deleted as they did not match SyncFilter at
					the client. Problem is usually caused by inconsistent links in the SyncFilter definition.
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="warn005" id="warn005" data-bind="checked: warn005OptionValue" /></td>
				<td>005</td>
				<td>
					Major perf problem (unneeded downloads): 57616 records were first downloaded, but they were later deleted as they did not match SyncFilter
					at the client. Problem is usually caused by inconsistent links in the SyncFilter definition.
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="warn006" id="warn006" data-bind="checked: warn006OptionValue" /></td>
				<td>006</td>
				<td>
					Downloaded data are incomplete: Download of some entities was interrupted (Warning 'max # of objects received'). Cleanup deleted additional
					12345 records which became orphaned (probably) due to missing records.
				</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="warn007" id="warn007" data-bind="checked: warn007OptionValue" /></td>
				<td>007</td>
				<td>Long record cleanup.</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="warn008" id="warn008" data-bind="checked: warn008OptionValue" /></td>
				<td>008</td>
				<td>Many deletes in record cleanup.</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="warn009" id="warn009" data-bind="checked: warn009OptionValue" /></td>
				<td>009</td>
				<td>Long documents cleanup.</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="warn010" id="warn010" data-bind="checked: warn010OptionValue" /></td>
				<td>010</td>
				<td>Many deletes in documents cleanup.</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="warn011" id="warn011" data-bind="checked: warn011OptionValue" /></td>
				<td>011</td>
				<td>Slow entity image download.</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="warn012" id="warn012" data-bind="checked: warn012OptionValue" /></td>
				<td>012</td>
				<td>Long time spent in MarketingList download.</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="warn013" id="warn013" data-bind="checked: warn013OptionValue" /></td>
				<td>013</td>
				<td>Incomplete entities: account contact.</td>
			</tr>
			<tr>
				<td><input type="checkbox" name="warn014" id="warn014" data-bind="checked: warn014OptionValue" /></td>
				<td>014</td>
				<td>Other warning messages.</td>
			</tr>
		</table>
	</div>
</script>
<!-- BEGIN: tmplEditFilterDialog-->
<script id="EntityConditionGroupNode" type="text/html">
	<div class="filterEntityGroupNode">
		<div
			class="filterEntityGroupText"
			data-bind="css: { filterNodeSelected: IsSelected(), filterNodeFocused: IsFocused() }, click: Clicked"
			style="display:flex;flex-direction:row"
		>
			<div data-bind="click:MenuClicked" style="flex:0 0 auto;padding:0px 5px; cursor:pointer">&#x25BC;</div>
			<div data-bind="text: LabelProperty, click:LinkClicked" style="flex:0 0 auto; text-decoration:underline; cursor:pointer"></div>
			<div style="flex:1 1 auto"></div>
			<div
				data-bind="text: LinkTypeProperty, click:LinkTypeClicked, visible:ShowLink"
				style="flex:0 0 auto; text-decoration:underline; cursor:pointer"
			></div>
		</div>
		<div class="filterEntityGroupChildren">
			<!-- ko foreach: ItemsProperty -->
			<!-- ko template: { name: $data.Template, data: $data } --><!-- /ko -->
			<!-- /ko -->
		</div>
	</div>
</script>

<script id="ConditionGroupNode" type="text/html">
	<div class="filterGroupNode">
		<div class="filterGroupText" data-bind="css: { filterNodeSelected: IsSelected(), filterNodeFocused: IsFocused() }, click: Clicked">
			<span data-bind="text: OperatorProperty"></span>
			<span data-bind="click:MenuClicked" style="padding:0px 5px; text-decoration:none">&#x25BC;</span>
		</div>
		<div class="filterGroupChildren">
			<!-- ko foreach: ItemsProperty -->
			<!-- ko template: { name: $data.Template, data: $data } --><!-- /ko -->
			<!-- /ko -->
		</div>
	</div>
</script>

<script id="ConditionNode" type="text/html">
	<div class="filterConditionNode" data-bind="css: { filterNodeSelected: IsSelected(), filterNodeFocused: IsFocused() }, click: Clicked">
		<div class="filterConditionElement">
			<span data-bind="click:MenuClicked" style="padding:0px 5px; text-decoration:none">&#x25BC;</span
			><span data-bind="text:PropertyLabelProperty, click: PropertyClicked">AttributeName</span>
		</div>
		<div class="filterConditionElement"><span data-bind="text:OperatorLabelProperty, click: OperatorClicked">Operator</span></div>
		<div class="filterConditionElement">
			<input
				type="text"
				data-bind="visible:EditorTypeProperty()==='StringEditor', valueEnter:ValueProperty"
				style="width:100%"
				placeholder="Enter Text"
			/>
			<input
				type="number"
				data-bind="visible:EditorTypeProperty()==='NumericEditor', valueEnter:ValueProperty"
				style="width:100%"
				placeholder="Enter Number"
			/>
			<input
				type="date"
				data-bind="visible:EditorTypeProperty()==='DateTimeEditor', value:ValueProperty"
				style="width:100%"
				pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"
				placeholder="YYYY-MM-DD"
			/>
			<div data-bind="visible:EditorTypeProperty()==='LookupEditor'" class="filterLookupEditor">
				<input type="text" readonly="readonly" data-bind="value:ValueLabelProperty" style="flex:1 1 100%;width:60px" />
				<button style="flex:0 0 auto" data-bind="click: LookupClicked">...</button>
			</div>
		</div>
	</div>
</script>
<script id="tmplEditFilterDialog" type="text/html">
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div style="flex:1 1 auto; align-items:flex-start; overflow:auto" class="flexDiv">
		<!--<div data-bind="template: { name: 'EntityConditionGroupNode', data: RootNode}"></div>-->
		<!-- ko template: { name: 'EntityConditionGroupNode', data: RootNode } --><!-- /ko -->
	</div>
</script>
<!-- tmplSelectEntityDialog -->
<script id="tmplSelectEntityDialog" type="text/html">
	<div style="display:flex; flex-direction:column; flex:1 1 100%">
		<div style="flex: 0 0 auto; display:flex; align-items:center">
			<select
				data-bind="options:Entities, optionsText: 'DisplayName', value:SelectedEntity, visible:Entities.length>1"
				style="flex:1 1 50%; padding:1px"
			></select>
			<input data-bind="value:SearchText, valueUpdate: 'afterkeydown'" style="flex:1 1 50%" placeholder="Search" />
		</div>
		<div data-bind="grid: Grid" data-definitiononly="false" style="flex: 1 1 100%">
			<div data-columnname="Name" data-flex="1 0 150px" data-binding="Name" data-horalign="left" data-sort="ascending"></div>
		</div>
		<div style="flex: 0 0 auto; display:flex; align-items:center">
			<button data-bind="enable:PageIndex()>1, click:OnStartClicked">|&lt;</button>
			<button data-bind="enable:PageIndex()>1, click:OnBackClicked">&lt;</button>
			<div data-bind="text:PageIndex" style="margin:3px;"></div>
			<button data-bind="enable:HasMorePages, click:OnNextClicked">&gt;</button>
		</div>
	</div>
</script>
<!-- BEGIN: tmplSelectPicklistDialog-->
<script id="tmplSelectPicklistDialog" type="text/html">
	<!--<div style="flex: 0 0 auto; height: 85px; position: relative;" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}" />-->
	<div style="display:flex; flex-direction:row;flex:1 1 auto;overflow:hidden">
		<div style="flex:0 0 50%;display:flex;flex-direction:column;overflow-x:hidden">
			<div style="padding:3px;color:black; background:linear-gradient(white, #eeeeee);">Selected</div>
			<div style="overflow:auto;flex:1 1 auto">
				<!-- ko foreach: SelectedItems -->
				<div
					style="padding:3px;"
					data-bind="text:Label, multiClick: $parent.OnSelectedItemClick.bind($parent), style: {backgroundColor: (IsSelected() ? '#9ecfe9':'')}, attr: { 'data-testid': $parent.dataTestId(Label)}"
				></div>
				<!-- /ko -->
			</div>
		</div>
		<div style="flex:0 0 50%;display:flex;flex-direction:column;border-left:1px solid #ccc;overflow-x:hidden">
			<div style="padding:3px;color:black; background:linear-gradient(white, #eeeeee);">Available</div>
			<div style="overflow:auto;flex:1 1 auto">
				<!-- ko foreach: AvailableItems -->
				<div
					style="padding:3px;"
					data-bind="text:Label, multiClick: $parent.OnAvailableItemClick.bind($parent), style: {backgroundColor: (IsSelected() ? '#9ecfe9':'')}, attr: { 'data-testid': $parent.dataTestId(Label)}"
				></div>
				<!-- /ko -->
			</div>
		</div>
	</div>
</script>
<!-- END: tmplSelectPicklistDialog-->
<!-- tmplSelectVariableDialog -->
<script id="tmplSelectVariableDialog" type="text/html">
	<div style="display:flex; flex-direction:column; flex:1 1 100%">
		<div style="flex: 0 0 auto; margin:2px; display:flex; align-items:center" data-bind="visible:EntityListCombo.length > 1">
			<select data-bind="options:EntityListCombo, optionsText: 'DisplayName', value:EntityListSelection" style="flex:1 1 50%; padding:1px"></select>
			<!--<input data-bind="value:SearchText, valueUpdate: 'afterkeydown'" style="flex:1 1 50%" placeholder="Search"/>-->
		</div>
		<div data-bind="grid: Grid" data-definitiononly="false" style="flex: 1 1 100%">
			<div
				data-columnname="Display Name"
				data-flex="1 0 150px"
				data-binding="DisplayName"
				data-horalign="left"
				data-sortable="true"
				data-sort="ascending"
			></div>
			<div
				data-columnname="Name"
				data-flex="1 0 150px"
				data-binding="CamelCase"
				data-horalign="left"
				data-sortable="true"
				data-sort="ascending"
			></div>
			<div
				data-columnname="Type"
				data-flex="1 0 150px"
				data-binding="TypeLabel"
				data-horalign="left"
				data-sortable="true"
				data-sort="ascending"
			></div>
		</div>
	</div>
</script>
<!-- BEGIN: tmplAdvancedReportConfig-->
<script id="tmplAdvancedReportConfig" type="text/html">
	<div class="project__option">
		<div class="project__option--title"><span>Select default report by</span></div>
		<div class="project__option--columns">
			<div class="project__option--column">
				<select type="text" data-bind="options:availableReportsType,value:reportType"></select>
				<div class="switch">
					<label class="project__option--title">Use a filter to select a report</label>
				</div>
			</div>
			<div class="project__option--column">
				<!-- ko if: reportType()==="ID" -->
				<button data-bind="click:showReportDialog" class="btn-touch select-report">
					Select report <span data-bind="text:reportId() ? '('+ reportId() + ')' : ''"></span>
				</button>
				<!-- /ko -->
				<!-- ko if: reportType()==="Name" -->
				<input type="text" data-bind="value:reportId" />
				<!-- /ko -->
				<!-- ko if: filter().length===0 -->
				<button data-bind="click:openFilterDialog" class="btn-touch btn-small">Define filter</button>
				<!-- /ko -->
				<!-- ko if: filter().length>0 -->
				<div class="edit-filter">
					<button data-bind="click:openFilterDialog" class="btn-touch btn-small">Edit filter</button>
					<button data-bind="click:clearFilter" class="btn-touch btn-small">Clear</button>
				</div>
				<!-- /ko -->
			</div>
		</div>
	</div>
	<div class="project__option">
		<div class="project__option--columns">
			<div class="project__option--column">
				<div class="project__option--title"><span>Output file name</span></div>
				<div class="project__option">
					<input type="text" data-bind="value:reportName" />
				</div>
			</div>
			<div class="project__option--column">
				<div class="project__option--title"><span>Save report to entity</span></div>
				<div class="project__option">
					<select type="text" data-bind="options:availableAnnotations,value:attachmentType"></select>
				</div>
			</div>
		</div>
	</div>
	<div class="project__option">
		<div class="project__option--title"><span>Format</span></div>
		<div class="project__option--group">
			<!-- ko foreach: availableFormats -->
			<div class="project__option--checkbox">
				<input type="checkbox" data-bind="value:$data, checked:$parent.chosenFormats,click: $parent.checkFormats.bind($data,$parent)" />
				<label data-bind="text: $data === '*' ? 'All' : $data"></label>
			</div>
			<!-- /ko -->
		</div>
	</div>
	<div class="project__option">
		<div class="project__option--title"><span>Commands</span></div>
		<div class="project__option--group">
			<!-- ko foreach: availableCommands -->
			<div class="project__option--checkbox">
				<input type="checkbox" data-bind="value:$data,checked:$parent.chosenCommands,click: $parent.checkCommands.bind($data,$parent)" />
				<label data-bind="text: $data === '*' ? 'All' : $data"></label>
			</div>
			<!-- /ko -->
		</div>
	</div>
	<div class="project__option">
		<div class="project__option--columns">
			<div class="project__option--column half-element">
				<div class="project__option--title"><span>Immediate action</span></div>
				<div class="project__option">
					<select type="text" data-bind="options:availableImmediateAction,value:immediateAction"></select>
				</div>
			</div>
		</div>
	</div>
	<div class="project__option">
		<div class="project__option--columns">
			<div class="project__option--column">
				<div class="switch">
					<input type="checkbox" id="autoRun" class="switch__input" data-bind="checked: autoRun" />
					<label for="autoRun" class="switch__label">Auto run</label>
				</div>
			</div>
			<div class="project__option--column">
				<div class="switch">
					<input type="checkbox" id="autoSaveSignedDoc" class="switch__input" data-bind="checked: autoSaveSignedDoc" />
					<label for="autoSaveSignedDoc" class="switch__label">Automatically save signed reports</label>
				</div>
			</div>
		</div>
	</div>
</script>
<!-- END: tmplAdvancedReportConfig-->
<!-- BEGIN: tmplSelectViewsDialog-->
<script id="tmplSelectViewsDialog" type="text/html">
	<div style="flex: 0 0 auto; display:flex">
		<!-- ko foreach: Tabbar -->
		<div class="tabControlItem" data-bind="css: { tabControlItemSelected: Selected() }, click: Clicked, visible: Visible">
			<span style="padding:0.3em" data-bind="text: Name"></span>
		</div>
		<!-- /ko -->
	</div>
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===0, template: { name: 'tmplSelectViewsControl', data: ViewsControl}"
	></div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===1, template: { name: 'tmplSelectViewsControl', data: LookupViews}"
	></div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===2, template: { name: 'tmplSelectViewsControl', data: ChartsControl}"
	></div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===3, template: { name: 'tmplCalendarSetupControl', data: Calendar}"
	></div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===4, template: { name: 'tmplMapSetupControl', data: Map}"
	></div>
	<div style="flex:1 1 auto; flex-direction:column" class="flexDiv" data-bind="visible: SelectedTabIndex()===5">
		<b>Actions</b>
		<label data-bind="visible:AllowAdd.IsVisible"
			><input type="checkbox" data-bind="checked: AllowAdd.IsChecked" /><span data-bind="text: AllowAdd.Label"></span
		></label>
		<label data-bind="visible:AllowInlineAdd.IsVisible"
			><input type="checkbox" data-bind="checked: AllowInlineAdd.IsChecked" /><span data-bind="text: AllowInlineAdd.Label"></span
		></label>
		<label data-bind="visible:AllowExisting.IsVisible"
			><input type="checkbox" data-bind="checked: AllowExisting.IsChecked" /><span data-bind="text: AllowExisting.Label"></span
		></label>
		<label data-bind="visible:AllowMultipleExisting.IsVisible"
			><input type="checkbox" data-bind="checked: AllowMultipleExisting.IsChecked" /><span data-bind="text: AllowMultipleExisting.Label"></span
		></label>
		<!-- ko foreach: DocActions -->
		<label><input type="checkbox" data-bind="checked: IsChecked" /><span data-bind="text: Label"></span></label>
		<!-- /ko -->
		<br />
		<b>Controls</b>
		<label data-bind="visible:AllowSearch.IsVisible"
			><input type="checkbox" data-bind="checked: AllowSearch.IsChecked" /><span data-bind="text: AllowSearch.Label"></span
		></label>
		<label data-bind="visible:AllowFlexiSearch.IsVisible"
			><input type="checkbox" data-bind="checked: AllowFlexiSearch.IsChecked" /><span data-bind="text: AllowFlexiSearch.Label"></span
		></label>
		<label data-bind="visible:AllowRowButtons.IsVisible"
			><input type="checkbox" data-bind="checked: AllowRowButtons.IsChecked" /><span data-bind="text: AllowRowButtons.Label"></span
		></label>
		<label data-bind="visible:TrackParentEditable.IsVisible"
			><input type="checkbox" data-bind="checked: TrackParentEditable.IsChecked" /><span data-bind="text: TrackParentEditable.Label"></span
		></label>
		<label data-bind="visible:RaiseChangeEvent.IsVisible"
			><input type="checkbox" data-bind="checked: RaiseChangeEvent.IsChecked" /><span data-bind="text: RaiseChangeEvent.Label"></span
		></label>
		<label data-bind="visible:AllowList.IsVisible"
			><input type="checkbox" data-bind="checked: AllowList.IsChecked" /><span data-bind="text: AllowList.Label"></span
		></label>
		<label data-bind="visible:AllowMap.IsVisible"
			><input type="checkbox" data-bind="checked: AllowMap.IsChecked" /><span data-bind="text: AllowMap.Label"></span
		></label>
		<label data-bind="visible:AllowChart.IsVisible"
			><input type="checkbox" data-bind="checked: AllowChart.IsChecked" /><span data-bind="text: AllowChart.Label"></span
		></label>
		<label data-bind="visible:AllowCalendar.IsVisible"
			><input type="checkbox" data-bind="checked: AllowCalendar.IsChecked" /><span data-bind="text: AllowCalendar.Label"></span
		></label>
		<label data-bind="visible:AllowList.IsVisible"
			>Initial Control:<select data-bind="value: InitialControl">
				<option value="0">List</option>
				<option value="1">Map</option>
				<option value="2">Chart</option>
				<option value="3">Calendar</option>
			</select></label
		>
		<br />
		<!-- ko if : AutoRefresh.IsVisible-->
		<b>Auto Refresh</b>
		<label> <input type="checkbox" data-bind="checked: AutoRefresh.IsChecked" /><span data-bind="text: AutoRefresh.Label"></span> </label>
		<label data-bind="visible:AutoRefresh.IsChecked"> Interval:<input type="number" step="30" data-bind="value: AutoRefreshInterval" /> </label>
		<!-- /ko -->
	</div>
</script>
<!-- END: tmplSelectViewsDialog-->

<!-- BEGIN: tmplMapSetupControl-->
<script id="tmplMapSetupControl" type="text/html">
	<table>
		<tr>
			<td><b>Latitude</b></td>
			<td><input type="text" data-bind="value:Latitude" style="width:100%;box-sizing:border-box" /></td>
			<td data-bind="visible:ShowFields"><b>Latitude&nbsp;Field</b></td>
			<td data-bind="visible:ShowFields"><input type="text" data-bind="value:LatitudeField" style="width:100%;box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td><b>Longitude</b></td>
			<td><input type="text" data-bind="value:Longitude" style="width:100%;box-sizing:border-box" /></td>

			<td data-bind="visible:ShowFields"><b>Longitude&nbsp;Field</b></td>
			<td data-bind="visible:ShowFields"><input type="text" data-bind="value:LongitudeField" style="width:100%;box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td><b>Zoom</b></td>
			<td><input type="text" data-bind="value:Zoom" style="width:100%;box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td><button data-bind="click: SelectRegionFromMap">From Map</button></td>
		</tr>
		<tr>
			<td><b>Aggregate&nbsp;Pins</b></td>
			<td>
				<select data-bind="value: AggregatePins" style="width:100%">
					<option value="undefined" data-bind="text: AggregatePinsProjectDefaultLabel"></option>
					<option value="true">Enable</option>
					<option value="false">Disable</option>
				</select>
			</td>
		</tr>
		<tr>
			<td><b>Expand&nbsp;Pins</b></td>
			<td>
				<select data-bind="value: ExpandPins" style="width:100%">
					<option value="undefined" data-bind="text: ExpandPinsProjectDefaultLabel"></option>
					<option value="true">Enable</option>
					<option value="false">Disable</option>
				</select>
			</td>
		</tr>
	</table>
</script>
<!-- END: tmplMapSetupControl-->

<!-- BEGIN: tmplCalendarSetupControl-->
<script id="tmplCalendarSetupControl" type="text/html">
	<table>
		<tr>
			<td><b>Date Range:</b></td>
			<td>
				<input type="date" data-bind="value:RangeStart" style="width:30%" placeholder="YYYY/MM/DD" />&nbsp;-&nbsp;<input
					type="date"
					data-bind="value:RangeEnd"
					style="width:30%"
					placeholder="YYYY/MM/DD"
				/>
			</td>
		</tr>
		<tr>
			<td><b>TimeRange</b></td>
			<td><input type="text" data-bind="value:TimeRange" style="width:30%" /> <span style="color:lightgray">Example: 9-17 Business Hours</span></td>
		</tr>
		<tr>
			<td><b>Day Filter</b></td>
			<td>
				<!-- ko foreach: DayFilter -->
				<label><input type="checkbox" data-bind="checked: IsChecked" /><span data-bind="text: Label"></span></label>
				<!-- /ko -->
			</td>
		</tr>
		<tr>
			<td><b>Tabs</b></td>
			<td>
				<!-- ko foreach: ModeFilter -->
				<label><input type="checkbox" data-bind="checked: IsChecked" /><span data-bind="text: Label"></span></label>
				<!-- /ko -->
			</td>
		</tr>
		<tr class="property tooltipsource" data-tooltip="CalendarSetup.ShowListCommands">
			<td>
				<b><label for="ShowListCommandsCheckBox">Show commands:</label></b>
			</td>
			<td>
				<input id="ShowListCommandsCheckBox" type="checkbox" data-bind="checked: ShowListCommands" />
			</td>
		</tr>
		<tr data-bind="visible: IsHubVisible">
			<td>
				<b><label for="IshubCheckBox">Multi Select View:</label></b>
			</td>
			<td>
				<input id="IshubCheckBox" type="checkbox" data-bind="checked: IsHub" />
			</td>
		</tr>
		<tr data-bind="visible: IsHubVisible">
			<td>
				<b><label for="">Offline HTML</label></b>
			</td>
			<td>
				<button data-bind="click: PickFileClicked">Choose File</button>
				<label style="color:lightgray" data-bind="text: FileName"></label
				><a style="margin-left:3px" href="#" data-bind="click: RemoveFile, visible: IsFilePicked">[x]</a>
			</td>
		</tr>
	</table>
</script>
<!-- END: tmplCalendarSetupControl-->
<!-- BEGIN: tmplBulkUpdateConfig-->
<script id="tmplBulkUpdateConfig" type="text/html">
	<table>
		<tr>
			<td class="tooltipsource" data-tooltip="Woodford.BulkUpdateConfig.AvailableForms"><b>Bulk Update Form *</b></td>
			<td>
				<select style="width: 200px" data-bind="options: availableForms, value: selectedForm"></select>
			</td>
		</tr>
		<tr>
			<td class="tooltipsource" data-tooltip="BulkUpdateConfig.MaximumRecords"><b>Maximum number of records *</b></td>
			<td><input type="number" style="width: 200px" data-bind="value: numberOfRecords" /></td>
		</tr>
		<tr>
			<td class="tooltipsource" data-tooltip="BulkUpdateConfig.ButtonLabel"><b>Button label (or localization ID)</b></td>
			<td><input style="width: 200px" data-bind="value: buttonLabel" /></td>
		</tr>
		<tr>
			<td class="tooltipsource" data-tooltip="BulkUpdateConfig.ProcessingMode"><b>Processing mode</b></td>
			<td>
				<select
					style="width: 200px"
					data-bind="options: processingModeList, optionsText: 'Label', optionsValue: 'Value', value: processingMode, valueAllowUnset: true"
				></select>
			</td>
		</tr>
		<tr>
			<td class="tooltipsource" data-tooltip="BulkUpdateConfig.InteractionMode"><b>Interaction mode</b></td>
			<td>
				<select
					style="width: 200px"
					data-bind="options: interactionModeList, optionsText: 'Label', optionsValue: 'Value', value: interactionMode, valueAllowUnset: true"
				></select>
			</td>
		</tr>
		<tr>
			<td class="tooltipsource" data-tooltip="BulkUpdateConfig.SortConfig"><b>Sort config</b></td>
			<td>
				<input style="width: 200px" data-bind="value: sortConfig, attr: { placeholder: 'fieldname1:asc,fieldname2:desc,...' }" />
			</td>
		</tr>
	</table>
</script>
<!-- END: tmplBulkUpdateConfig-->
<!-- BEGIN: tmplChangeLocalizationDialog-->
<script id="tmplChangeLocalizationDialog" type="text/html">
	<div style="padding: 0;height:100%">
		<div data-bind="grid: LocalizationsGrid" data-definitiononly="false" data-twowaybinding="true" style="white-space:nowrap; height: 100%;">
			<div data-columnname="Language" data-flex="1 1 250px" data-horalign="left">
				<div style="height:100%; display:flex; align-items:center">
					<i
						class="woodfordsprite"
						data-bind="css: data.IsActive ? 'icon-woodford_Activate' : 'icon-woodford_Deactivate'"
						style="margin:0px 5px;"
					></i>
					<div data-bind="text: data.Language"></div>
				</div>
			</div>
			<div data-columnname="LCID" data-flex="1 1 50px" data-horalign="center">
				<div style="height:100%; display:flex; align-items:center" data-bind="text: data.LCID"></div>
			</div>
			<div data-columnname="Template" data-flex="1 1 200px" data-horalign="left">
				<div style="height:100%; display:flex; align-items:center" data-bind="text: data.Template"></div>
			</div>
			<div data-columnname="Organization" data-sortable="true" data-flex="1 1 200px" data-horalign="left">
				<div style="height:100%; display:flex; align-items:center; padding: 2px;">
					<input
						type="text"
						data-bind="value: data.Organization, attr: { placeholder: data.OrganizationPlaceholder }"
						style="width:100%; box-sizing:border-box; border:1px solid grey; padding:1px; margin:0; box-sizing:border-box; border-radius: 4px;"
					/>
				</div>
			</div>
			<div data-columnname="Project" data-sortable="true" data-flex="1 1 200px" data-horalign="left">
				<div style="height:100%; display:flex; align-items:center; padding: 2px">
					<input
						type="text"
						data-bind="value: data.Project, attr: { placeholder: data.ProjectPlaceholder }"
						style="width:100%; box-sizing:border-box; border:1px solid grey; padding:1px; margin:0; box-sizing:border-box; border-radius: 4px;"
					/>
				</div>
			</div>
		</div>
	</div>
</script>
<!-- END: tmplChangeLocalizationDialog-->
<!-- BEGIN: tmplChatDialog-->
<script id="tmplChatDialog" type="text/html">
	<table style="width:100%;">
		<tr>
			<td><b>Name:</b></td>
			<td><input type="text" data-bind="value:Name" style="width:300px; box-sizing:border-box;" /></td>
		</tr>
		<tr data-bind="visible: IsExternalUser">
			<td><b>Direct messages to standard CRM users:</b></td>
			<td>
				<label><input type="checkbox" data-bind="checked: DirectMsgTostdUsers" /></label>
			</td>
		</tr>
		<tr data-bind="visible: !IsExternalUser">
			<td><b>Chat User Entity:</b></td>
			<td>
				<select
					data-bind="options: Entities, optionsText: function(entity) { return entity.GetLabel() }, value: Entity, valueAllowUnset: false"
					style="width: 300px; box-sizing:border-box;"
				></select>
			</td>
		</tr>
		<tr>
			<td><b>Disable encryption for direct messages:</b></td>
			<td>
				<label><input type="checkbox" data-bind="checked: DisableEncryption" /></label>
			</td>
		</tr>
	</table>
</script>
<!-- END: tmplChatDialog-->
<!-- BEGIN: tmplCheckInConfig-->
<script id="tmplCheckInConfig" type="text/html">
	<p>Set entity fields for:</p>
	<table>
		<tr>
			<td><b>Check In time*</b></td>
			<td><select style="width: 200px" data-bind="options: _dateFields, optionsText: 'DisplayName', value: CheckInTimeField"></select></td>
		</tr>
		<tr>
			<td><b>Check Out time*</b></td>
			<td><select style="width: 200px" data-bind="options: _dateFields, optionsText: 'DisplayName', value: CheckOutTimeField"></select></td>
		</tr>
		<tr>
			<td><b>Duration</b></td>
			<td><select style="width: 200px" data-bind="options: _durationFields, optionsText: 'DisplayName', value: DurationField"></select></td>
		</tr>
		<tr>
			<td><b>Latitude</b></td>
			<td><select style="width: 200px" data-bind="options: _locationFields, optionsText: 'DisplayName', value: LatitudeField"></select></td>
		</tr>
		<tr>
			<td><b>Longitude</b></td>
			<td><select style="width: 200px" data-bind="options: _locationFields, optionsText: 'DisplayName', value: LongitudeField"></select></td>
		</tr>
		<tr>
			<td><b>Status</b></td>
			<td><select style="width: 200px" data-bind="options: _statusFields, optionsText: 'DisplayName', value: StatusField"></select></td>
		</tr>
	</table>
	<p>Set status values:</p>
	<table>
		<tr>
			<td>
				<b><span data-bind="text: trackingStatusLabel"></span></b>
			</td>
			<td><textarea rows="1" data-bind="text: TrackingStatusValues" DisplayMember="Value" readonly></textarea></td>
			<td><button data-bind="click: $parent.CheckInStatus_Click">...</button></td>
		</tr>
		<tr>
			<td>
				<b><span data-bind="text: checkOutValuesLabel"></span></b>
			</td>
			<td><textarea rows="1" data-bind="text: CheckOutValues" DisplayMember="Value" readonly></textarea></td>
			<td><button data-bind="click: $parent.CheckOutStatus_Click">...</button></td>
		</tr>
		<tr>
			<td><b>Check In possible for Status</b></td>
			<td><textarea rows="1" data-bind="text: CheckInAval" DisplayMember="Value" readonly></textarea></td>
			<td><button data-bind="click: $parent.CheckInAval_Click">...</button></td>
		</tr>
		<tr>
			<td><b>Check Out possible for Status</b></td>
			<td><textarea rows="1" data-bind="text: CheckOutAval" DisplayMember="Value" readonly></textarea></td>
			<td><button data-bind="click: $parent.CheckOutAval_Click">...</button></td>
		</tr>
	</table>
</script>
<!-- END: tmplCheckInConfig-->
<!-- BEGIN: tmplCommandDialog-->
<script id="tmplCommandDialog" type="text/html">
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div style="display:flex; flex-direction:row;flex:1 1 auto; overflow:auto">
		<div style="flex:1 1 50%; overflow:auto">
			<div style="padding:3px;color:black; background:linear-gradient(white, #eeeeee);">Selected Commands</div>
			<!-- ko foreach: _items -->
			<div
				style="display:flex; align-items:center; flex-direction:row"
				data-bind="multiClick: $parent.OnSelectedItemClick.bind($parent), style: {backgroundColor: (Selected() ? '#9ecfe9':'')}"
			>
				<div style="padding:7px; flex:0 0 auto" data-bind="text:Label"></div>
				<div
					style="margin:2px; padding:4px; flex:1 1 auto; border:1px solid #ccc; min-height: 24px;"
					data-bind="text:OptionsLabel, visible:OptionsVisibility, style: {backgroundColor: (Error() ? '#ffaaaa':'')}"
				></div>
				<button style="flex:0 0 auto" data-bind="click: $parent.Button_Click.bind($parent), visible:OptionsVisibility">...</button>
			</div>
			<!-- /ko -->
		</div>
		<div style="flex:1 1 50%; overflow:auto;border-left:1px solid #ccc">
			<div style="padding:3px;color:black; background:linear-gradient(white, #eeeeee);">Available Commands</div>
			<!-- ko foreach: _availItems -->
			<div
				style="padding:7px;"
				data-bind="text:Label, multiClick: $parent.OnAvailableItemClick.bind($parent), style: {backgroundColor: (Selected() ? '#9ecfe9':'')}"
			></div>
			<!-- /ko -->
		</div>
	</div>
</script>
<!-- END: tmplCommandDialog-->

<!-- BEGIN: tmplMultiSelectCommandDialog-->
<script id="tmplMultiSelectCommandDialog" type="text/html">
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div style="display: flex; flex-direction: row; flex: 1 1 auto;overflow:auto" data-bind="css:{disabledMultiselect:IsDisabled()}">
		<div style="flex: 1 1 50%; overflow: auto">
			<div style="padding: 3px; color: black; background: linear-gradient(white, #eeeeee);">Selected Commands</div>
			<!-- ko foreach: _items -->
			<div
				style="display: flex; align-items: center; flex-direction: row"
				data-bind="multiClick: $parent.OnSelectedItemClick.bind($parent), style: {backgroundColor: (Selected() ? '#9ecfe9':'')}"
			>
				<div style="padding: 7px; flex: 0 0 auto" data-bind="text:Label"></div>
				<div
					style="margin: 2px; padding: 4px; flex: 1 1 auto; border: 1px solid #ccc; min-height: 24px;"
					data-bind="text:OptionsLabel, visible:OptionsVisibility, style: {backgroundColor: (Error() ? '#ffaaaa':'')}"
				></div>
				<button style="flex: 0 0 auto" data-bind="click: $parent.Button_Click.bind($parent), visible:OptionsVisibility">...</button>
			</div>
			<!-- /ko -->
		</div>
		<div style="flex: 1 1 50%; overflow: auto; border-left: 1px solid #ccc">
			<div style="padding: 3px; color: black; background: linear-gradient(white, #eeeeee);">Available Commands</div>
			<!-- ko foreach: _availItems -->
			<div
				style="padding: 7px;"
				data-bind="text:Label, multiClick: $parent.OnAvailableItemClick.bind($parent), style: {backgroundColor: (Selected() ? '#9ecfe9':'')}"
			></div>
			<!-- /ko -->
		</div>
	</div>
</script>
<!-- END: tmplMultiSelectCommandDialog-->
<!-- BEGIN: tmplFormDesigner -->
<script id="tmplFormDesigner" type="text/html">
	<div class="designer formDesigner">
		<div class="designer__leftPanel">
			<div class="wfheader">
				<label class="label">Properties</label>
			</div>
			<div class="designerPanel">
				<table style="width: 100%">
					<thead>
						<tr>
							<th style="width: 33%;"></th>
							<th style="width: 33%;"></th>
							<th style="width: 33%;"></th>
						</tr>
					</thead>
					<tbody>
						<tr data-bind="visible: isSalesforceChatter">
							<td colspan="3" class="header">Chatter</td>
						</tr>
						<tr data-bind="visible: isSalesforceChatter">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.OnlineRefresh">Online Refresh</td>
							<td colspan="2">
								<select class="itemSelectField" data-bind="value: onlineRefresh">
									<option value="0">Never</option>
									<option value="1">On Click</option>
									<option value="2">Always</option>
								</select>
							</td>
						</tr>
						<tr data-bind="visible: IsItemButton">
							<td colspan="3" class="header">Button</td>
						</tr>
						<tr data-bind="visible: IsItemButton">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.ButtonTextInfo">Button Text</td>
							<td colspan="2"><input class="itemInputField" type="text" data-bind="valueEnter:CustomButtonClickText" placeholder="Button text" /></td>
						</tr>
						<tr data-bind="visible: IsItemButton">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.ButtonLabelInfo">Label</td>
							<td colspan="2"><input class="itemInputField" type="text" data-bind="valueEnter:CustomButtonLabel" placeholder="Label" /></td>
						</tr>
						<tr data-bind="visible: IsItemButton">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.ButtonCommandInfo">Command</td>
							<td colspan="2">
								<input class="itemInputField" type="text" data-bind="valueEnter:CustomCommand" placeholder="Command" list="customCommandsList" />
								<datalist id="customCommandsList">
									<!-- ko foreach: CommandsList -->
									<option data-bind="value: $data"></option>
									<!-- /ko -->
								</datalist>
							</td>
						</tr>
						<tr data-bind="visible: IsItemVisible">
							<td colspan="3" class="header">Item</td>
						</tr>
						<tr data-bind="visible: IsItemVisible">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.ItemBindingInfo">Binding</td>
							<td colspan="2"><input class="itemInputField" type="text" data-bind="valueEnter:SelectedItemName, enable: IsItemNameEditable" /></td>
						</tr>
						<tr data-bind="visible: IsItemStyleVisible">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.ItemStyleInfo">Style</td>
							<td style="width: 100%; padding-right: 5px;">
								<select
									class="itemSelectField"
									style="width: 100%"
									data-bind="options: CellStyle, optionsText: function(c) { return c.Name + ' (' + ComponentType[c.ComponentType] + ')' }, optionsValue: 'Name', value: SelectedStyle, valueAllowUnset: true"
								></select>
							</td>
							<td style="display: flex; padding-top: 5px;">
								<span
									class="tooltipsource"
									data-tooltip="ViewDesigner.NoImageQueryWarning"
									style="cursor: pointer; padding-right: 3px;"
									data-bind="visible: hasNoImageQuery"
								>
									<i class="woodfordsprite icon icon-woodford_ListDesigner_infoalert"></i>
								</span>
								<button data-bind="click: () => openStylePickerDialog()">...</button>
							</td>
						</tr>
						<tr data-bind="visible: IsItemStyleVisible() && !IsItemGridChild()">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.ItemGridBehaviorInfo">Grid&nbsp;behavior</td>
							<td colspan="2">
								<select class="itemSelectField" data-bind="value: ItemAutoGridBehavior">
									<option value="0">Normal</option>
									<option value="1">Full Width</option>
									<option value="2">Break After</option>
								</select>
							</td>
						</tr>
						<tr data-bind="visible: showOCRSettings() && IsItemVisible()">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.EnableForOCRInfo">Enable for OCR</td>
							<td>
								<label class="toggle">
									<input type="checkbox" data-bind="checked: hasOCREnabled" />
									<span class="slider"></span>
								</label>
							</td>
						</tr>
						<tr data-bind="visible: hasOCREnabled() && IsItemVisible()">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.OCRReferenceImageInfo">OCR reference image</td>
							<td colspan="2">
								<select class="itemSelectField" data-bind="options: imgNamesForOCRReference, value: OCRReferenceImageName"></select>
							</td>
						</tr>
						<tr>
							<td colspan="3" class="header" data-bind="visible: IsAssocView">List</td>
						</tr>
						<tr data-bind="visible: IsAssocView">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.Orientation">Arrange items</td>
							<td colspan="2">
								<select class="itemSelectField" data-bind="value: FlexiOrientation">
									<option value="1">Vertically</option>
									<option value="2">Horizontally</option>
									<option value="0" data-bind="text: FlexiOrientationProjectDefaultLabel"></option>
								</select>
							</td>
						</tr>
						<tr data-bind="visible: SelectedTabBinding">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.Binding">Binding</td>
							<td colspan="2"><input class="itemInputField" type="text" disabled="disabled" data-bind="value:SelectedTabBinding" /></td>
						</tr>
						<tr data-bind="visible: IsItemGrid">
							<td colspan="3" class="header tooltipsource" data-tooltip="FormDesigner.TableOverviewInfo">Table Editor</td>
						</tr>
						<tr data-bind="visible: IsItemGrid">
							<td colspan="3" style="padding: 0px 16px">
								<div data-bind='template: { name: "GridItemTable"}'></div>
							</td>
						</tr>
						<tr data-bind="visible: IsItemGridChild">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.TablePositionInfo">Position in table</td>
						</tr>
						<tr data-bind="visible: IsItemGridChild">
							<td colspan="3" style="padding: 0px 16px ">
								<div data-bind='template: { name: "GridChildTable" }'></div>
							</td>
						</tr>

						<tr data-bind="visible: IsItemImage">
							<td colspan="3" class="header">Add Image</td>
						</tr>

						<!-- ko foreach: _imageLoadActions -->
						<tr data-bind="visible: $parent.IsItemImage">
							<td class="itemLabel" data-bind="text: Label"></td>
							<td>
								<input type="checkbox" data-bind="click: function(element) { return $parent.checboxChanged(element);}, checked: IsChecked" />
							</td>
						</tr>
						<!-- /ko -->
						<tr data-bind="visible: IsItemImage">
							<td colspan="3" class="header">Image Actions</td>
						</tr>
						<!-- ko foreach: _imageActions -->
						<tr data-bind="visible: $parent.IsItemImage">
							<td class="itemLabel" data-bind="text: Label"></td>
							<td>
								<input type="checkbox" data-bind="click: function(element) { return $parent.checboxChanged(element);}, checked: IsChecked" />
							</td>
						</tr>
						<!-- /ko -->
						<!-- ko if: _selectedTab -->
						<tr>
							<td colspan="3" class="header">Tab</td>
						</tr>
						<tr>
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.Name">Name</td>
							<td colspan="2">
								<input class="itemInputField" type="text" data-bind="valueEnter:SelectedTabName, enable: IsTabNameEditable" />
							</td>
						</tr>
						<tr>
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.Side">Side</td>
							<td colspan="2">
								<select class="itemSelectField" data-bind="value: FlexiPanel">
									<option value="0">Left</option>
									<option value="1">Right</option>
								</select>
							</td>
						</tr>
						<tr>
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.Header">Header</td>
							<td colspan="2">
								<select
									class="itemSelectField"
									data-bind="value: _selectedTab().FlexiHeader, options: [{value: 0, text: 'Hidden'},
							{value: 1, text: 'Icon And Title'},
							{value: 2, text: 'Title'}],
							optionsText: 'text', optionsValue: 'value'"
								></select>
							</td>
						</tr>
						<tr data-bind="visible: IsAssocView">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.UseHomeIcon">Use Home Icon</td>
							<td>
								<label class="toggle">
									<input type="checkbox" data-bind="checked: HasHomeIcon" />
									<span class="slider"></span>
								</label>
							</td>
						</tr>
						<tr data-bind="visible: !HasHomeIcon()">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.Icon">Icon</td>
							<td colspan="2">
								<div class="iconDropdownWrapper">
									<button type="button" class="iconDropdownButton" data-bind="click: toggleIconDropdown, enable: !isReadOnly()">
										<span class="iconDropdownPreview">
											<img class="iconDropdownPreviewImage" data-bind="attr: { src: selectedTabIconSrc }, visible: selectedTabIconSrc" />
										</span>
										<i
											class="woodfordsprite icon-woodford_ArrowDown_12 iconDropdownCaret"
											data-bind="style: { transform: isIconDropdownOpen() ? 'rotate(180deg)' : 'rotate(0deg)' }"
										></i>
									</button>

									<!-- ko if: isIconDropdownOpen -->
									<div class="iconDropdownPopover">
										<div class="iconDropdownPopoverField">
											<!-- ko if: galleryControl -->
											<div data-bind="template: { name: 'tmplRescoImageGallery', data: galleryControl() }"></div>
											<!-- /ko -->
										</div>
									</div>
									<!-- /ko -->
								</div>
							</td>
						</tr>
						<tr>
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.ExpandButton">Expand button</td>
							<td colspan="2">
								<!-- <div style="display: flex; align-items: center; gap: 6px;"> -->
								<div style="display: flex; align-items: center; width: 90%;">
									<div class="segmentedButtons segmentedButtonsFullWidth" style="flex: 1;">
										<button
											type="button"
											class="segmentedButton"
											style="flex: 1; display: flex; align-items: center; justify-content: center;"
											data-bind="click: () => FlexiExpandVisibility('1'), css: { 'active': FlexiExpandVisibilityDefault() === '1' }"
										>
											<span>Show</span>
										</button>
										<button
											type="button"
											class="segmentedButton"
											style="flex: 1; display: flex; align-items: center; justify-content: center;"
											data-bind="click: () => FlexiExpandVisibility('2'), css: { 'active': FlexiExpandVisibilityDefault() === '2' }"
										>
											<span>Hide</span>
										</button>
									</div>
									<i
										class="woodfordsprite icon-woodford_StyleEditor_reset"
										style="cursor: pointer; flex: 0 0 auto;"
										data-bind="visible: !isFlexiExpandVisibilityUsingDefault(), click: () => FlexiExpandVisibility('0'), clickBubble: false"
									></i>
								</div>
							</td>
						</tr>
						<tr data-bind="visible: isInitialState">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.Expanded">Initial state</td>
							<td colspan="2">
								<div class="segmentedButtons segmentedButtonsFullWidth">
									<button
										type="button"
										class="segmentedButton"
										style="flex: 1; display: flex; align-items: center; justify-content: center;"
										data-bind="click: () => FlexiCollapsed('0'), css: {'active': FlexiCollapsed() === '0'}"
									>
										<span>Expanded</span>
									</button>
									<button
										type="button"
										class="segmentedButton"
										style="flex: 1; display: flex; align-items: center; justify-content: center;"
										data-bind="click: () => FlexiCollapsed('1'), css: {'active': FlexiCollapsed() === '1'}"
									>
										<span>Collapsed</span>
									</button>
								</div>
							</td>
						</tr>
						<tr>
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.Colspan">Colspan</td>
							<td colspan="2">
								<div class="segmentedButtons segmentedButtonsFullWidth">
									<button
										type="button"
										class="segmentedButton"
										style="flex: 1; display: flex; align-items: center; justify-content: center;"
										data-bind="click: () => FlexiWidth('0'), css: {'active': FlexiWidth() === '0'}"
									>
										<span>1</span>
									</button>
									<button
										type="button"
										class="segmentedButton"
										style="flex: 1; display: flex; align-items: center; justify-content: center;"
										data-bind="click: () => FlexiWidth('1'), css: {'active': FlexiWidth() === '1'}"
									>
										<span>2</span>
									</button>
								</div>
							</td>
						</tr>
						<tr>
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.Height">Height</td>
							<td colspan="2">
								<input
									class="itemInputField"
									type="text"
									data-bind="valueEnter: FlexiHeight"
									title="Height in FlexiForm. Logical height has no unit (2), for pixels height use px (400px)"
								/>
							</td>
						</tr>
						<!-- /ko -->
						<tr data-bind="visible: IsDetailView">
							<td colspan="3" class="header">Auto Grid</td>
						</tr>
						<tr data-bind="visible: IsDetailView">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.MaxColumns">Max columns</td>
							<td colspan="2">
								<select class="itemSelectField" data-bind="value: AutoGridColumns">
									<option value="0">Default (2)</option>
									<option value="1">Off</option>
									<option value="2">2</option>
									<option value="3">3</option>
									<option value="4">4</option>
								</select>
							</td>
						</tr>
						<tr data-bind="visible: IsDetailView">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.MinWidth">Min Width</td>
							<td colspan="2">
								<input
									class="itemInputField"
									type="text"
									data-bind="valueEnter: AutoGridWidth, attr: {placeholder: AutoGridWidthProjectDefaultLabel}"
									title="Minimum width (in pixels) for column. Empty - Project Default"
								/>
							</td>
						</tr>
						<tr data-bind="visible: SelectedPage">
							<td colspan="3" class="header">Page</td>
						</tr>
						<tr data-bind="visible: SelectedPage">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.PageName">Name</td>
							<td colspan="2"><input class="itemInputField" type="text" data-bind="valueEnter: SelectedPageName" /></td>
						</tr>
						<tr data-bind="visible: SelectedPage">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.PageLayout">Page layout</td>
							<td colspan="2">
								<div class="segmentedButtons segmentedButtonsFullWidth">
									<button
										type="button"
										class="segmentedButton"
										style="flex: 1; display: flex; align-items: center; justify-content: center;"
										data-bind="click: () => setPageLayoutMode(false), css: {'active': !pageLayoutMode()}"
									>
										<span>Single</span>
									</button>
									<button
										type="button"
										class="segmentedButton"
										style="flex: 1; display: flex; align-items: center; justify-content: center;"
										data-bind="click: () => setPageLayoutMode(true), css: {'active': pageLayoutMode()}"
									>
										<span>Split</span>
									</button>
								</div>
							</td>
						</tr>
						<tr data-bind="visible: SelectedPage && pageLayoutMode()">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.SplitRatio">Split ratio</td>
							<td colspan="2">
								<div class="segmentedButtons segmentedButtonsFullWidth">
									<button
										type="button"
										class="segmentedButton"
										style="flex: 1; display: flex; align-items: center; justify-content: center;"
										data-bind="click: () => setSplitRatio(true), css: {'active': SplitRatio()}"
									>
										<span>1:2</span>
									</button>
									<button
										type="button"
										class="segmentedButton"
										style="flex: 1; display: flex; align-items: center; justify-content: center;"
										data-bind="click: () => setSplitRatio(false), css: {'active': !SplitRatio()}"
									>
										<span>2:1</span>
									</button>
								</div>
							</td>
						</tr>
						<tr data-bind="visible: SelectedPage">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.CardsLayout">Tabs layout</td>
							<td colspan="2">
								<div class="segmentedButtons segmentedButtonsFullWidth">
									<button
										type="button"
										class="segmentedButton"
										style="flex: 1; display: flex; align-items: center; justify-content: center;"
										data-bind="click: () => PageCardsLayoutStrict(true), css: {'active': PageCardsLayoutStrict()}"
									>
										<span>Strict</span>
									</button>
									<button
										type="button"
										class="segmentedButton"
										style="flex: 1; display: flex; align-items: center; justify-content: center;"
										data-bind="click: () => PageCardsLayoutStrict(false), css: {'active': !PageCardsLayoutStrict()}"
									>
										<span>Dynamic</span>
									</button>
								</div>
							</td>
						</tr>
						<tr data-bind="visible: SelectedPage">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.CardsExpanding">Auto collapse</td>
							<td>
								<label class="toggle">
									<input type="checkbox" data-bind="checked: PageCardsExpanding" />
									<span class="slider"></span>
								</label>
							</td>
						</tr>
						<tr data-bind="visible: SelectedPage">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.PageIcon">Page icon</td>
							<td>
								<label class="toggle">
									<input type="checkbox" data-bind="checked: PageHasIcon" />
									<span class="slider"></span>
								</label>
							</td>
						</tr>
						<tr data-bind="visible: SelectedPage && PageHasIcon()">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.PageIconName">Icon</td>
							<td colspan="2">
								<div class="iconDropdownWrapper">
									<button type="button" class="iconDropdownButton" data-bind="click: togglePageIconDropdown">
										<span class="iconDropdownPreview">
											<img class="iconDropdownPreviewImage" data-bind="attr: { src: selectedPageIconSrc }, visible: selectedPageIconSrc" />
										</span>
										<i
											class="woodfordsprite icon-woodford_ArrowDown_12 iconDropdownCaret"
											data-bind="style: { transform: isPageIconDropdownOpen() ? 'rotate(180deg)' : 'rotate(0deg)' }"
										></i>
									</button>

									<!-- ko if: isPageIconDropdownOpen -->
									<div class="iconDropdownPopover">
										<div class="iconDropdownPopoverField">
											<!-- ko if: pageGalleryControl -->
											<div data-bind="template: { name: 'tmplRescoImageGallery', data: pageGalleryControl() }"></div>
											<!-- /ko -->
										</div>
									</div>
									<!-- /ko -->
								</div>
							</td>
						</tr>
						<tr data-bind="visible: SelectedPage">
							<td></td>
							<td colspan="2">
								<button class="pageDeleteButton" data-bind="click: () => DeletePage(SelectedPage()), clickBubble: false">Delete Page</button>
							</td>
						</tr>
						<tr>
							<td colspan="3" class="header">Form</td>
						</tr>
						<tr>
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.PageControl">Page control</td>
							<td colspan="2">
								<div class="segmentedButtons segmentedButtonsFullWidth">
									<button
										type="button"
										class="segmentedButton"
										style="flex: 1; display: flex; align-items: center; justify-content: center;"
										data-bind="click: () => IsTabToolbarTop(true), css: {'active': IsTabToolbarTop()}"
									>
										<span>Top</span>
									</button>
									<button
										type="button"
										class="segmentedButton"
										style="flex: 1; display: flex; align-items: center; justify-content: center;"
										data-bind="click: () => IsTabToolbarTop(false), css: {'active': !IsTabToolbarTop()}"
									>
										<span>Bottom</span>
									</button>
								</div>
							</td>
						</tr>
						<tr data-bind="visible: Pages().length > 0">
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.IsTabIconInline">Icon position</td>
							<td colspan="2">
								<div class="segmentedButtons segmentedButtonsFullWidth">
									<button
										type="button"
										class="segmentedButton"
										style="flex: 1; display: flex; align-items: center; justify-content: center;"
										data-bind="click: () => IsTabIconInline(true), css: {'active': IsTabIconInline()}"
									>
										<span>Inline</span>
									</button>
									<button
										type="button"
										class="segmentedButton"
										style="flex: 1; display: flex; align-items: center; justify-content: center;"
										data-bind="click: () => IsTabIconInline(false), css: {'active': !IsTabIconInline()}"
									>
										<span>Vertical</span>
									</button>
								</div>
							</td>
						</tr>
						<tr>
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.FullScreen">Full-screen mode</td>
							<td colspan="2">
								<label class="toggle">
									<input type="checkbox" data-bind="checked: FullScreen" />
									<span class="slider"></span>
								</label>
								<i
									class="woodfordsprite icon-woodford_StyleEditor_reset"
									style="cursor: pointer; height: 22px;"
									data-bind="visible: !isFullScreenProjectDefault(), click: () => ResetIsFullScreenToProjectDefault(),clickBubble: false"
								></i>
							</td>
						</tr>
						<tr>
							<td class="itemLabel tooltipsource" data-tooltip="FormDesigner.AllowResizing">Allow resizing</td>
							<td colspan="2">
								<label class="toggle">
									<input type="checkbox" data-bind="checked: AutoResize" />
									<span class="slider"></span>
								</label>
								<i
									class="woodfordsprite icon-woodford_StyleEditor_reset"
									style="cursor: pointer; height: 22px;"
									data-bind="visible: !isAutoResizeProjectDefault(), click: () => ResetIsAutoResizingToProjectDefault(),clickBubble: false"
								></i>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>

		<div class="designerPanelOuter" style="flex:4 1 auto;">
			<div class="wfheader" style="border-left:0">
				<label class="label">Designer</label>
				<div class="segmentedButtons" style="margin-left: 40.5%;">
					<span
						class="segmentedButton woodfordsprite"
						data-bind="click: () => previewDevice('phone'), class: (previewDevice() === 'phone' ? 'icon-woodford_FormDesigner_phoneActive active' : 'icon-woodford_FormDesigner_phone')"
					></span>
					<span
						class="segmentedButton woodfordsprite"
						data-bind="click: () => previewDevice('tablet'), class: (previewDevice() === 'tablet' ? 'icon-woodford_FormDesigner_tabletActive active' : 'icon-woodford_FormDesigner_tablet')"
					></span>
				</div>
				<div style="display: flex; align-items: baseline; gap: 8px; margin-left: auto;">
					<span>Zoom</span>
					<div class="segmentedButtons">
						<!-- ko foreach: { data: [1, 1.3], as: 'zoom', noChildContext: true } -->
						<button
							class="segmentedButton"
							data-bind="click: () => ZoomLevel(zoom), text: zoom + 'x', value: zoom, css: {'active': ZoomLevel() === zoom}"
						></button>
						<!-- /ko -->
					</div>
				</div>
			</div>
			<div class="designerArena" style="display: flex;flex:1 1 auto;flex-direction: column">
				<div style="align-items: center; gap: 8px; padding: 12px 12px;" data-bind="style: { order: !IsTabToolbarTop() ? 2 : 0 }">
					<div class="pagesSegmentedButtonsWrapper" data-bind="value: pagesSegmentedButtonsLoad()">
						<div class="control_arrows">
							<a
								href="#"
								class="arrow_left"
								data-bind="click: (d,e) => { movePagesSegmentedButtons('left'); e.preventDefault(); }, visible: PagesVisibleLeftArr"
								><i class="commonuisprite icon-commonui_Toolbar_Color_leftArrow"></i
							></a>
							<a
								href="#"
								class="arrow_right"
								data-bind="click: (d,e) => { movePagesSegmentedButtons('right'); e.preventDefault(); }, visible: PagesVisibleRightArr"
								><i class="commonuisprite icon-commonui_Toolbar_Color_rightArrow"></i
							></a>
						</div>
						<div
							id="pagesSegmentedButtons"
							class="segmentedButtons pagesSegmentedButtons"
							data-bind="css: { 'pagesSegmentedButtons--overflow': PagesHasOverflow(), 'pagesSegmentedButtons--hasVertical': !IsTabIconInline() }, event: { scroll: () => onPagesSegmentedButtonsScroll() }"
						>
							<!-- ko foreach: { data: Pages, as: 'page', noChildContext: true } -->
							<button
								type="button"
								class="segmentedButton"
								data-bind="click: () => onPageClick(page), css: { 'active': SelectedPage() === page, 'pagesSegmentedButton--vertical': !IsTabIconInline(), 'pagesSegmentedButton--inline': IsTabIconInline() }, dropZone: { accepts: ['Tabs', 'Pages'], dragOver: (event, data) => onPageDragOver(event, data, page), drop: (data) => onPageDrop(data, page) }, dragZone: { name: 'Pages', data: page, dragStart: (_data, event) => onPageDragStart(event, page), dragEnd: () => onPageDragEnd(), element: 'tmplFormDragPage' }"
							>
								<img
									class="cardHeaderImg"
									data-bind="attr: { src: page.IconSrc }, visible: page.IconSrc(), css: { 'cardHeaderImg--vertical': !IsTabIconInline(), 'cardHeaderImg--inline': IsTabIconInline() }"
									draggable="false"
								/>
								<span data-bind="text: page.Name"></span>
							</button>
							<!-- /ko -->
							<button type="button" style="font-size: 20px" class="segmentedButton" data-bind="text: '+', click: () => AddPage()"></button>
						</div>
					</div>
				</div>
				<div class="designerPanel desPnlContainer" id="designerRowContainer" style="order: 1;" data-bind="value: resizeScaleWindowLoad()">
					<div
						class="scaleWindow"
						data-bind="style:{ zoom: ZoomLevelZoom }, css: { 'scaleWindow--split12': isSplitRatio12(), 'scaleWindow--split21': isSplitRatio21(), 'scaleWindow--single': isSinglePanelMode(), 'scaleWindow--singleTwoCols': isSingleTwoColumns() }"
						id="designerRow"
					>
						<!-- ko foreach: {data: panels, as: 'panel', noChildContext: true}-->
						<div
							class="pannelWrapper"
							data-bind="css: {'selectedPanel': isPanelSelected(panel)}, attr: { 'data-panel': panel.position }, click: () => selectPanel(panel)"
						>
							<!-- ko using: displayTabs(panel), as: 'displayTabsForPanel', noChildContext: true -->
							<div
								class="panelBorder"
								data-bind="dropZone: {accepts: 'Tabs', dragOver: (event) => onTabDragOver(event, ($element.getElementsByClassName('scaleDetailItems')[0] || $element.getElementsByClassName('emptyPanel')[0]).children, panel, displayTabsForPanel), dragLeave: () => onTabDragLeave(), drop: () => onTabDragDrop()}"
							>
								<!-- ko if: displayTabsForPanel().length === 0 -->
								<div class="emptyPanel">
									<span class="emptyPanelText title">Add new tabs</span>
									<span class="emptyPanelText">Panel is empty</span>
									<span class="emptyPanelText">Please choose from side panel new tabs...</span>
									<span class="emptyPanelIcon woodfordsprite icon-woodford_FormDesigner_EmptyPanel"></span>
								</div>
								<!-- /ko -->
								<!-- ko ifnot: displayTabsForPanel().length === 0 -->
								<div class="scaleDetailItems">
									<!-- ko foreach: { data: displayTabsForPanel, as: 'Tab', noChildContext: true } -->
									<card
										params="label: Tab.DisplayName, imgSrc: Tab.b64Image, isCollapsed: Tab.isCollapsed, active: Tab.isSelected(), headerStyle: Tab.FlexiHeader, onLabelChanged: onTabLabelChanged(Tab), displayLabelFunction: displayTabLabelFunction(Tab)"
										data-bind="
											attr: { 'data-colspan': (panel.layoutVersion(), Tab.FlexiWidth === 0 ? '1' : '2') },
											click: () => SetSelectedTab(Tab), clickBubble: false,
											dropZone: (isInstanceOfDetailTab(Tab)) ? {accepts: 'AvailFields', dragOver: (event) => onDetailItemDragOver($element.getElementsByClassName('tabItemsWrapper')[0], event, Tab), dragLeave: () => onItemDragLeave(Tab), drop: () => onItemDrop(Tab)} : undefined,
											dragZone: {name: 'Tabs', dragStart: (event) => onTabDragStart(event, panel, Tab), dragEnd: () => onTabDragEnd(), element: 'htmlTabDragElement', data: {label: Tab.DisplayName, imgSrc: Tab.b64Image, isCollapsed: observable(true), active: false, headerStyle: Tab.FlexiHeader}}"
									>
										<!-- ko if: $parent.isInstanceOfDetailTab(Tab) -->
										<div class="tabItemsWrapper">
											<!-- ko foreach: Tab.Items, noChildContext: true -->
											<div
												data-bind="template: { name: 'tmplDetailItem', data: { item: $data, tab: Tab, handlers: {
																	onItemDragStart: $parentContext.$parent.onItemDragStart.bind($parentContext.$parent),
																	onDetailItemListClicked: $parentContext.$parent.onDetailItemListClicked.bind($parentContext.$parent),
																	onDetailItemListMultiClicked: $parentContext.$parent.onDetailItemListMultiClicked.bind($parentContext.$parent),
																	}, zoomLevelScale: $parent.ZoomLevelScale } }"
											></div>
											<!-- /ko -->
										</div>
										<!-- /ko -->
										<!-- ko ifnot: $parent.isInstanceOfDetailTab(Tab) -->
										<div class="specialFormCard">
											<span class="specialFormCardTitle" data-bind="text: $parent.localize(Tab.systemDisplayName())"></span>
											<span class="specialFormCardPreviewText">Preview is not available</span>
											<div class="specialFormCardButtonWrapper">
												<button
													class="specialFormCardButton properties"
													data-bind="visible: $parent.CanExecuteCommand('Properties_32|Properties', Tab), click: () => $parent.TryShowProperties(Tab)"
												>
													Properties
												</button>
												<button class="specialFormCardButton delete">
													<span
														class="woodfordsprite icon-woodford_FormDesigner_delete"
														data-bind="click: () => $parent.deleteTab(Tab), clickBubble: false"
													></span>
												</button>
											</div>
										</div>
										<!-- /ko -->
									</card>
									<!-- /ko -->
								</div>
								<!-- /ko -->
							</div>
							<!-- /ko -->
						</div>
						<!-- /ko -->
					</div>
				</div>
			</div>
		</div>
		<div class="designer__fieldsPanel">
			<div class="wfheader" style="border-left:0">
				<!-- ko foreach: Tabbar -->
				<div
					class="rightPanelTabControlItem"
					data-bind="text: Name,css: { rightPanelTabControlItemSelected: Selected() }, click: Clicked, visible: !$parent.isSearchActive()"
				></div>
				<!-- /ko -->
				<div data-bind="attr: {'class': (isSearchActive() ? 'search-button-wrapper_active' : 'search-button-wrapper')}">
					<searchbutton
						params="searchText: searchText, active: isSearchActive, rolloutDirection: searchBarRolloutDirection, htmlElement: $element"
					></searchbutton>
				</div>
			</div>
			<div class="designerPanel" style="border-left:0;overflow:auto;display:flex;flex-direction:column">
				<div data-bind="visible: SelectedTabIndex()===0">
					<!-- ko foreach: { data: rightPanelTabCards, as: "card"} -->
					<div
						class="listItem"
						data-bind="multiClick: (clicks) => $parent.onSpecialTabsMultiClick(clicks, card.command), dragZone: { name: 'Tabs', dragStart: (event) => $parent.onSpecialTabsSidePanelDragStart(event, $data) }"
					>
						<i
							style="padding-right: 10px; margin-left: 7px;"
							data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_FormDesigner_' + card.imageUrl }"
						></i>
						<span data-bind="text: card.name"></span>
					</div>
					<!-- /ko -->
					<div class="listItemDetailHeader" data-bind="visible: Lists().length > 0">Lists</div>
					<!-- ko foreach: Lists -->
					<div
						class="listItem"
						data-bind="dragZone: { name: 'Tabs', dragStart: (event) => $parent.onListsSidePanelDragStart(event, $data) }, multiClick: (clicks, event, binding) => $parent.onTabSidePanelClicked(event, clicks, binding), style: {backgroundColor: (Selected() ? '#9ecfe9':'') } "
					>
						<i
							style="margin-right: 5px; margin-left: 7px;"
							data-bind=" multiClick: (clicks, event, binding) =>  $parent.onTabSidePanelClicked(event, 2, binding), attr:{ 'class': $parent.Tabs().some(t => t.LogicalName == LogicalName) ? 'woodfordsprite icon-woodford_FormDesigner_done' : 'woodfordsprite icon-woodford_FormDesigner_add' }"
						></i>
						<div data-bind="style: {backgroundColor: (Selected() ? '#9ecfe9':'') } ">
							<span data-bind="text: DisplayName, attr:{ title: LogicalName }" style="flex:1 1 auto"></span>
						</div>
						<i style="margin-left: auto;" data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_FormDesigner_drag_indicator' }"></i>
					</div>
					<!-- /ko -->
				</div>
				<div data-bind="visible: SelectedTabIndex()===1">
					<div class="listItemDetailHeader" data-bind="visible: rightPanelDetailObjects().length > 0">Components</div>
					<!-- ko foreach: { data: rightPanelDetailObjects, as: "object"} -->
					<div
						class="listItem"
						data-bind="multiClick: (clicks, event) =>  $parent.onSpecialTabsMultiClick(clicks, object.command), dragZone: { name: 'AvailFields', dragStart: (event) => $parent.onComponentDragStart(event, object.command) }"
					>
						<i
							style="padding-right: 10px; margin-left: 7px;"
							data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_FormDesigner_' + object.imageUrl }, click: () => $parent.OnExecute(object.command), clickBubble: false"
						></i>
						<div data-bind="text: object.name"></div>
					</div>
					<!-- /ko -->

					<div class="listItemDetailHeader" data-bind="visible: Fields().length > 0">Fields</div>
					<!-- ko foreach: Fields -->
					<div
						class="listItem"
						data-bind="dragZone: { name: 'AvailFields', dragStart: (event) => $parent.onItemSidePanelDragStart(event, $data) }, multiClick: (clicks, event, binding) => $parent.onFieldsSidePanelClicked(clicks, binding), style: {backgroundColor: (Selected() ? '#9ecfe9':'') } "
					>
						<i
							style="margin-right: 5px; margin-left: 7px;"
							data-bind="click: (binding) => $parent.onFieldsSidePanelClicked(2, binding), clickBubble: false, attr:{ 'class': $parent.isItemUsedInSelectedTab(LogicalName) ? 'woodfordsprite icon-woodford_FormDesigner_done' : 'woodfordsprite icon-woodford_FormDesigner_add' }"
						></i>
						<div data-bind="style: {backgroundColor: (Selected() ? '#9ecfe9':'') } ">
							<div class="listItemText" data-bind="text: DisplayName, attr:{ title: LogicalName }"></div>
						</div>
						<i style="margin-left: auto;" data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_FormDesigner_drag_indicator' }"></i>
					</div>
					<!-- /ko -->

					<div class="listItemDetailHeader" data-bind="visible: SharedVars().length > 0">Shared Variables</div>
					<!-- ko foreach: SharedVars -->
					<div
						class="listItem"
						data-bind="dragZone: { name: 'AvailFields', dragStart: (event) => $parent.onItemSidePanelDragStart(event, $data) }, multiClick: (clicks, event, binding) => $parent.onFieldsSidePanelClicked(clicks, binding), style: {backgroundColor: (Selected() ? '#9ecfe9':'') } "
					>
						<i
							style="padding-right: 5px; margin-left: 7px;"
							data-bind="click: (binding) => $parent.onFieldsSidePanelClicked(2, binding), clickBubble: false, attr:{ 'class': $parent.isItemUsedInSelectedTab(LogicalName) ? 'woodfordsprite icon-woodford_FormDesigner_done' : 'woodfordsprite icon-woodford_FormDesigner_add' }"
						></i>
						<div data-bind="style: {backgroundColor: (Selected() ? '#9ecfe9':'') } ">
							<div class="listItemText" data-bind="text: DisplayName, attr:{ title: LogicalName }"></div>
						</div>
						<i style="margin-left: auto;" data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_FormDesigner_drag_indicator' }"></i>
					</div>
					<!-- /ko -->
				</div>
			</div>
		</div>
	</div>
</script>

<script id="tmplFormDragPage" type="text/html">
	<div style="flex: 0 0 auto; padding: 5px; display: flex; align-items: center; background-color: #9ecfe9; width: 150px;">
		<span data-bind="text: Name"></span>
	</div>
</script>

<script id="tmplFormDragTab" type="text/html">
	<div
		style="flex: 0 0 auto; padding:5px; display:flex;align-items:center; background-color:#9ecfe9; width:150px; transform-origin:top left;"
		data-bind="style:{ transform: $parent.ZoomLevelScale }"
	>
		<i data-bind="css: IconName"></i>
		<span style="margin-left:3px" data-bind="text: DisplayName"></span>
	</div>
</script>

<script id="tmplDetailItem" type="text/html">
	<!-- ko if: item.IsSeparator -->
	<designer-detail-item-separator
		data-bind="click: () => handlers.onDetailItemListClicked(item, tab), clickBubble: false, dragZone: {name: 'AvailFields', dragStart: (event) => handlers.onItemDragStart(item, tab, event), element: 'tmplFormDragItemNew'}"
		params="active: item.isSelected(), bindingText: item.ValueText"
	></designer-detail-item-separator>
	<!-- /ko -->
	<!-- ko if: !item.IsSeparator && !item.IsGrid && !item.IsButton -->
	<designer-detail-item
		params="label: {position: item.LabelPosition, text: item.LabelText}, value: {text: item.ValueText}, active: item.isSelected()"
		data-bind="multiClick: (clicks, event, binding) => handlers.onDetailItemListMultiClicked(clicks, event, binding) ,click: () => handlers.onDetailItemListClicked(item, tab), clickBubble: false, dragZone: {name: 'AvailFields', dragStart: (event) => handlers.onItemDragStart(item, tab, event), element: 'tmplFormDragItemNew'}"
	></designer-detail-item>
	<!-- /ko -->
	<!-- ko if: item.IsButton -->
	<designer-detail-item-button
		params="label: {position: item.LabelPosition, visible: item.LabelVisible, text: item.LabelText}, value: {text: item.ValueText}, active: item.isSelected()"
		data-bind="click: () => handlers.onDetailItemListClicked(item, tab), clickBubble: false, dragZone: {name: 'AvailFields', dragStart: (event) => handlers.onItemDragStart(item, tab, event), element: 'tmplFormDragItemNew'}"
	></designer-detail-item-button>
	<!-- /ko -->
	<!-- ko if: item.IsGrid -->
	<designer-detail-item-table
		params="active: item.isSelected()"
		data-bind="click: () => handlers.onDetailItemListClicked(item, tab), clickBubble: false, dragZone: {name: 'AvailFields', dragStart: (event) => handlers.onItemDragStart(item, tab, event), element: 'tmplFormDragItemNew'}"
	>
		<!-- ko foreach: $parent.item.Items -->
		<div
			data-bind="template: { name: 'tmplDetailItem', data: { item: $data, tab: $parentContext.$parent.tab, handlers: $parentContext.$parent.handlers } }"
		></div>
		<!-- /ko -->
	</designer-detail-item-table>
	<!-- /ko -->
</script>

<script id="tmplFormDragItemNew" type="text/html">
	<!-- ko if: item.IsSeparator -->
	<designer-detail-item-separator params="active: item.Selected"></designer-detail-item-separator>
	<!-- /ko -->
	<!-- ko if: !item.IsSeparator && !item.IsGrid && !item.IsButton-->
	<designer-detail-item
		params="label: {position: item.LabelPosition, text: item.LabelText}, value: {text: item.ValueText}, active: item.Selected"
	></designer-detail-item>
	<!-- /ko -->
	<!-- ko if: item.IsButton -->
	<designer-detail-item-button
		params="label: {position: item.LabelPosition, visible: item.LabelVisible, text: item.LabelText}, value: {text: item.ValueText}, active: item.Selected"
	></designer-detail-item-button>
	<!-- /ko -->
	<!-- ko if: item.IsGrid -->
	<designer-detail-item-table params="active: item.Selected">
		<!-- ko foreach: $parent.item.Items -->
		<div data-bind="template: { name: 'tmplFormDragItemNew', data: { item: $data } }"></div>
		<!-- /ko -->
	</designer-detail-item-table>
	<!-- /ko -->
</script>

<script id="htmlTabDragElement" type="text/html">
	<card params="label: label, imgSrc: imgSrc, isCollapsed: isCollapsed, active: active, headerStyle: headerStyle"></card>
</script>

<!-- BEGIN: tmplFormDragItem -->
<script id="tmplFormDragItem" type="text/html">
	<div
		style="display:flex; flex-direction:row; flex: 0 0 auto; padding:5px; background-color:#9ecfe9; width:240px; transform-origin:top left;"
		data-bind="flexDirection: item.LabelPosition, style:{ transform: zoomLevelScale }"
	>
		<div
			class="DetailItemLabel"
			style="width:100px"
			data-bind="text: item.Value, visible: item.LabelVisible, style: {alignSelf: item.LabelAlign, width: item.LabelWidth }"
		></div>
		<div style="flex:1 1 auto; background-color:#EEE; min-height:3px" data-bind="text: item.DisplayName"></div>
	</div>
</script>
<!-- BEGIN: tmplWoodfordIFrameDialog-->
<script id="tmplWoodfordIFrameDialog" type="text/html">
	<table style="width:100%;">
		<tr data-bind="visible: IsNameVisible">
			<td><b>Name:</b></td>
			<td><input data-testid="IFrame-name" type="text" data-bind="value:Name" style="width:300px; box-sizing:border-box;" /></td>
		</tr>
		<tr data-bind="visible: IsTypeVisible">
			<td><b>Type:</b></td>
			<td>
				<select
					data-testid="IFrame-type"
					data-bind="options: Types, optionsText: function(t) { return MobileCRM.Woodford.Localization.Instance.Get('Label.' + t); }, value: Type, valueAllowUnset: false"
					style="width: 300px; box-sizing:border-box;"
				></select>
			</td>
		</tr>
		<tr>
			<td><b>Url:</b></td>
			<td><input data-testid="IFrame-url" type="text" data-bind="value:Url" style="width:300px; box-sizing:border-box;" /></td>
		</tr>
		<tr data-bind="visible: IsAuthenticateVisible" class="tooltipsource" data-tooltip="IFrameDialog.Authenticate">
			<td><b>Authenticate:</b></td>
			<td>
				<label><input data-testid="IFrame-auth" type="checkbox" data-bind="checked: Authenticate" /></label>
			</td>
		</tr>
		<tr data-bind="visible: IsDelayLoadVisible" class="tooltipsource" data-tooltip="IFrameDialog.DelayLoad">
			<td><b>Delay Load:</b></td>
			<td>
				<label><input data-testid="IFrame-delay" type="checkbox" data-bind="checked: DelayLoad" /></label>
			</td>
		</tr>
		<tr data-bind="visible: IsVisibleVisible">
			<td><b>Visible:</b></td>
			<td>
				<label><input data-testid="IFrame-visible" type="checkbox" data-bind="checked: Visible" /></label>
			</td>
		</tr>
		<tr data-bind="visible: IsOptimizeVisible" class="tooltipsource" data-tooltip="IFrameDialog.Optimize">
			<td><b>Optimization:</b></td>
			<td>
				<select
					class="value"
					data-testid="IFrame-optimize"
					data-bind="value: Optimize, options: ['Project Default', 'Enabled', 'Disabled']"
					style="width:300px; box-sizing:border-box;"
				></select>
			</td>
		</tr>
		<tr data-bind="visible: Visible() && OpenLinksInBrowserVisible" class="tooltipsource" data-tooltip="IFrameDialog.OpenLinksInBrowser">
			<td>
				<b>Open web links<br />in external browser:</b>
			</td>
			<td>
				<label><input data-testid="IFrame-links" type="checkbox" data-bind="checked: OpenLinksInBrowser" /></label>
			</td>
		</tr>
		<tr data-bind="visible: IsProvidesDataSourceVisible" class="tooltipsource" data-tooltip="IFrameDialog.ProvidesDataSource">
			<td><b>Provides Data Source:</b></td>
			<td>
				<label><input data-testid="IFrame-source" type="checkbox" data-bind="checked: ProvidesDataSource" /></label>
			</td>
		</tr>
	</table>
</script>
<!-- END: tmplWoodfordIFrameDialog-->
<script type="text/html" id="tmplImagePickerDialog">
	<!-- ko template: {name: "tmplRescoImageGallery", data: galleryControl} -->
	<!-- /ko-->
</script>
<!-- BEGIN: tmplLookupPropertiesDialog-->
<script id="tmplLookupPropertiesDialog" type="text/html">
	<div style="flex: 0 0 auto; display:flex" data-bind="visible: ShowTabs">
		<!-- ko foreach: Tabbar -->
		<div class="tabControlItem" data-bind="css: { tabControlItemSelected: Selected() }, click: Clicked, visible: Visible">
			<span style="padding:0.3em" data-bind="text: Name"></span>
		</div>
		<!-- /ko -->
	</div>
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===0, template: { name: 'tmplSelectViewsControl', data: ViewsControl}"
	></div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===1, template: { name: 'tmplSelectViewsControl', data: DialogViews}"
	></div>
	<div style="flex:1 1 auto; flex-direction:column" class="flexDiv" data-bind="visible: SelectedTabIndex()===2">
		<label><input type="checkbox" data-bind="checked: DialogOnly" />Show Dialog Only</label><br />
		<label><input type="checkbox" data-bind="checked: AllowCreateNew" />Create New</label><br />
	</div>
</script>
<!-- END: tmplLookupPropertiesDialog-->
<!-- BEGIN: tmplMapDialog-->
<script id="tmplMapDialog" type="text/html">
	<table>
		<tr>
			<td><b>Name:</b></td>
			<td><input type="text" data-bind="value:Name" /></td>
		</tr>
		<tr>
			<td><b>Latitude:</b></td>
			<td>
				<select
					style="width:200px"
					data-bind="options: Fields, optionsText: 'DisplayName', optionsValue: 'LogicalName', value: Latitude, valueAllowUnset: true"
				></select>
			</td>
		</tr>
		<tr>
			<td><b>Longitude:</b></td>
			<td>
				<select
					style="width:200px"
					data-bind="options: Fields, optionsText: 'DisplayName', optionsValue: 'LogicalName', value: Longitude, valueAllowUnset: true"
				></select>
			</td>
		</tr>
	</table>
</script>
<!-- END: tmplMapDialog-->
<!-- BEGIN: tmplSelectMapRegionDialog -->
<script id="tmplSelectMapRegionDialog" type="text/html">
	<div style="width:100%;height:100%;display:flex;flex-direction:row">
		<div id="bingMapsControl" style="flex: 4 1 auto"></div>
	</div>
</script>
<!-- END: tmplSelectMapRegionDialog -->
<!-- BEGIN: tmplNewCommandDialog-->
<script id="tmplNewCommandDialog" type="text/html">
	<table style="width:100%">
		<tr>
			<td><b>Name</b></td>
			<td><b>Label</b></td>
		</tr>
		<tr>
			<td><span style="color:#ccc">custom_</span><input type="text" data-bind="value:Name" /></td>
			<td><input type="text" data-bind="value:Label" /></td>
		</tr>
	</table>
</script>
<!-- END: tmplNewCommandDialog -->
<!-- BEGIN: tmplQualifyLeadDialog-->
<script id="tmplQualifyLeadDialog" type="text/html">
	<table>
		<thead>
			<tr>
				<th></th>
				<th>Visible</th>
				<th>Enabled</th>
				<th>Checked</th>
			</tr>
		</thead>
		<tbody>
			<!-- ko foreach: Fields -->
			<tr>
				<td><span data-bind="text: EntityName"></span></td>
				<td><input type="checkbox" data-bind="checked: Visible" style="text-align:center" /></td>
				<td><input type="checkbox" data-bind="checked: Enabled" style="text-align:center" /></td>
				<td><input type="checkbox" data-bind="checked: Checked" style="text-align:center" /></td>
			</tr>
			<!-- /ko -->
		</tbody>
	</table>
</script>
<!-- END: tmplQualifyLeadDialog -->
<!-- BEGIN: RichText Dialog Template -->
<script id="tmplRichTextDialog" type="text/html">
	<table>
		<tr>
			<td><b>Name:</b></td>
			<td><input style="width:200px" type="text" data-bind="value:Name" /></td>
		</tr>
		<tr>
			<td><b>Select Field:</b></td>
			<td>
				<select
					style="width:200px"
					data-bind="options: Fields, optionsText: 'DisplayName', optionsValue: 'LogicalName', value: FormattedField, valueAllowUnset: false"
				></select>
			</td>
		</tr>
	</table>
</script>
<!-- END: tmplRichTextDialog -->
<!-- BEGIN: tmplSelectChartsDialog-->
<script id="tmplSelectChartsDialog" type="text/html">
	<div style="flex: 0 0 auto; display:flex">
		<!-- ko foreach: Tabbar -->
		<div class="tabControlItem" data-bind="css: { tabControlItemSelected: Selected() }, click: Clicked, visible: Visible">
			<span style="padding:0.3em" data-bind="text: Name"></span>
		</div>
		<!-- /ko -->
	</div>
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===0, template: { name: 'tmplSelectViewsControl', data: ViewsControl}"
	></div>
</script>
<!-- END: tmplSelectChartsDialog-->
<!-- BEGIN: tmplSelectProcessDialog-->
<script id="tmplSelectProcessDialog" type="text/html">
	<!-- ko if: !ProcessesExist() -->
	<div class="dialogInfoMessage">
		<div class="dialogInfoMessage__icon">
			<i class="woodfordsprite icon-woodford_Info_36"></i>
		</div>
		<div class="dialogInfo__text">
			<h1 class="dialogInfoMessage__title">No process available</h1>
			<p>You can create and manage a "Process" in the "Process" editor.</p>
			<p>Remember that you must save your work to switch to the new view.</p>
			<p>Click the "Create new" button to create a new process</p>
		</div>
	</div>
	<!-- /ko -->
	<!-- ko if: ProcessesExist() -->
	<div class="project__option">
		<div class="project__option--title">
			<span>Process:</span>
		</div>
		<select data-bind="options: ProcessControls, value: SelectedProcessControl, AllowUnset: false, enable: HasOptions"></select>
	</div>
	<!-- /ko -->
</script>
<!-- END: tmplSelectProcessDialog-->
<!-- BEGIN: tmplSignatureDialog-->
<script id="tmplSignatureDialog" type="text/html">
	<table>
		<tr>
			<td><b>Name:</b></td>
			<td><input type="text" data-bind="value:Name" /></td>
		</tr>
		<tr data-bind="visible: GetStatusField() !== undefined">
			<td><b>Required for Status:</b></td>
			<td><input type="text" readonly data-bind="value:RequiredStatus" /><button data-bind="click: OnRequiredClick">...</button></td>
		</tr>
		<tr>
			<td><b>Entity:</b></td>
			<td>
				<select
					style="width:200px"
					data-bind="options: Entities, optionsText: function(e) { return e.DisplayName }, value: Entity, valueAllowUnset: false"
				></select>
			</td>
		</tr>
		<tr>
			<td><b data-bind="value:RecordLabel">Title Equals:</b></td>
			<td><input type="text" data-bind="value:RecordTitle" /></td>
		</tr>
		<tr>
			<td><b>Flags:</b></td>
			<td>
				<label><input type="checkbox" data-bind="checked: RaiseChangeEvent" /><span>Trigger OnChange event</span></label>
			</td>
		</tr>
		<tr>
			<td><b>Action:</b></td>
			<td>
				<!-- ko foreach: DocActions -->
				<label><input type="checkbox" data-bind="checked: IsChecked" /><span data-bind="text: Label"></span></label><br />
				<!-- /ko -->
			</td>
		</tr>
	</table>
</script>
<!-- END: tmplSignatureDialog-->
<!-- tmplStartSmartSyncDialog -->
<script id="tmplStartSmartSyncDialog" type="text/html">
	<div style="display:flex; flex-direction:column; flex:1 1 100%">
		<div data-bind="grid: grid" data-definitiononly="false" style="flex: 1 1 100%">
			<div data-columnname="Name" data-flex="1 0 150px" data-binding="name" data-horalign="left" data-sort="ascending"></div>
			<div data-columnname="Description" data-flex="1 0 150px" data-binding="description" data-horalign="left" data-sort="ascending"></div>
		</div>
	</div>
</script>
<!-- BEGIN: tmplTaggedImageDialog-->
<script id="tmplTaggedImageDialog" type="text/html">
	<!-- ko if: Tabbar().length > 1 -->
	<div style="flex: 0 0 auto; display:flex">
		<!-- ko foreach: Tabbar -->
		<div class="tabControlItem" data-bind="css: { tabControlItemSelected: Selected() }, click: Clicked, visible: Visible">
			<span style="padding:0.3em" data-bind="text: Name"></span>
		</div>
		<!-- /ko -->
	</div>
	<!-- /ko -->
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>

	<table style="margin: 10px" data-bind="visible: SelectedTabIndex()===0">
		<tr>
			<td><b>Tab Name:</b></td>
			<td><input style="width: 100%" type="text" data-bind="value:Name" /></td>
			<td><b>Image Name:</b></td>
			<td><input style="width: 100%" type="text" data-bind="value:ImageName" /></td>
		</tr>
		<tr style="height: 20px">
			<td></td>
		</tr>
		<tr>
			<td><b>Image Related To:</b></td>
			<td>
				<select
					style="width:100%"
					data-bind="options: ImageRelatedToFields, optionsText: 'key', optionsValue: 'value', value: ImageRelatedTo, valueAllowUnset: true"
				></select>
			</td>
			<td><b>Image Entity:</b></td>
			<td>
				<select
					style="width:100%"
					data-bind="options: AttachmentEntities, optionsText: 'DisplayName', optionsValue: 'LogicalName', value: ImageEntityName, valueAllowUnset: false"
				></select>
			</td>
		</tr>
		<tr>
			<td><b>Show:</b></td>
			<td>
				<select style="width: 150px" data-bind="value: ContentMode, valueAllowUnset: false">
					<option value="0">Related Entities</option>
					<option value="1">Form Entity Only</option>
				</select>
			</td>
			<td></td>
			<td></td>
		</tr>
		<!-- ko if: ContentMode() === "1" -->
		<tr>
			<td><b>Pin Color:</b></td>
			<td>
				<div style="display: flex; flex-direction: row; align-items: center">
					<input style="width: 100px; height: 20px" type="text" data-bind="value:FormPinColor" />
					<div style="width: 20px; height: 20px" class="transparent-background-container">
						<span
							class="color-container"
							data-bind="style:{ backgroundColor: FormPinColor }, click: function(d, e) { $data.OpenColorPicker.call($data, FormPinColor, e.currentTarget) }"
						></span>
					</div>
				</div>
			</td>
			<td><b>Text Color:</b></td>
			<td>
				<div style="display: flex; flex-direction: row; align-items: center">
					<input style="width: 100px; height: 20px" type="text" data-bind="value:FormPinTextColor" />
					<div style="width: 20px; height: 20px" class="transparent-background-container">
						<span
							class="color-container"
							data-bind="style:{ backgroundColor: FormPinTextColor }, click: function(d, e) { $data.OpenColorPicker.call($data, FormPinTextColor, e.currentTarget) }"
						></span>
					</div>
				</div>
			</td>
		</tr>
		<!-- /ko -->
		<tr style="height: 20px">
			<td></td>
		</tr>
		<tr>
			<td><b>Tag Entity:</b></td>
			<td>
				<select style="width:100%" data-bind="options: TagEntities, optionsText: 'DisplayName', value: TagEntity, valueAllowUnset: true"></select>
			</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td><b>Position X:</b></td>
			<td>
				<select
					style="width:100%"
					data-bind="options: TagNumericFields, optionsText: 'DisplayName', optionsValue: 'LogicalName', value: TagX, valueAllowUnset: true"
				></select>
			</td>
			<td><b>Position Y:</b></td>
			<td>
				<select
					style="width:100%"
					data-bind="options: TagNumericFields, optionsText: 'DisplayName', optionsValue: 'LogicalName', value: TagY, valueAllowUnset: true"
				></select>
			</td>
		</tr>
		<!-- ko if: AvailableImageAssociations.length > 1 -->
		<tr>
			<td><b>Image Association:</b></td>
			<td>
				<select
					style="width:100%"
					data-bind="options: AvailableImageAssociations, optionsText: 'value', optionsValue: 'key', value: ImageAssociationType, valueAllowUnset: false"
				></select>
			</td>
			<td></td>
			<td></td>
		</tr>
		<!-- /ko -->
		<!-- ko if: ImageAssociationIsLookup() -->
		<tr>
			<td><b>Image Lookup:</b></td>
			<td>
				<select
					style="width:100%"
					data-bind="options: TagImageLookupFields, optionsText: 'DisplayName', optionsValue: 'LogicalName', value: TagTarget, valueAllowUnset: true"
				></select>
			</td>
			<td></td>
			<td></td>
		</tr>
		<!-- /ko -->
		<!-- ko if: ImageAssociationIsImageName() -->
		<tr>
			<td><b>Regarding Image Lookup:</b></td>
			<td>
				<select
					style="width:100%"
					data-bind="options: TagImageRegardingLookupFields, optionsText: 'DisplayName', optionsValue: 'LogicalName', value: TagTarget, valueAllowUnset: true"
				></select>
			</td>
			<td><b>Image Name Field:</b></td>
			<td>
				<select
					style="width:100%"
					data-bind="options: TagStringFields, optionsText: 'DisplayName', optionsValue: 'LogicalName', value: TagImageName, valueAllowUnset: true"
				></select>
			</td>
		</tr>
		<!-- /ko -->
		<tr>
			<td><b>Object Lookup:</b></td>
			<td>
				<select
					style="width:100%"
					data-bind="options: TagLookupFields, optionsText: 'DisplayName', optionsValue: 'LogicalName', value: TagObject, optionsCaption: '<None>', valueAllowUnset: true"
				></select>
			</td>
			<td><b>Pin Mode:</b></td>
			<td>
				<select style="width: 150px" data-bind="value: PinMode, valueAllowUnset: true">
					<option value="0">Compact</option>
					<option value="1">Details</option>
				</select>
			</td>
			<td></td>
			<td></td>
		</tr>
	</table>
	<div style="height: 100%" data-bind="visible: SelectedTabIndex()===1">
		<!-- ko if: AllowedEntities().length === 0 -->
		<div style="display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; height: 100%">
			<div style="font-weight: bold; width: 100%; flex: 1 1 auto">No entities selected. Please add an entity.</div>
		</div>
		<!-- /ko -->
		<!-- ko if: AllowedEntities().length > 0 -->
		<table style="margin: 10px">
			<tr>
				<td><b>Entity:</b></td>
				<td>
					<select
						style="width:100%"
						data-bind="options: AllowedEntities, optionsText: 'Label', value: SelectedEntity, valueAllowUnset: true"
					></select>
				</td>
			</tr>
			<!-- ko if: SelectedEntity() -->
			<!-- ko with: SelectedEntity() -->
			<tr>
				<td><b>Relation Field:</b></td>
				<td>
					<select
						style="width:100%"
						data-bind="options: RelationFieldItems, optionsText: 'DisplayName', optionsValue: 'LogicalName', value: RelationField, valueAllowUnset: true"
					></select>
				</td>
			</tr>
			<tr>
				<td><b>Allow</b></td>
				<td>
					<label><input type="checkbox" data-bind="checked: CanCreate" />Create New</label>
					<label><input type="checkbox" data-bind="checked: CanDelete" />Delete Existing</label>
					<label><input type="checkbox" data-bind="checked: AddUnrelated" />Add Unrelated</label>
				</td>
			</tr>
			<tr>
				<td><b>Pin Color:</b></td>
				<td>
					<div style="display: flex; flex-direction: row; align-items: center">
						<input style="width: 100px; height: 20px" type="text" data-bind="value:PinColor" />
						<div style="width: 20px; height: 20px" class="transparent-background-container">
							<span
								class="color-container"
								data-bind="style:{ backgroundColor: PinColor }, click: function(d, e) { $parent.OpenColorPicker.call($parent, PinColor, e.currentTarget) }"
							></span>
						</div>
					</div>
				</td>
				<td><b>Text Color:</b></td>
				<td>
					<div style="display: flex; flex-direction: row; align-items: center">
						<input style="width: 100px; height: 20px" type="text" data-bind="value:PinTextColor" />
						<div style="width: 20px; height: 20px" class="transparent-background-container">
							<span
								class="color-container"
								data-bind="style:{ backgroundColor: PinTextColor }, click: function(d, e) { $parent.OpenColorPicker.call($parent, PinTextColor, e.currentTarget) }"
							></span>
						</div>
					</div>
				</td>
			</tr>
			<!-- /ko -->
			<!-- /ko -->
		</table>
		<br />
		<!-- ko if: SelectedEntity() -->
		<!-- ko with: SelectedEntity() -->
		<div
			style="height: 250px; flex:1 1 auto; flex-direction:column"
			class="flexDiv"
			data-bind="template: { name: 'tmplSelectViewsControl', data: AllowedViewsControl }"
		></div>
		<!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
	</div>
</script>
<!-- END: tmplTaggedImageDialog-->
<!-- BEGIN: tmplWoodfordUpgradeDialog -->
<script id="tmplWoodfordUpgradeDialog" type="text/html">
	<h3>A new version of Woodford is available.</h3>
	<div>Woodford version <b data-bind="text: NewVersion"></b> is available.</div>
	<div>Your current version is <b data-bind="text: CurrentVersion"></b>.</div>
	<div style="margin:20px 0px 20px 0px">Would you like to upgrade it?</div>
	<a href=" https://www.resco.net/downloads/releasenotes.txt" target="_blank">Change Notes</a>
</script>
<!-- END: tmplWoodfordUpgradeDialog -->
<!--
		tmplGitConfigurationDialog Editor Template
	-->
<script id="tmplGitConfigurationDialog" type="text/html">
	<div><b>Provider</div>
	<div>
		<select data-bind="options:providerTypeList, optionsText:'name', optionsValue:'value', value:providerType" style="width:100%; box-sizing:border-box"></select>
	</div>
	<div><b>Account Name</b></div>
	<div>
		<input type="text" data-bind="value:accountName" style="width:100%; box-sizing:border-box" />
	</div>
	<div data-bind="visible: providerType() === 'devops'">
		<div><b>Project Name</b></div>
		<div>
			<input type="text" data-bind="value:projectName" style="width:100%; box-sizing:border-box" />
		</div>
	</div>
	<div><b>Repository Name</b></div>
	<div>
		<input type="text" data-bind="value:repoName" style="width:100%; box-sizing:border-box" />
	</div>
	<div><b>Git Personal Access Token</b> (manage your PATs <a data-bind="attr: { href: tokenUrl }" target="_blank">here</a>)</div>
	<div>
		<form id="githubConfigurationDialog" data-bind="submit: formSubmit">
			<input type="password" autocomplete="off" data-bind="textInput:token" style="width:100%; box-sizing:border-box" />
		</form>
	</div>
	<label for="persistPAT">
		<input data-bind="checked: persistPAT, enable: token() != null && token() != ''" id="persistPAT" type="checkbox" style="width:auto" />
		Persist PAT across visits
	</label>
	<!--
		Select branch
		-->
	<div><b>Select branch [Connect first using the 'Connect' button below]</b></div>
	<div>
		<select
			data-bind="options:branchList, optionsText: 'name', optionsValue:'name', value:selectedBranch, enable:IsEditable"
			style="width:100%; box-sizing:border-box"
		></select>
		<!--<select data-bind="options:EntityList, optionsText: 'Label', optionsValue: 'LogicalName', value:EntityName, enable:IsEditable" style="width:100%"></select>-->
	</div>
	<p></p>
	<div class="gitConnectMessage" data-bind="visible:infoTextVisible">
		<span data-bind="text:infoText" style="color: red;"></span>&nbsp;<a target="_blank" data-bind="attr: {href: linkUrl}, visible:(linkUrl() != '')">here</a>
	</div>
</script>
<!--
		tmplGitCreateBranchDialog Editor Template
	-->
<script id="tmplGitCreateBranchDialog" type="text/html">
	<div style="display: flex; flex-direction: column; flex-grow: 1;">
		<div><b>From branch</b></div>
		<div>
			<select
				data-bind="options:branchList, optionsText: 'name', optionsValue:'name', value:fromBranch"
				style="width:100%; box-sizing:border-box"
			></select>
		</div>
		<div>
			<b>Create branch</b>
		</div>
		<div>
			<input type="text" data-bind="value: newBranch, event: { keyup: validateName }" style="width: 100%;" />
		</div>
		<div style="display: flex; align-items: center;">
			<!-- ko if: imageUrl() -->
			<i
				data-bind="attr: { class: Resco.Controls.Toolbar.SpriteClassBase + imageUrl() + ' iconSmall' }"
				style="transform: scale(0.5) translate(-50%, 0px);"
			></i>
			<!-- /ko -->
			<span class="label" data-bind="text: errorLabel" style="margin-left: -20px;"></span>
		</div>
		<div style="flex-grow: 1;"></div>
		<div>
			<span
				>For valid branch names, see
				<a href="https://docs.github.com/en/get-started/using-git/dealing-with-special-characters-in-branch-and-tag-names" target="_blank"
					>docs</a
				></span
			>
		</div>
	</div>
</script>
<!--
		tmplGitCreatePullRequestDialog Editor Template
	-->
<script id="tmplGitCreatePullRequestDialog" type="text/html">
	<div style="display: flex; flex-direction: column; flex-grow: 1;">
		<div><b>Source branch (head)</b></div>
		<div>
			<select
				data-bind="options:branchList, optionsText: 'name', optionsValue:'name', value:sourceBranch"
				style="width:100%; box-sizing:border-box"
			></select>
		</div>
		<div><b>Target branch (base)</b></div>
		<div>
			<select
				data-bind="options:branchList, optionsText: 'name', optionsValue:'name', value:targetBranch"
				style="width:100%; box-sizing:border-box"
			></select>
		</div>
		<div><b>Title</b></div>
		<input type="text" data-bind="value: title" style="width: 100%;"></input>
		<div><b>Description</b></div>
		<textarea data-bind="value: description" maxlength="5000" style="flex-grow: 1;"></textarea>
	</div>
</script>
<!--
		tmplGitPasswordDialog Editor Template
	-->
<script id="tmplGitPasswordDialog" type="text/html">
	<div>
		<form id="githubPasswordDialog" data-bind="submit: formSubmit">
			<div><b>Password</b></div>
			<input type="password" autocomplete="off" data-bind="textInput: token" style="width: 95%; box-sizing:border-box;" />
		</form>
	</div>
</script>
<script id="tmplCountBadgeDialog" type="text/html">
	<div><input data-testid="auto-refresh" type="checkbox" data-bind="checked: AutoRefresh" />Enable Badge Auto-Refresh</div>
	<!-- ko if: AutoRefresh() -->
	<br />
	<div>
		<b>Refresh Interval</b>
		<input
			id="fldInterval"
			style="width:75px; box-sizing:border-box"
			type="number"
			step="30"
			data-bind="value: RefreshInterval, enterkey: OnEnterKey"
			data-testid="refresh-interval"
		/>
		seconds
		<br />
		<br />
		<b>Select Entity</b>
		<select
			data-testid="refresh-entity"
			data-bind="options: AvailableEntities, optionsText: 'LogicalName', value: SelectedEntity, valueAllowUnset: true"
		></select>
		<!-- ko if: SelectedEntity() -->
		<span style="color: blue; cursor: pointer; text-decoration: underline" data-bind="click: ChangeCountCondition">Set Count Condition</span>
		<!-- /ko -->
	</div>
	<!-- /ko -->
</script>
<script id="tmplRecordHomeItemDialog" type="text/html">
	<table>
		<tr>
			<td><b>Name:</b></td>
			<td><input data-testid="configure-name" type="text" data-bind="value:Name" style="width:300px; box-sizing:border-box;" /></td>
		</tr>
		<tr>
			<td><b>Entity:</b></td>
			<td>
				<select data-testid="configure-entity" style="width: 300px" data-bind="options: Entities, optionsText: 'DisplayName', value: Entity"></select>
			</td>
		</tr>
		<tr data-bind="visible: IsRecordVisible">
			<td><b>Record:</b></td>
			<td>
				<label
					><input
						data-testid="configure-record"
						type="text"
						placeholder="Select record"
						data-bind="value:Record"
						style="width:300px; box-sizing:border-box;"
						readonly
				/></label>
			</td>
			<td><button data-testid="configure-select-record" data-bind="click: $parent.SelectRecord_Click">...</button></td>
		</tr>
	</table>
</script>
<script id="tmplRenameHomeItemDialog" type="text/html">
	<table>
		<tr>
			<td><b>Name</b></td>
			<td width="100%">
				<input
					id="fldName"
					style="width:100%; box-sizing:border-box"
					type="text"
					data-bind="value: Name, enterkey: OnEnterKey, valueUpdate: 'afterkeyup', attr: { 'data-testid': 'fldName'}"
				/>
			</td>
		</tr>
		<tr data-bind="visible: IsTooltipVisible">
			<td style="white-space: nowrap"><b>Tooltip</b></td>
			<td width="100%">
				<input
					style="width:100%; box-sizing:border-box"
					type="text"
					data-bind="value: TooltipLocContent, enterkey: OnEnterKey, attr: {'data-testid': 'tooltipName'}"
				/>
			</td>
		</tr>
	</table>
</script>
<!-- BEGIN: tmplHotReloadDialog-->
<script id="tmplHotReloadDialog" type="text/html">
	<div class="live-preview-content">
		<div class="live-preview-left">
			<h1 class="live-preview-title">Live Preview</h1>

			<p class="live-preview-description">
				Test your changes instantly on a connected device — no need to publish. Open Resco MobileCRM, synchronize with this specific app project,
				connect your test device, and hit Save in Woodford to see your updates right away.
			</p>

			<div class="live-preview-toggle">
				<label class="toggle-switch">
					<input type="checkbox" data-bind="checked: isLivePreviewEnabled" />
					<span class="toggle-slider"></span>
				</label>
				<span class="toggle-label">Turn on "Live preview"</span>
			</div>

			<div class="connection-options" data-bind="visible: isLivePreviewEnabled()||sessionId()">
				<p class="options-intro">You can connect using any one of the following options:</p>

				<ol type="A">
					<li class="option-step">Scan the QR code on your device.</li>
					<li class="option-step">In MobileCRM Setup Enter the Session PIN.</li>
					<li class="option-step">Join using Session URL.</li>
				</ol>
			</div>
		</div>

		<div class="live-preview-right">
			<div class="qr-code-container">
				<canvas id="qrCodeContainer" alt="QR Code" class="qr-code" />
			</div>

			<div class="url-container" data-bind="visible: isLivePreviewEnabled()||sessionId()">
				<a href="#" class="join-link" data-bind="attr: { href: sessionUrl() }">Session URL</a>
				<button class="copy-button" data-bind="click: copySessionUrl" title="Copy to clipboard">
					<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path
							d="M4.5 13C4.0875 13 3.73438 12.8531 3.44062 12.5594C3.14687 12.2656 3 11.9125 3 11.5V1.5C3 1.0875 3.14687 0.734376 3.44062 0.440626C3.73438 0.146876 4.0875 0 4.5 0H12.5C12.9125 0 13.2656 0.146876 13.5594 0.440626C13.8531 0.734376 14 1.0875 14 1.5V11.5C14 11.9125 13.8531 12.2656 13.5594 12.5594C13.2656 12.8531 12.9125 13 12.5 13H4.5ZM4.5 11.5H12.5V1.5H4.5V11.5ZM1.5 16C1.0875 16 0.734375 15.8531 0.440625 15.5594C0.146875 15.2656 0 14.9125 0 14.5V3H1.5V14.5H11V16H1.5Z"
							fill="#1C1B1F"
						/>
					</svg>
				</button>
			</div>
			<div class="option-item" data-bind="visible: isLivePreviewEnabled()||sessionId()">
				<span class="option-text">PIN:</span>
				<div class="session-id-container">
					<span class="session-id" data-bind="text: sessionId"></span>
					<button class="copy-button" data-bind="click: copySessionId" title="Copy to clipboard">
						<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path
								d="M4.5 13C4.0875 13 3.73438 12.8531 3.44062 12.5594C3.14687 12.2656 3 11.9125 3 11.5V1.5C3 1.0875 3.14687 0.734376 3.44062 0.440626C3.73438 0.146876 4.0875 0 4.5 0H12.5C12.9125 0 13.2656 0.146876 13.5594 0.440626C13.8531 0.734376 14 1.0875 14 1.5V11.5C14 11.9125 13.8531 12.2656 13.5594 12.5594C13.2656 12.8531 12.9125 13 12.5 13H4.5ZM4.5 11.5H12.5V1.5H4.5V11.5ZM1.5 16C1.0875 16 0.734375 15.8531 0.440625 15.5594C0.146875 15.2656 0 14.9125 0 14.5V3H1.5V14.5H11V16H1.5Z"
								fill="#1C1B1F"
							/>
						</svg>
					</button>
				</div>
			</div>
		</div>
	</div>
</script>
<!-- END: tmplHotReloadDialog -->
<!-- BEGIN: tmplEditHubDialog-->
<script id="tmplEditHubDialog" type="text/html">
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>

	<div style="flex:1 1 auto; flex-direction:row" class="flexDiv">
		<div
			style="flex: 1 1 auto;overflow:auto; margin:0px 5px 0px 5px; border:1px solid silver; background:white;"
			data-bind="template: { name: 'TreeView', data: ViewTree, as: 'x' }"
		></div>
		<div
			style="flex: 1 1 auto;overflow:auto; margin:0px 5px 0px 5px; border:1px solid silver; background:white;"
			data-bind="template: { name: 'TreeView', data: DrillTree, as: 'x' }"
		></div>
	</div>
</script>
<!-- END: tmplEditHubDialog-->
<!-- BEGIN: tmplSelectRelationshipDialog-->
<script id="tmplSelectRelationshipDialog" type="text/html">
	<table>
		<tr>
			<td><b>Entity:</b></td>
			<td><select data-bind="options: Entities, optionsText: 'Label', value: Entity, valueAllowUnset: false" style="width:100%"></select></td>
		</tr>
		<tr>
			<td><b>View:</b></td>
			<td><select data-bind="options: Views, value: View, valueAllowUnset: true" style="width:100%"></select></td>
		</tr>
	</table>
</script>
<!-- END: tmplSelectRelationshipDialog-->
<!-- BEGIN: tmplSelectViewDialog-->
<script id="tmplSelectViewDialog" type="text/html">
	<table>
		<tr>
			<td><b>Entity:</b></td>
			<td><select data-bind="options: Entities, optionsText: 'DisplayName', value: Entity, valueAllowUnset: false" style="width:100%"></select></td>
		</tr>
		<tr>
			<td><b>View:</b></td>
			<td><select data-bind="options: Views, value: View, valueAllowUnset: true" style="width:100%"></select></td>
		</tr>
		<tr data-bind="visible: ShowSort">
			<td><b>Sort:</b></td>
			<td>
				<select data-bind="options: SortFields, optionsText: 'DisplayName', value: SortField, valueAllowUnset: true" style="width:100%"></select>
			</td>
		</tr>
	</table>
</script>
<!-- END: tmplSelectViewDialog-->
<!-- BEGIN: tmplCalendarDateDialog-->
<script id="tmplCalendarDateDialog" type="text/html">
	<div style="display:flex; flex-direction:column; height:100%;">
		<!-- Tab bar -->
		<div style="flex:0 0 auto; display:flex; margin-bottom:8px;">
			<!-- ko foreach: Tabbar -->
			<div class="tabControlItem" data-bind="css:{ tabControlItemSelected: Selected() }, click: Clicked" style="cursor:pointer; padding:4px 10px;">
				<span data-bind="text: Name"></span>
			</div>
			<!-- /ko -->
		</div>

		<!-- Dates Tab -->
		<table style="width:100%; border-collapse:collapse;" data-bind="visible: SelectedTabIndex()===0">
			<tr>
				<td colspan="2" style="padding:8px;">Configure Start / End Fields</td>
			</tr>
			<tr>
				<td style="white-space:nowrap; width:120px; padding:8px;"><b>Start Field</b></td>
				<td style="padding:8px;">
					<select
						style="width:100%;"
						data-bind="options: CalendarDates, optionsText: 'Value', optionsValue: 'Key', value: StartField, valueAllowUnset: false"
					></select>
				</td>
			</tr>
			<tr>
				<td style="white-space:nowrap; padding:8px;"><b>End Field</b></td>
				<td style="padding:8px;">
					<select
						style="width:100%;"
						data-bind="options: CalendarDates, optionsText: 'Value', optionsValue: 'Key', value: EndField, valueAllowUnset: false"
					></select>
				</td>
			</tr>
		</table>

		<!-- Cards Tab -->
		<table style="border-collapse:collapse; width:100%; table-layout:fixed; height:calc(100vh - 140px);" data-bind="visible: SelectedTabIndex()===1">
			<tr>
				<td colspan="2" style="padding:8px 8px 4px 8px;">
					<div style="line-height:1.35;">
						Configure which details appear on the task card in Day or Week view. By default, only Header is shown,<br />
						but you can add up to two more fields (maximum three).
					</div>
				</td>
			</tr>
			<tr>
				<td style="vertical-align:top; width:32%; min-width:300px; padding:0 5% 0 1%;">
					<div style="margin-bottom:10px;">
						<label style="font-weight:600; display:block; margin-bottom:2px;">Header</label>
						<select
							style="width:100%; padding:2px 4px;"
							data-bind="options: CalendarFields, optionsText: 'Value', optionsValue: 'Key', value: CardHeader, valueAllowUnset: false"
						></select>
					</div>
					<div style="margin-bottom:10px;">
						<label style="font-weight:600; display:block; margin-bottom:2px;">Body</label>
						<select
							style="width:100%; padding:2px 4px;"
							data-bind="options: CalendarFields, optionsText: 'Value', optionsValue: 'Key', value: CardBody, valueAllowUnset: false"
						></select>
					</div>
					<div>
						<label style="font-weight:600; display:block; margin-bottom:2px;">Footer</label>
						<select
							style="width:100%; padding:2px 4px;"
							data-bind="options: CalendarFields, optionsText: 'Value', optionsValue: 'Key', value: CardFooter, valueAllowUnset: false"
						></select>
					</div>
				</td>
				<td style="vertical-align:top; padding:0;">
					<div
						style="width:100%; height:100%; position:relative; background:#fbfbfd; border-radius:24px; margin-left:0; box-shadow:inset 0 0 0 1px #ececf1;"
					>
						<div style="position:absolute; top:15px; left:0; right:0; bottom:0; display:flex; flex-direction:column; gap:20px;">
							<!-- ko foreach: [10,11,12,13,14] -->
							<div style="flex:1; position:relative;">
								<span data-bind="text: $data + ':00'" style="position:absolute; left:12px; top:-8px; color:#5f5f67;"></span>
								<div style="position:absolute; left:calc(5ch + 15px); right:0; top:0; height:1px; background:#dcdce2;"></div>
							</div>
							<!-- /ko -->
						</div>
						<div
							style="position:absolute; top:15%; left:55%; transform:translateX(-50%); height:70%; width:clamp(200px,55%,380px); background:#ffe9b3; box-shadow:0 3px 6px rgba(0,0,0,.2); border-radius:8px; padding:5% 5.5% 5% 5.5%; display:flex; flex-direction:column; gap:1.5%;"
						>
							<div style="font-weight:600;" data-bind="text: CardHeaderText"></div>
							<div data-bind="text: CardBodyText"></div>
							<div style="margin-top:auto;" data-bind="text: CardFooterText"></div>
						</div>
					</div>
				</td>
			</tr>
		</table>
	</div>
</script>
<!-- END: tmplCalendarDateDialog -->
<!-- BEGIN: tmplControllersEditor -->
<script id="tmplControllersEditor" type="text/html">
	<div style="padding: 5px;height:100%">
		<div data-bind="grid: Grid" data-definitiononly="false" data-twowaybinding="true" style="white-space:nowrap; height: 100%">
			<div data-columnname="Name" data-flex="1 1 40%" data-horalign="left" data-sort="ascending">
				<div style="height:100%; display:flex; align-items:center">
					<i data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_' + data.Image }" style="margin:2px 5px"></i>
					<span class="rowCell__label" data-bind="text: data.Label,attr: { title: data.Label}"></span>
				</div>
			</div>
			<div data-columnname="Type" data-binding="TypeLabel" data-flex="1 1 30%" data-horalign="left"></div>
			<div data-columnname="Date" data-binding="DateLabel" data-flex="1 1 20%" data-horalign="right"></div>
			<div data-columnname="State" data-flex="1 1 10%" data-horalign="left"></div>
			<div data-columnname="Description" data-flex="1 1 30%" data-horalign="left"></div>
		</div>
	</div>
</script>
<!-- END: tmplControllersEditor -->
<!-- BEGIN: tmplCopyDesignDialog-->
<script id="tmplCopyDesignDialog" type="text/html">
	<span style="color:darkgray">Initialize From:</span>
	<br />
	<select data-bind="value: InitializeFrom, valueAllowUnset: false">
		<option value="0">From Built-In</option>
		<option value="1">From Entity</option>
	</select>
	<br />
	<div data-bind="visible:InitializeFrom()=='0'">
		<select data-bind="options: BuiltInList, optionsText: 'Key', optionsValue: 'Value', value: BuiltIn, valueAllowUnset: false"></select>
	</div>
	<div data-bind="visible:InitializeFrom()=='1'">
		<select data-bind="options: EntityList, optionsText: 'DisplayName', value: SelectedEntity, valueAllowUnset: false"></select>
		<select data-bind="options: ViewList, optionsText: 'Name', value: ViewName, valueAllowUnset: true"></select>
		<select data-bind="options: TemplateList, value: TemplateName, valueAllowUnset: true"></select>
	</div>
	<label for="cbBounds"><input id="cbBounds" type="checkbox" data-bind="checked: CopyBounds" style="width:auto" />Bounds + Anchors</label>
	<label for="cbStyles"><input id="cbStyles" type="checkbox" data-bind="checked: CopyStyle" style="width:auto" />Style</label>
	<label for="cbBinding"><input id="cbBinding" type="checkbox" data-bind="checked: CopyBinding" style="width:auto" />Binding</label>
	<br />
</script>
<!-- END: tmplCopyDesignDialog -->
<!-- BEGIN: tmplDesignSizeDialog-->
<script id="tmplDesignSizeDialog" type="text/html">
	<table>
		<tr>
			<td><b>Platform</b></td>
			<td width="100%">
				<select
					style="width:100%"
					data-bind="options: Platforms, optionsText: 'Label', optionsValue:'Value', value: Platform, valueAllowUnset: false"
				></select>
			</td>
		</tr>
		<tr>
			<td><b>Design&nbsp;Width</b></td>
			<td width="100%"><input type="number" style="width:100%;box-sizing: border-box;" data-bind="value:DesignWidth, enable:IsEditable" /></td>
		</tr>
		<tr>
			<td><b>Design&nbsp;Height</b></td>
			<td width="100%"><input type="number" style="width:100%;box-sizing: border-box;" data-bind="value:DesignHeight, enable:IsEditable" /></td>
		</tr>
		<tr>
			<td>
				<b><label for="cbResizeCells">Resize&nbsp;Cells</label></b>
			</td>
			<td><input type="checkbox" id="cbResizeCells" data-bind="checked:ResizeTemplate" /></td>
		</tr>
	</table>
</script>
<!-- END: tmplDesignSizeDialog -->
<!-- BEGIN: tmplDrillDownDialog-->
<script id="tmplDrillDownDialog" type="text/html">
	<div data-bind="grid: Grid" data-definitiononly="false" style="background:white; height: 100%">
		<div data-columnname="DisplayName" data-flex="1 0 200px" data-horalign="left" data-sortable="true" data-sort="ascending">
			<div style="display:flex; height:100%; align-items:center">
				<input type="checkbox" data-bind="checked: data.IsEnabled" />&nbsp;<span data-bind="text: data.DisplayName"></span>
			</div>
		</div>
		<div data-columnname="Name" data-flex="0 0 150px" data-binding="LogicalName" data-sortable="true" data-horalign="left"></div>
		<div data-columnname="Type" data-flex="0 0 150px" data-binding="TypeLabel" data-sortable="true" data-horalign="left"></div>
	</div>
</script>
<!-- END: tmplDrillDownDialog -->
<!-- BEGIN: tmplImageQueryDialog-->
<script id="tmplImageQueryDialog" type="text/html">
	<div class="project__option">
		<div class="project__option--title">
			<span>Image Data:</span>
		</div>
		<div class="imgQuery-group">
			<label class="imgQuery-label">Select entity</label>
			<select
				class="imgQuery-input"
				data-bind="options: Entities, optionsText: 'Label', value: Entity, valueAllowUnset: true, optionsCaption: 'None'"
			></select>
		</div>
		<div class="imgQuery-group">
			<label class="imgQuery-label">Select field</label>
			<select
				class="imgQuery-input"
				data-bind="options: Fields, optionsText: 'Label', value: Field, valueAllowUnset: true, optionsCaption: 'None'"
			></select>
		</div>
	</div>
	<div class="project__option">
		<div class="project__option--title">
			<span>Conditions:</span>
		</div>
		<div class="conditions-wrapper">
			<div class="condition-column">
				<!-- ko foreach: Conditions -->
				<div class="condition-group">
					<select
						class="condition-select"
						data-bind="options: $parent.ConditionFields, optionsText: 'DisplayName', value: Field, valueAllowUnset: true"
					></select>
					<input class="condition-input" type="text" data-bind="value:Value" />
					<div class="condition-delete-button ">
						<i class="woodfordsprite icon-woodford_StyleEditor_delete" data-bind="click:$parent.OnDeleteClicked.bind($parent)"></i>
					</div>
				</div>
				<!-- /ko -->
			</div>
		</div>

		<div class="add-condition" data-bind="click: () => AddConditionItem()">
			<i class="add-condition-img woodfordsprite icon-woodford_StyleEditor_new"></i>
			Add condition
		</div>
	</div>
	<div class="project__option">
		<div class="project__option--title">
			<span>Placeholder image:</span>
		</div>
		<div class="imgQuery-group">
			<label class="imgQuery-label">Select image</label>
			<input type="text" class="imgQuery-input" list="imageNames" data-bind="value: Placeholder" />
			<datalist id="imageNames">
				<!-- ko foreach: imgNamesForPlaceholderImg -->
				<option data-bind="value: $data"></option>
				<!-- /ko -->
			</datalist>
		</div>
	</div>
</script>
<!-- END: tmplImageQueryDialog-->
<!-- BEGIN: tmplListDesigner -->
<script id="tmplListDesigner" type="text/html">
	<div class="designer listDesigner">
		<div class="designer__leftPanel">
			<div class="wfheader">
				<label class="label">Properties</label>
			</div>
			<div class="designerPanel">
				<div class="properties-panel">
					<editor-section params="title: 'View'" data-bind="visible: _entity"></editor-section>
					<spacer></spacer>
					<editor-row params="label: 'Default layout', tooltip: 'ViewDesigner.DefaultLayout'" data-bind="visible: _entity">
						<segmented-button params="value: $parent.ListColumns, options: $parent.defaultViewOptions"></segmented-button>
					</editor-row>
					<editor-row params="label: 'Horizontal ScrollBar', tooltip: 'ViewDesigner.HorizontalScrollBar'" data-bind="visible: _entity">
						<toggle params="value: $parent.HorizontalScrollBar"></toggle>
					</editor-row>
					<editor-row params="label: 'Auto table', tooltip: 'ViewDesigner.AutoTable'" data-bind="visible: _entity">
						<toggle params="value: $parent.autoTable"></toggle>
					</editor-row>
					<!-- ko if: autoTable() -->
					<editor-row params="label: 'Breakpoint', tooltip: 'ViewDesigner.BreakPoint'" data-bind="visible: _entity">
						<!-- ko if: $parent.autoTablePreset() -->
						<segmented-button
							params="value: $parent.autoTableBreakpoint, options: $parent.autoTableBreakpointOptions, displayMode: $parent.SegmentedButtonDisplayMode.Icon"
						></segmented-button>
						<a class="clickable-link" data-bind="click: () => $parent.autoTablePreset(false)">Custom</a>
						<!-- /ko -->
						<!-- ko ifnot: $parent.autoTablePreset() -->
						<standard-input params="value: $parent.autoTableBreakpoint"></standard-input>
						<a class="clickable-link" data-bind="click: () => $parent.autoTablePreset(true)">Preset</a>
						<!-- /ko -->
					</editor-row>
					<!-- /ko -->
					<editor-row params="label: 'Show header', tooltip: 'ViewDesigner.ShowHeader'" data-bind="visible: _entity">
						<combobox params="value: $parent.ListAutoHeader, options: $parent.showHeaderOptions"></combobox>
					</editor-row>
					<!-- ko if: SelectedRow() == null -->
					<div class="info">
						<span class="info-title">No data!</span>
						<span class="info-description">Please select the row you want to edit.</span>
					</div>
					<!-- /ko -->
					<!-- ko if: SelectedRow() != null && SelectedCell() == null -->
					<editor-section params="title: 'Row'"></editor-section>
					<spacer></spacer>
					<editor-row params="label: 'Name', tooltip: 'ViewDesigner.Name'">
						<standard-input params="value: $parent.SelectedRow().Name, readonly: !$parent._entity "></standard-input>
					</editor-row>
					<spacer></spacer>
					<editor-row params="label: 'Dimension', tooltip: 'ViewDesigner.Dimension'">
						W <standard-input params="value: $parent.SelectedRow().Width, numericParams: { min: $parent.MinimumSize }"> </standard-input>
						<span
							class="tooltipsource"
							data-tooltip="ViewDesigner.RowTooNarrow"
							style="cursor: pointer"
							data-bind="visible: $parent.showNextWideWidthWarning()"
						>
							<i class="woodfordsprite icon icon-woodford_ListDesigner_infoalert"></i>
						</span>
						H
						<standard-input params="value: $parent.SelectedRow().Height, numericParams: { min: $parent.MinimumSize }"></standard-input>
					</editor-row>
					<spacer></spacer>
					<sub-section params="title: 'Color'"></sub-section>
					<editor-row params="label: 'Background', tooltip: 'ViewDesigner.Color'">
						<div class="color-editor-row-wrapper">
							<color-editor
								style="display: block; width: 100%; height: 100%;"
								params="value: $parent.SelectedRow().SerializedBackground, materialSchemes: $parent.materialSchemes, parentColor: $parent.observable( $parent.getParentColor('SelectedRowColor')), defaultValue: $parent.observable(undefined)"
							></color-editor>
							<reset-button
								params="property: null, parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.SelectedRow().SerializedBackground, 'SelectedRowColor'), resetFunction: () => $parent.resetColor.bind($parent)($parent.SelectedRow().SerializedBackground, 'SelectedRowColor')"
							></reset-button>
						</div>
					</editor-row>
					<editor-row params="label: 'Selected Bkg', tooltip: 'ViewDesigner.Selected'">
						<div class="color-editor-row-wrapper">
							<color-editor
								style="display: block; width: 100%; height: 100%;"
								params="value: $parent.SelectedRow().SerializedSelectedBackground, materialSchemes: $parent.materialSchemes, parentColor: $parent.observable($parent.getParentColor('SelectedRowSelectedColor')), defaultValue: $parent.observable(undefined)"
							></color-editor>
							<reset-button
								params="property: null, parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.SelectedRow().SerializedSelectedBackground, 'SelectedRowSelectedColor'), resetFunction: () => $parent.resetColor.bind($parent)($parent.SelectedRow().SerializedSelectedBackground, 'SelectedRowSelectedColor')"
							></reset-button>
						</div>
					</editor-row>
					<spacer></spacer>
					<sub-section params="title: 'Next row'" data-bind="visible: _entity"></sub-section>
					<editor-row
						params="label: 'Switch to', editorSupportingText: getNextRowInfo(Rows(), SelectedRow().NextTemplateName()), tooltip: 'ViewDesigner.NextRow'"
						data-bind="visible: _entity"
					>
						<combobox
							params="value: $parent.SelectedRow().NextTemplateName, options: $parent.getNextRowOptions($parent.SelectedRow(), $parent.Rows()), allowUnset: true"
						></combobox>
						<span
							class="tooltipsource"
							data-tooltip="ViewDesigner.ReferencedRowTooNarrow"
							style="cursor: pointer"
							data-bind="visible: $parent.showNextWideWarning() "
						>
							<i class="woodfordsprite icon icon-woodford_ListDesigner_infoalert"></i>
						</span>
					</editor-row>
					<!-- /ko -->

					<!-- ko if: SelectedCell() != null -->
					<editor-section params="title: 'Cell'"></editor-section>
					<spacer></spacer>
					<editor-row params="label: 'Cell', tooltip: 'ViewDesigner.Cell'">
						<combobox params="value: $parent.SelectedCell, options: $parent.getRowCells($parent.SelectedRow())"></combobox>
					</editor-row>
					<editor-row params="label: 'Kind', tooltip: 'ViewDesigner.CellKind'">
						<combobox params="value: $parent.SelectedCell().CellKind, options: $parent.cellKindOptions"></combobox>
					</editor-row>
					<spacer></spacer>
					<sub-section params="title: 'Binding'"></sub-section>
					<editor-row params="label: 'Type', tooltip: 'ViewDesigner.BindingType'">
						<combobox params="value: $parent.SelectedCell().BindingKind, options: $parent.bindingKindOptions"></combobox>
					</editor-row>
					<editor-row params="label: 'Value', tooltip: 'ViewDesigner.BindingValue'">
						<!-- ko if: $parent.SelectedCell().BindingKind() === $parent.BindingKind.Constant || !$parent._entity -->
						<standard-input params="value: $parent.SelectedCell().LogicalName, htmlType: 'text'"></standard-input>
						<!-- /ko -->
						<!-- ko if: $parent.SelectedCell().BindingKind() !== $parent.BindingKind.Constant && $parent._entity -->
						<input
							class="style-property-input-field"
							data-bind="value: $parent.SelectedCell().LogicalName()||'Select...', click:  $parent.OnCellBindingClick.bind($parent)"
							style="text-decoration:underline;cursor:pointer;color:navy"
							readonly="readonly"
						/>
						<!-- /ko -->
					</editor-row>
					<spacer></spacer>
					<sub-section params="title: 'Layout'"></sub-section>
					<editor-row params="label: 'Position', tooltip: 'ViewDesigner.LayoutPosition'">
						X <standard-input params="value: $parent.SelectedCell().Left"></standard-input> Y
						<standard-input params="value: $parent.SelectedCell().Top"></standard-input>
					</editor-row>
					<editor-row params="label: 'Dimension', tooltip: 'ViewDesigner.LayoutDimension'">
						W <standard-input params="value: $parent.SelectedCell().Width, numericParams: { min: $parent.MinimumSize }"></standard-input> H
						<standard-input params="value: $parent.SelectedCell().Height, numericParams: { min: $parent.MinimumSize }"></standard-input>
					</editor-row>
					<spacer></spacer>
					<editor-row params="label: 'Style', tooltip: 'ViewDesigner.Style'">
						<combobox
							params="value: $parent.SelectedCell().StyleName, options: $parent.getCellStyles($parent.SelectedCell()).map(s => ({ value: s.Name, label: s.Name})), allowUnset: true"
						></combobox>
						<i
							class="woodfordsprite icon icon-woodford_ListDesigner_editStyle"
							data-bind="click: () => $parent.ShowEditStylesDialog($parent.SelectedCell().StyleName())"
							style="cursor: pointer;"
						></i>
					</editor-row>
					<spacer></spacer>
					<editor-row params="label: 'Responsive', tooltip: 'ViewDesigner.Flexibility'">
						<toggle params="value: $parent.cellResponsiveResizeSlider"></toggle>
					</editor-row>
					<spacer></spacer>
					<!-- ko if: !cellResponsiveResizeSlider() -->
					<editor-row params="label: 'Anchor', tooltip: 'ViewDesigner.Anchor'">
						<segmented-button
							params="value: $parent.cellAnchorPropertyObservable, options: $parent.cellAnchorPropertyOptions, displayMode: $parent.SegmentedButtonDisplayMode.Icon"
						></segmented-button>
					</editor-row>
					<!-- /ko -->
					<!-- /ko -->
				</div>
			</div>
		</div>
		<div class="designerPanelOuter" style="flex:4 1 auto;">
			<!-- ko if: draggedCell() != null-->
			<cell-designer
				params="cell: draggedCell(), styles: styles, theme: theme, isSelected: computedAlwaysTrue, isSelectedRow: computedAlwaysTrue, freeFloating: true"
			></cell-designer>
			<!-- /ko -->
			<div class="wfheader" style="border-left:0">
				<label class="label">Editor</label>
				<div class="zoom">
					<span>Zoom</span>
					<div class="segmentedButtons">
						<!-- ko foreach: { data: zoomPredefined, as: 'zoom', noChildContext: true } -->
						<button
							class="segmentedButton"
							data-bind="click: () => zoomLevel(zoom), text: zoom + 'x', value: zoom, css: {'active': zoomLevel() === zoom}"
						></button>
						<!-- /ko -->
					</div>
					<!-- ko if: !zoomPredefined.contains(zoomLevel()) -->
					<input
						type="number"
						data-bind="value: zoomLevel, attr: { min: MIN_ZOOM, max: MAX_ZOOM }, event: { change: (_, event) => setZoom(+event.target.value) }"
					/>
					<!-- /ko -->
				</div>
			</div>
			<div class="designerArena">
				<row-designer
					params="rows: Rows, theme: theme, selectedRow: SelectedRow, selectedCell: SelectedCell, rowActions: rowDesignerRowActions, rowActionValidations: rowDesignerRowActionValidations, styles: styles, zoomLevel: zoomLevel, draggedCell: draggedCell, _entity: _entity"
					style="width: 100%; height: 100%;"
				></row-designer>
			</div>
		</div>
		<div class="designer__fieldsPanel">
			<div class="wfheader" style="border-left:0">
				<label class="label" data-bind="visible: !isSearchActive()">Fields</label>
				<div class="select-fields-button" data-bind=" visible: !isSearchActive() && _entity">
					<i class="woodfordsprite icon-woodford_ListDesigner_plus" data-bind="click: () => ShowSelectFieldsDialog()"></i>
				</div>
				<div
					data-bind="visible: _entity, attr: {'class': (isSearchActive() ? 'search-button-wrapper_active' : 'search-button-wrapper')}"
					style="margin-left: 0;"
				>
					<searchbutton
						params="searchText: FieldSearch, active: isSearchActive, rolloutDirection: searchBarRolloutDirection, htmlElement: $element"
					></searchbutton>
				</div>
			</div>
			<div class="designerPanel" style="border-left:0;overflow:auto;display:flex;flex-direction:column">
				<!-- ko foreach: Fields -->
				<div
					class="listItem"
					data-bind=" style: {backgroundColor: (Selected() ? '#9ecfe9':'') },
					interactHandlers: [{ handler: $parent.dragField, data: { field: $data }}], multiClick: (clicks, event, binding) =>  $parent.OnFieldsListClicked(clicks, binding)
				"
				>
					<i
						data-bind=" multiClick: (clicks, event, binding) => $parent.OnFieldsListClicked(2, binding) , attr:{ 'class': $parent.selectedRowHasField(LogicalName) ? 'list-field-icon woodfordsprite icon-woodford_FormDesigner_done' : 'list-field-icon woodfordsprite icon-woodford_FormDesigner_add' }"
					></i>
					<span data-bind="text: DisplayName, attr:{ title: LogicalName }" style="flex:1 1 auto; width: 100%; overflow: hidden;"></span>
					<i data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_FormDesigner_drag_indicator' }"></i>
				</div>
				<!-- /ko -->
			</div>
		</div>
	</div>
</script>
<!-- END: tmplListDesigner-->
<!-- BEGIN: tmplMapPinDialog-->
<script id="tmplMapPinDialog" type="text/html">
	<div class="mapPinDialog">
		<span class="support-text">This configuration allows you to display a pin of your own design on the map.</span>
		<br />
		<a class="link" data-bind="attr: { href: learnMoreLink }" target="_blank">Learn more</a>
		<div class="header">Binding</div>
		<div class="map-pin-section">
			<div class="label">Type</div>
			<select class="input" data-bind="value:bindingKind , event:{change: onBindingKindChanged}">
				<option value="0">Value</option>
				<option value="1">Raw Value</option>
				<option value="2">Constant</option>
			</select>
		</div>
		<div class="map-pin-section">
			<!-- ko if: bindingKind() !== "2" -->
			<div class="label">Field</div>
			<input class="input pointer" type="text" data-bind="placeholder:'Select...', click: onBindingClick, value: logicalName" readonly="readonly" />
			<!-- /ko -->

			<!-- ko if: bindingKind() === "2" -->
			<div class="label">Image path</div>
			<input class="input" type="text" data-bind="valueEnter: logicalName" />
			<!-- /ko -->
		</div>
		<br />
		<!-- ko if: bindingKind() !== "2" -->
		<div class="map-pin-section">
			<div class="label">Style</div>
			<select
				class="input"
				data-bind="options: styles, optionsText: function(c) { return c.Name }, optionsValue: function(c) { return c.Name }, value: styleName"
			></select>
		</div>
		<div class="map-pin-section">
			<div class="label">Format string</div>
			<div class="input-formatString" data-bind="text: formatString"></div>
			<!-- <input class="input" type="text" data-bind="valueEnter: formatString" readonly="true" /> -->
		</div>
		<!-- /ko -->
	</div>
</script>
<!-- END: tmplMapPinDialog -->
<!-- BEGIN: tmplSearchDialog-->
<script id="tmplSearchDialog" type="text/html">
	<!-- ko foreach: Fields -->
	<div>
		<select data-bind="options: MatchList, optionsText: 'Key', optionsValue: 'Value', value: Match, valueAllowUnset: false"></select>
		<select data-bind="options: FieldList, optionsText: 'DisplayName', value: Field, valueAllowUnset: false"></select>
		<button data-bind="click: $parent.OnDeleteClicked.bind($parent)">Del</button>
	</div>
	<!-- /ko -->
</script>
<!-- END: tmplSearchDialog -->
<!-- BEGIN: SelectFieldsDialog-->
<script id="tmplSelectFieldsDialog" type="text/html">
	<div
		style="flex: 1 1 auto;overflow:auto; margin:0px 5px 0px 5px; border:1px solid black; background:white;"
		data-bind="template: { name: 'TreeView', data: Tree, as: 'x' }"
	></div>
</script>
<!-- END: SelectFieldsDialog -->
<!-- BEGIN: tmplViewPropertiesDialog -->
<script id="tmplViewPropertiesDialog" type="text/html">
	<form data-bind="event: { keypress: absorbEnter }">
		<div class="project__option">
			<div class="project__option--title">Name</div>
			<input id="fldName" type="text" data-bind="value: Name" />
		</div>
		<div class="project__option">
			<div class="project__option--title">Type</div>
			<select data-bind="options:TypeList, optionsText: 'Label', optionsValue: 'Value', value: Type"></select>
		</div>
		<div class="project__option" data-bind="visible: ShowProperties">
			<div class="project__option--title">Mode</div>
			<select data-bind="options:ModeList, optionsText: 'Label', optionsValue: 'Value', value: Mode"></select>
		</div>
		<div class="project__option">
			<div class="project__option--title">
				<label for="cbHidden">Hidden</label>
			</div>
			<div class="project__option--checkbox">
				<input id="cbHidden" type="checkbox" data-bind="checked: Hidden" />
				<label for="cbHidden">
					<span>Hide in View Selector</span>
				</label>
			</div>
		</div>
		<div class="project__option" data-bind="visible: ShowTemplates">
			<div class="project__option--title">Template</div>
			<div class="templateBox__wrapper">
				<!-- ko foreach: TemplateList -->
				<div class="templateBox" data-bind="click:$parent.changeTemplate($data),css:{templateBox__selected:$parent.Template()===$data.Value}">
					<div class="templateBox__icon-alignLeft">
						<i data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_' + imageName + '_24'}"></i>
					</div>
					<span class="templateBox__title" data-bind="text:Label"></span>
				</div>
				<!-- /ko -->
			</div>
		</div>
		<div class="project__option" data-bind="visible: ShowProperties">
			<div class="project__option--title">
				<label for="cbDefault">Default</label>
			</div>
			<div class="project__option--checkbox">
				<input id="cbDefault" type="checkbox" data-bind="checked: Default" />
				<label for="cbDefault">
					<span>Initial View</span>
				</label>
			</div>
		</div>
		<div class="project__option" data-bind="visible: ShowProperties">
			<div class="project__option--title">
				<label for="cbSyncFilter">Sync&nbsp;Filter</label>
			</div>
			<div class="project__option--checkbox">
				<input id="cbSyncFilter" type="checkbox" data-bind="checked: UseSyncFilter" />
				<label for="cbSyncFilter">
					<span>Use Sync Filter in Online Mode</span>
				</label>
			</div>
		</div>
	</form>
</script>
<!-- END: tmplViewPropertiesDialog -->

<!-- BEGIN: tmplSelectTemplateDialog -->
<script id="tmplSelectTemplateDialog" type="text/html">
	<main>
		<div class="project__option" data-bind="visible: IsNameVisible">
			<div class="project__option--title"><span>Name</span></div>
			<input id="fldName" type="text" data-bind="value: Name, enterkey: OnEnterKey, attr: { 'data-testid': 'fldName'}" />
		</div>
		<div class="project__option" data-bind="visible: IsTemplateVisible">
			<div class="project__option--title"><span data-bind="text: listTitle || 'Template'"></span></div>
			<select
				data-testid="template"
				data-bind="options:TemplateList, optionsText: 'Label', optionsValue: 'Value', value: Template, valueAllowUnset: true"
			></select>
		</div>
		<div class="project__option" data-bind="visible: IsCacheModeVisible">
			<div class="project__option--title"><span>Cache Mode</span></div>
			<select
				data-testid="cache-mode"
				data-bind="options:CacheModeList, optionsText: 'Label', optionsValue: 'Value', value: CacheMode, valueAllowUnset: true"
			></select>
		</div>
		<div class="project__option" data-bind="visible: IsUiSyncGuardModeVisible">
			<div class="project__option--title"><span>Background sync behavior</span></div>
			<select
				data-testid="sync-behavior"
				data-bind="options:UiSyncGuardModeList, optionsText: 'Label', optionsValue: 'Value', value: UiSyncGuardMode, valueAllowUnset: true"
			></select>
		</div>
	</main>
</script>
<!-- END: tmplSelectTemplateDialog -->
<!-- BEGIN: tmplAddStringDialog-->
<script id="tmplAddStringDialog" type="text/html">
	<table style="width:100%">
		<tr>
			<td><b>ID</b></td>
			<td><input type="text" data-bind="value:Name" style="width:100%; box-sizing:border-box" data-testid="string-id" /></td>
		</tr>
		<tr>
			<td><b>Label</b></td>
			<td><input type="text" data-bind="value:Value" style="width:100%; box-sizing:border-box" data-testid="string-label" /></td>
		</tr>
	</table>
</script>
<!-- END: tmplAddStringDialog -->
<script id="tmplAddStringMultipleDialog" type="text/html">
	<table style="width:100%; height:100%;">
		<tr style="height:10px;">
			<td><b>Id Prefix</b></td>
			<td><input type="text" data-bind="value:_idPrefix" style="width:100%; box-sizing:border-box" data-testid="id-prefix" /></td>
		</tr>
		<tr style="height:70%;">
			<td><b>Strings</b></td>
			<td>
				<textarea
					data-bind="value:_stringsText"
					style="width:100%; height:100%; box-sizing:border-box"
					placeholder="Label or ID=Label. One String per line."
					data-testid="strings-text"
				></textarea>
			</td>
		</tr>
	</table>
</script>
<!-- BEGIN: tmplLocalizationDesigner-->
<script id="tmplLocalizationDesigner" type="text/html">
	<div style="padding: 5px;height:100%;display:flex;flex-direction:row">
		<div style="flex:0 1 15%; display:flex;flex-direction:column; margin-right: 10px;">
			<div class="wfheader" style="margin-bottom:10px">
				<label class="label">Navigation</label>
			</div>
			<div
				style="border: 1px solid silver; background: white; overflow:auto; flex:1 1 auto;"
				data-bind="template: { name: 'TreeView', data: Tree, as: 'x' }"
			></div>
		</div>
		<div style="display:flex;flex:5;flex-direction:column; width: 85%">
			<div class="wfheader" style="margin-bottom:10px">
				<label class="label">Labels</label>
				<input type="text" data-bind="textInput: FilterText" placeholder="Search" />
			</div>
			<!-- ko if: !IsProjectLocalization -->
			<div data-bind="grid: Grid" data-definitiononly="false" data-twowaybinding="true" style="white-space:nowrap; height: 100%;flex:5;">
				<div data-columnname="Id" data-sortable="true" data-flex="1 1 200px" data-horalign="left" data-sort="ascending"></div>
				<div data-columnname="Organization" data-sortable="true" data-flex="1 1 200px" data-horalign="left">
					<input
						type="text"
						data-bind="value: data.OrganizationEdit, visible: $parent.EditId()===data.Id, attr: { 'data-testid': data.Id + '-input'}"
						style="width:100%;box-sizing:border-box; border:1px solid black;padding:1px;margin:1px;box-sizing:border-box"
					/>
					<div
						data-bind="text: data.OrganizationEdit, css:{boldText: data.OrgEditBold}, visible: $parent.EditId()!==data.Id, attr: { 'data-testid': data.Id}"
						class="standard"
					></div>
				</div>
				<div data-columnname="English" data-sortable="true" data-flex="1 1 200px" data-horalign="left">
					<div data-bind="text: data.English || ''"></div>
				</div>
			</div>
			<!-- /ko -->

			<!-- ko if: IsProjectLocalization -->
			<div data-bind="grid: Grid" data-definitiononly="false" data-twowaybinding="true" style="white-space:nowrap; height: 100%;flex:5;">
				<div data-columnname="Id" data-sortable="true" data-flex="1 1 200px" data-horalign="left" data-sort="ascending"></div>
				<div data-columnname="Project" data-sortable="true" data-flex="1 1 200px" data-horalign="left">
					<input
						type="text"
						data-bind="value: data.ProjectEdit, visible: $parent.EditId()===data.Pid"
						style="width:100%;box-sizing:border-box; border:1px solid black;padding:1px;margin:1px;box-sizing:border-box"
					/>
					<div
						data-bind="text: data.ProjectEdit, css:{boldText: data.ProjectEditBold, grayText: !data.ProjectEditBold()}, visible: $parent.EditId()!==data.Pid"
					></div>
				</div>
				<div data-columnname="Organization" data-sortable="true" data-flex="1 1 200px" data-horalign="left">
					<input
						type="text"
						data-bind="value: data.OrganizationEdit, visible: $parent.EditId()===data.Id, attr: { 'data-testid': data.Id + '-input'}"
						style="width:100%;box-sizing:border-box; border:1px solid black;padding:1px;margin:1px;box-sizing:border-box"
					/>
					<div
						data-bind="text: data.OrganizationEdit, css:{boldText: data.OrgEditBold}, visible: $parent.EditId()!==data.Id, attr: { 'data-testid': data.Id}"
						class="standard"
					></div>
				</div>
				<div data-columnname="English" data-sortable="true" data-flex="1 1 200px" data-horalign="left">
					<div data-bind="text: data.English || ''"></div>
				</div>
			</div>
			<!-- /ko -->
		</div>
	</div>
</script>
<!-- END: tmplLocalizationDesigner -->

<script type="text/html" id="TreeView">
	<ul class="TreeViewItemsPanel" data-bind="template: { name: 'TreeViewItem', foreach: x.Children(), as: 'node' }"></ul>
</script>
<!-- BEGIN: Localizations -->
<script id="tmplLocalizationsEditor" type="text/html">
	<div style="padding: 5px;height:100%">
		<div data-bind="grid: LocalizationsGrid" data-definitiononly="false" data-twowaybinding="true" style="white-space:nowrap; height: 100%">
			<div data-columnname="Language" data-flex="1 1 200px" data-horalign="left">
				<div style="height:100%; display:flex; align-items:center">
					<i
						class="woodfordsprite"
						data-bind="css: data.IsActive() ? 'icon-woodford_Activate' : 'icon-woodford_Deactivate'"
						style="margin:0px 5px;"
					></i>
					<div data-bind="text: data.Language"></div>
				</div>
			</div>
			<div data-columnname="LCID" data-flex="1 1 200px" data-horalign="right"></div>
			<div data-columnname="Template" data-flex="1 1 200px" data-horalign="left"></div>
		</div>
	</div>
</script>
<script id="tmplNewLocalizationsDialog" type="text/html">
	<div>
		<div style="width:60px;display:inline-block;font-weight:bold">Language</div>
		<select
			data-testid="localization-language-select"
			style="width:200px"
			data-bind="options: Localizations, optionsText: 'Language', value: Localization, valueAllowUnset: false, enable: IsNew()"
		></select>
	</div>
	<div style="margin-top:8px">
		<div style="width:60px;display:inline-block;font-weight:bold">Template</div>
		<select
			data-testid="localization-template-select"
			style="width:200px"
			data-bind="options: Templates, optionsText: 'Language', value: Template, valueAllowUnset: false"
		></select>
	</div>
</script>
<!-- BEGIN: tmplEditMapDialog-->
<script id="tmplEditMapDialog" type="text/html">
	<div style="flex: 0 0 auto; display:flex">
		<!-- ko foreach: Tabbar -->
		<div class="tabControlItem" data-bind="css: { tabControlItemSelected: Selected() }, click: Clicked, visible: Visible">
			<span style="padding:0.3em" data-bind="text: Name"></span>
		</div>
		<!-- /ko -->
	</div>
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===0, template: { name: 'tmplSelectViewsControl', data: ViewsControl}"
	></div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===1, template: { name: 'tmplMapSetupControl', data: Map}"
	></div>
</script>
<!-- END: tmplEditMapDialog-->
<!-- BEGIN: tmplOfflineHTMLEditor -->
<script id="tmplOfflineHTMLEditor" type="text/html">
	<div style="padding: 5px;height:100%">
		<div data-bind="grid: Grid" data-definitiononly="false" data-twowaybinding="true" style="white-space:nowrap; height: 100%; flex: 1 1 auto;">
			<div data-columnname="Name" data-flex="1 1 200px" data-horalign="left" data-sort="ascending">
				<div style="height:100%; display:flex; align-items:center">
					<i data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_' + data.Image }" style="margin:2px"></i>
					<span data-bind="text: data.Name"></span>
				</div>
			</div>
			<div data-columnname="Size" data-binding="FormattedSize" data-sort="Size" data-flex="0 1 200px" data-horalign="right"></div>
			<div data-columnname="Date" data-binding="ModifiedDateLabel" data-sort="Date" data-flex="0 1 200px" data-horalign="right"></div>
			<div data-columnname="State" data-binding="StateName" data-sort="StateName" data-flex="0 1 200px" data-horalign="left"></div>
		</div>
	</div>
</script>
<!-- END: tmplOfflineHTMLEditor -->
<!-- Main Page list item template -->
<script id="tmplMainMenuListItem" type="text/html">
	<div class="defaultListItemTemplate searchTitle" data-bind="text: Data.Label, attr: { 'data-testid': Data.Label}"></div>
	<!--<button data-bind="click: ButtonClick.bind($data, 'btnID')">Klikni na mna!</button>-->
</script>
<!-- End: Main Page -->
<!--
		tmplMigrateDataDialog
	-->
<script id="tmplMigrateDataDialog" type="text/html">
	<style>
		table {
			border-collapse: collapse;
		}
		th {
			background-color: #bbbbbb;
			border-bottom: 1px solid #888;
		}
		th,
		td {
			border: 1px solid #888;
		}
	</style>
	<span>Click the preview to see what data will be migrated.</span>
	<span>Note: Preview does not respect the selected primary key.</span>
	<table>
		<thead>
			<tr data-bind="foreach: TargetProperties">
				<th data-bind="text: $data"></th>
			</tr>
		</thead>
		<tbody data-bind="foreach: PreviewRecords">
			<tr data-bind="foreach: PreviewProperties">
				<td data-bind="text: Value"></td>
			</tr>
		</tbody>
	</table>
</script>
<!-- ListView Control -->
<script id="tmplListView" type="text/html">
	<div class="navigationList" style="overflow-y: auto">
		<div class="header"><!-- ko template: {name: ListHeaderTemplate() } --><!-- /ko --></div>
		<div class="itemsContainer" style="flex:1 1 auto; overflow-y:auto"></div>
	</div>
</script>
<!-- Project Page list item template -->

<script id="tmplProjectPageHeader" type="text/html">
	<div class="list_navigation">
		<searchbutton
			params="searchText: FilterText, active: SearchButton.IsPushed, rolloutDirection: searchBarRolloutDirection, htmlElement: $element"
		></searchbutton>

		<div class="button-separator">
			<!-- ko template: {name: 'tmplListHeaderButton', data: MobileEntitiesFilterButton} --><!-- /ko -->
			<!-- ko template: {name: 'tmplListHeaderButton', data: FavoritesButton} --><!-- /ko -->
		</div>

		<!-- ko template: {name: 'tmplListHeaderButton', data: ExpandCollapseButton} --><!-- /ko -->
	</div>
</script>

<script id="tmplProjectMenuListLabel" type="text/html">
	<div class="defaultListItemTemplate searchTitle" data-bind="text: Data.Label, attr: { 'data-testid': Data.Label}" style="white-space:nowrap"></div>
</script>

<script id="tmplProjectMenuListNode" type="text/html">
	<div class="dropdown_link">
		<div
			class="defaultListItemTemplate"
			data-bind="text: Data.Label, style: { opacity: Data.Opacity() }, click: Data.ToggleExpand.bind(event)"
			style="white-space:nowrap"
		></div>
		<i
			style="margin: 0 8px; cursor: pointer"
			data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_' + (Data.IsExpanded() ? 'Expanded_32' : 'Collapsed_32') }, click: Data.ToggleExpand.bind(event)"
		></i>
	</div>
</script>

<script id="tmplProjectMenuListItem" type="text/html">
	<!-- ko if: Data.Image -->
	<i data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_' + Data.Image }"></i>
	<!-- /ko -->
	<div style="display: flex;align-self: center;" data-bind="visible: Data.IsEntity(), click: ButtonClick.bind($data, 'btnID')">
		<i class="woodfordsprite icon-woodford_Entity_24"></i>
	</div>
	<div
		class="defaultListItemTemplate"
		data-bind="text: Data.Label, attr: { 'data-testid': 'navigation-'+Data.Label }, style: { opacity: Data.Opacity() }"
		style="white-space:nowrap"
	></div>
	<div class="favorite_wrapper" data-bind="click: Data.ToggleFavorite.bind(event)">
		<i
			style="margin: 6px 5px;"
			data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_' + (Data.IsFavorite() ? 'IsFavorite' : 'IsNotFavorite') }"
		></i>
	</div>
</script>

<!-- BEGIN: tmplValidateErrorsDialog-->
<script id="tmplValidateErrorsDialog" type="text/html">
	<div style="flex: 1 1 auto;overflow:auto; margin:0px 5px 0px 5px; border:1px solid black; background:white;" data-bind="html: HtmlContent"></div>
</script>
<!-- END: tmplValidateErrorsDialog -->

<script id="tmplListHeaderButton" type="text/html">
	<div class="refreshBtn" title="" data-bind="click: Clicked, css: { refreshBtnPushed: IsPushed() }">
		<i data-bind="attr: { 'class': 'woodfordsprite icon-woodford_' + Image() }"></i>
	</div>
</script>
<!-- BEGIN: tmplRegisterUserDialog-->
<script id="tmplRegisterUserDialog" type="text/html">
	<table style="width:100%">
		<tr>
			<td colspan="2">
				Fill in your contact details below. These details help us to provide better quality support and track your support cases.
				<br /><br />
				This is a one time registration only.
				<br /><br />
			</td>
		</tr>
		<tr>
			<td width="10%">Email:</td>
			<td><input type="text" data-bind="value:Email" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td>Company:</td>
			<td><input type="text" data-bind="value:Company" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td>First&nbsp;Name:</td>
			<td><input type="text" data-bind="value:FirstName" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td>Last&nbsp;Name:</td>
			<td><input type="text" data-bind="value:LastName" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td>Job&nbsp;Title:</td>
			<td><input type="text" data-bind="value:JobTitle" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td>Phone:</td>
			<td><input type="text" data-bind="value:Phone" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td>Country:</td>
			<td><input type="text" data-bind="value:Country" style="width:100%; box-sizing:border-box" /></td>
		</tr>
		<tr>
			<td colspan="2">
				<br />
				<div style="display: flex; align-items: center;">
					<input id="cbPrivacy" type="checkbox" data-bind="checked:PrivacyConsent" /><label for="cbPrivacy"
						>I have read and agree with <a href="https://www.resco.net/privacy-notice/" target="_blank">RESCO Privacy notice</a> and
						<a href="https://www.resco.net/downloads/RESCO_General_Terms_and_Conditions.pdf" target="_blank">RESCO General Terms and Conditions</a
						>.</label
					>
				</div>
			</td>
		</tr>
	</table>
</script>
<!-- END: tmplRegisterUserDialog -->
<!-- BEGIN: tmplSelectProjectsDialog-->
<script id="tmplSelectProjectsDialog" type="text/html">
	<div data-bind="grid: Grid" data-definitiononly="false" style="background:white; white-space:nowrap; height: 100%">
		<div data-columnname="Name" data-flex="1 0 200px" data-horalign="left" data-sortable="false">
			<div style="display:flex; height:100%; align-items:center">
				<input type="checkbox" data-bind="checked: data.Selected, enable: data.IsEnabled" />&nbsp;<span
					data-bind="text: data.Name, style: { fontWeight: data.FontWeight }"
				></span>
			</div>
		</div>
	</div>
</script>
<!-- END: tmplSelectProjectsDialog -->
<!--
		tmplServerIntegrationMenuListItem
	-->
<script id="tmplServerIntegrationMenuListItem" type="text/html">
	<div
		class="defaultListItemTemplate searchTitle"
		data-bind="text: Data.Label(), style: { opacity: Data.Opacity(), 'text-decoration': Data.TextDecoration(),'text-decoration-color': Data.TextDecorationColor(), attr: { 'data-testid': Data.Label()}  }"
	></div>
</script>

<script id="tmplIntegrationPageHeader" type="text/html">
	<div class="list_navigation">
		<div data-bind="attr: {'class': (SearchButton.IsPushed() ? ' search-wrapper_active': ' search-wrapper')}">
			<!-- ko template: {name: 'tmplListHeaderButton', data: SearchButton} --><!-- /ko -->
			<div data-bind="attr: {'class': (SearchButton.IsPushed() ? 'slideInAnimation input-wrapper': 'slideOutAnimation input-wrapper' )}">
				<input class="search-input" placeholder="Search..." type="text" data-bind="value: FilterText, valueUpdate: 'afterkeydown'" />
				<span data-bind="click:clearInput" class="woodfordsprite icon-woodford_Delete_18"></span>
			</div>
		</div>
		<div class="button-separator"><!-- ko template: {name: 'tmplListHeaderButton', data: EnabledEntitiesFilterButton} --><!-- /ko --></div>
	</div>
</script>
<!-- BEGIN: ProcessControl Dialog Template -->
<script id="tmplProcessControlDialog" type="text/html">
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div style="flex:1 1 auto; flex-direction:column; box-sizing:border-box; overflow-y: auto">
		<div style="flex:1 1 auto; flex-direction:column; box-sizing:border-box;">
			<table>
				<tr>
					<td style="min-width: 100px"><b>Name:</b></td>
					<td>
						<input data-testid="name" style="width: 200px" type="text" data-bind="value:Name" class="tooltipsource" data-tooltip="Process.Name" />
					</td>
				</tr>
				<tr>
					<td style="min-width: 100px"><b>Entity:</b></td>
					<td>
						<select
							data-testid="entity"
							style="width: 200px"
							data-bind="options: Entities, optionsText: 'DisplayName', valueAllowUnset: false, value: SelectedEntity"
							class="tooltipsource"
							data-tooltip="Process.Entity"
						></select>
					</td>
				</tr>
				<tr>
					<td style="min-width: 100px"><b>Field:</b></td>
					<td>
						<select
							data-testid="field"
							style="width: 200px"
							data-bind="options: Fields, optionsText: 'DisplayName', valueAllowUnset: false, value: SelectedField"
						></select>
					</td>
				</tr>
			</table>
		</div>
		<div style="flex:1 1 auto; flex-direction:column; box-sizing:border-box; margin-top: 10px;" data-bind="visible: SelectedField">
			<b>Ordered Process Steps (Field values)</b>
			<span style="color: #0066CC; cursor: pointer" class="tooltipsource" data-tooltip="Process.Steps"> &#9432; </span>
			<div class="processSteps" style="display:block" data-bind="foreach: FieldValues">
				<div
					class="processStep"
					data-bind="click: function(data, event) { $parent.SelectStep($data);}, css: { selected: $parent.SelectedStep() === $data, hidden: $data.IsHidden}, attr:{'data-testid': $parent.dataTestId('step-' + $data.OptionMeta.SchemaName)}"
				>
					<div class="stepArrow" data-bind="click: function(data, event) { $parent.Move(1, $data);}, css: { hidden: $data.IsFinal}">
						<b><</b>
					</div>
					<div class="stepValue" data-bind="text: $data.OptionMeta.SchemaName"></div>
					<div class="stepFinalFlag" data-bind="click: function(data, event) { $parent.SetFinal($data) }">
						<i data-bind="attr:{ 'class': 'woodfordsprite icon-woodford_' + ((IsFinal() && !IsHidden()) ? 'FlagRed' : 'FlagGrey') }"></i>
					</div>
					<div class="stepArrow" data-bind="click: function(data, event) { $parent.Move(2, $data);}, css: { hidden: $data.IsFinal}">
						<b>></b>
					</div>
				</div>
			</div>
		</div>
		<div style="flex:1 1 auto; flex-direction:column; box-sizing:border-box; margin-top: 10px;" data-bind="visible: SelectedStep">
			<b> Process Step Configuration</b>
			<table>
				<tr>
					<td style="min-width: 100px"><b>Step Name:</b></td>
					<td>
						<input style="width: 200px" type="text" data-bind="value: SelectedStep()? SelectedStep().OptionMeta.SchemaName: ''" disabled />
					</td>
				</tr>
				<tr>
					<td style="min-width: 100px"><b>Description:</b></td>
					<td class="tooltipsource" data-tooltip="Process.Description">
						<input data-testid="description" style="width: 200px" type="text" data-bind="value: StepShortDescription" />
					</td>
				</tr>
				<tr data-bind="visible: AllowDescriptions">
					<td style="min-width: 100px"><b>Long Description:</b></td>
					<td><textarea data-testid="long-description" style="width: 194px" data-bind="value: StepDescription"></textarea></td>
				</tr>
				<tr data-bind="visible: AllowDescriptions">
					<td style="min-width: 100px"><b>Description url:</b></td>
					<td><input data-testid="description-url" style="width: 200px" type="text" data-bind="value: StepUrl" /></td>
				</tr>
				<tr>
					<td style="min-width: 100px"><b>Hide From Process:</b></td>
					<td>
						<label><input type="checkbox" data-bind="checked: SelectedStep()? SelectedStep().IsHidden: false" /></label>
					</td>
				</tr>
			</table>
		</div>
		<div style="flex:1 1 auto; flex-direction:column; box-sizing:border-box; margin-top: 10px;" data-bind="visible: HasFinalSteps">
			<b>Final Step Configuration (Optional)</b>
			<table>
				<tr>
					<td style="min-width: 100px"><b>Label:</b></td>
					<td><input data-testid="final-label" style="width: 200px" type="text" data-bind="value: FinalStepLabel" /></td>
				</tr>
				<tr>
					<td style="min-width: 100px"><b>Description:</b></td>
					<td><input data-testid="final-description" style="width: 200px" type="text" data-bind="value: FinalStepDescription" /></td>
				</tr>
			</table>
		</div>
	</div>
</script>
<!-- END: tmplProcessControlDialog -->
<script id="tmplProcessFlowEditor" type="text/html">
	<div style="height: 26px;">
		<label>
			<input type="checkbox" data-bind="checked: EnableProcessFlow" />
			<strong><span data-bind="text: cbEnableProcessFlowContent"></span></strong>
		</label>
	</div>
	<div data-bind="grid: DataGrid" data-definitiononly="false" data-multiselect="false" data-twowaybinding="true" style="height: calc(100% - 26px);">
		<div data-columnname=" " data-columntype="checkbox" data-flex="0 0 20px" data-binding="IsEnabled" data-horalign="left"></div>
		<div data-columnname="Name" data-binding="Name" data-sortable="true" data-flex="0 1 250px" data-horalign="left" data-sort="ascending"></div>
		<div data-columnname="Primary Entity" data-binding="PrimaryEntityLabel" data-flex="0 1 150px" data-sortable="true" data-horalign="left"></div>
		<div
			data-columnname="Logical Name"
			data-binding="PrimaryEntity"
			data-flex="0 1 150px"
			data-sortable="true"
			data-horalign="left"
			style="vertical-align:middle"
		></div>
		<div data-columnname="Report" data-binding="ValidationResult" data-flex="0 0 240px" data-horalign="left"></div>
	</div>
</script>
<!--
		Rule Editor Template
		Simple Editor, has no content. this is default editor, if no template name is specified in GetTemplateName(), than this template is used
	-->
<script id="tmplRuleEditor" type="text/html">
	<div
		id="ruleEditorRoot"
		data-bind="ruleEditor: Editor.Workflow"
		style="width: 100%; background: #f8f8f8; border: solid 1px black; height: 100%; padding: 5px"
	></div>
</script>
<!--
		tmplStyleAddDialog Style replace dialog Template
	-->
<script id="tmplStyleAddDialog" type="text/html">
		<div class="style-add-dialog-wrapper">
		<div class="form-group">
			<label class="style-property-label">Style Name</label>
			<input class="style-property-input-field" type="text" data-bind="value: name"></input>
		</div>
		<div class="form-group">
			<label class="style-property-label">Component type</label>
			<select class="style-property-input-field" data-bind="options: availableComponentTypes, optionsText: (value) => ComponentType[value], value: componentType"></select>
		</div>
	</div>
</script>
<!--
		tmplStyleCloneDialog Style clone dialog Template
	-->
<script id="tmplStyleCloneDialog" type="text/html">
		<div class="style-clone-dialog-wrapper">
		<div class="form-group">
			<label class="style-property-label">Cloned Style Name</label>
			<input class="style-property-input-field" type="text" data-bind="value: name"></input>
		</div>
	</div>
</script>
<!--
		tmplStyleDependenciesDialog Style dependencies dialog Template
	-->
<script id="tmplStyleDependenciesDialog" type="text/html">
	<h2 data-bind="text: style.Name"></h2>
	<!-- ko if: !isEmpty(style.Dependency) -->
	<div data-bind="visible: !isEmpty(standardDependencies(style))">
		Standard dependencies:
		<pre data-bind="text: standardDependencies(style).map(d => d.schemaName).join('\n')"></pre>
	</div>
	<div data-bind="visible: !isEmpty(builtInDependencies(style))">
		Built-in dependencies:
		<pre data-bind="text: builtInDependencies(style).map(d => d.schemaName).join('\n')"></pre>
	</div>
	<!-- /ko -->
	<!-- ko if: isEmpty(style.Dependency) -->
	<div>Style is not used.</div>
	<!-- /ko -->
</script>
<script id="tmplStyleEditorDialog" type="text/html">
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div class="columnsWrapper">
		<div class="tree__wrapper" data-bind="template: { name: 'TreeView', data: Tree, as: 'x' }"></div>
		<div class="properties__wrapper">
			<form data-bind="event: { keypress: absorbEnter }" class="style-main-section">
				<!-- ko if: selectedStyle() != null && name() != null -->
				<div class="tab-wrapper">
					<div class="form-group">
						<label class="style-property-label">Component type</label>
						<input class="style-property-input-field" type="text" data-bind="value: ComponentType[selectedStyle().ComponentType]" disabled ></input>
					</div>
					<div class="form-group">
						<label class="style-property-label" data-bind="text: name().Label"></label>
						<input
							class="style-property-input-field"
							type="text"
							data-bind="click: name.OnClick, valueEnter: name().Value, attr: {placeholder: name().PlaceHolder, readonly: name().IsReadOnly}"
						></input>
					</div>
				</div>
				<!-- /ko -->

				<div class="tabbar-wrapper">
					<!-- ko foreach: tabbar -->
					<div class="tabbar-control-item" data-bind="text: Name,css: { 'tabbar-control-item-selected': Selected() }, click: Clicked"></div>
					<!-- /ko -->
				</div>
				<!-- ko if: selectedStyle() != null -->
					<!-- ko if: selectedTabName() === 'Label' -->
						<!-- ko template: { name: 'tmplLabelPropertiesEditor' } --><!-- /ko -->
					<!-- /ko -->
					<!-- ko if: selectedTabName() === 'Input' -->
						<!-- ko template: { name: 'tmplInputPropertiesEditor' } --><!-- /ko -->
					<!-- /ko -->
					<!-- ko if: selectedTabName() === 'Component-specific' -->
						<!-- ko template: { name: 'tmplComponentSpecificEditor' } --><!-- /ko -->
					<!-- /ko -->
					<!-- ko if: selectedTabName() === 'Supporting text' -->
						<!-- ko template: { name: 'tmplSupportingTextEditor' } --><!-- /ko -->
					<!-- /ko -->
				<!-- /ko -->
			</form>
		</div>
	</div>
</script>

<script id="tmplLabelPropertiesEditor" type="text/html">
	<div class="tab-wrapper content-section">
		<property-editor-row params="label: 'Show label', tooltip: 'StyleEditor.Label.ShowLabel'">
			<label class="toggle">
				<input type="checkbox" data-bind="checked: $parent.showLabel" />
				<span class="slider"></span>
			</label>
			<reset-button
				params="property: $parent.labelPosition(), parentComparator: () => $parent.isShowLabelDifferentThanParent.bind($parent)($parent.labelPosition()), resetFunction: () => $parent.resetShowLabel.bind($parent)($parent.labelPosition())"
			></reset-button>
		</property-editor-row>
		<spacer></spacer>

		<!-- ko if: labelPosition() != null && labelPosition().Value() !== LabelPosition.Hidden -->
		<font-name-and-size-property-editor
			params="name: labelFontName(), size: labelFontSize(),options: fontNamesFromOfflineHtml, tooltipFontName: 'StyleEditor.Label.FontName', tooltipRelativeSize: 'StyleEditor.Label.RelativeSize' "
		></font-name-and-size-property-editor>
		<property-editor-row
			params="label: labelHorizontalAlignment().Label, tooltip: 'StyleEditor.Label.Alignment'"
			data-bind="propertyVisible: {tabName: 'label', property: labelHorizontalAlignment()}"
		>
			<segmented-editor params="property: $parent.labelHorizontalAlignment()"></segmented-editor>
			<reset-button params="property: $parent.labelHorizontalAlignment()"></reset-button>
		</property-editor-row>
		<property-editor-row params="label: labelFontWeight().Label, tooltip: 'StyleEditor.Label.Decoration'">
			<segmented-editor params="property: $parent.labelFontWeight()"></segmented-editor>
			<reset-button params="property: $parent.labelFontWeight()"></reset-button>
		</property-editor-row>
		<spacer></spacer>
		<property-editor-row params="label: labelForegroundColor().Label, property: labelForegroundColor, tooltip: 'StyleEditor.Label.TextColor'">
			<color-editor
				params="value: $parent.labelForegroundColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.labelForegroundColor()), defaultValue: $parent.labelForegroundColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.labelForegroundColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.labelForegroundColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.labelForegroundColor())"
			></reset-button>
		</property-editor-row>
		<spacer></spacer>
		<property-editor-row params="label: labelAutoHeight().Label, tooltip: 'StyleEditor.Label.AutoHeight'">
			<label class="toggle">
				<input type="checkbox" data-bind="checked: $parent.labelAutoHeight().Value" />
				<span class="slider"></span>
			</label>
			<reset-button params="property: $parent.labelAutoHeight()"></reset-button>
		</property-editor-row>
		<spacer></spacer>
		<div class="section-title">Container layout</div>
		<property-editor-row params="label: labelPosition().Label, tooltip: 'StyleEditor.Label.LabelPosition'">
			<segmented-editor params="property: $parent.labelPosition()"></segmented-editor>
			<reset-button params="property: $parent.labelPosition()"></reset-button>
		</property-editor-row>

		<!-- ko if: (labelPosition().Value() === LabelPosition.Left || labelPosition().Value() === LabelPosition.Right) && selectedStyle().ComponentType !== ComponentType.Spacer -->
		<spacer></spacer>
		<div class="section-title" data-bind="propertyVisible: {tabName: 'label', property: labelPosition()}">Define width for label and input</div>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'label', property: labelPosition()}"
			params="label: 'Horizontal layout', tooltip: 'StyleEditor.Label.HorizontalLayout'"
		>
			<div class="segmented-buttons" data-bind="foreach: { data: $parent.labelHorizontalLayoutOptions, noChildContext: true, as: 'layout'} ">
				<div
					data-bind="text: layout.name, attr: { 'class': layout === $parent.labelHorizontalLayout() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parent.labelHorizontalLayout(layout)"
				></div>
			</div>
			<reset-button
				params="property: $parent.labelAutoWidth(), parentComparator: () => $parent.isLabelAutoWidthDifferentThanParent.bind($parent)($parent.labelAutoWidth()), resetFunction: () => $parent.resetLabelAutoWidth.bind($parent)($parent.labelAutoWidth())"
			></reset-button>
		</property-editor-row>
		<!-- /ko -->
		<!-- ko if: (labelPosition().Value() === LabelPosition.Left || labelPosition().Value() === LabelPosition.Right) && labelHorizontalLayout() === labelHorizontalLayoutCustom && selectedStyle().ComponentType !== ComponentType.Spacer -->
		<property-editor-row data-bind="propertyVisible: {tabName: 'label', property: labelPosition()}" params="label: 'Label'">
			<div class="multiple-input-editor">
				<number-auto-input params="value: $parent.labelWidth"></number-auto-input>
				<label class="style-property-label">Input</label>
				<number-auto-input params="value: $parent.inputWidth"></number-auto-input>
				<select
					class="style-property-input-field"
					data-bind="options: $parent.horizontalWidthUnitsOptions, optionsText: 'name', value: $parent.horizontalWidthUnit"
				></select>
			</div>
			<reset-button
				params="property: $parent.columns(), parentComparator: () => $parent.isLabelInputDifferentThanParent.bind($parent)($parent.columns()), resetFunction: () => $parent.resetLabelInputLayout.bind($parent)($parent.columns())"
			></reset-button>
		</property-editor-row>
		<!-- /ko -->
		<!-- /ko -->
	</div>
</script>

<script id="tmplInputPropertiesEditor" type="text/html">
	<div class="tab-wrapper content-section">
		<font-name-and-size-property-editor
			params="name: editorFontName(), size: editorFontSize(),options: fontNamesFromOfflineHtml, tooltipFontName: 'StyleEditor.Input.FontName', tooltipRelativeSize: 'StyleEditor.Input.RelativeSize'"
			data-bind="propertyVisible: {tabName: 'input', property: editorFontName()}"
		></font-name-and-size-property-editor>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorHorizontalAlignment()}"
			params="label: editorHorizontalAlignment().Label, tooltip: 'StyleEditor.Input.Alignment'"
		>
			<segmented-editor params="property: $parent.editorHorizontalAlignment()"></segmented-editor>
			<reset-button params="property: $parent.editorHorizontalAlignment()"></reset-button>
		</property-editor-row>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorFontWeight()}"
			params="label: editorFontWeight().Label, tooltip: 'StyleEditor.Input.Decoration'"
		>
			<segmented-editor params="property: $parent.editorFontWeight()"></segmented-editor>
			<reset-button params="property: $parent.editorFontWeight()"></reset-button>
		</property-editor-row>
		<spacer></spacer>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: wrapText()}"
			params="label: 'Text input height', tooltip: 'StyleEditor.Input.TextInputHeight'"
		>
			<div class="segmented-buttons" data-bind="foreach: { data: $parent.textInputHeightOptions, noChildContext: true, as: 'inputHeight'} ">
				<div
					data-bind="text: inputHeight.name, attr: { 'class': inputHeight === $parent.textInputHeight() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parent.textInputHeight(inputHeight)"
				></div>
			</div>
			<reset-button
				params="parentComparator: () => $parent.isTextInputHeightDifferentThanParent.bind($parent)($parent.wrapText(), $parent.isMultiLine()), resetFunction: () => $parent.resetTextInputHeight.bind($parent)($parent.wrapText(), $parent.isMultiLine())"
			></reset-button>
		</property-editor-row>
		<spacer></spacer>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorBorderWidth()}"
			params="label: editorBorderWidth().Label, tooltip: 'StyleEditor.Input.BorderWidht'"
		>
			<div class="multiple-input-editor">
				<standard-input-editor params="property: $parent.editorBorderWidth()"></standard-input-editor>
				<reset-button params="property: $parent.editorBorderWidth()"></reset-button>
				<label class="style-property-label tooltipsource" data-tooltip="StyleEditor.Input.Radius">Radius</label>
				<standard-input-editor params="property: $parent.editorCornerRadius()"></standard-input-editor>
				<reset-button params="property: $parent.editorCornerRadius()"></reset-button>
			</div>
		</property-editor-row>
		<spacer></spacer>

		<div class="section-title">Color styles</div>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorForegroundColor()}"
			params="label: editorForegroundColor().Label, property: editorForegroundColor, tooltip: 'StyleEditor.Input.EnabledText'"
		>
			<color-editor
				params="value: $parent.editorForegroundColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.editorForegroundColor()), defaultValue: $parent.editorForegroundColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.editorForegroundColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.editorForegroundColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.editorForegroundColor())"
			></reset-button>
		</property-editor-row>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorDisabledColor()}"
			params="label: editorDisabledColor().Label, property: editorDisabledColor, tooltip: 'StyleEditor.Input.DisabledText'"
		>
			<color-editor
				params="value: $parent.editorDisabledColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.editorDisabledColor()), defaultValue: $parent.editorDisabledColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.editorDisabledColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.editorDisabledColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.editorDisabledColor())"
			></reset-button>
		</property-editor-row>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: linkColor()}"
			params="label: linkColor().Label, property: linkColor, tooltip: 'StyleEditor.Input.LinkText'"
		>
			<color-editor
				params="value: $parent.linkColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.linkColor()), defaultValue: $parent.linkColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.linkColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.linkColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.linkColor())"
			></reset-button>
		</property-editor-row>
		<spacer></spacer>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorBackgroundColor()}"
			params="label: editorBackgroundColor().Label, property: editorBackgroundColor, tooltip: 'StyleEditor.Input.Background'"
		>
			<color-editor
				params="value: $parent.editorBackgroundColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.editorBackgroundColor()), defaultValue: $parent.editorBackgroundColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.editorBackgroundColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.editorBackgroundColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.editorBackgroundColor())"
			></reset-button>
		</property-editor-row>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorSelectedBackgroundColor()}"
			params="label: editorSelectedBackgroundColor().Label, property: editorSelectedBackgroundColor, tooltip: 'StyleEditor.Input.SelectedBackground'"
		>
			<color-editor
				params="value: $parent.editorSelectedBackgroundColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.editorSelectedBackgroundColor()), defaultValue: $parent.editorSelectedBackgroundColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.editorSelectedBackgroundColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.editorSelectedBackgroundColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.editorSelectedBackgroundColor())"
			></reset-button>
		</property-editor-row>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorSelectedForegroundColor()}"
			params="label: editorSelectedForegroundColor().Label, property: editorSelectedForegroundColor, tooltip: 'StyleEditor.Input.SelectedForeground'"
		>
			<color-editor
				params="value: $parent.editorSelectedForegroundColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.editorSelectedForegroundColor()), defaultValue: $parent.editorSelectedForegroundColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.editorSelectedForegroundColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.editorSelectedForegroundColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.editorSelectedForegroundColor())"
			></reset-button>
		</property-editor-row>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: editorBorderColor()}"
			params="label: editorBorderColor().Label, property: editorBorderColor, tooltip: 'StyleEditor.Input.Border'"
		>
			<color-editor
				params="value: $parent.editorBorderColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.editorBorderColor()), defaultValue: $parent.editorBorderColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.editorBorderColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.editorBorderColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.editorBorderColor())"
			></reset-button>
		</property-editor-row>
		<spacer></spacer>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: buttonColor()}"
			params="label: buttonColor().Label, property: buttonColor, tooltip: 'StyleEditor.Input.IconButton'"
		>
			<color-editor
				params="value: $parent.buttonColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.buttonColor()), defaultValue: $parent.buttonColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.buttonColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.buttonColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.buttonColor())"
			></reset-button>
		</property-editor-row>
		<spacer></spacer>

		<div class="section-title" data-bind="propertyVisible: {tabName: 'input', property: bindingTrigger()}">On Change rules trigger</div>
		<property-editor-row
			data-bind="propertyVisible: {tabName: 'input', property: bindingTrigger()}"
			params="label: bindingTrigger().Label, tooltip: 'StyleEditor.Input.Condition'"
		>
			<select
				class="style-property-input-field"
				data-bind="options: $parent.bindingTrigger().Items, optionsValue: 'Value', optionsText: 'Label', value: $parent.bindingTrigger().Value"
			></select>
			<reset-button params="property: $parent.bindingTrigger()"></reset-button>
		</property-editor-row>
	</div>
</script>

<script id="tmplComponentSpecificEditor" type="text/html">
	<div class="tab-wrapper content-section">

		<div class="section-title" data-bind="propertyVisible: {tabName: 'componentSpecific', property: radioButtonMaxCount()}">Segmented buttons</div>
		<property-editor-row data-bind="propertyVisible: {tabName: 'componentSpecific', property: radioButtonMaxCount()}" params="label: radioButtonMaxCount().Label, tooltip: 'StyleEditor.Specific.MaxItem.Count'">
			<input class="style-property-input-field" type="number" data-bind="value: $parent.radioButtonMaxCount().Value"></input>
			<reset-button params="property: $parent.radioButtonMaxCount()"></reset-button>
		</property-editor-row>

		<property-editor-row
			params="label: segmentedButtonsLayout().Label, tooltip: 'StyleEditor.Specific.SegmentedButtonsLayout'"
			data-bind="propertyVisible: {tabName: 'componentSpecific', property: segmentedButtonsLayout()}"
		>
			<div class="segmented-buttons" data-bind="foreach: { data: $parent.segmentedButtonsLayout().Items, noChildContext: true, as: 'buttonsLayout'} ">
				<div data-bind="text: buttonsLayout.Label, attr: { 'class': buttonsLayout.Value === $parent.segmentedButtonsLayout().Value() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parent.segmentedButtonsLayout().Value(buttonsLayout.Value)"></div>
			</div>
			<reset-button params="property: $parent.segmentedButtonsLayout()"></reset-button>
		</property-editor-row>

		<spacer></spacer>
		<!-- ko if: selectedStyle().ComponentType === ComponentType.Switch -->
			<property-editor-row params="label: imageBasePath().Label">
				<input
					class="style-property-input-field"
					type="text"
					data-bind="click: $parent.imageBasePath().OnClick, valueEnter: $parent.imageBasePath().Value, attr: { placeholder: $parent.imageBasePath().PlaceHolder, readonly: $parent.imageBasePath().IsReadOnly }"
				/>
				<reset-button params="property: $parent.imageBasePath()"></reset-button>
			</property-editor-row>
		<!-- /ko -->
		<!-- ko if: selectedStyle().ComponentType !== ComponentType.Switch -->
			<div class="section-title" data-bind="propertyVisible: {tabName: 'componentSpecific', property: comboBoxImageAlignment()}">Dropdown & segmented buttons</div>
			<property-editor-row data-bind="propertyVisible: {tabName: 'componentSpecific', property: comboBoxImageAlignment()}" params="label: 'Show', tooltip: 'StyleEditor.Specific.Show'">
				<div class="segmented-buttons" data-bind="foreach: { data: $parent.segmentedButtonShowStyleOptions, noChildContext: true, as: 'showStyle'} ">
					<div data-bind="text: showStyle.name, attr: { 'class': showStyle === $parent.segmentedButtonShowStyle() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parent.segmentedButtonShowStyle(showStyle)"></div>
				</div>
				<reset-button params="property: $parent.comboBoxImageAlignment(), parentComparator: () => $parent.isShowIconDifferentThanParent.bind($parent)($parent.comboBoxImageAlignment()), resetFunction: () => $parent.resetShowIcon.bind($parent)($parent.comboBoxImageAlignment())" "></reset-button>
			</property-editor-row>
				<!-- ko if: segmentedButtonShowStyle() !== segmentedButtonIconAlignmentTextOnly -->
			<property-editor-row data-bind="propertyVisible: {tabName: 'componentSpecific', property: comboBoxImageAlignment()}" params="label: imageBasePath().Label, tooltip: 'StyleEditor.Specific.IconFolder'">
				<input
					class="style-property-input-field"
					type="text"
					data-bind="click: $parent.imageBasePath().OnClick, valueEnter: $parent.imageBasePath().Value, attr: { placeholder: $parent.imageBasePath().PlaceHolder, readonly: $parent.imageBasePath().IsReadOnly }"
				/>
				<reset-button params="property: $parent.imageBasePath()"></reset-button>
			</property-editor-row>
			<!-- /ko -->
			<!-- ko if: segmentedButtonShowStyle() === segmentedButtonIconAlignmentTextAndIcon -->
			<property-editor-row data-bind="propertyVisible: {tabName: 'componentSpecific', property: comboBoxImageAlignment()}" params="label: 'Icon alignment', tooltip: 'StyleEditor.Spexific.IconAlignment'">
				<div class="segmented-buttons" data-bind="foreach: { data: $parent.segmentedButtonIconAlignmentOptions, noChildContext: true, as: 'alignment'} ">
					<div data-bind="attr: { 'class': alignment === $parent.segmentedButtonIconAlignment() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parent.segmentedButtonIconAlignment(alignment)">
						<i data-bind="attr:{ 'class':'woodfordsprite icon-woodford_StyleEditor_' + alignment.name}"></i>
					</div>
				</div>
				<reset-button params="property: $parent.comboBoxImageAlignment(), parentComparator: () => $parent.isIconAlignmentDifferentThanParent.bind($parent)($parent.comboBoxImageAlignment()), resetFunction: () => $parent.resetIconAlignment.bind($parent)($parent.comboBoxImageAlignment())" "></reset-button>
			</property-editor-row>
			<!-- /ko -->
		<!-- /ko -->

		<spacer></spacer>
		<div class="section-title" data-bind="propertyVisible: {tabName: 'componentSpecific', property: minuteIncrement()}">Date & time picker intervals</div>
		<property-editor-row data-bind="propertyVisible: {tabName: 'componentSpecific', property: minuteIncrement()}" params="label: minuteIncrement().Label, tooltip: 'StyleEditor.Specific.Minutes'">
			<standard-input-editor params="property: $parent.minuteIncrement()"></standard-input-editor>
			<reset-button params="property: $parent.minuteIncrement()"></reset-button>
		</property-editor-row>

		<spacer></spacer>
		<div class="section-title" data-bind="propertyVisible: {tabName: 'componentSpecific', property: imageQuery()}">Image query</div>
		<property-editor-row data-bind="propertyVisible: {tabName: 'componentSpecific', property: imageQuery()}" params="label: imageQuery().Label, tooltip: 'StyleEditor.Specific.Condition'">
			<standard-input-editor class="image-query-input" params="property: $parent.imageQuery()"></standard-input-editor>
			<i class="setup-button woodfordsprite icon-woodford_StyleEditor_edit" data-bind="click: () => $parent.imageQuery().OnClick()"></i>
			<reset-button params="property: $parent.imageQuery()"></reset-button>
		</property-editor-row>
		<spacer></spacer>
		<div class="section-title">Container style</div>
		<property-editor-row data-bind="propertyVisible: {tabName: 'componentSpecific', property: backgroundColor()}" params="label: backgroundColor().Label, tooltip: 'StyleEditor.Specific.BackgroundColor'">
			<color-editor params="value: $parent.backgroundColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.backgroundColor()), defaultValue: $parent.backgroundColor().defaultValue"></color-editor>
			<reset-button params="property: $parent.backgroundColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.backgroundColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.backgroundColor()) "></reset-button>
		</property-editor-row>
		<property-editor-row data-bind="propertyVisible: {tabName: 'componentSpecific', property: errorColor()}" params="label: errorColor().Label, tooltip: 'StyleEditor.Specific.Error'">
			<color-editor params="value: $parent.errorColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.errorColor()), defaultValue: $parent.errorColor().defaultValue"></color-editor>
			<reset-button params="property: $parent.errorColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.errorColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.errorColor())"></reset-button>
		</property-editor-row>
	</div>
</script>

<script id="tmplSupportingTextEditor" type="text/html">
	<div class="tab-wrapper content-section">
		<property-editor-row params="label: 'Show', tooltip: 'StyleEditor.SupportingText.Show'">
			<label class="toggle">
				<input type="checkbox" data-bind="checked: $parent.showSupportingText" />
				<span class="slider"></span>
			</label>
			<reset-button
				params="property: $parent.supportingTextPosition(), parentComparator: () => $parent.isShowSupportingTextDifferentThanParent.bind($parent)($parent.supportingTextPosition()), resetFunction: () => $parent.resetShowSupportingText.bind($parent)($parent.supportingTextPosition())"
			></reset-button>
		</property-editor-row>
		<!-- ko if: showSupportingText -->
		<font-name-and-size-property-editor
			params="name: supportingTextFontName(), size: relativeSupportingTextFontSize(),options: fontNamesFromOfflineHtml, tooltipFontName: 'StyleEditor.SupportingText.FontName', tooltipRelativeSize: 'StyleEditor.SupportingText.RelativeSize'"
		></font-name-and-size-property-editor>
		<property-editor-row
			params="label: supportingTextHorizontalAlignment().Label, tooltip: 'StyleEditor.SupportingText.Alignment'"
			data-bind="propertyVisible: {tabName: 'supportingText', property: supportingTextHorizontalAlignment()}"
		>
			<segmented-editor params="property: $parent.supportingTextHorizontalAlignment()"></segmented-editor>
			<reset-button params="property: $parent.supportingTextHorizontalAlignment()"></reset-button>
		</property-editor-row>
		<property-editor-row params="label: supportingTextPosition().Label, tooltip: 'StyleEditor.SupportingText.Position'">
			<segmented-editor params="property: $parent.supportingTextPosition()"></segmented-editor>
			<reset-button params="property: $parent.supportingTextPosition()"></reset-button>
		</property-editor-row>

		<spacer></spacer>
		<div class="section-title">Color styles</div>
		<property-editor-row params="label: supportingTextForegroundColor().Label, tooltip: 'StyleEditor.SupportingText.Text'">
			<color-editor
				params="value: $parent.supportingTextForegroundColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.supportingTextForegroundColor()), defaultValue: $parent.supportingTextForegroundColor().defaultValue"
			></color-editor>
			<reset-button
				params="property: $parent.supportingTextForegroundColor(), parentComparator: () => $parent.isColorDifferentThanParent.bind($parent)($parent.supportingTextForegroundColor()), resetFunction: () => $parent.resetColor.bind($parent)($parent.supportingTextForegroundColor())"
			></reset-button>
		</property-editor-row>
		<!-- /ko -->
	</div>
</script>
<script id="tmplStyleEditorDialogView" type="text/html">
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div class="columnsWrapper">
		<div class="tree__wrapper" data-bind="template: { name: 'TreeView', data: Tree, as: 'x' }"></div>
		<div class="properties__wrapper">
			<form data-bind="event: { keypress: absorbEnter }, visible: isTreeNodeLabelSelected">
				<!-- ko if: selectedStyle().Type === ViewStyleTypes.ImageCell -->
				<!-- ko template: { name: 'tmplImageCellStyleProperties' } --><!-- /ko -->
				<!-- /ko -->
				<!-- ko if: selectedStyle().Type === ViewStyleTypes.TextCell -->
				<!-- ko template: { name: 'tmplTextCellStyleProperties' } --><!-- /ko -->
				<!-- /ko -->
			</form>
		</div>
	</div>
</script>

<script id="tmplImageCellStyleProperties" type="text/html">
	<property-editor-row
		data-bind="params: { property: name()}"
		params=" label: 'Style name', tooltip: 'ViewDesigner.StyleName'">
		<input class="style-property-input-field" type="text" data-bind="value: $parent.name().Value"></input>
	</property-editor-row>
	<div class="view-header-separator" ></div>
	<div class="view-section-title">Image query</div>
	<property-editor-row
		data-bind="params: { property: imageQuery()}"
		params=" label: 'Condition', tooltip: 'ViewDesigner.Condition'">
		<input class="style-property-input-field" type="text" data-bind="value: $parent.imageQuery().Value, attr: { placeholder: $parent.imageQuery().PlaceHolder }"></input>
		<i class="setup-button woodfordsprite icon-woodford_StyleEditor_edit" data-bind="click: () => $parent.imageQuery().OnClick()"></i>
		<reset-button params="property: $parents[1].imageQuery"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<spacer></spacer>
	<spacer></spacer>
	<property-editor-row
		data-bind="params: { property: format()}"
		params=" label: format().Label, tooltip: 'ViewDesigner.FormatString'">
		<input class="style-property-input-field" type="text" data-bind="value: $parent.format().Value, attr: { placeholder: $parent.format().PlaceHolder }"></input>
		<reset-button params="property: $parents[1].format"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		params="label: horizontalAlignment().Label, tooltip: 'ViewDesigner.HorizontalAlignment'"
		data-bind="params: { property: $parent.horizontalAlignment()}">
		<div class="segmented-buttons" data-bind="foreach: { data: $parents[1].horizontalAlignmentOptions, as: 'layout'}">
			<div data-bind="attr: { 'class': layout.value === $parents[1].horizontalAlignment().Value() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parents[1].setHorizontalAlignment(layout)">
				<i data-bind="attr:{ 'class':'woodfordsprite icon-woodford_StyleEditor_' + layout.name}"></i>
			</div>
		</div>
		<reset-button params="property: $parents[1].horizontalAlignment"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		params="label: verticalAlignment().Label, tooltip: 'ViewDesigner.VerticalAlignment'"
		data-bind="params: { property: $parent.verticalAlignment()}">
		<div class="segmented-buttons" data-bind="foreach: { data: $parent.verticalAlignmentOptions, as: 'layout'}">
			<div data-bind="attr: { 'class': layout.value === $parents[1].verticalAlignment().Value() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parents[1].setVerticalAlignment(layout)">
				<i data-bind="attr:{ 'class':'woodfordsprite icon-woodford_StyleEditor_' + layout.name}"></i>
			</div>
		</div>
		<reset-button params="property: $parents[1].verticalAlignment"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		data-bind="params: { property: cornerRadius()}"
		params=" label: cornerRadius().Label, tooltip: 'ViewDesigner.BorderRadius'">
		<input class="style-property-input-field" type="number" data-bind="value: $parent.cornerRadius().Value" style="width: 100px;"></input>
		<reset-button params="property: $parents[1].cornerRadius"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		data-bind="params: { property: $parent.imageFit()}"
		params="label: imageFit().Label, tooltip: 'ViewDesigner.ImageFit'">
		<div class="segmented-buttons" data-bind="foreach: { data: $parent.imageFitOptions, as: 'layout'}">
			<div data-bind="text: layout.name, attr: { 'class': layout.value === $parents[1].imageFit().Value() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parents[1].setImageFit(layout)"></div>
		</div>
		<reset-button params="property: $parents[1].imageFit"></reset-button>
	</property-editor-row>
	<spacer></spacer>

	<div class="view-section-title">Color styles</div>
	<property-editor-row
		data-bind="params: { property: $parent.foreColor()}"
		params="label: 'Icon color', tooltip: 'ViewDesigner.ForegroundIconColor'">
		<color-editor params="value: $parents[1].foreColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.foreColor()), defaultValue: $parent.foreColor().defaultValue"></color-editor>
		<reset-button params="property: $parents[1].backColor, parentComparator: $parent.isColorDifferentThanParent.bind($parent)($parent.foreColor()), resetFunction:  () =>  $parent.resetColor.bind($parent)($parent.foreColor())"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		data-bind="params: { property: $parent.backColor()}"
		params="label: backColor().Label, tooltip: 'ViewDesigner.BackgroundColor'">
		<color-editor params="value: $parent.backColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.backColor()), defaultValue: $parent.backColor().defaultValue"></color-editor>
		<reset-button params="property: $parents[1].backColor, parentComparator: $parent.isColorDifferentThanParent.bind($parent)($parent.backColor()), resetFunction:  () =>  $parent.resetColor.bind($parent)($parent.backColor())"></reset-button>
	</property-editor-row>
</script>

<script id="tmplTextCellStyleProperties" type="text/html">
	<property-editor-row
		data-bind="params: { property: name()}"
		params=" label: 'Style name', tooltip: 'ViewDesigner.StyleName'">
		<input class="style-property-input-field" type="text" data-bind="value: $parent.name().Value"></input>
	</property-editor-row>
	<div class="view-header-separator" ></div>
	<spacer></spacer>
	<spacer></spacer>
	<property-editor-row
		data-bind="params: { property: fontName()}"
		params=" label: fontName().Label, tooltip: 'ViewDesigner.FontName'">
		<select
			class="style-property-input-field"
			data-bind="options: $parent.fontNamesFromOfflineHtml, value: $parent.fontName().Value, optionsCaption: 'System default'"
		></select>
		<reset-button params="property: $parents[1].fontName"></reset-button>
		<property-editor-row
			data-bind="params: { property: $parent.fontSize()}"
			params=" label: $parent.fontSize().Label, tooltip: 'ViewDesigner.FontSize'">
			<input class="style-property-input-field" type="number" data-bind="value: $parents[1].fontSizeObservable" style="width: 50px;"></input>
			<reset-button params="property: $parents[2].fontSize, resetFunction: () => $parents[1].resetFontSize.bind($parents[1])($parents[1].fontSize())"></reset-button>
		</property-editor-row>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		params="label: horizontalAlignment().Label, tooltip: 'ViewDesigner.HorizontalAlignment'"
		data-bind="params: { property: horizontalAlignment()}">
		<div class="segmented-buttons" data-bind="foreach: { data: $parent.horizontalAlignmentOptions, as: 'layout'}">
			<div data-bind="attr: { 'class': layout.value === $parents[1].horizontalAlignment().Value() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parents[1].setHorizontalAlignment(layout)">
				<i data-bind="attr:{ 'class':'woodfordsprite icon-woodford_StyleEditor_' + layout.name}"></i>
			</div>
		</div>
		<reset-button params="property: $parents[1].horizontalAlignment"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		params="label: verticalAlignment().Label, tooltip: 'ViewDesigner.VerticalAlignment'"
		data-bind="params: { property: $parent.verticalAlignment()}">
		<div class="segmented-buttons" data-bind="foreach: { data: $parent.verticalAlignmentOptions, as: 'layout'}">
			<div data-bind="attr: { 'class': layout.value === $parents[1].verticalAlignment().Value() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parents[1].setVerticalAlignment(layout)">
				<i data-bind="attr:{ 'class':'woodfordsprite icon-woodford_StyleEditor_' + layout.name}"></i>
			</div>
		</div>
		<reset-button params="property: $parents[1].verticalAlignment"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		params="label: fontWeight().Label, tooltip: 'ViewDesigner.Decoration'"
		data-bind="params: { property: $parent.fontWeight()}">
		<div class="segmented-buttons" data-bind="foreach: { data: $parent.fontWeightOptions, as: 'layout'}">
			<div data-bind="attr: { 'class': layout.value === $parents[1].fontWeight().Value() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parents[1].setFontWeight(layout)">
				<i data-bind="attr:{ 'class':'woodfordsprite icon-woodford_StyleEditor_' + layout.name}"></i>
			</div>
		</div>
		<reset-button params="property: $parents[1].fontWeight"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		params="label: autoHeight().Label, tooltip: 'ViewDesigner.Autoheight'">
		<label class="toggle">
			<input type="checkbox" data-bind="checked: $parent.autoHeight().Value" />
			<span class="slider"></span>
		</label>
		<reset-button params="property: $parents[1].autoHeight"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		data-bind="params: { property: ellipsisPosition()}"
		params="label: ellipsisPosition().Label, tooltip: 'ViewDesigner.Ellipsis'">
		<div class="segmented-buttons" data-bind="foreach: { data: $parents[1].ellipsisPositionOptions, as: 'layout'}">
			<div data-bind="text: layout.name, attr: { 'class': layout.value === $parents[1].ellipsisPosition().Value() ? 'segmented-button-on': 'segmented-button-off' }, click: () => $parents[1].setEllipsisPosition(layout)"></div>
		</div>
		<reset-button params="property: $parents[1].ellipsisPosition"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		data-bind="params: { property: format()}"
		params=" label: format().Label, tooltip: 'ViewDesigner.FormatString'">
		<input class="style-property-input-field" type="text" data-bind="value: $parent.format().Value, attr: { placeholder: $parent.format().PlaceHolder }"></input>
		<reset-button params="property: $parents[1].format"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<div class="view-section-title">Color styles</div>
	<property-editor-row
		data-bind="params: { property: $parent.foreColor()}"
		params="label: 'Text color', tooltip: 'ViewDesigner.ForegroundTextColor'">
		<color-editor params="value: $parents[1].foreColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.foreColor()), defaultValue: $parent.foreColor().defaultValue"></color-editor>
		<reset-button params="property: $parents[1].backColor, parentComparator: $parent.isColorDifferentThanParent.bind($parent)($parent.foreColor()), resetFunction:  () =>  $parent.resetColor.bind($parent)($parent.foreColor())"></reset-button>
	</property-editor-row>
	<spacer></spacer>
	<property-editor-row
		data-bind="params: { property: $parent.backColor()}"
		params="label: backColor().Label, tooltip: 'ViewDesigner.BackgroundColor'">
		<color-editor params="value: $parent.backColor().Value, materialSchemes: $parent.materialSchemes, parentColor: $parent.getDefaultColor($parent.backColor()), defaultValue: $parent.backColor().defaultValue"></color-editor>
		<reset-button params="property: $parents[1].backColor, parentComparator: $parent.isColorDifferentThanParent.bind($parent)($parent.backColor()), resetFunction:  () =>  $parent.resetColor.bind($parent)($parent.backColor())"></reset-button>
	</property-editor-row>
</script>
<!--
		tmplStylePickerDialog Style replace dialog Template
	-->
<script id="tmplStylePickerDialog" type="text/html">
	<div data-bind="template: { name: 'TreeView', data: tree, as: 'x' }"></div>
</script>
<!--
		tmplStyleReplaceDialog Style replace dialog Template
	-->
<script id="tmplStyleReplaceDialog" type="text/html">
	<div><b>Style to replace</b></div>
	<div>
		<input type="text" disabled="disabled" data-bind="value:styleToReplace.Name" style="width:100%; box-sizing:border-box"></input>
	</div>
	<!-- ko if: !isEmpty(standardDependencies(styleToReplace)) -->
	<br></br>
	<div><b>Replace with</b></div>
	<div>
		<select data-bind="options: styles, optionsText: 'Name', value: selectedStyle" style="width:100%; box-sizing:border-box"></select>
	</div>
	<!-- /ko -->
	<br></br>
	<!-- ko if: !isEmpty(standardDependencies(styleToReplace)) -->
	<div>
		Style <b><span data-bind="text: styleToReplace.Name"></span></b> will be replaced by style <b><span data-bind="text: selectedStyle().Name"></span></b> in the following occurencies:
		<br></br>
		<div style="display: flex; flex-direction: column;" data-bind="foreach: standardDependencies(styleToReplace).map(d => d.schemaName).sort((d1,d2) => d1.localeCompare(d2))">
			<span data-bind="text: $data"></span>
		</div>
	</div>
	<!-- ko if: !isEmpty(builtInDependencies(styleToReplace)) -->
	<br></br>
	<div>
		Built-in occurencies which cannot be replaced:
		<br></br>
		<div style="display: flex; flex-direction: column;" data-bind="foreach: builtInDependencies(styleToReplace).map(d => d.schemaName).sort((d1,d2) => d1.localeCompare(d2))">
			<span data-bind="text: $data"></span>
		</div>
	</div>
	<!-- /ko -->
	<!-- /ko -->
	<!-- ko if: isEmpty(standardDependencies(styleToReplace)) -->
	<div>
		Style <b><span data-bind="text: styleToReplace.Name"></span></b> is not used. Cannot replace.
	</div>
	<!-- /ko -->
	<!-- ko if: !isEmpty(standardDependencies(styleToReplace)) -->
	<br></br>
	<span>Note: Clicking Ok will perform the replace immediately.</span>
	<!-- /ko -->
</script>
<!-- BEGIN: tmplTimelineDialog-->
<script id="tmplTimelineDialog" type="text/html">
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div class="timeline">
		<div class="selectable list entities" data-bind="foreach: SelectedEntities">
			<div
				class="item"
				data-bind="text: entity.DisplayName, click: () => $parent.SetActiveEntity($data), css: { selected: $data === $parent.ActiveEntity(), invalid: !isValid() }"
			></div>
		</div>

		<div data-bind="with: ActiveEntity" class="properties__wrapper">
					<div class="form-group" title="An entity field that represents a relation to the related (master) entity.">
						<label class="form-label">Regarding Field&nbsp;*</label>
							<select class="custom-select" data-testid="timeline-regarding-field"
								data-bind="options: regardingFieldsSelectable, optionsText: 'DisplayName', value: regardingField, optionsCaption: ''"
							></select>
					</div>
					<div class="form-group" title="An entity field that represents an owner.">
						<label class="form-label">Owner Field&nbsp;*</label>
							<select class="custom-select" data-testid="timeline-owner-field"
								data-bind="options: ownerFieldsSelectable, optionsText: 'DisplayName', value: ownerField, optionsCaption: ''"
							></select>
					</div>
					<div class="form-group" title="An entity field that represents a subject (i.e. short text).">
						<label class="form-label">Subject Field&nbsp;*</label>
							<select class="custom-select" data-testid="timeline-subject-field"
								data-bind="options: subjectFieldsSelectable, optionsText: 'DisplayName', value: subjectField, optionsCaption: ''"
							></select>
					</div>
					<div class="form-group" title="An entity field that represents a description (i.e. long text).">
						<label class="form-label">Description Field&nbsp;*</label>
							<select class="custom-select" data-testid="timeline-description-field"
								data-bind="options: descriptionFieldsSelectable, optionsText: 'DisplayName', value: descriptionField, optionsCaption: ''"
							></select>
					</div>
					<div class="form-group"
						title="An entity field that represents a sorting date. This is the date that is shown as the item date and is used to sort the timeline."
					>
						<label class="form-label">Sorting Date Field&nbsp;*</label>
							<select class="custom-select" data-testid="timeline-sort-date-field"
								data-bind="options: sortDateFieldsSelectable, optionsText: 'DisplayName', value: sortDateField, optionsCaption: ''"
							></select>
					</div>
					<div class="form-group" title="An entity field that represents a Due Date on the timeline. This will determine whether the item is shown as overdue.">
						<label class="form-label">Due Date Field</label>
							<select class="custom-select" data-testid="timeline-due-date-field"
								data-bind="options: dueDateFieldsSelectable, optionsText: 'DisplayName', value: dueDateField, optionsCaption: ''"
							></select>
					</div>
					<div class="form-group" title="An entity field that represents a Status. This will be checked to determine whether the item is shown as overdue.">
						<label class="form-label">Status Field</label>
							<select class="custom-select" data-testid="timeline-status-field"
								data-bind="options: statusFieldsSelectable, optionsText: 'DisplayName', value: statusField, optionsCaption: ''"
							></select>
					</div>
					<div class="form-group">
						<label class="form-label"
							title="Determines the status codes that make the entity closed (for example, completed or canceled).&#xa;Entities in these states will not be shown as overdue."
						>
							Closed States
						</label class="form-label">
							<label data-bind="text: closedStatusesLabel"></label>
							<button style="flex: 0 0 auto;" data-testid="closed-states" data-bind="click: () => $parents[1].SelectClosedStatusesClicked($data)">&mldr;</button>
					</div>
		</div>
	</div>
</script>
<!-- END: tmplTimelineDialog-->
<!-- BEGIN: tmplTimelineSelectDialog-->
<script id="tmplTimelineSelectDialog" type="text/html">
	<!-- ko if: !TimelinesExist() -->
	<div class="dialogInfoMessage">
		<div class="dialogInfoMessage__icon">
			<i class="woodfordsprite icon-woodford_Info_36"></i>
		</div>
		<div class="dialogInfo__text">
			<h1 class="dialogInfoMessage__title">No timeline available</h1>
			<p>You can create and manage a "Timeline" in the "Timeline" editor.</p>
			<p>Remember that you must save your work to switch to the new view.</p>
			<p>Click the "Create new" button to create a new timeline</p>
		</div>
	</div>
	<!-- /ko -->
	<!-- ko if: TimelinesExist() -->
	<div class="project__option">
		<div class="project__option--title">
			<span>Timeline:</span>
		</div>
		<select data-bind="options: SelectableTimelines, value: SelectedTimeline, AllowUnset: false"></select>
	</div>
	<!-- /ko -->
</script>
<!-- END: tmplTimelineSelectDialog-->
<!-- BEGIN: tmplEditJobDialog-->
<script id="tmplEditJobDialog" type="text/html">
	<div style="flex: 0 0 auto; display:flex">
		<!-- ko foreach: Tabbar -->
		<div class="tabControlItem" data-bind="css: { tabControlItemSelected: Selected() }, click: Clicked, visible: Visible">
			<span style="padding:0.3em" data-bind="text: Name"></span>
		</div>
		<!-- /ko -->
	</div>
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>

	<!-- ko foreach: Pages -->
	<div
		style="flex:1 1 auto; flex-direction:column; padding:5px"
		class="flexDiv"
		data-bind="visible: $parent.SelectedTabIndex()===$index(), template: { name: ContentTemplateName, data: $data}"
	></div>
	<!-- /ko -->
</script>

<script id="tmplJobsPageFrequency" type="text/html">
	<select style="width:300px;" data-bind="options:RouteType, optionsValue: 'Value', optionsText:'Label', value:SelectedRouteType"></select>
	<b>Service Execution:</b>
	<table style="width:100%; padding-left:10px">
		<tr>
			<td>Start on</td>
			<td>
				<input data-bind="datetimepicker: StartTime, datetimepicker-options: { step: 30 }" type="text" readonly="readonly" style="width: 130px" />
			</td>
		</tr>
		<tr>
			<td></td>
			<td>
				<div data-bind="visible: SelectedRouteType()===1" style="width:100%">
					Days: <br />
					<label><input type="checkbox" data-bind="checked: DayInWeek[1].Checked" />Monday</label>,
					<label><input type="checkbox" data-bind="checked: DayInWeek[2].Checked" />Tuesday</label>,
					<label><input type="checkbox" data-bind="checked: DayInWeek[3].Checked" />Wednesday</label>,
					<label><input type="checkbox" data-bind="checked: DayInWeek[4].Checked" />Thursday</label>,
					<label><input type="checkbox" data-bind="checked: DayInWeek[5].Checked" />Friday</label><br />
					<label><input type="checkbox" data-bind="checked: DayInWeek[6].Checked" />Saturday</label>,
					<label><input type="checkbox" data-bind="checked: DayInWeek[0].Checked" />Sunday</label>
				</div>
				<div data-bind="visible: SelectedRouteType()===2" style="width:100%">
					Day:
					<select style="width:133px" data-bind="options:Days, optionsValue: 'Value', optionsText:'Label', value:SelectedDay"></select>
				</div>
				<div data-bind="visible: SelectedRouteType()===3" style="width:100%">
					Day:
					<select style="width:80px" data-bind="options:Days, optionsValue: 'Value', optionsText:'Label', value:SelectedDay"></select>
					Month:
					<select style="width:80px" data-bind="options:Months, optionsValue: 'Value', optionsText:'Label', value:SelectedMonth"></select>
				</div>
			</td>
		</tr>
	</table>
	<br />
	<b>Scheduling Period Start and Duration</b>
	<table style="width:100%; padding-left:10px">
		<thead style="font-style:italic; font-weight:600">
			<tr>
				<td style="width:50%"></td>
				<td style="width:50%"></td>
			</tr>
		</thead>
		<tr>
			<td>First item will be scheduled at the</td>
			<td><select data-bind="options:SchedulingStarts, optionsValue: 'Value', optionsText:'Label', value: SelectedSchedulingStart"></select></td>
		</tr>
		<tr>
			<td>One execution schedule items for</td>
			<td>
				<input
					type="number"
					data-bind="value: NumberOfSchedulingPeriods.Value"
					width="50px"
					style="width:50px; border:0px solid black; padding:2px; margin:0; text-align:center"
				/>
				<select data-bind="options:SchedulingPeriods, optionsValue: 'Value', optionsText:'Label', value: SelectedSchedulingPeriod"></select>
			</td>
		</tr>
	</table>
	<br />
	<b>Visit Frequencies</b>
	<table style="width:100%; padding-left:10px">
		<thead style="font-style:italic; font-weight:600">
			<tr>
				<td style="width:30%">Job Frequencies</td>
				<td style="width:15%">Default</td>
				<td style="width:15%"></td>
				<td style="width:15%"></td>
				<td style="width:25%">Field</td>
			</tr>
		</thead>
		<tr>
			<td>Visit frequency</td>
			<td>
				<input
					type="number"
					data-bind="value: NumberOfVisits.Value"
					style="width:100%; border:0px solid black; padding:2px; margin:0; text-align:center"
				/>
			</td>
			<td>visit(s)</td>
			<td><select data-bind="options:VisitsRange, optionsValue: 'Value', optionsText:'Label', value:SelectedVisitsRange"></select></td>
			<td>
				<select
					data-bind="options:Fields, optionsText: 'DisplayName', value: NumberOfVisitsField, valueAllowUnset: false, enable:EnableFields"
				></select>
			</td>
		</tr>
		<tr>
			<td>Min. days between visits</td>
			<td>
				<input
					type="number"
					data-bind="value: MinDaysBetweenVisits.Value"
					style="width:100%; border:0px solid black; padding:2px; margin:0; text-align:center"
				/>
			</td>
			<td>day(s)</td>
			<td></td>
			<td>
				<select
					data-bind="options:Fields, optionsText: 'DisplayName', value: MinDaysBetweenVisitsField, valueAllowUnset: false, enable:EnableFields"
				></select>
			</td>
		</tr>
		<!--
		<tr>
			<td>Visit duration (min)</td>
			<td><input type="number" data-bind="value: VisitDurationInMinutes.Value" style="width:100%; border:0px solid black; padding:2px; margin:0; text-align:center" /></td>
			<td>minute(s)</td>
			<td></td>
			<td><select data-bind="options:Fields, optionsText: 'DisplayName', value: VisitDurationInMinutesField, valueAllowUnset: false, enable:EnableFields" ></select></td>
		</tr>-->
	</table>
</script>

<script id="tmplJobsPageOperationTimes" type="text/html">
	<div style="display:flex;justify-content:center">
		<table style="width:400px;align-self:center">
			<tr>
				<td align="center">
					<div data-bind="grid: Grid" data-definitiononly="false" data-twowaybinding="true" style="white-space:nowrap; height: 100%">
						<div data-columnname="Day" data-flex="1 0 150px" data-binding="day" data-sortable="false" data-horalign="right"></div>
						<div data-columnname="Visit Start" data-flex="0 0 100px" data-sortable="false" data-horalign="center" style="background-color:white">
							<input
								type="number"
								data-bind="value: data.startHour"
								style="width:40%; border:0px solid black; padding:2px; margin:0; text-align:center"
							/>
							:
							<input
								type="number"
								data-bind="value: data.startMinute"
								style="width:40%; border:0px solid black; padding:2px; margin:0; text-align:center"
							/>
						</div>
						<div data-columnname="Visit End" data-flex="0 0 100px" data-sortable="false" data-horalign="center" style="background-color:white">
							<input
								type="number"
								data-bind="value: data.endHour"
								style="width:40%; border:0px solid black; padding:2px; margin:0; text-align:center"
							/>
							:
							<input
								type="number"
								data-bind="value: data.endMinute"
								style="width:40%; border:0px solid black; padding:2px; margin:0; text-align:center"
							/>
						</div>
					</div>
				</td>
			</tr>
		</table>
	</div>
</script>

<script id="tmplJobsPageSettings" type="text/html">
	<table style="width:100%">
		<thead style="font-style:italic; font-weight:600">
			<tr>
				<td style="width:40%">Name</td>
				<td style="width:60%">Value</td>
			</tr>
		</thead>
		<tr>
			<td>Google APIKey</td>
			<td><input type="text" data-bind="value: GoogleApiKey" style="width:100%; border:0px solid black; padding:2px; margin:0;" /></td>
		</tr>
		<tr>
			<td>If the auto-scheduled activity has not been realized</td>
			<td>
				<select
					style="width:100%"
					data-bind="options:UnprocessedScenario, optionsValue: 'Value', optionsText:'Label', value:SelectedUnprocessedScenario"
				></select>
			</td>
		</tr>
	</table>
</script>

<!-- END: tmplEditJobDialog-->
<!-- BEGIN: tmplEditRoutePlanDialog-->
<script id="tmplEditRoutePlanDialog" type="text/html">
	<div style="flex: 0 0 auto; display:flex">
		<!-- ko foreach: Tabbar -->
		<div class="tabControlItem" data-bind="css: { tabControlItemSelected: Selected() }, click: Clicked, visible: Visible">
			<span style="padding:0.3em" data-bind="text: Name"></span>
		</div>
		<!-- /ko -->
	</div>
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div
		style="flex:1 1 auto; flex-direction:column; box-sizing:border-box; overflow-y:auto"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===0"
	>
		<table>
			<tr>
				<td><b>Activity:</b></td>
				<td>
					<select
						data-bind="options: ActivityCombo, optionsText: 'DisplayName', value: SelectedActivity, valueAllowUnset: false"
						style="width:100%"
						title="Defines which entity should be shown/edited on the route plan."
					></select>
				</td>
			</tr>
			<tr>
				<td><b>Activity Name Field:</b></td>
				<td>
					<select
						data-bind="options: DisplayNameFields, optionsText: 'DisplayName', value: DisplayNameField, valueAllowUnset: false"
						style="width:100%"
						title="Defines which field will be displayed as title of record in the list and on the map."
					></select>
				</td>
			</tr>
			<tr>
				<td><b>Start Field:</b></td>
				<td>
					<select
						data-bind="options: ActivityFields, optionsText: 'DisplayName', value: StartField, valueAllowUnset: false"
						style="width:100%"
						title="Determines the field which will define the appointment start."
					></select>
				</td>
			</tr>
			<tr>
				<td><b>End Field:</b></td>
				<td>
					<select
						data-bind="options: ActivityFields, optionsText: 'DisplayName', value: EndField, valueAllowUnset: false"
						style="width:100%"
						title="Determines the field which will define the appointment end."
					></select>
				</td>
			</tr>
			<tr>
				<td><b>Related Entity Lookup:</b></td>
				<td>
					<select
						data-bind="options: LookupFields, optionsText: 'DisplayName', value: LookupField, valueAllowUnset: false"
						style="width:100%"
						title="The lookup field defines related entity (entities) which will be shown on the map.&#xa;Creating an appointment on the route plan will associate the entity (record) to the appointment via this lookup field."
					></select>
				</td>
			</tr>
			<tr>
				<td>
					<label for="cbViewMode"><b>View-only Mode:</b></label>
				</td>
				<td>
					<input
						type="checkbox"
						id="cbViewMode"
						data-bind="checked: ViewOnlyMode"
						title="Activates the view-only mode.&#xa;User will be not able to modify the route items."
					/>
				</td>
			</tr>
			<tr>
				<td>
					<label for="cbUserOwnedRecordsOnly"><b>Filter user-owned records:</b></label>
				</td>
				<td>
					<input
						type="checkbox"
						id="cbUserOwnedRecordsOnly"
						data-bind="checked: UserOwnedRecordsOnly"
						title="Indicates whether the RoutePlan should explicitly filter records owned by current user.&#xa;It can be also achieved by setting proper sync filter for route plan entity."
					/>
				</td>
			</tr>
			<tr>
				<td>
					<label for="cbEnableCompletion"><b>Enable completion:</b></label>
				</td>
				<td>
					<input
						type="checkbox"
						id="cbEnableCompletion"
						data-bind="checked: EnableCompletion"
						title="Allows user to complete the appointment directly from map annotation.&#xa;If enabled, Completion Status must be defined."
					/>
				</td>
			</tr>
			<tr data-bind="visible: CanChooseCustomStatus() && EnableCompletion()">
				<td><b>Status field:</b></td>
				<td>
					<select
						data-bind="options: CompletionFieldOptions, optionsText: 'DisplayName', value: CompletionField, valueAllowUnset: true"
						style="width:100%"
						title="Choose the field that will be used as status field."
					></select>
				</td>
			</tr>
			<tr data-bind="visible: EnableCompletion">
				<td><b>Completion Status:</b></td>
				<td>
					<select
						data-bind="options: DefaultActions, optionsText: 'SchemaName', value: DefaultAction, valueAllowUnset: true"
						style="width:100%"
						title="Choose the status code value which should be set when user marks an appointment as completed on the map.&#xa;Appointments with this status code will be NOT shown on the route."
					></select>
				</td>
			</tr>
			<tr data-bind="visible: EnableCompletion">
				<td><b>Excluded Status Values:</b></td>
				<td>
					<span
						data-bind="text:StatusMenu"
						title="Determines the additional status codes that will be excluded from the route.&#xa;Appointments with these status codes will be NOT shown on the route."
					></span
					><button style="flex:0 0 auto" data-bind="click: SelectExcludeStatus">...</button>
				</td>
			</tr>
			<tr>
				<td><b>Workday Start Hour:</b></td>
				<td>
					<input
						type="text"
						data-bind="value: StartHour"
						style="width:100%"
						placeholder="Hours:Minutes (9:00)"
						title="Enter the hour which should be used as a start for every route. Format:[HH:MM]"
					/>
				</td>
			</tr>
			<tr>
				<td><b>Default Duration:</b></td>
				<td>
					<input
						type="text"
						data-bind="value: Duration"
						style="width:100%"
						placeholder="Minutes (60)"
						title="Enter default appointment duration in minutes."
					/>
				</td>
			</tr>
			<tr>
				<td><b>Default Work Location:</b></td>
				<td>
					<input
						type="text"
						data-bind="value: Latitude"
						style="width:40%"
						placeholder="Latitude"
						title="Enter latitude of default Work GPS location."
					/>&nbsp;&nbsp;
					<input
						type="text"
						data-bind="value: Longitude"
						style="width:40%"
						placeholder="Longitude"
						title="Enter longitude of default Work GPS location."
					/>
				</td>
			</tr>
			<tr>
				<td>
					<label for="cbStartAtWork"><b>Start/end route at work:</b></label>
				</td>
				<td>
					<input
						type="checkbox"
						id="cbStartAtWork"
						data-bind="checked: StartAtWork"
						title="Determines the default route start/end point&#xa;whether it should be at work or at current location."
					/>
				</td>
			</tr>
			<tr>
				<td><b>Alternative visit location:</b></td>
				<td>
					<select
						data-bind="options: AlternativeLocationFields, optionsText: 'DisplayName', value: AlternativeLocationLatField, valueAllowUnset: true, optionsCaption: '-- Latitude field --'"
						style="width:49%"
					></select>
					<select
						data-bind="options: AlternativeLocationFields, optionsText: 'DisplayName', value: AlternativeLocationLngField, valueAllowUnset: true, optionsCaption: '-- Longitude field --'"
						style="width:49%"
					></select>
				</td>
			</tr>
		</table>
	</div>
	<div style="flex:1 1 auto; flex-direction:column" class="flexDiv" data-bind="visible: SelectedTabIndex()===1">
		<table>
			<tr>
				<div class="warningMessage" data-bind="visible: !CanEnableEnhancedOptimization()">
					<div class="warningMessage__icon">
						<i class="woodfordsprite icon-woodford_InfoIcon_18"></i>
					</div>
					<div class="warningMessage__info">
						<div class="warningMessage__text">
							When this feature is enabled, optimization process will make sure, appointments will not be planned outside opening hours. User can also
							mark appointments as fixed and after optimization process is completed, fixed appointments will stay in their original time slot.
							<p style="margin: 13px 0 0 0;">
								To enable Routes AI please contact your Business Development Manager or
								<a data-bind="attr: { href: getEmailTemplate() }">send us</a> an email.
							</p>
						</div>
					</div>
				</div>
			</tr>
			<tr>
				<td>
					<label for="cbEnhancedOptimization"><b>Use Routes AI:</b></label>
				</td>
				<td>
					<input
						type="checkbox"
						id="cbEnhancedOptimization"
						data-bind="checked: EnhancedOptimizationEnabled, enable: CanEnableEnhancedOptimization"
						title="Determines if the Routes AI service will be used"
					/>
				</td>
			</tr>
			<tr>
				<td><b>Fixed Visit Field:</b></td>
				<td>
					<select
						data-bind="options: FixedVisitFieldOptions,
									optionsText: 'DisplayName',
									value: FixedVisitField,
									valueAllowUnset: true,
									optionsCaption: '-- Disabled --',
									enable: EnhancedOptimizationEnabled"
						style="width:100%"
						title="Choose the field that will be used to store the fixed appointment flag."
					></select>
				</td>
			</tr>
		</table>
	</div>
	<div style="flex:1 1 auto; flex-direction:column" class="flexDiv" data-bind="visible: SelectedTabIndex()===2">
		<div style="color:gray;margin:1em">
			Enable fields for additional filtering.<br />User will need to select a field value and only appointments with this value will be shown on the
			route plan.<br />Good example of such a field is Owner - it can be used to show selected user's route.
		</div>
		<div data-bind="grid: FilterItemsGrid" data-definitiononly="false" data-twowaybinding="true" style="white-space:nowrap; flex:1 1 auto">
			<div
				data-columnname=" "
				data-columntype="checkbox"
				data-horalign="center"
				data-flex="0 0 20px"
				data-binding="IsEnabled"
				data-sortable="false"
			></div>
			<div
				data-columnname="DisplayName"
				data-flex="1 0 150px"
				data-binding="DisplayName"
				data-sortable="true"
				data-horalign="left"
				data-sort="ascending"
			></div>
			<div data-columnname="LogicalName" data-flex="1 0 150px" data-binding="LogicalName" data-sortable="true" data-horalign="left"></div>
			<div data-columnname="Type" data-flex="0 0 150px" data-binding="TypeLabel" data-sortable="true" data-horalign="left"></div>
		</div>
	</div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===3, template: { name: 'tmplSelectViewsControl', data: SourceViewsControl}"
	></div>
</script>
<!-- END: tmplEditRoutePlanDialog-->
<!-- BEGIN: tmplEditSchedulerDialog-->
<script id="tmplEditSchedulerDialog" type="text/html">
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div style="flex: 0 0 auto; display:flex">
		<!-- ko foreach: Tabbar -->
		<div class="tabControlItem" data-bind="css: { tabControlItemSelected: Selected() }, click: Clicked, visible: Visible">
			<span style="padding:0.3em" data-bind="text: Name"></span>
		</div>
		<!-- /ko -->
	</div>
	<!-- ko foreach: Pages -->
	<div
		style="flex: 1 1 auto; flex-direction: column; padding: 5px; overflow: auto"
		class="flexDiv"
		data-bind="visible: $parent.SelectedTabIndex()===$index(), template: { name: ContentTemplateName, data: $data}"
	></div>
	<!-- /ko -->
</script>

<script id="tmplSchedulerPageActivity" type="text/html">
	<span style="margin-top: 5px"><b style="color:red">*</b><b>Activity Entity:</b></span>
	<select
		data-testid="activity-entity"
		data-bind="options: ActivityCombo, optionsText: 'DisplayName', value: SelectedActivity, valueAllowUnset: false"
		style="width:30%"
	></select>
	<table style="padding-left:20px">
		<tr>
			<td>
				<b>Status Field:</b>
				<select
					data-testid="status-field"
					data-bind="options: StatusFields, optionsText: 'DisplayName', value: StatusField, valueAllowUnset: false"
					style="width:95%"
				></select>
			</td>
		</tr>
		<tr>
			<td>
				<b style="color:red">*</b><b>Scheduled Start Field:</b>
				<select
					data-testid="scheduled-start-field"
					data-bind="options: DateFields, optionsText: 'DisplayName', value: StartField, valueAllowUnset: false, enable:HasDateFields"
					style="width:95%"
				></select>
			</td>
			<td>
				<b style="color:red">*</b><b>Scheduled End Field:</b>
				<select
					data-testid="scheduled-end-field"
					data-bind="options: DateFields, optionsText: 'DisplayName', value: EndField, valueAllowUnset: false, enable:HasDateFields"
					style="width:95%"
				></select>
			</td>
		</tr>
		<tr>
			<td>
				Incoming Travel Duration:<select
					data-testid="incoming-travel-duration"
					data-bind="options: TimeFieldsWithNull, optionsText: 'DisplayName', value: TravelToField, valueAllowUnset: true, enable:TimeFieldsWithNull().length>1"
					style="width:95%"
				></select>
			</td>
			<td>
				Outgoing Travel Duration:<select
					data-testid="outgoing-travel-duration"
					data-bind="options: TimeFieldsWithNull, optionsText: 'DisplayName', value: TravelFromField, valueAllowUnset: true, enable:TimeFieldsWithNull().length>1"
					style="width:95%"
				></select>
			</td>
			<td>
				Travel Mode Field:<select
					data-testid="travel-mode-field"
					data-bind="options: TravelModeFields, optionsText: 'DisplayName', value: TravelModeField, valueAllowUnset: true, enable:TravelModeFields().length>1"
					style="width:95%"
				></select>
			</td>
		</tr>
		<tr>
			<td>
				Actual Start Field:<select
					data-testid="actual-start-field"
					data-bind="options: DateFieldsWithNull, optionsText: 'DisplayName', value: StartedOnField, valueAllowUnset: true, enable:DateFieldsWithNull().length>1"
					style="width:95%"
				></select>
			</td>
			<td>
				Actual End Field:<select
					data-testid="actual-end-field"
					data-bind="options: DateFieldsWithNull, optionsText: 'DisplayName', value: EndednOnField, valueAllowUnset: true, enable:DateFieldsWithNull().length>1"
					style="width:95%"
				></select>
			</td>
			<td>
				Arrived On Field:<select
					data-testid="arrived-on-field"
					data-bind="options: DateFieldsWithNull, optionsText: 'DisplayName', value: ArrivedOnField, valueAllowUnset: true, enable:DateFieldsWithNull().length>1"
					style="width:95%"
				></select>
			</td>
		</tr>
		<tr>
			<td><br /></td>
		</tr>
		<tr>
			<td>
				<b style="color:red">*</b><b>Resource Lookup Field:</b>
				<select
					data-testid="resource-lookup-field"
					data-bind="options: Resource.AvailableFields, optionsText: 'DisplayName', value: Resource.SelectedField, valueAllowUnset: false, enable:Resource.HasFields"
					style="width:95%"
				></select>
			</td>
			<td>
				Target:<select
					data-testid="resource-target"
					data-bind="options: Resource.AvailableTargets, optionsText: 'DisplayName', value: Resource.SelectedTarget, valueAllowUnset: false, enable:Resource.HasTargets"
					style="width:95%"
				></select>
			</td>
			<td></td>
		</tr>
		<tr>
			<td>
				<b>Source Lookup Field:</b>
				<select
					data-testid="source-lookup-field"
					data-bind="options: Source.AvailableFields, optionsText: 'DisplayName', value: Source.SelectedField, valueAllowUnset: false, enable:Source.HasFields"
					style="width:95%"
				></select>
			</td>
			<td>
				Target:<select
					data-testid="source-target"
					data-bind="options: Source.AvailableTargets, optionsText: 'DisplayName', value: Source.SelectedTarget, valueAllowUnset: false, enable:Source.HasTargets"
					style="width:95%"
				></select>
			</td>
			<td></td>
		</tr>
		<tr>
			<td colspan="3">
				<label><input type="checkbox" data-bind="checked: SourceToOwnerRelationship" />Activity can be attached only to its owner</label>
			</td>
		</tr>
	</table>
</script>

<script id="tmplSchedulerPageActivityTypes" type="text/html">
	<table style="height:100%; width:100%">
		<tr>
			<td height="25px">
				<div style="width:300px;">
					Border Width:
					<input data-testid="border-width" type="number" min="0" max="10" style="width:50px;box-sizing: border-box;" data-bind="value:BorderWidth" />
					Box Radius:
					<input
						data-testid="border-radius"
						type="number"
						min="0"
						max="20"
						style="width:50px;box-sizing: border-box;"
						data-bind="value:BorderRadius"
					/>
				</div>
			</td>
		</tr>
		<tr style="height: 100%">
			<td style="height: 100%">
				<div data-bind="grid: StatusGrid" data-definitiononly="false" data-twowaybinding="true" style="white-space:nowrap; height: 100%">
					<div
						data-testid="status"
						data-columnname="Status"
						data-flex="2 0 50px"
						data-binding="name"
						data-sortable="false"
						data-horalign="left"
						data-sort="ascending"
					></div>
					<div data-columnname="Action" data-flex="7 0 50px" data-binding="taskStatusType" data-sortable="false" data-horalign="left">
						<div style="height:100%; display:flex; align-items:center; margin: 0px 5px 0px 5px;">
							<select
								data-testid="action"
								data-bind="options: MobileCRM.Woodford.Tourplan.TaskStatusCode.StatusCode, optionsText: 'name', optionsValue: 'value', value: data.taskStatusType, valueAllowUnset: false"
								style="width:100%"
							></select>
						</div>
					</div>
					<div data-columnname="Color" data-flex="0 0 60px" data-sortable="false">
						<div
							data-testid="color"
							data-bind="style: { 'background-color': (data.color===undefined?'white':data.color) }, click: data.onColorClicked"
							style="width:80%; height:80%; display:flex; align-items:center; margin: 5px 5px 5px 5px;"
						></div>
					</div>
					<div data-columnname="Text" data-flex="0 0 60px" data-sortable="false">
						<div
							data-testid="text"
							data-bind="style: { 'background-color': (data.textColor===undefined?'black':data.textColor) }, click: data.onTextColorClicked"
							style="width:80%; height:80%; display:flex; align-items:center; margin: 5px 5px 5px 5px;"
						></div>
					</div>
					<div data-columnname="Border" data-flex="0 0 60px" data-sortable="false">
						<div
							data-testid="border"
							data-bind="style: { 'background-color': (data.borderColor===undefined?'black':data.borderColor) }, click: data.onBorderColorClicked"
							style="width:80%; height:80%; display:flex; align-items:center; margin: 5px 5px 5px 5px;"
						></div>
					</div>
					<div
						data-testid="default"
						data-columnname="Default"
						data-binding="isDefaultValue"
						data-flex="0 0 60px"
						data-columntype="checkbox"
						data-horalign="center"
						data-sortable="false"
					></div>
				</div>
			</td>
		</tr>
	</table>
</script>

<script id="tmplSchedulerPageTimeOffs" type="text/html">
	<label style="margin-top: 5px;"><input type="checkbox" data-bind="checked: TimeOffs.Enabled" />Enable Time-Off</label>
	<table style="padding-left:15px">
		<tr>
			<td>
				<b style="color:red">*</b> <b>Time-Off Entity:</b>
				<select
					data-bind="options: TimeOffs.EntityList, optionsText: 'DisplayName', value: TimeOffs.SelectedEntity, valueAllowUnset: false, enable:TimeOffs.Enabled"
					style="width:95%"
				></select>
			</td>
			<td style="width:80px">
				<b>Color:</b><br />
				<div
					id="timeOffsColor"
					data-bind="click: TimeOffs.onColorClicked, style: {'background-color': TimeOffs.ColorButton}, enable:TimeOffs.Enabled"
					style="width:60px; height:25px; margin: 5px 5px 5px 5px;"
				></div>
			</td>
			<td style="width:80px">
				<b>Text:</b><br />
				<div
					id="timeOffsTextColor"
					data-bind="click: TimeOffs.onTextColorClicked, style: {'background-color': TimeOffs.TextColorButton}, enable:TimeOffs.Enabled"
					style="width:60px; height:25px; margin: 5px 5px 5px 5px;"
				></div>
			</td>
			<td style="width:80px">
				<b>Border:</b><br />
				<div
					id="timeOffsBorderColor"
					data-bind="click: TimeOffs.onBorderColorClicked, style: {'background-color': TimeOffs.BorderColorButton}, enable:TimeOffs.Enabled"
					style="width:60px; height:25px; margin: 5px 5px 5px 5px;"
				></div>
			</td>
		</tr>
		<tr>
			<td>
				<b style="color:red">*</b> <b>Resource Field:</b>
				<select
					data-testid="resource-field"
					data-bind="options: TimeOffs.Resources, optionsText: 'DisplayName', value: TimeOffs.ResourceField, valueAllowUnset: false, enable:TimeOffs.HasResources"
					style="width:95%"
				></select>
			</td>
		</tr>
		<tr>
			<td>
				<b style="color:red">*</b> <b>Start Field:</b>
				<select
					data-testid="start-field"
					data-bind="options: TimeOffs.DateFields, optionsText: 'DisplayName', value: TimeOffs.StartField, valueAllowUnset: false, enable:TimeOffs.HasDateFields"
					style="width:95%"
				></select>
			</td>
			<td colspan="3">
				<b style="color:red">*</b> <b>End Field:</b>
				<select
					data-testid="end-field"
					data-bind="options: TimeOffs.DateFields, optionsText: 'DisplayName', value: TimeOffs.EndField, valueAllowUnset: false, enable:TimeOffs.HasDateFields"
					style="width:95%"
				></select>
			</td>
		</tr>
	</table>
	<br />
	<label><input type="checkbox" data-bind="checked: Holidays.Enabled" />Enable Holidays</label>
	<table style="padding-left:15px">
		<tr>
			<td>
				<b style="color:red">*</b> <b>Holidays Entity:</b>
				<select
					data-testid="holidays-entity"
					data-bind="options: Holidays.EntityList, optionsText: 'DisplayName', value: Holidays.SelectedEntity, valueAllowUnset: false, enable:Holidays.Enabled"
					style="width:95%"
				></select>
			</td>
			<td style="width:80px"></td>
			<td style="width:80px"></td>
			<td style="width:80px"></td>
		</tr>
		<tr>
			<td>
				<b style="color:red">*</b> <b>Month Field:</b>
				<select
					data-testid="month-field"
					data-bind="options: Holidays.NumericFields, optionsText: 'DisplayName', value: Holidays.MonthField, valueAllowUnset: false, enable:Holidays.HasNumericFields"
					style="width:95%"
				></select>
			</td>
			<td colspan="3">
				<b style="color:red">*</b> <b>Day Field:</b>
				<select
					data-testid="day-field"
					data-bind="options: Holidays.NumericFields, optionsText: 'DisplayName', value: Holidays.DayField, valueAllowUnset: false, enable: Holidays.HasNumericFields"
					style="width:95%"
				></select>
			</td>
		</tr>
	</table>
</script>

<script id="tmplSchedulerPageResources" type="text/html">
	<div style="padding-top: 5px; padding-bottom: 5px; border-bottom: 1px solid #DDDDDD; font-weight: bold">DATA MAPPING</div>
	<div style="display: flex; flex-direction: column; margin-top: 10px">
		<div style="display: flex; margin-top: 4px">
			<div style="flex: 1 1 100px; display: flex; align-items: center">Territory</div>
			<div style="flex: 6 6 320px; display: flex">
				<select
					data-testid="territory"
					data-bind="options: Territory.Types, optionsText: 'DisplayName', value: Territory.Type, valueAllowUnset: false"
					style="flex-grow: 1"
				></select>
			</div>
			<div style="flex: 1 1 100px; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px">Target</div>
			<div style="flex: 3 3 160px; display: flex">
				<select
					data-testid="territory-target"
					data-bind="options: Territory.AvailableTargets, optionsText: 'DisplayName', value: Territory.SelectedTarget, valueAllowUnset: false, enable: Territory.HasTargets"
					style="flex-grow: 1"
				></select>
			</div>
		</div>
		<div style="display: flex; margin-top: 4px">
			<div style="flex: 1 1 100px; visibility: hidden"></div>
			<div style="flex: 6 6 320px; display: flex">
				<div style="flex: 1 1 150px; display: flex; align-items: center">Lookup Field to Territory</div>
				<select
					data-testid="territory-lookup"
					data-bind="options: Territory.AvailableFields, optionsText: 'DisplayName', value: Territory.SelectedField, valueAllowUnset: false, enable: Territory.HasFields"
					style="flex: 2 2 150px; align-self: center"
				></select>
			</div>
			<div style="flex: 4 4 260px; visibility: hidden"></div>
		</div>
		<div style="display: flex; margin-top: 4px">
			<div style="flex: 1 1 100px; visibility: hidden"></div>
			<div style="flex: 6 6 320px; display: flex">
				<div style="flex: 1 1 150px; display: flex; align-items: center">Lookup Field to Resource</div>
				<select
					data-testid="resource-lookup"
					data-bind="options: Territory.AvailableSourceFields, optionsText: 'DisplayName', value: Territory.SelectedSourceField, valueAllowUnset: false, enable: Territory.HasSourceFields"
					style="flex: 2 2 150px; align-self: center"
				></select>
			</div>
			<div style="flex: 4 4 260px; visibility: hidden"></div>
		</div>
		<div style="display: flex; margin-top: 4px">
			<div style="flex: 1 1 100px; display: flex; align-items: center">Skill</div>
			<div style="flex: 6 6 320px; display: flex">
				<select
					data-testid="skill"
					data-bind="options: Skill.Types, optionsText: 'DisplayName', value: Skill.Type, valueAllowUnset: false"
					style="flex-grow: 1"
				></select>
			</div>
			<div style="flex: 1 1 100px; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px">Target</div>
			<div style="flex: 3 3 160px; display: flex">
				<select
					data-testid="skill-target"
					data-bind="options: Skill.AvailableTargets, optionsText: 'DisplayName', value: Skill.SelectedTarget, valueAllowUnset: false, enable: Skill.HasTargets"
					style="flex-grow: 1"
				></select>
			</div>
		</div>
		<div style="display: flex; margin-top: 4px">
			<div style="flex: 1 1 100px; visibility: hidden"></div>
			<div style="flex: 6 6 320px; display: flex">
				<div style="flex: 1 1 150px; display: flex; align-items: center">Lookup Field to Skill</div>
				<select
					data-testid="skill-lookup"
					data-bind="options: Skill.AvailableFields, optionsText: 'DisplayName', value: Skill.SelectedField, valueAllowUnset: false, enable: Skill.HasFields"
					style="flex: 2 2 150px; align-self: center"
				></select>
			</div>
			<div style="flex: 4 4 260px; visibility: hidden"></div>
		</div>
		<div style="display: flex; margin-top: 4px">
			<div style="flex: 1 1 100px; visibility: hidden"></div>
			<div style="flex: 6 6 320px; display: flex">
				<div style="flex: 1 1 150px; display: flex; align-items: center">Lookup Field to Resource</div>
				<select
					data-testid="resource-lookup"
					data-bind="options: Skill.AvailableSourceFields, optionsText: 'DisplayName', value: Skill.SelectedSourceField, valueAllowUnset: false, enable: Skill.HasSourceFields"
					style="flex: 2 2 150px; align-self: center"
				></select>
			</div>
			<div style="flex: 4 4 260px; visibility: hidden"></div>
		</div>
		<div data-bind="visible: Territory.HasSourceFields() || Skill.HasSourceFields()">
			<label>
				<input type="checkbox" data-bind="checked: UseAndOperatorForFilters" style="margin: 6px 10px 6px 4px" />Require all skills and territories for
				scheduling and filtering</label
			>
		</div>
	</div>
	<div style="margin-top: 15px; padding-top: 5px; padding-bottom: 5px; border-bottom: 1px solid #DDDDDD; font-weight: bold">LOCATION</div>
	<div style="display: flex; flex-direction: column; margin-top: 10px">
		<div style="display: flex; margin-top: 4px">
			<div style="flex: 1 1 100px; display: flex; align-items: center">Lookup Field</div>
			<div style="flex: 6 6 320px; display: flex">
				<select
					data-testid="location-lookup-field"
					data-bind="options: Location.AvailableFields, optionsText: 'DisplayName', value: Location.SelectedField, valueAllowUnset: false, enable: Location.HasFields"
					style="flex-grow: 1"
				></select>
			</div>
			<div style="flex: 1 1 100px; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px">Target</div>
			<div style="flex: 3 3 160px; display: flex">
				<select
					data-testid="location-target"
					data-bind="options: Location.AvailableTargets, optionsText: 'DisplayName', value: Location.SelectedTarget, valueAllowUnset: false, enable: Location.HasTargets"
					style="flex-grow: 1"
				></select>
			</div>
		</div>
		<div style="display: flex; margin-top: 4px">
			<div style="flex: 1 1 100px; visibility: hidden"></div>
			<div style="flex: 6 6 320px; display: flex">
				<div style="flex: 1 1 80px; display: flex; align-items: center">Latitude</div>
				<select
					data-testid="location-latitude"
					data-bind="options: LocationLookupFieldList, optionsText: 'DisplayName', value: Latitude, valueAllowUnset: true, enable: LocationLookupHasFields"
					style="flex: 4 4 220px"
				></select>
			</div>
			<div style="flex: 4 4 260px; visibility: hidden"></div>
		</div>
		<div style="display: flex; margin-top: 4px">
			<div style="flex: 1 1 100px; visibility: hidden"></div>
			<div style="flex: 6 6 320px; display: flex">
				<div style="flex: 1 1 80px; display: flex; align-items: center">Longitude</div>
				<select
					data-testid="location-longitude"
					data-bind="options: LocationLookupFieldList, optionsText: 'DisplayName', value: Longitude, valueAllowUnset: true, enable: LocationLookupHasFields"
					style="flex: 4 4 220px"
				></select>
			</div>
			<div style="flex: 4 4 260px; visibility: hidden"></div>
		</div>
	</div>
	<div style="margin-top: 15px; padding-top: 5px; padding-bottom: 5px; border-bottom: 1px solid #DDDDDD; font-weight: bold">FILTERING & SORTING</div>
	<div style="display: flex; flex-direction: column; margin-top: 5px">
		<div style="display: flex; flex-direction: column; margin-top: 4px">
			<div>
				<label style="font-weight: bold">
					<input type="checkbox" data-bind="checked: CustomFilters.enabled" style="margin: 6px 10px 6px 4px" />Enable filtering & sorting of Resources
					when a Source is selected</label
				>
			</div>
			<div style="display: flex">
				<input type="checkbox" style="margin: 6px 10px 6px 4px; visibility: hidden" />
				<label>
					<input
						type="checkbox"
						data-bind="checked: CustomFilters.useLiveLocations, enable: CustomFilters.enabled"
						style="margin: 6px 10px 6px 4px"
					/>Use live location data</label
				>
				<div style="display: flex; align-items: center; justify-content: flex-end; padding-left: 70px; padding-right: 12px">Resource target user</div>
				<select
					data-testid="resource-target-user"
					data-bind="options: CustomFilters.targetUserFields, optionsText: 'DisplayName', value: CustomFilters.targetUserField, enable: CustomFilters.enabled() && CustomFilters.targetUserFieldEnabled()"
					style="flex: 0 0 220px"
				></select>
			</div>
		</div>
		<div style="display: flex; margin-top: 20px">
			<div style="display: flex; flex-direction: column">
				<div style="display: flex">
					<div style="width: 250px; display: flex; align-items: center; font-weight: bold">Filter conditions</div>
					<div style="width: 200px; display: flex; align-items: center">Default state</div>
				</div>
				<div style="display: flex; margin-top: 4px">
					<div style="width: 250px">
						<label>
							<input
								type="checkbox"
								data-bind="checked: CustomFilters.filterBySkills.enabled, enable: CustomFilters.enabled"
								style="margin: 6px 10px 6px 4px"
							/>Skills</label
						>
					</div>
					<div style="display: flex; align-items: center">
						<select
							data-bind="options: CustomFilters.filterBySkills.appliedList, value: CustomFilters.filterBySkills.selectedApplied, enable: CustomFilters.enabled() && CustomFilters.filterBySkills.enabled()"
						></select>
					</div>
				</div>
				<div style="display: flex; margin-top: 4px">
					<div style="width: 250px">
						<label>
							<input
								type="checkbox"
								data-bind="checked: CustomFilters.filterByTerritories.enabled, enable: CustomFilters.enabled"
								style="margin: 6px 10px 6px 4px"
							/>Territories</label
						>
					</div>
					<div style="display: flex; align-items: center">
						<select
							data-bind="options: CustomFilters.filterByTerritories.appliedList, value: CustomFilters.filterByTerritories.selectedApplied, enable: CustomFilters.enabled() && CustomFilters.filterByTerritories.enabled()"
						></select>
					</div>
				</div>
				<div style="display: flex; flex-direction: column; margin-top: 4px">
					<div style="display: flex">
						<div style="width: 250px">
							<label>
								<input
									type="checkbox"
									data-bind="checked: CustomFilters.filterByMaxDistance.enabled, enable: CustomFilters.enabled"
									style="margin: 6px 10px 6px 4px"
								/>Max. distance of Resource from Source</label
							>
						</div>
						<div style="display: flex; align-items: center">
							<select
								data-bind="options: CustomFilters.filterByMaxDistance.appliedList, value: CustomFilters.filterByMaxDistance.selectedApplied, enable: CustomFilters.enabled() && CustomFilters.filterByMaxDistance.enabled()"
							></select>
						</div>
					</div>
					<div>
						<input type="checkbox" style="margin: 6px 10px 6px 4px; visibility: hidden" />Default distance:<input
							type="number"
							min="0"
							data-bind="value: CustomFilters.filterByMaxDistance.maxDistanceValue, enable: CustomFilters.enabled() && CustomFilters.filterByMaxDistance.enabled()"
							style="width: 50px; margin-left: 10px; text-align: center"
						/>
						<select
							data-bind="options: CustomFilters.unitsList, value: CustomFilters.selectedUnit, enable: CustomFilters.enabled() && CustomFilters.filterByMaxDistance.enabled()"
						></select>
					</div>
				</div>
			</div>
			<div style="display: flex; flex-direction: column">
				<div style="display: flex; align-items: center; font-weight: bold">Sorting criteria</div>
				<div style="margin-top: 4px">
					<label>
						<input
							type="checkbox"
							data-bind="checked: CustomSorts.sortBySoonestAvailability, enable: CustomFilters.enabled"
							style="margin: 6px 10px 6px 4px"
						/>Soonest availability</label
					>
				</div>
				<div style="margin-top: 4px">
					<label>
						<input
							type="checkbox"
							data-bind="checked: CustomSorts.sortByTravelDistance, enable: CustomFilters.enabled"
							style="margin: 6px 10px 6px 4px"
						/>Travel distance</label
					>
				</div>
				<div style="margin-top: 4px">
					<label>
						<input
							type="checkbox"
							data-bind="checked: CustomSorts.sortByWorkload, enable: CustomFilters.enabled"
							style="margin: 6px 10px 6px 4px"
						/>Workload</label
					>
				</div>
			</div>
		</div>
	</div>
	<div style="margin-top: 15px; padding-top: 5px; padding-bottom: 5px;"><b style="color:red">*</b><b>ENTITY VIEWS</b></div>
	<div style="flex:0 0 auto; margin-top: 0.3em; margin-bottom: 0.3em" data-bind="visible: InitialEntityVisible">
		<span style="font-weight: bold">Initial Entity:</span>
		<select
			style="width: 200px"
			data-bind="options: InitialEntities, optionsText: 'Value', optionsValue: 'Key', value: InitialEntity, valueAllowUnset: false"
		></select>
		<br />
	</div>
	<div data-bind="grid: Grid" data-definitiononly="false" data-twowaybinding="true" style="flex: 1 1 auto; min-height: 200px">
		<div
			data-columnname=" "
			data-columntype="checkbox"
			data-horalign="center"
			data-flex="0 0 20px"
			data-binding="IsEnabled"
			data-sortable="false"
		></div>
		<div data-columnname="Name" data-flex="1 0 150px" data-binding="Name" data-sortable="true" data-horalign="left" data-sort="ascending"></div>
		<div data-columnname="Type" data-flex="0 0 150px" data-binding="Type" data-sortable="true" data-horalign="left"></div>
		<div
			data-columnname="Initial View"
			data-columntype="checkbox"
			data-horalign="center"
			data-flex="0 0 100px"
			data-binding="IsDefault"
			data-sortable="false"
		></div>
	</div>
</script>

<script id="tmplSchedulerPageSource" type="text/html">
	<div style="padding-top: 5px; padding-bottom: 5px; font-weight: bold">Data mapping:</div>
	<div style="display: flex; flex-direction: column">
		<div style="display: flex; margin-top: 4px">
			<div style="flex: 3 3 150px; display: flex; align-items: center">Activity duration (minutes)</div>
			<div style="flex: 4 4 270px; display: flex">
				<select
					data-testid="activity-duration"
					data-bind="options: FieldsWithDefault, optionsText: 'DisplayName', value: VisitDurationInMinutesField, valueAllowUnset: false, enable: EnableFields"
					style="flex-grow: 1"
				></select>
			</div>
			<div style="flex: 1 1 100px; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px">Default</div>
			<div style="flex: 3 3 160px; display: flex">
				<input
					data-testid="activity-duration-default"
					type="number"
					min="5"
					max="480"
					data-bind="value: VisitDurationInMinutes.Value, enable: EnableDurationDefaultValue"
					style="flex-grow: 1; text-align: center"
				/>
			</div>
		</div>
		<div style="display: flex; margin-top: 4px">
			<div style="flex: 1 1 100px; display: flex; align-items: center">Territory</div>
			<div style="flex: 6 6 320px; display: flex">
				<select
					data-testid="territory"
					data-bind="options: Territory.Types, optionsText: 'DisplayName', value: Territory.Type, valueAllowUnset: false, enable: EnableFields"
					style="flex-grow: 1"
				></select>
			</div>
			<div style="flex: 1 1 100px; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px">Target</div>
			<div style="flex: 3 3 160px; display: flex">
				<select
					data-testid="territory-target"
					data-bind="options: Territory.AvailableTargets, optionsText: 'DisplayName', value: Territory.SelectedTarget, valueAllowUnset: false, enable: Territory.HasTargets"
					style="flex-grow: 1"
				></select>
			</div>
		</div>
		<div style="display: flex; margin-top: 4px">
			<div style="flex: 1 1 100px; visibility: hidden"></div>
			<div style="flex: 6 6 320px; display: flex">
				<div style="flex: 1 1 150px; display: flex; align-items: center">Lookup Field to Territory</div>
				<select
					data-testid="territory-lookup"
					data-bind="options: Territory.AvailableFields, optionsText: 'DisplayName', value: Territory.SelectedField, valueAllowUnset: false, enable: Territory.HasFields"
					style="flex: 2 2 150px; align-self: center"
				></select>
			</div>
			<div style="flex: 4 4 260px; visibility: hidden"></div>
		</div>
		<div style="display: flex; margin-top: 4px">
			<div style="flex: 1 1 100px; visibility: hidden"></div>
			<div style="flex: 6 6 320px; display: flex">
				<div style="flex: 1 1 150px; display: flex; align-items: center">Lookup Field to Source</div>
				<select
					data-testid="territory-source"
					data-bind="options: Territory.AvailableSourceFields, optionsText: 'DisplayName', value: Territory.SelectedSourceField, valueAllowUnset: false, enable: Territory.HasSourceFields"
					style="flex: 2 2 150px; align-self: center"
				></select>
			</div>
			<div style="flex: 4 4 260px; visibility: hidden"></div>
		</div>
		<div style="display: flex; margin-top: 4px">
			<div style="flex: 1 1 100px; display: flex; align-items: center">Skill</div>
			<div style="flex: 6 6 320px; display: flex">
				<select
					data-testid="skill"
					data-bind="options: Skill.Types, optionsText: 'DisplayName', value: Skill.Type, valueAllowUnset: false, enable: EnableFields"
					style="flex-grow: 1"
				></select>
			</div>
			<div style="flex: 1 1 100px; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px">Target</div>
			<div style="flex: 3 3 160px; display: flex">
				<select
					data-testid="skill-target"
					data-bind="options: Skill.AvailableTargets, optionsText: 'DisplayName', value: Skill.SelectedTarget, valueAllowUnset: false, enable: Skill.HasTargets"
					style="flex-grow: 1"
				></select>
			</div>
		</div>
		<div style="display: flex; margin-top: 4px">
			<div style="flex: 1 1 100px; visibility: hidden"></div>
			<div style="flex: 6 6 320px; display: flex">
				<div style="flex: 1 1 150px; display: flex; align-items: center">Lookup Field to Skill</div>
				<select
					data-testid="skill-lookup"
					data-bind="options: Skill.AvailableFields, optionsText: 'DisplayName', value: Skill.SelectedField, valueAllowUnset: false, enable: Skill.HasFields"
					style="flex: 2 2 150px; align-self: center"
				></select>
			</div>
			<div style="flex: 4 4 260px; visibility: hidden"></div>
		</div>
		<div style="display: flex; margin-top: 4px">
			<div style="flex: 1 1 100px; visibility: hidden"></div>
			<div style="flex: 6 6 320px; display: flex">
				<div style="flex: 1 1 150px; display: flex; align-items: center">Lookup Field to Source</div>
				<select
					data-testid="skill-source"
					data-bind="options: Skill.AvailableSourceFields, optionsText: 'DisplayName', value: Skill.SelectedSourceField, valueAllowUnset: false, enable: Skill.HasSourceFields"
					style="flex: 2 2 150px; align-self: center"
				></select>
			</div>
			<div style="flex: 4 4 260px; visibility: hidden"></div>
		</div>
	</div>
	<table style="margin-top: 10px">
		<tr>
			<td colspan="4" style="font-weight: bold">Preferred date-time window:</td>
		</tr>
		<tr>
			<td colspan="4">
				<label>
					<input type="checkbox" data-bind="checked: PreferredWindowMandatory, enable: EnableFields" />Allow scheduling only within a preferred date
					and time window</label
				>
			</td>
		</tr>
		<tr>
			<td style="width: 23%">Preferred Window Start Field</td>
			<td style="width: 40%">
				<select
					data-testid="preferred-window-start"
					data-bind="options: DateTimeFields, optionsText: 'DisplayName', value: PreferredWindowStartField, valueAllowUnset: false, enable: EnableFields"
					style="width: 95%"
				></select>
			</td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td style="width: 23%">Preferred Window End Field</td>
			<td style="width: 40%">
				<select
					data-testid="preferred-window-end"
					data-bind="options: DateTimeFields, optionsText: 'DisplayName', value: PreferredWindowEndField, valueAllowUnset: false, enable: EnableFields"
					style="width: 95%"
				></select>
			</td>
			<td></td>
			<td></td>
		</tr>
	</table>
	<table style="margin-top: 10px">
		<tr>
			<td colspan="4" style="font-weight: bold">Frequent visit:</td>
		</tr>
		<tr>
			<td colspan="4">
				<label><input type="checkbox" data-bind="checked: FrequentVisitsEnabled, enable: EnableFields" />Enable Frequent Visit</label>
			</td>
		</tr>
		<tr>
			<td style="width:23%">Visit frequency</td>
			<td style="width:40%">
				<select
					data-testid="visit-frequency"
					data-bind="options:FieldsWithDefault, optionsText: 'DisplayName', value: NumberOfVisitsField, valueAllowUnset: false, enable:EnableFrequencyPanel"
					style="width:90%"
				></select>
			</td>
			<td style="width:20%">
				<input
					data-testid="visit-frequency-value"
					type="number"
					min="0"
					max="30"
					data-bind="value: NumberOfVisits.Value, enable: EnableFrequencyPanel"
					style="width: 65%; text-align: center"
				/>visit(s)
			</td>
			<td style="width:17%">
				<select
					data-testid="visit-frequency-range"
					data-bind="options:VisitsRange, optionsValue: 'Value', optionsText:'Label', value:SelectedVisitsRange, enable:EnableFrequencyPanel"
				></select>
			</td>
		</tr>
		<tr>
			<td style="width:23%">Min. days between visits</td>
			<td style="width:40%">
				<select
					data-testid="min-days-between-visits"
					data-bind="options:FieldsWithDefault, optionsText: 'DisplayName', value: MinDaysBetweenVisitsField, valueAllowUnset: false, enable:EnableFrequencyPanel"
					style="width:90%"
				></select>
			</td>
			<td style="width:20%">
				<input
					data-testid="min-days-between-visits-value"
					type="number"
					min="1"
					max="30"
					data-bind="value: MinDaysBetweenVisits.Value, enable: EnableFrequencyPanel"
					style="width: 65%; text-align: center"
				/>day(s)
			</td>
			<td style="width:17%"></td>
		</tr>
	</table>
</script>

<script id="tmplSchedulerPageLocation" type="text/html">
	<span style="margin-top: 5px; font-weight: bold">Source Lookup Field:</span>
	<table>
		<tr>
			<td>
				Location Lookup Field:<select
					data-testid="location-lookup-field"
					data-bind="options: Location.AvailableFields, optionsText: 'DisplayName', value: Location.SelectedField, valueAllowUnset: false, enable:Location.HasFields"
					style="width:95%"
				></select>
			</td>
			<td>
				Target:<select
					data-testid="location-target"
					data-bind="options: Location.AvailableTargets, optionsText: 'DisplayName', value: Location.SelectedTarget, valueAllowUnset: false, enable:Location.HasTargets"
					style="width:95%"
				></select>
			</td>
			<td></td>
		</tr>
	</table>
	<br />
	<span style="font-weight: bold">Location Fields:</span>
	<table>
		<tr>
			<td>
				Latitude:<select
					data-testid="location-latitude"
					data-bind="options: FieldList, optionsText: 'DisplayName', value: Latitude, valueAllowUnset: true, enable:HasFields"
					style="width:95%"
				></select>
			</td>
			<td>
				Longitude:<select
					data-testid="location-longitude"
					data-bind="options: FieldList, optionsText: 'DisplayName', value: Longitude, valueAllowUnset: true, enable:HasFields"
					style="width:95%"
				></select>
			</td>
			<td></td>
		</tr>
		<tr>
			<td>
				Street 1:<select
					data-testid="location-street1"
					data-bind="options: FieldList, optionsText: 'DisplayName', value: Street1, valueAllowUnset: true, enable:HasFields"
					style="width:95%"
				></select>
			</td>
			<td>
				Street 2:<select
					data-testid="location-street2"
					data-bind="options: FieldList, optionsText: 'DisplayName', value: Street2, valueAllowUnset: true, enable:HasFields"
					style="width:95%"
				></select>
			</td>
			<td>
				City:<select
					data-testid="location-city"
					data-bind="options: FieldList, optionsText: 'DisplayName', value: City, valueAllowUnset: true, enable:HasFields"
					style="width:95%"
				></select>
			</td>
		</tr>
		<tr>
			<td>
				Postal Code:<select
					data-testid="location-postalcode"
					data-bind="options: FieldList, optionsText: 'DisplayName', value: Postalcode, valueAllowUnset: true, enable:HasFields"
					style="width:95%"
				></select>
			</td>
			<td>
				Country:<select
					data-testid="location-country"
					data-bind="options: FieldList, optionsText: 'DisplayName', value: Country, valueAllowUnset: true, enable:HasFields"
					style="width:95%"
				></select>
			</td>
			<td>
				State or Province:<select
					data-testid="location-state"
					data-bind="options: FieldList, optionsText: 'DisplayName', value: StateOrProvince, valueAllowUnset: true, enable:HasFields"
					style="width:95%"
				></select>
			</td>
		</tr>
	</table>
</script>

<script id="tmplSchedulerPageProperties" type="text/html">
	<span style="margin-top: 5px; font-weight: bold">Auto Refresh</span>
	<label><input type="checkbox" data-bind="checked: AutoRefresh.Enabled" />Auto Refresh the list in online mode each X-seconds</label>
	<label data-bind="visible: AutoRefresh.Enabled"
		>Interval: <input data-testid="interval" type="number" step="30" min="30" data-bind="value: AutoRefresh.Interval"
	/></label>
	<span style="margin-top: 10px; font-weight: bold">Activity Tooltip</span>
	<label><input type="checkbox" data-bind="checked: TaskTooltipNameReadonly" />Readonly - Name</label>
	<label><input type="checkbox" data-bind="checked: TaskTooltipStatusReasonReadonly" />Readonly - Status Reason</label>
</script>

<!-- END: tmplEditSchedulerDialog-->

<!-- BEGIN: tmplSelectViewsControl-->
<script id="tmplSelectViewsControl" type="text/html">
	<div style="flex:0 0 auto; margin-top:0.3em; margin-bottom:0.3em" data-bind="visible: InitialEntityVisible">
		<span style="font-weight:bold">Initial Entity:</span>
		<select
			data-testid="initial-entity"
			style="width: 200px"
			data-bind="options: InitialEntities, optionsText: 'Value', optionsValue: 'Key', value: InitialEntity, valueAllowUnset: false"
		></select>
		<br />
	</div>
	<div data-bind="grid: Grid" data-definitiononly="false" data-twowaybinding="true" style="flex:1 1 auto">
		<div
			data-columnname=" "
			data-columntype="checkbox"
			data-horalign="center"
			data-flex="0 0 20px"
			data-binding="IsEnabled"
			data-sortable="false"
		></div>
		<div data-columnname="Name" data-flex="1 0 150px" data-binding="Name" data-sortable="true" data-horalign="left" data-sort="ascending"></div>
		<div data-columnname="Type" data-flex="0 0 150px" data-binding="Type" data-sortable="true" data-horalign="left"></div>
		<div
			data-columnname="Initial View"
			data-columntype="checkbox"
			data-horalign="center"
			data-flex="0 0 100px"
			data-binding="IsDefault"
			data-sortable="false"
		></div>
	</div>
</script>
<!-- END: tmplSelectViewsControl-->
<!-- BEGIN: tmplEditTourplanDialog-->
<script id="tmplEditTourplanDialog" type="text/html">
	<div style="flex: 0 0 auto; display:flex">
		<!-- ko foreach: Tabbar -->
		<div class="tabControlItem" data-bind="css: { tabControlItemSelected: Selected() }, click: Clicked, visible: Visible">
			<span style="padding:0.3em" data-bind="text: Name"></span>
		</div>
		<!-- /ko -->
	</div>
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===0, template: { name: 'tmplSelectViewsControl', data: ViewsControl}"
	></div>
	<div
		style="flex:1 1 auto; flex-direction:column"
		class="flexDiv"
		data-bind="visible: SelectedTabIndex()===1, template: { name: 'tmplCalendarSetupControl', data: Calendar}"
	></div>
	<div style="flex:1 1 auto; flex-direction:column" class="flexDiv" data-bind="visible: SelectedTabIndex()===2">
		<div data-bind="grid: RulesGrid" data-definitiononly="false" data-twowaybinding="true" style="white-space:nowrap; height: 100%; flex: 1 1 auto">
			<div data-columnname="EntityName" data-flex="1 1 200px" data-horalign="left" data-sort="ascending"></div>
		</div>
	</div>
</script>
<!-- END: tmplEditTourplanDialog-->
<!-- BEGIN: tmplSchedulerPageInspection-->
<script id="tmplSchedulerPageInspection" type="text/html">
	<label><input type="checkbox" data-bind="checked: Enabled" />Enable Inspection Module</label>
	<table style="padding-left:15px" data-bind="visible: Visible">
		<tr>
			<td>
				<b>Template Entity:</b>
				<select
					data-bind="options: EntityList, optionsText: 'DisplayName', value: Template.SelectedEntity, valueAllowUnset: false, enable:false"
					,
					style="width:95%"
				></select>
			</td>
			<td>
				<b>Name Field:</b>
				<select
					data-bind="options: Template.Fields, optionsText: 'DisplayName', value: Template.Field, valueAllowUnset: false, enable:false"
					style="width:95%"
				></select>
			</td>
		</tr>
		<tr>
			<td></td>
			<td>
				<b>StatusReason Field:</b>
				<select
					data-bind="options: Template.Fields, optionsText: 'DisplayName', value: Template.StatusReasonField, valueAllowUnset: false, enable:false"
					style="width:95%"
				></select>
			</td>
		</tr>
		<tr>
			<td></td>
			<td>
				<b>IsTemplate Field:</b>
				<select
					data-bind="options: Template.Fields, optionsText: 'DisplayName', value: Template.IsTemplateField, valueAllowUnset: false, enable:false"
					style="width:95%"
				></select>
			</td>
		</tr>
		<tr>
			<td></td>
		</tr>
		<tr>
			<td>
				<b>Activity Template Lookup:</b>
				<select
					data-bind="options: EntityList, optionsText: 'DisplayName', value: ActivitiesTemplates.SelectedEntity, valueAllowUnset: false, enable:false"
					style="width:95%"
				></select>
			</td>
			<td>
				<b>Name Field:</b>
				<select
					data-bind="options: ActivitiesTemplates.Fields, optionsText: 'DisplayName', value: ActivitiesTemplates.Field, valueAllowUnset: false, enable:false"
					style="width:95%"
				></select>
			</td>
		</tr>
	</table>
</script>
<!-- END: tmplSchedulerPageInspection-->
<!-- BEGIN: tmplTreeDialog-->
<script id="tmplTreeDialog" type="text/html">
	<div class="dialog-toolbar" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div class="tree" data-bind="with: model">
		<div class="selectable list entities" data-bind="foreach: levels">
			<div
				class="item"
				data-bind="text: displayName, click: () => $parent.setActiveLevel($data), css: { selected: $data === $parent.activeLevel(), invalid: !isValid(), main: mode === 'main' }, style: { paddingLeft: (position() * 10 + 6) + 'px' }"
			></div>
		</div>

		<div class="fields">
			<table data-bind="with: activeLevel">
				<tbody>
					<tr title="Select an entity to include in the tree view.">
						<td>Entity *</td>
						<td>
							<select
								data-testid="tree-entity"
								data-bind="options: entitiesSelectable, optionsText: 'DisplayName', optionsValue: 'LogicalName', value: entity, optionsCaption: '', disable: mode !== 'main'"
							></select>
						</td>
					</tr>
					<tr title="Select one of the configured entity views to be used in the tree view.">
						<td>View *</td>
						<td>
							<select
								data-testid="tree-view"
								data-bind="options: viewsSelectable, optionsText: 'Name', optionsValue: 'Name', value: view, optionsCaption: ''"
							></select>
						</td>
					</tr>
					<tr title="If you want to add a parent entity to the tree, select the relation.">
						<td>Parent Level</td>
						<td>
							<select
								data-testid="tree-parent"
								data-bind="options: parentFieldsSelectable, optionsText: 'DisplayName', optionsValue: 'LogicalName', value: parentField, optionsCaption: '', disable: mode === 'child'"
							></select>
						</td>
					</tr>
					<tr title="If you want to add a child entity to the tree, select the relation.">
						<td>Child Level</td>
						<td>
							<select
								data-testid="tree-child"
								data-bind="options: childFieldsSelectable, optionsText: 'DisplayName', optionsValue: 'Id', value: childField, optionsCaption: '', disable: mode === 'parent'"
							></select>
						</td>
					</tr>
					<tr title="If you want to add the same entity again, select the relation.">
						<td>Recursive Field</td>
						<td>
							<select
								data-testid="tree-recursive"
								data-bind="options: recursiveFieldsSelectable, optionsText: 'DisplayName', optionsValue: 'LogicalName', value: recursiveField, optionsCaption: ''"
							></select>
						</td>
					</tr>
					<tr title="Uncheck this if you want to disallow creating new entities at this level.">
						<td>Allow Create</td>
						<td>
							<input data-testid="tree-allow-create" type="checkbox" data-bind="checked: allowCreate" />
						</td>
					</tr>
					<tr title="Uncheck this if you want to disallow opening entity detail at this level.">
						<td>Allow Open</td>
						<td>
							<input data-testid="tree-allow-open" type="checkbox" data-bind="checked: allowOpen" />
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</script>
<!-- END: tmplTreeDialog-->
<!-- BEGIN: tmplTreeSelectDialog-->
<script id="tmplTreeSelectDialog" type="text/html">
	<!-- ko if: !TreesExist() -->
	<div class="dialogInfoMessage">
		<div class="dialogInfoMessage__icon">
			<i class="woodfordsprite icon-woodford_Info_36"></i>
		</div>
		<div class="dialogInfo__text">
			<h1 class="dialogInfoMessage__title">No tree available</h1>
			<p>You can create and manage a Tree in the Tree editor.</p>
			<p>Remember that you must save your work to switch to the new view.</p>
			<p>Click the "Create new" button to create a new tree</p>
		</div>
	</div>
	<!-- /ko -->
	<!-- ko if: TreesExist() -->
	<div class="project__option">
		<div class="project__option--title">
			<span>Tree:</span>
		</div>
		<select data-bind="options: SelectableTrees, value: SelectedTree, AllowUnset: false"></select>
	</div>
	<!-- /ko -->
</script>
<!-- END: tmplTreeSelectDialog-->
<script id="tmplVoiceCommandEditor" type="text/html">
	<div style="height:100%;overflow:auto">
		<table style="width:auto">
			<tr>
				<th style="border-bottom:1px solid black">Action</th>
				<th style="border-bottom:1px solid black">Description</th>
			</tr>
			<tbody>
				<!-- ko foreach: Fields -->
				<tr>
					<td>
						<input data-bind="value: Value" style="box-sizing:border-box" />
					</td>
					<td data-bind="text: Description" style="padding:10px"></td>
				</tr>
				<!-- /ko -->
			</tbody>
		</table>
	</div>
</script>
<script id="tmplColorPickerDialog" type="text/html">
	<div class="color-picker">
		<!-- ko if: !isEmpty(thingNameToPickColorFor) -->
		<div class="color-for-ui-component">
			<span class="label">Color for:</span>
			<span data-bind="text: thingNameToPickColorFor"></span>
		</div>
		<!-- /ko -->
		<div class="tabbar">
			<!-- ko foreach: tabbar -->
			<div class="tabbar-control-item" data-bind="text: Name, css: { 'tabbar-control-item-selected': Selected() }, click: Clicked"></div>
			<!-- /ko -->
		</div>
		<div class="tab-content" data-bind="visible: selectedTabName() === 'Token'"><!-- ko template: { name: 'tmplTokenPicker' } --><!-- /ko --></div>
		<div class="tab-content" data-bind="visible: selectedTabName() === 'Custom color'">
			<!-- ko template: { name: 'tmplCustomPicker' } --><!-- /ko -->
		</div>
	</div>
</script>

<script id="tmplTokenPicker" type="text/html">
	<div class="search-section">
		<search-bar params="value: searchString, showSearchButton: false, showCancelButton: false, placeholder: ''"></search-bar>
		<div>
			<i
				data-bind="click: () => showAsList(!showAsList()), attr:{ 'class':'woodfordsprite icon-woodford_ThemeEditor_' + (showAsList() ? 'grid' : 'list') }"
			></i>
		</div>
		<!-- <span><i></i></span> -->
	</div>
	<div class="token-group-wrapper">
		<!-- ko foreach: { data: tokenHierachy, as: 'group', noChildContext: true } -->
		<div class="token-group">
			<div data-bind="text: group.name.toUpperCase()"></div>
			<!-- ko if: showAsList() -->
			<div class="token-wrapper">
				<!-- ko foreach: { data: group.tokens, as: 'token', noChildContext: true } -->
				<div class="token-row" data-bind="multiClick: (count) => setSelectedToken(count, token), css: { 'selected': token === selectedToken() }">
					<div class="transparent-background-container token-color">
						<span class="color-container" data-bind="style:{ 'background-color': getCssColor(token.color()) }"></span>
					</div>
					<div class="token-name" data-bind="text: tokenToLabelMap[token.name()]"></div>
					<span
						class="edit"
						data-bind="visible: tokenEditConfiguration?.allowTokenEdit, click: (data, event) => editToken(token, event.target), clickBubble: false, attr: {'data-testid': tokenToLabelMap[token.name()]}"
					>
						<i data-bind="attr:{ 'class':'woodfordsprite icon-woodford_ThemeEditor_tune' }"></i>
					</span>
				</div>
				<!-- /ko -->
			</div>
			<!-- /ko -->

			<!-- ko if: !showAsList() -->
			<div>
				<!-- ko foreach: { data: group.tokens, as: 'token', noChildContext: true } -->
				<div class="transparent-background-container-big token-color-overlay-container">
					<span
						class="color-container"
						data-bind="multiClick: (count) => setSelectedToken(count, token), style:{ 'background-color': getCssColor(token.color()) }"
					></span>
					<span
						data-bind="visible: token === selectedToken(), attr: {class: tickMarkWhite(token) ? 'token-tick-mark-white' : 'token-tick-mark-black'}"
					></span>
				</div>
				<!-- /ko -->
			</div>
			<!-- /ko -->
		</div>
		<!-- /ko -->
	</div>
</script>
<script id="tmplCustomPicker" type="text/html">
	<div id="customColorPicker" style="visibility: hidden;"></div>
</script>
<script id="tmplUnusedFields" type="text/html">
	<div style="padding: 10px 0px 10px 0px;display: flex; justify-content: space-between; align-items: center;">
		<div>
			<div><input type="text" data-bind="value: filterText, valueUpdate: 'afterkeydown'" placeholder="Search..." /></div>
		</div>
	</div>
	   <div data-bind="grid: fieldsGrid" data-definitiononly="false" data-resetcolumns="false" style="height: 100%;">
	       <div data-columnname=" " data-flex="0 0 20px" data-binding="isSelected" data-horalign="left" data-sortable="false">
	           <input type="checkbox" data-bind="checked: data.isSelected"></input>
	       </div>
	       <div data-columnname="Name" data-flex="1 1 100px" data-binding="displayName" data-horalign="left" data-sortable="true" data-sort="desc"></div>
	       <div data-columnname="Logical Name" data-flex="1 1 100px" data-binding="logicalName" data-horalign="left" data-sortable="true"></div>
	   </div>
</script>
<script id="tmplUsedFields" type="text/html">
	<div style="padding: 10px 0px 10px 0px;display: flex; justify-content: space-between; align-items: center;">
		<div>
			<div><input type="text" data-bind="value: filterText, valueUpdate: 'afterkeydown'" placeholder="Search..." /></div>
		</div>
	</div>
	<div data-bind="grid: fieldsGrid" data-definitiononly="false" data-resetcolumns="false" style="height: 100%;">
		<div data-columnname="Name" data-flex="1 1 100px" data-binding="displayName" data-horalign="left" data-sortable="true" data-sort="desc"></div>
		<div data-columnname="Logical Name" data-flex="1 1 100px" data-binding="logicalName" data-horalign="left" data-sortable="true"></div>
		<div data-columnname="References" data-flex="0 0 100px" data-binding="dependenciesCount" data-horalign="center" data-sortable="true"></div>
	</div>
	<div style="margin-top: 5px;margin-bottom: 3px;">References</div>
	<div data-bind="grid: usages" data-definitiononly="false" data-resetcolumns="false" data-multiselect="false" style="height: 100%;">
		<div data-columnname="Component" data-flex="1 1 200px" data-binding="component" data-horalign="left" data-sortable="true">
			<div style="color: #0066cc; font-size: 12px; font-family: Roboto; text-decoration: underline; word-wrap: break-word; padding: 5px;">
				<span data-testid="component" data-bind="text: data.component, attr:{title: data.component}, click: $parent.onOpenComponent"></span>
			</div>
		</div>
		<div data-columnname="Subcomponent" data-flex="1 1 100px" data-binding="subComponentName" data-horalign="left" data-sortable="true"></div>
	</div>
</script>

<script id="tmplPossibleUnusedFields" type="text/html">
	<div style="padding: 10px 0px 10px 0px;display: flex; justify-content: space-between; align-items: center;">
		<div>
			<div><input type="text" data-bind="value: filterText, valueUpdate: 'afterkeydown'" placeholder="Search..." /></div>
		</div>
	</div>
	<div data-bind="grid: fieldsGrid" data-definitiononly="false" data-resetcolumns="false" style="height: 100%;">
		<div data-columnname=" " data-flex="0 0 20px" data-binding="isSelected" data-horalign="left" data-sortable="true">
			<input type="checkbox" data-bind="checked: data.isSelected"></input>
		</div>
		<div data-columnname="Name" data-flex="1 1 100px" data-binding="displayName" data-horalign="left" data-sortable="true" data-sort="desc"></div>
		<div data-columnname="Logical Name" data-flex="1 1 100px" data-binding="logicalName" data-horalign="left" data-sortable="true"></div>
		<div data-columnname="References" data-flex="0 0 100px" data-binding="dependenciesCount" data-horalign="center" data-sortable="true"></div>
		<div data-columnname="Comments" data-flex="1 1 100px" data-binding="commentsText" data-horalign="left" data-sortable="true"></div>
	</div>
	<div style="margin-top: 5px;margin-bottom: 3px;">References</div>
	<div data-bind="grid: usages" data-definitiononly="false" data-resetcolumns="false" data-multiselect="false" style="height: 100%;">
		<div data-columnname="Component" data-flex="1 1 200px" data-binding="component" data-horalign="left" data-sortable="true">
			<div style="color: #0066cc; font-size: 12px; font-family: Roboto; text-decoration: underline; word-wrap: break-word; padding: 5px;">
				<span data-testid="component" data-bind="text: data.component, attr:{title: data.component}, click: $parent.onOpenComponent"></span>
			</div>
		</div>
		<div data-columnname="Subcomponent" data-flex="1 1 100px" data-binding="subComponentName" data-horalign="left" data-sortable="true"></div>
	</div>
</script>
<script id="tmplSearchUsage" type="text/html">
	<div style="padding: 10px 0px 10px 0px;display: flex; justify-content: space-between; align-items: center;">
		<div>
			<div><input type="text" data-bind="value: filterText, valueUpdate: 'afterkeydown'" placeholder="Search..." /></div>
		</div>
	</div>
	<div data-bind="grid: usages" data-definitiononly="false" data-resetcolumns="false" data-multiselect="false" style="height: 100%;">
		<div
			data-columnname="Field Display Name"
			data-flex="1 1 100px"
			data-binding="fieldDisplayName"
			data-horalign="left"
			data-sortable="true"
			data-sort="desc"
		></div>
		<div data-columnname="Field Logical Name" data-flex="1 1 100px" data-binding="fieldName" data-horalign="left" data-sortable="true"></div>
		<div data-columnname="Component" data-flex="1 1 200px" data-binding="component" data-horalign="left" data-sortable="true">
			<div style="color: #0066cc; font-size: 12px; font-family: Roboto; text-decoration: underline; word-wrap: break-word; padding: 5px;">
				<span data-testid="component" data-bind="text: data.component, attr:{title: data.component}, click: $parent.onOpenComponent"></span>
			</div>
		</div>
		<div data-columnname="Subcomponent" data-flex="1 1 100px" data-binding="subComponentName" data-horalign="left" data-sortable="true"></div>
	</div>
</script>
<!--
		tmplAIPromptDialog Editor Template
	-->
<script id="tmplAIPromptDialog" type="text/html">
	<chat-control
		class="nohide"
		params="chat: chat, assistant: assistant, title: 'Use natural language to describe the data you want to sync', subtitle: 'The AI assistant will generate a sync filter based on your input, which you can review and adjust before applying.', promptPlaceholder: 'Enter your sync filter.', waitingPlaceholder: 'Please wait…'"
	></chat-control>
</script>
<script id="tmplDataModelExplorer" type="text/html">
	<div class="dataModelExplorerEditor">
		<div
			data-bind="grid: dataModelItemsGrid"
			data-definitiononly="false"
			data-twowaybinding="true"
			data-resetcolumns="false"
			class="dataModelItemsGrid"
		></div>
		<div data-bind="template: { name: 'tmplDataModelExplorerFilterPanel', data: filterPanel }"></div>
	</div>
</script>

<script id="tmplDataModelExplorerFilterPanel" type="text/html">
	<div data-bind="visible: isPanelVisible" class="filter">
		<div class="filterSection">
			<div class="filterSectionHeader" data-bind="click: toggleParentSection">
				<b>Parent</b>
				<i data-bind="attr: { class: 'woodfordsprite icon-woodford_' + (isParentSectionCollapsed() ? 'Collapsed_32' : 'Expanded_32') }"></i>
			</div>
			<div data-bind="visible: !isParentSectionCollapsed(), foreach: filterItems.parentItems">
				<div class="filterItem">
					<input type="checkbox" data-bind="attr: { id: 'p' + id }, checked: isChecked, event: {change: onFilterItemChanged}" />
					<label data-bind="attr: { for: 'p' + id }, text: title" class="filterLabel"></label>
				</div>
			</div>
		</div>
		<div class="filterSection">
			<div class="filterSectionHeader" data-bind="click: toggleSyncSection">
				<b>Sync</b>
				<i data-bind="attr: { class: 'woodfordsprite icon-woodford_' + (isSyncSectionCollapsed() ? 'Collapsed_32' : 'Expanded_32') }"></i>
			</div>
			<div data-bind="visible: !isSyncSectionCollapsed(), foreach: filterItems.syncItems">
				<div class="filterSectionHeader filterItem">
					<div>
						<input type="checkbox" data-bind="attr: { id: 's' + id },checked: isChecked, event: {change: onFilterItemChanged}" />
						<label data-bind="attr: { for: 's' + id }, text: title" class="filterLabel"></label>
					</div>
					<div class="unhighlightedItem">
						<div class="unhighlightedText" data-bind="text: text"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="filterSection">
			<div class="filterSectionHeader" data-bind="click: toggleSyncAdvancedSection">
				<b>Sync - Advanced</b>
				<i data-bind="attr: { class: 'woodfordsprite icon-woodford_' + (isSyncAdvancedSectionCollapsed() ? 'Collapsed_32' : 'Expanded_32') }"></i>
			</div>
			<div data-bind="visible: !isSyncAdvancedSectionCollapsed(), foreach: filterItems.syncAdvancedItems">
				<div class="filterSectionHeader filterItem">
					<div>
						<input type="checkbox" data-bind="attr: { id: 'sa' + id },checked: isChecked, event: {change: onFilterItemChanged}" />
						<label data-bind="attr: { for: 'sa' + id }, text: title" class="filterLabel"></label>
					</div>
					<div class="unhighlightedItem">
						<div class="unhighlightedText" data-bind="text: text"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="filterSection">
			<div class="filterSectionHeader" data-bind="click: toggleConflictsSection">
				<b>Conflict Strategy</b>
				<i data-bind="attr: { class: 'woodfordsprite icon-woodford_' + (isConflictsSectionCollapsed() ? 'Collapsed_32' : 'Expanded_32') }"></i>
			</div>
			<div data-bind="visible: !isConflictsSectionCollapsed(), foreach: filterItems.conflictStrategyItems">
				<div class="filterItem">
					<input type="checkbox" data-bind="attr: { id: 'c' + id },checked: isChecked, event: {change: onFilterItemChanged}" />
					<label data-bind="attr: { for: 'c' + id }, text: title" class="filterLabel"></label>
				</div>
			</div>
		</div>
		<div class="filterSection">
			<div class="filterSectionHeader" data-bind="click: toggleSyncFilterSection">
				<b>Sync Filter</b>
				<i data-bind="attr: { class: 'woodfordsprite icon-woodford_' + (isSyncFilterSectionCollapsed() ? 'Collapsed_32' : 'Expanded_32') }"></i>
			</div>
			<div data-bind="visible: !isSyncFilterSectionCollapsed(), foreach: filterItems.syncFilterItems">
				<div class="filterItem">
					<input type="checkbox" data-bind="attr: { id: 'sf' + id },checked: isChecked, event: {change: onFilterItemChanged}" />
					<label data-bind="attr: { for: 'sf' + id }, text: title" class="filterLabel"></label>
				</div>
			</div>
		</div>
		<div class="filterSection">
			<div class="filterSectionHeader" data-bind="click: toggleTablePropertiesSection">
				<b>Entity Properties</b>
				<i data-bind="attr: { class: 'woodfordsprite icon-woodford_' + (isTablePropertiesSectionCollapsed() ? 'Collapsed_32' : 'Expanded_32') }"></i>
			</div>
			<div data-bind="visible: !isTablePropertiesSectionCollapsed(), foreach: filterItems.tablePropertiesItems">
				<div class="filterSectionHeader filterItem">
					<div>
						<input type="checkbox" data-bind="attr: { id: 'tp' + id },checked: isChecked, event: {change: onFilterItemChanged}" />
						<label data-bind="attr: { for: 'sa' + id }, text: title" class="filterLabel"></label>
					</div>
					<div class="unhighlightedItem" data-bind="visible: visible">
						<div class="unhighlightedText" data-bind="text: text"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</script>
<script id="tmplOpeningHoursDialog" type="text/html">
	<div class="openingHoursDialog">
		<div class="openingHoursDialog-entity">
			<span class="label">Entity name:</span>
			<select
				class="button"
				name="entity"
				data-bind="options: entities, optionsText: 'DisplayName', value: editorItem.entity, valueAllowUnset: false"
			></select>
		</div>
		<span class="header">Default opening hours</span>
		<div class="openingHoursDialog-items">
			<!-- ko foreach: editorItem.editorPeriods -->
			<div class="openingHoursDialog-item" data-bind="css: { hasError: hasError }">
				<span class="error" data-bind="visible: hasError">&#9888;</span>
				<span class="label" data-bind="text: periodLabel"></span>
				<input class="start" type="time" placeholder="HH:MM" data-bind="value: morningOpen, visible: mainVisible" />
				<input type="time" placeholder="HH:MM" data-bind="value: morningClose, visible: breakVisible" />
				<span class="button middle noLabel disabled" data-bind="click: deleteMorning, visible: breakVisible() && mainVisible()">&#10005;</span>
				<input class="start" type="time" placeholder="HH:MM" data-bind="value: afternoonOpen, visible: breakVisible" />
				<input type="time" placeholder="HH:MM" data-bind="value: afternoonClose, visible: mainVisible" />
				<span class="button middle noLabel disabled" data-bind="click: deleteAfternoon, visible: breakVisible() && mainVisible()">&#10005;</span>
				<!-- ko if: !mainVisible() && !breakVisible() -->
				<span class="button border left disabled" data-bind="click: addMorning">&#10011; Add new</span>
				<select
					class="button middle border disabled"
					data-bind="options: duplicateFromPeriods, value: duplicateFrom, optionsText: 'periodLabel', optionsCaption: 'Duplicate from...'"
				></select>
				<!-- /ko -->
				<span class="button middle noLabel disabled" data-bind="click: deleteMain, visible: !breakVisible() && mainVisible()">&#10005;</span>
				<span class="button noLabel disabled border" data-bind="click: addAfternoon, visible: mainVisible() && !breakVisible()">&#10011;</span>
			</div>
			<!-- /ko -->
		</div>
		<span class="header">Custom opening hours</span>
		<div class="openingHoursDialog-customHoursField">
			<span class="label">Field name: </span>
			<select
				class="button"
				name="customHoursField"
				data-bind="options: entityFields, optionsText: 'DisplayName', value: editorItem.customHoursField, valueAllowUnset: true, optionsCaption: '-- Disabled --'"
			></select>
		</div>
	</div>
</script>
<script id="tmplOpeningHoursEditor" type="text/html">
	<div class="openingHoursEditor">
		<div class="openingHoursEditor-items">
			<!-- ko foreach: items -->
			<div class="openingHoursEditor-item" data-bind="click: $parent.editItem.bind($parent, $data)">
				<div class="openingHoursEditor-header">
					<p class="entityName" data-bind="text: entity().DisplayName"></p>
					<div class="button" data-bind="click: $parent.deleteItem.bind($parent, $data), clickBubble: false">
						<span>&#10005;</span>
					</div>
				</div>
				<span class="header">Default opening hours</span>
				<div class="openingHoursEditor-periods">
					<!-- ko foreach: editorPeriods -->
					<div class="openingHoursEditor-period">
						<span class="periodName" data-bind="text: periodLabel"></span>
						<span class="morningOpen" data-bind="text: morningOpen, visible: morningOpen"></span>
						<span class="morningClose" data-bind="text: morningClose, visible: morningClose"></span>
						<span class="afternoonOpen" data-bind="text: afternoonOpen, visible: afternoonOpen"></span>
						<span class="afternoonClose" data-bind="text: afternoonClose, visible: afternoonClose"></span>
					</div>
					<!-- /ko -->
				</div>
				<span class="header">Custom opening hours</span>
				<p class="customHoursField">
					<!-- ko if: customHoursField -->
					<span class="label">Field name: </span>
					<span data-bind="text: customHoursField().DisplayName"></span>
					<!-- /ko -->
					<!-- ko ifnot: customHoursField -->
					<span class="disabled">No field for custom hours defined</span>
					<!-- /ko -->
				</p>
			</div>
			<!-- /ko -->
		</div>
	</div>
</script>
<!--
		BEGIN: Template for QueryBuilder
	-->
<script id="tmplQueryBuilderDialog" type="text/html">
	<div class="qb-wrapper">
		<!-- ko if: _dataFetched() -->
		<header data-bind="visible: canEditViewName()">
			<div class="qb-panel-heading-view-name qb-entity qb-entity-parent">
				<div class="qb-input-text-field">
					<strong class="qb-view-name-label">Title:</strong>
					<input class="qb-view-name-input qb-input-text" type="text" data-bind="textInput: viewName" />
				</div>
			</div>
		</header>
		<div class="qb-filter-wrapper qb-scrollable" data-bind="template: { name: 'tmplQueryBuilderEntity', data: fetch().entity }"></div>
		<footer class="qb-page-footer">
			<div class="qb-page-footer-menu">
				<button
					class="qb-page-footer-menu-button"
					data-bind="
								click: function(){ executeAddAction(); },
								enable: ((!canSelectMultiple() || isGroupingEnabled() || canAddConditionToGroup()) && _selectedItems().length)"
				>
					<svg
						width="17px"
						height="17px"
						viewBox="0 0 17 17"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						xmlns:xlink="http://www.w3.org/1999/xlink"
					>
						<g id="Symbols" stroke="#333" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
							<rect x="0.327365729" y="12.112532" width="2.61892583" height="2.61892583"></rect>
							<rect x="6.21994885" y="6.21994885" width="2.61892583" height="2.61892583"></rect>
							<rect x="0.327365729" y="6.21994885" width="2.61892583" height="2.61892583"></rect>
							<rect x="6.21994885" y="0.327365729" width="2.61892583" height="2.61892583"></rect>
							<rect x="0.327365729" y="0.327365729" width="2.61892583" height="2.61892583"></rect>
							<rect x="12.112532" y="0.327365729" width="2.61892583" height="2.61892583"></rect>
							<g id="Group-2" transform="translate(9.411765, 9.411765)">
								<path d="M0.695652174,3.31457801 L5.93350384,3.31457801"></path>
								<path d="M3.31457801,0.695652174 L3.31457801,5.93350384"></path>
							</g>
						</g>
					</svg>
					<span>Add</span>
				</button>
				<button
					class="qb-page-footer-menu-button"
					data-bind="
								click: function(){ executeDeleteAction() },
								enable: _selectedItems().length"
				>
					<svg width="18" height="18" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<g stroke-width="1" stroke="#333" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
							<polyline points="13.5652174 3.13043478 13.5652174 15.6521739 2.43478261 15.6521739 2.43478261 3.13043478"></polyline>
							<path d="M0.347826087,3.13043478 L15.6521739,3.13043478"></path>
							<path d="M8,7.30434783 L8,11.4782609"></path>
							<path d="M5.2173913,7.30434783 L5.2173913,11.4782609"></path>
							<path d="M10.7826087,7.30434783 L10.7826087,11.4782609"></path>
							<polyline points="5.2173913 3.13043478 5.2173913 0.347826087 10.7826087 0.347826087 10.7826087 3.13043478"></polyline>
						</g>
					</svg>
					<span>Delete</span>
				</button>
			</div>
		</footer>
		<!-- /ko -->
	</div>
</script>

<script id="tmplQueryBuilderEntity" type="text/html">
	<div
		class="qb-entity"
		data-bind="click:
								function(data, event){
									queryBuilder.onCheckBoxClicked([$data].concat($parents), $data, filter(), $data, event);
								},
								css: { 'qb-entity-active': $data.isSelected() }"
	>
		<div class="qb-panel-heading-entity-name">
			<!-- ko if: !$data.to -->
			<strong data-bind="text: queryBuilder.getDisplayName(name)"></strong>
			<!-- /ko -->
			<!-- ko if: $data.to && to() && !queryBuilder.isReverseLink($parents, $data) -->
			<strong data-bind="text: queryBuilder.getDisplayName($parent.name, to(), null, false, name, true)"></strong>
			<!-- /ko -->
			<!-- ko if: $data.from && from() && queryBuilder.isReverseLink($parents, $data) -->
			<strong data-bind="text: queryBuilder.getDisplayName(name, from(), null, true, $parent.name, true)"></strong>
			<!-- /ko -->
		</div>
		<!-- ko if: $data.alias && alias() -->
		<div style="margin-right:auto">
			<strong>Alias:</strong>
			<span data-bind="text: $data.alias"></span>
		</div>
		<!-- /ko -->
		<!-- ko if: $data.to && to() -->
		<div style="margin-right:auto" class="qb-select-wrapper">
			<strong>Type:</strong>
			<select
				class="qb-select"
				data-bind="
						options: ['inner', 'outer'],
						optionsText: function(item){return item;},
						value: $data.linktype()"
			></select>
		</div>
		<!-- /ko -->
		<!-- ko if: !$data.to && $data.order && order() != null && order().length > 0 -->
		<div class="qb-select-wrapper">
			<select
				class="qb-select"
				data-bind="
						options: [true, false],
						optionsText: function(item){return item?'Z-A':'A-Z'},
						value: $data.order()[0].descending()"
			></select>
			<select
				class="qb-select"
				data-bind="
						options: queryBuilder.getAttributes($data, true),
						optionsText: function(item) {return item.DisplayName;},
						optionsValue: function(item) { return item.name; },
						value: $data.order()[0].attribute()"
			></select>
		</div>
		<!-- /ko -->
		<div>
			<button class="qb-checkbox-button">
				<svg
					data-bind="visible: $data.isSelected() && queryBuilder.canSelectMultiple()"
					width="14px"
					height="14px"
					viewBox="0 0 14 14"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink"
				>
					<g transform="translate(0, -1)">
						<circle fill="#FFFFFF" cx="7" cy="7" r="6.5"></circle>
						<path
							d="M13.305,6.31 C13.435,6.83 13.5,7.415 13.5,8 C13.5,11.575 10.575,14.5 7,14.5 C3.425,14.5 0.5,11.575 0.5,8 C0.5,4.425 3.425,1.5 7,1.5 C8.235,1.5 9.405,1.825 10.445,2.475"
							stroke="#3E9ACB"
							fill="transparent"
							stroke-linecap="round"
							stroke-linejoin="round"
						></path>
						<polyline
							id="Path-2"
							stroke="#3E9ACB"
							fill="transparent"
							stroke-width="1.5"
							stroke-linecap="round"
							stroke-linejoin="round"
							transform="translate(8.774422, 5.390767) rotate(-45.000000) translate(-8.774422, -5.390767) "
							points="4.09595864 3.31653827 4.19078127 7.4649967 13.4528847 6.68817469"
						></polyline>
					</g>
				</svg>
				<svg
					data-bind="visible: !$data.isSelected() && queryBuilder.canSelectMultiple()"
					width="14"
					height="14"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink"
				>
					<circle stroke="#3E9ACB" fill="#FFF" stroke-width="1" cx="7" cy="7" r="6.5"></circle>
				</svg>
				<svg
					data-bind="visible: $data.isSelected() && !queryBuilder.canSelectMultiple()"
					width="14"
					height="14"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink"
				>
					<circle stroke="#3E9ACB" fill="#3E9ACB" stroke-width="1" cx="7" cy="7" r="6.5"></circle>
				</svg>
				<svg
					data-bind="visible: !$data.isSelected() && !queryBuilder.canSelectMultiple()"
					width="14"
					height="14"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					xmlns:xlink="http://www.w3.org/1999/xlink"
				>
					<circle stroke="#E1E1E1" fill="#FFF" stroke-width="1" cx="7" cy="7" r="6.5"></circle>
				</svg>
			</button>
		</div>
	</div>
	<div class="qb-filters">
		<div data-bind="template: { name: 'tmplQueryBuilderFilter', foreach: filter }"></div>
	</div>
	<div class="qb-filter-wrapper">
		<div class="qb-linksLabel"></div>
		<!-- ko if: linkEntities && linkEntities() -->
		<div class="qb-linksItems">
			<div data-bind="template: { name: 'tmplQueryBuilderEntity', foreach: linkEntities }"></div>
		</div>
		<!-- /ko -->
	</div>
</script>

<script id="tmplQueryBuilderFilter" type="text/html">
	<!-- ko if: ((conditions() !== null && conditions().length > 0) || filters() !== null) -->
	<div class="qb-filter-template">
		<label
			class="qb-condition-type"
			data-bind="
				   click: function(data, event){
						queryBuilder.onCheckBoxClicked($parents, queryBuilder.getEntityParent($parents), $data, $data, event);
				   },
				   css: { 'qb-condition-type-active': $data.isSelected() }"
		>
			<strong data-bind="text: queryBuilder.getFilterType(type)"></strong>
		</label>
		<div class="qb-conditions">
			<!-- ko foreach: conditions() -->
			<div
				class="qb-condition"
				data-bind="click:
					function(data, event){
						queryBuilder.onCheckBoxClicked($parents, queryBuilder.getEntityParent($parents), queryBuilder.getFilterParent($parents), $data, event);
					},
					css: { 'qb-condition-active': $data.isSelected() }"
			>
				<span
					class="qb-condition-name qb-select"
					data-bind="text: queryBuilder.getFilterDisplayName($parents, attribute(), $data), click: function(){queryBuilder.editCondition($parents, $data)}"
				></span>
				<span
					class="qb-condition-operator qb-select"
					data-bind="text: queryBuilder.getOperatorDisplayName($data), click: function() { queryBuilder.onConditionClick(event, $parents, $data); }"
				></span>
				<div
					class="qb-condition-values qb-select qb-pencil"
					data-bind="visible: isValueEditable(), text: displayValue(), click: function(){ queryBuilder.onConditionValueClick($parents, $data, event) }"
				></div>
				<button class="qb-checkbox-button">
					<svg
						data-bind="visible: $data.isSelected() && queryBuilder.canSelectMultiple()"
						width="14px"
						height="14px"
						viewBox="0 0 14 14"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						xmlns:xlink="http://www.w3.org/1999/xlink"
					>
						<g transform="translate(0, -1)">
							<circle fill="#FFFFFF" cx="7" cy="7" r="6.5"></circle>
							<path
								d="M13.305,6.31 C13.435,6.83 13.5,7.415 13.5,8 C13.5,11.575 10.575,14.5 7,14.5 C3.425,14.5 0.5,11.575 0.5,8 C0.5,4.425 3.425,1.5 7,1.5 C8.235,1.5 9.405,1.825 10.445,2.475"
								stroke="#3E9ACB"
								fill="transparent"
								stroke-linecap="round"
								stroke-linejoin="round"
							></path>
							<polyline
								id="Path-2"
								stroke="#3E9ACB"
								fill="transparent"
								stroke-width="1.5"
								stroke-linecap="round"
								stroke-linejoin="round"
								transform="translate(8.774422, 5.390767) rotate(-45.000000) translate(-8.774422, -5.390767) "
								points="4.09595864 3.31653827 4.19078127 7.4649967 13.4528847 6.68817469"
							></polyline>
						</g>
					</svg>
					<svg
						data-bind="visible: !$data.isSelected() && queryBuilder.canSelectMultiple()"
						width="14"
						height="14"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						xmlns:xlink="http://www.w3.org/1999/xlink"
					>
						<circle stroke="#3E9ACB" fill="#FFF" stroke-width="1" cx="7" cy="7" r="6.5"></circle>
					</svg>
					<svg
						data-bind="visible: $data.isSelected() && !queryBuilder.canSelectMultiple()"
						width="14"
						height="14"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						xmlns:xlink="http://www.w3.org/1999/xlink"
					>
						<circle stroke="#3E9ACB" fill="#3E9ACB" stroke-width="1" cx="7" cy="7" r="6.5"></circle>
					</svg>
					<svg
						data-bind="visible: !$data.isSelected() && !queryBuilder.canSelectMultiple()"
						width="14"
						height="14"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						xmlns:xlink="http://www.w3.org/1999/xlink"
					>
						<circle stroke="#E1E1E1" fill="#FFF" stroke-width="1" cx="7" cy="7" r="6.5"></circle>
					</svg>
				</button>
			</div>
			<!-- /ko -->
			<div data-bind="if: $data.filters" colspan="5">
				<div data-bind="template: { name: 'tmplQueryBuilderFilter', foreach: filters }"></div>
			</div>
		</div>
	</div>
	<!-- /ko -->
</script>
<!--
		tmplManageDateTimeMappingDialog
	-->
<script id="tmplManageDateTimeMappingDialog" type="text/html">
	<div class="project__option">
		<div class="project__option--title"><span>DateTime Type</span></div>
		<select class="mappingHeader" data-bind="value: SelectedDateTimeType, valueAllowUnset: false">
			<option value="0">DateTime</option>
			<option value="1">Date Only</option>
			<option value="2">Time Only</option>
		</select>
	</div>
	<div class="project__option">
		<div class="project__option--title"><span>DateTime Format</span></div>
		<input type="text" data-bind="value: DateTimeFormatInput, enable: IsDateTimeFormatEnabled" />
	</div>
</script>
<!--
		tmplManageLookupMappingDialog
	-->
<script id="tmplManageLookupMappingDialog" type="text/html">
	<div class="project__option">
		<div class="project__option--title"><span>Target External Entity:</span></div>
		<select
			data-bind="options: AvailableTargetExternalEntities, optionsText:'LogicalName', value: SelectedTargetExternalEntity, optionsCaption:'...'"
		></select>
	</div>
	<div class="project__option">
		<div class="project__option--title"><span>Target External Field</span></div>
		<select
			data-bind="options: AvailableTargetExternalFields, optionsText:'LogicalName', value:SelectedTargetExternalField, optionsCaption:'...'"
		></select>
	</div>
	<div class="project__option">
		<div class="project__option--title"><span>Composite Lookup:</span></div>
		<select data-bind="options: AvailableCompositeLookups, value: SelectedCompositeLookup, optionsCaption:'...'"></select>
	</div>
</script>
<!--
		tmplManageValueMappingDialog
	-->
<script id="tmplManageValueMappingDialog" type="text/html">
	<style>
		table {
			border-collapse: collapse;
			margin: 10px;
		}
		th {
			background-color: #bbbbbb;
			border-bottom: 1px solid #888;
		}
		th,
		td {
			border: 1px solid #888;
		}
		select.field {
			padding: 5px;
			text-align: left;
			background-color: transparent;
			border: none;
			width: -webkit-fill-available;
		}
	</style>
	<table>
		<thead>
			<tr>
				<th>External Value</th>
				<th>Local Value</th>
				<th></th>
			</tr>
		</thead>
		<tbody data-bind="foreach: ValueMappingConfigItem().ValueMappings">
			<tr>
				<td data-bind="text: ExternalDisplayName"></td>
				<td data-bind="text: LocalDisplayName"></td>
				<td><button data-bind="click: $parent.RemoveValueMapping.bind($parent, $data)" style="width: 100%;">&#10005;</button></td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<td>
					<input
						type="text"
						data-bind="visible:!ValueMappingConfigItem().HasExternalValuesToSelect(), value: ValueMappingConfigItem().NewExternalValue"
						style="width: 100%;"
					/>
					<select
						data-bind="visible:ValueMappingConfigItem().HasExternalValuesToSelect, options: ValueMappingConfigItem().AvailableExternalValues, optionsText:'SchemaName', value: ValueMappingConfigItem().SelectedExternalValue, optionsCaption:'...'"
						style="width: 100%;"
					></select>
				</td>
				<td>
					<input
						type="text"
						data-bind="visible:!ValueMappingConfigItem().HasLocalValuesToSelect(), value: ValueMappingConfigItem().NewLocalValue"
						style="width: 100%;display: block;"
					/>
					<select
						data-bind="visible:ValueMappingConfigItem().HasLocalValuesToSelect, options: ValueMappingConfigItem().AvailableLocalValues, optionsText:'SchemaName', value: ValueMappingConfigItem().SelectedLocalValue, optionsCaption:'...'"
						style="width: 100%;"
					></select>
				</td>
				<td>
					<button data-bind="click: $parent.AddValueMapping" style="width: 100%;">&#10011; Add</button>
				</td>
			</tr>
		</tfoot>
	</table>
	<div style="display: -webkit-inline-flex; margin: 10px;">
		<div><span style="margin: 5px;">If value mapping is not defined for imported/exported value:</span></div>
		<select data-bind="value: ValueMappingConfigItem().ValueMappingNotFound, valueAllowUnset: false">
			<option value="0">Use Value</option>
			<option value="1">Use Default Value</option>
			<option value="2">Throw Exception</option>
		</select>
	</div>
	<table>
		<thead>
			<tr>
				<th>External Default Value</th>
				<th>Local Default Value</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					<input
						type="text"
						data-bind="visible:!ValueMappingConfigItem().HasExternalValuesToSelect(), value: ValueMappingConfigItem().ExternalDefaultValue"
						style="width: 100%;"
					/>
					<select
						data-bind="visible:ValueMappingConfigItem().HasExternalValuesToSelect(), options: ValueMappingConfigItem().AvailableExternalValues, optionsText:'SchemaName', value: ValueMappingConfigItem().SelectedExternalDefaultValue, optionsCaption:'...'"
						style="width: 100%;"
					></select>
				</td>
				<td>
					<input
						type="text"
						data-bind="visible:!ValueMappingConfigItem().HasLocalValuesToSelect(), value: ValueMappingConfigItem().LocalDefaultValue"
						style="width: 100%;"
					/>
					<select
						data-bind="visible:ValueMappingConfigItem().HasLocalValuesToSelect(), options: ValueMappingConfigItem().AvailableLocalValues, optionsText:'SchemaName', value: ValueMappingConfigItem().SelectedLocalDefaultValue, optionsCaption:'...'"
						style="width: 100%;"
					></select>
				</td>
			</tr>
		</tbody>
	</table>
</script>
<!--
		tmplServerIntegrationEditor
	-->
<script id="tmplServerIntegrationEditor" type="text/html">
	<style>
		select.field {
			padding: 5px;
			text-align: left;
			background-color: transparent;
			border: none;
			width: -webkit-fill-available;
		}
		input.mappingHeader {
			min-width: 200px;
		}
		select.mappingHeader {
			padding: 4px 5px;
			border: 1px solid #ccc;
			border-radius: 5px;
			min-width: 200px;
		}
		span.mappingHeader {
			margin-left: 10px;
			font-weight: bold;
			display: block;
			width: 100px;
			position: relative;
		}
		button.mappingHeader {
			margin: 5px;
		}
	</style>
	<div class="entityEditor__header">
		<div class="entityEditor__row">
			<div><span class="mappingHeader">External Entity:</span></div>
			<input type="text" class="mappingHeader" data-bind="value: SelectedEntityLabel" disabled />
			<div><span class="mappingHeader">Local Entity:</span></div>
			<select
				class="mappingHeader"
				data-bind="enable:IsIntegrationEnabled,
					options: EntityMapping().LocalEntities,
					optionsText:'LogicalName',
					value: EntityMapping().SelectedLocalEntity, 
					optionsCaption: EntityMapping().OptionsCaption,
					event:{change: OnLocalEntityChanged}"
			></select>
			<div><span class="mappingHeader">Sync Direction:</span></div>
			<select
				class="mappingHeader"
				data-bind="enable:IsIntegrationEnabled, value: EntityMapping().SyncDirection, valueAllowUnset: false, event:{change: OnSyncDirectionChanged}"
			>
				<option value="0">Schema Only</option>
				<option value="1">Download Only</option>
				<option value="2">Upload Only</option>
				<option value="3">Bidirectional</option>
			</select>
		</div>
		<div class="entityEditor__row">
			<div><span class="mappingHeader">Primary Key:</span></div>
			<select
				class="mappingHeader"
				data-bind="enable:IsEditAttrEnabled, options: EntityMapping().AvailablePrimaryKeys, value: EntityMapping().SelectedPrimaryKeyDropDown, optionsCaption:'...'"
			></select>
			<button class="mappingHeader" data-bind="click: AddPrimaryKey, enable:IsEditAttrEnabled">&#10011; Add</button>
			<div data-bind="foreach: EntityMapping().PrimaryKeys">
				<input type="text" data-bind="value: $data" disabled />
				<button class="mappingHeader" data-bind="click: $parent.RemovePrimaryKey.bind($parent, $data), enable:$parent.IsEditAttrEnabled">
					&#10005;
				</button>
			</div>
		</div>
		<div class="entityEditor__row">
			<div><span class="mappingHeader">Composite Lookups:</span></div>
			<input type="text" class="mappingHeader" data-bind="value: EntityMapping().CompositeLookupsInput, enable:IsEditAttrEnabled" />
			<button class="mappingHeader" data-bind="click: AddCompositeLookup, enable:IsEditAttrEnabled">&#10011; Add</button>
			<div data-bind="foreach: EntityMapping().CompositeLookups">
				<input type="text" data-bind="value: $data" disabled />
				<button class="mappingHeader" data-bind="click: $parent.RemoveCompositeLookup.bind($parent, $data), enable:$parent.IsEditAttrEnabled">
					&#10005;
				</button>
			</div>
		</div>
		<div class="entityEditor__row">
			<div><span class="mappingHeader">Version Number:</span></div>
			<select
				class="mappingHeader"
				data-bind="enable:IsEditAttrEnabled, options: EntityMapping().AvailableVersionNumberFields, value: EntityMapping().VersionNumberField, optionsCaption:'...', event:{change: OnVersionNumberFieldChanged}"
			></select>
		</div>
	</div>

	<div
		data-bind="grid: AttributesGrid"
		data-definitiononly="false"
		data-twowaybinding="true"
		data-multiselect="false"
		style="white-space:nowrap; height: calc(100% - 50px); width:100%"
	>
		<div data-columnname="&nbsp;" data-horalign="center" data-flex="0 0 20px" data-sortable="true">
			<input
				type="checkbox"
				data-bind="enable:$parent.IsEditAttrEnabled(), checked: data.IsEnabled, event:{change: $parent.OnLocalAttributeChanged}"
			/>
		</div>
		<div data-columnname="External Field" data-flex="1 1 100px" data-horalign="left" data-sortable="true" data-sort="ascending">
			<div style="padding: 5px;">
				<span data-bind="text: $parent.GetFieldLabel(data.ExternalName), style: {'background-color': data.BackgroundColor() }"></span>
			</div>
		</div>
		<div data-columnname="External Type" data-flex="1 1 100px" data-binding="externalCrmTypeLabel" data-horalign="left" data-sortable="true"></div>
		<div data-columnname="Local Field" data-flex="1 1 100px" data-horalign="left" data-sortable="true">
			<select
				class="field"
				data-bind="enable:$parent.IsEditAttrEnabled(), options: data.LocalAttributes, optionsText:'LogicalName', value: data.SelectedLocalAttribute, optionsCaption: '...', event:{change: $parent.OnLocalAttributeChanged}"
			></select>
		</div>
		<div data-columnname="Local Type" data-flex="1 1 100px" data-binding="LocalCrmType" data-horalign="left" data-sortable="true"></div>
		<div data-columnname="Manage" data-flex="1 1 100px" data-horalign="left" data-sortable="true">
			<button data-bind="click: $parent.ManageLookupMapping, visible: data.IsLocalFieldLookup, enable:$parent.IsEditAttrEnabled()">
				Lookup Mapping
			</button>
			<button data-bind="click: $parent.ManageDateTimeMapping, visible: data.IsLocalFieldDateTime, enable:$parent.IsEditAttrEnabled()">
				DateTime Mapping
			</button>
			<button data-bind="click: $parent.ManageValueMapping, visible: data.IsValueMappingEnabled, enable:$parent.IsEditAttrEnabled()">
				Value Mapping
			</button>
		</div>
	</div>
</script>
<script id="tmplAdvancedSyncConfig" type="text/html">
		<div data-bind="with: selectedTab()">
			<!-- Info Banner -->
			<div class="info-banner">
				<div class="info-content">
					<p>Advanced sync setup lets you fine-tune how records are downloaded from the server and uploaded from your device to improve performance.</p>
					<a href="https://docs.resco.net/wiki/Advanced_sync_setup" target="_blank">For more information, see our Wiki Documentation</a>
				</div>
			</div>

			<div class="page-header">
				<div class="header-content" style="max-width: 700px;">
					<h2>Sync Downloader Setups</h2>
					<p>The entity download phase of synchronization is often the longest.
						The default settings are rather conservative to ensure that even low-end devices can sync.
						<a href="https://docs.resco.net/wiki/Advanced_sync_setup#Parameters_that_control_the_download_process" target="_blank">Override the defaults</a> for faster sync; or set up priority treatment of <a href="https://docs.resco.net/wiki/Advanced_sync_setup#Dominant_entity" target="_blank">dominant entities</a>.</p>
				</div>
				<button type="button" class="add-btn" data-bind="click: addSetup">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
					</svg>
					Add Setup
				</button>
			</div>


			<!-- ko foreach: setups -->
			<section>
				<header class="syncConfigHeader">
					<div>
						<button type="button" class="collapse-toggle" data-bind="click: function(){collapsed(!collapsed());}" aria-label="Toggle collapse">
							<span data-bind="text: collapsed() ? '▸' : '▾'"></span>
						</button>
						<h3 data-bind="text: platform() || 'Downloader Setup'"></h3>
					</div>
					<div>
						<button type="button" class="delete-btn" data-bind="click: function(){$parent.deleteSetup($data)}">Delete</button>
					</div>
				</header>

				<div class="syncConfigBody" data-bind="visible: !collapsed()" style="display: flex; gap: 24px;  align-items: stretch;">
					
					<div class="ms-vertikal-15">
						<header class="ms-syncConfigHeader">
							<h3>Global settings</h3>
						</header>
						<div class="sync-options-row">
							<div class="option-group">
								<label>Platform</label>
								<div style="display:flex; align-items:center; gap:0.5rem;">
									<input type="text" data-bind="value: platform()" class="flags-input" readonly placeholder="Platforms…" />
									<button type="button" data-bind="click: openPlatformsPopup">Edit&nbsp;Platforms</button>
								</div>
							</div>
						</div>

						<!-- Popup modal for Platforms -->
						<div class="platformsPopup" data-bind="visible: platformsPopupVisible">
							<div>
								<h3>Select Platforms</h3>
								<div class="flags-list">
									<label><input type="checkbox" data-bind="checked: platformItems['All']" /> All</label><br />
									<label><input type="checkbox" data-bind="checked: platformItems['android']" /> Android</label><br />
									<label><input type="checkbox" data-bind="checked: platformItems['ios']" /> iOS</label><br />
									<label><input type="checkbox" data-bind="checked: platformItems['Desktop']" /> Desktop</label><br />
									<label><input type="checkbox" data-bind="checked: platformItems['WinUI']" /> WinUI</label><br />
									<label><input type="checkbox" data-bind="checked: platformItems['WinRT']" /> WinRT</label><br />
									<label><input type="checkbox" data-bind="checked: platformItems['WinUWP']" /> WinUWP</label><br />
									<label><input type="checkbox" data-bind="checked: platformItems['Mobiles']" /> Mobiles</label><br />
									<label><input type="checkbox" data-bind="checked: platformItems['Windows']" /> Windows</label><br />
								</div>
								<div style="text-align:right; margin-top:1rem;">
									<button type="button" data-bind="click:closePlatformsPopup">Close</button>
								</div>
							</div>
						</div>

						<div class="sync-options-row">
							<div class="option-group">
								<label>Num Download Threads</label>
								<input type="number" data-bind="value: numDownloadThreads" placeholder="Default (3)" />
							</div>

							<div class="option-group">
								<label>Download Cache Size (MB)</label>
								<input type="number" data-bind="value: downloadCacheSize" placeholder="0 (default)" />
							</div>

							<div class="option-group">
								<label>Download Page Size</label>
								<input type="number" data-bind="value: downloadPageSize" placeholder="0 (default)" />
							</div>
						</div>

						<div class="sync-options-list">
							<label class="checkbox-label"><input type="checkbox" data-bind="checked: noIncSyncVersionNumberSorting" /> No Incremental Sync Version Sorting</label>
							<label class="checkbox-label"><input type="checkbox" data-bind="checked: noInterruptedEntitySync" /> No Interrupted Entity Sync</label>
							<label class="checkbox-label"><input type="checkbox" data-bind="checked: onlyHighEndDevices" /> Only High-End Devices</label>
						</div>
					</div>

					<div class="separator-v"></div>

					<!-- Entities -->
					<div class="ms-vertikal-15" style="max-width: 340px;">
						<header class="ms-syncConfigHeader">
							<h3>Entity-Specific Page Size</h3>
							<button type="button" class="secondary-btn" data-bind="click: addEntity">
								<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
								</svg>
								Add Entity
							</button>
						</header>
						<div class="entity-list" data-bind="template: { name: 'tmplDownloaderSetupEntityChips', data: entities }"></div>
					</div>
				</div>


			</section>
			<!-- /ko -->

	<div class="separator"></div>

			<!-- Upload Order -->
			<div class="page-header">
				<div class="header-content" style="max-width: 700px;">
					<h2>Upload Order</h2>
					<p>Resco Mobile CRM automatically optimizes the order of entities before uploading (e.g., upload parent record before child). In some scenarios, you may want to <a href="https://docs.resco.net/wiki/Advanced_sync_setup#Custom_upload_order" target="_blank">manually modify the order</a>.
						Define which entities to upload first or last; set up a sequence of entities, or define order in entity pairs (download A before B).</p>
				</div>
			</div>

			<div class="grid-2x2">
				<!-- First Entities -->
				<section  data-bind="with: uploadOrder">
					<header class="syncConfigHeader">
						<h3>First Entities</h3>
						<button type="button" class="secondary-btn" data-bind="click: addFirstEntity">
							<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
							</svg>
							Add
						</button>
					</header>
					<div class="entity-list" data-bind="template: { name: 'tmplEntityChipsContainer', data: firstEntities }"></div>
				</section>

				<!-- Last Entities -->
				<section  data-bind="with: uploadOrder">
					<header class="syncConfigHeader">
							<h3>Last Entities</h3>
						<button type="button" class="secondary-btn" data-bind="click: addLastEntity">
							<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
							</svg>
							Add
						</button>
					</header>
					<div class="entity-list" data-bind="template: { name: 'tmplEntityChipsContainer', data: lastEntities }"></div>
				</section>

				<!-- Sequence -->
				<section  data-bind="with: uploadOrder">
					<header class="syncConfigHeader">
							<h3>Sequence</h3>
						<button type="button" class="secondary-btn" data-bind="click: addSequenceEntity">
							<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
							</svg>
							Add
						</button>
					</header>
					<div class="entity-list" data-bind="template: { name: 'tmplEntityChipsContainer', data: sequence }"></div>
				</section>

				<!-- Relations -->
				<section  data-bind="with: uploadOrder">
					<header class="syncConfigHeader">
							<h3>Relations</h3>
						<button type="button" class="secondary-btn" data-bind="click: addRelation">
							<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
							</svg>
							Add
						</button>
					</header>
					<div class="entity-list" data-bind="template: { name: 'tmplEntityChipsDoubleContainer', data: relations }"></div>
				</section>
			</div>



		</div>
</script>
<script id="tmplBlobStoreConfig" type="text/html">
	<div data-bind="with: selectedTab()">
		<!-- Info Banner -->
		<div class="info-banner">
			<div class="info-content">
				<p>Document filters control which CRM attachments and cloud documents are downloaded to your device and thus available offline. The rest is downloaded on demand.</p>
				<a href="https://docs.resco.net/wiki/Document_filters" target="_blank">For more information, see our Wiki Documentation</a>
			</div>
		</div>

		<div class="page-header">
			<div class="header-content" style="max-width: 700px;">
				<h2>Cloud Document Filters</h2>
				<p style="margin: 4px 0;">Restrict the document storage globally or define limits per file type.</p>
			</div>
		</div>

		<!-- FILES FILTER -->
		<section data-bind="with: filesFilter">
			<!-- <header class="syncConfigHeader">
				<div>
					<button type="button" class="collapse-toggle" data-bind="click: function(){collapsed(!collapsed());}" aria-label="Toggle collapse">
						<span data-bind="text: collapsed() ? '▸' : '▾'"></span>
					</button>
					<h3>Files Filter</h3>
				</div>
			</header> -->

			<div class="syncConfigBody" data-bind="visible: !collapsed()">
				<div class="flex-row">
					<label>Quota (Bytes)</label>
					<input type="number" data-bind="value: quota" placeholder="-1 = no limit, 0 = disallow" />
					<label>Max File Size (Bytes)</label>
					<input type="number" data-bind="value: maxFileSize" placeholder="-1 = no limit, 0 = disallow" />
				</div>


				<section class="nested-group">
					<header class="syncConfigHeader">
						<h3>File Type Filters</h3>
						<button type="button" class="add-btn" data-bind="click: addFileTypeFilter">
							<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
							</svg>
							Add File Type Filter
						</button>
					</header>
					<div class="entities-list">
						<!-- ko foreach: filters -->
						<div class="flex-row">
							<label>File Suffix</label>
							<input type="text" data-bind="value: fileSuffix" placeholder="e.g., jpg, pdf, *" />
							<label>Max File Size (Bytes)</label>
							<input type="number" data-bind="value: maxFileSize" placeholder="-1 = no limit, 0 = excluded" />
							<button type="button" data-bind="click: function(){$parent.deleteFileTypeFilter($data)}">Delete</button>
						</div>
						<!-- /ko -->
					</div>
				</section>

			</div>
		</section>

		<div class="separator-empty"></div>

		<div class="page-header">
			<div class="header-content" style="max-width: 700px;">
				<h2>CRM Attachment Filters</h2>
			</div>
		</div>


		<!-- ATTACHMENTS FILTER -->
		<section data-bind="with: attachmentsFilter">

			<div class="syncConfigBody" data-bind="visible: !collapsed()">
				<div class="flex-row">
					<label>Max Attachment Size (Bytes)</label>
					<input type="number" data-bind="value: maxAttachmentSize" placeholder="-1 = no limit" />
					<label><input type="checkbox" data-bind="checked: ignoreOrphanedDocs" /> Ignore Orphaned Docs</label>
				</div>

				<div class="header-content" style="max-width: 700px;">
					<h3 style="margin-bottom: 0px;">Entity Filters</h3>
					<p>Fine-tune the maximum document size or total storage quota for individual entities or different file types.</p>
				</div>

<div class="grid-2x2">
	<section class="nested-group">
		<header class="syncConfigHeader">
			<h3>Not Syncing Attachments For</h3>
			<button type="button" class="secondary-btn" data-bind="click: addNotSyncingAttachment">
				<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
				</svg>
				Add Entity
			</button>
		</header>
		<div class="entity-list" data-bind="template: { name: 'tmplEntityChipsContainer', data: notSyncingAttachmentsFor }"></div>
	</section>

	<section class="nested-group">
		<header class="syncConfigHeader">
			<h3>Only Syncing Attachments For</h3>
			<button type="button" class="secondary-btn" data-bind="click: addOnlySyncingAttachment">
				<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
				</svg>
				Add Entity
			</button>
		</header>

		<div class="entity-list" data-bind="template: { name: 'tmplEntityChipsContainer', data: onlySyncingAttachmentsFor }"></div>
	</section>

	<!-- Entity Filters -->
	<section class="nested-group" style="grid-column: span 2;">
		<header class="syncConfigHeader">
			<h3>Entity Filters</h3>
			<button type="button" class="add-btn" data-bind="click: addEntityFilter">
				<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
				</svg>
				Add Entity Filter
			</button>
		</header>

		<div class="entitiesList">
			<!-- ko foreach: filters -->
			<section class="nested-group">
				<header class="syncConfigHeader">
					<div>
						<button type="button" class="collapse-toggle" data-bind="click: function(){collapsed(!collapsed());}" aria-label="Toggle collapse">
							<span data-bind="text: collapsed() ? '▸' : '▾'"></span>
						</button>
						<h3 data-bind="text: entity() || 'Entity Filter'"></h3>
					</div>
					<div>
						<button type="button" class="delete-btn" data-bind="click: function(){$parent.deleteEntityFilter($data)}">Delete</button>
					</div>
				</header>

				<div class="syncConfigBody" data-bind="visible: !collapsed()">
					<div class="sync-options-row">
						
						<div class="option-group" style="flex: 1;">
							<label>Entity</label>
							<input type="text" data-bind="value: entity" placeholder="annotation, activitymimeattachment..." />
						</div>
						<div class="option-group" style="flex: 1;">
							<label>Attached To</label>
							<input type="text" data-bind="value: attachedTo" placeholder="account, contact..." />
						</div>
						<div class="option-group">
							<label>Quota (Bytes)</label>
							<input type="number" data-bind="value: quota" placeholder="-1 = no limit" />
						</div>
						<div class="option-group">
							<label>Max File Size (Bytes)</label>
							<input type="number" data-bind="value: maxFileSize" placeholder="-1 = no limit" />
						</div>
					</div>

					<div class="separator"></div>

					<section class="nested-group">
						<header class="syncConfigHeader">
						<h3>File Type Filters</h3>
							<button type="button" class="secondary-btn" data-bind="click: addFileTypeFilter">
								<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
								</svg>
								Add File Type Filter
							</button>
						</header>

						<div class="entities-list">
							<!-- ko foreach: filters -->
							<div class="flex-row">
								<label>File Suffix</label>
								<input type="text" data-bind="value: fileSuffix" placeholder="e.g., jpg, doc, *" />
								<label>Max File Size (Bytes)</label>
								<input type="number" data-bind="value: maxFileSize" placeholder="-1 = no limit, 0 = excluded" />
								<button type="button" data-bind="click: function(){$parent.deleteFileTypeFilter($data)}">Delete</button>
							</div>
							<!-- /ko -->
						</div>
					</section>
				</div>
			</section>
			<!-- /ko -->
		</div>

	</section>

</div>

			</div>
		</section>

		<div class="separator-empty"></div>

		<!-- Info Banner -->
		<div class="info-banner">
			<div class="info-content">
				<h3>Important Note:</h3>
				<p>Everything not covered by these filters remains in "On Demand" mode. This means the user will see the file in the list, but it will only be downloaded to the mobile device once they click on it (this, however, requires an internet connection).</p>
			</div>
		</div>

	</div>
</script>
<script id="tmplDownloaderSetupEntityChips" type="text/html">
	<div class="chips-container">
		<!-- ko foreach: $data -->
		<div class="chip">
			<div class="chip-content">
				<div class="chip-display" data-bind="text: displayName"></div>
				<div class="chip-logical" data-bind="text: logicalName"></div>
			</div>

			<div class="chip-content">
				<label>Page Size</label>
				<input type="number" data-bind="value: downloadPageSize" placeholder="100-5000" style="max-width:100px;" />
			</div>
			<div class="chip-content">
				<label><input type="checkbox" data-bind="checked: hasPriority" />Has Priority</label>
			</div>
			<span class="delete-btn" data-bind="click: () => $parentContext.$rawData.remove($data)">×</span>
		</div>
		<!-- /ko -->
	</div>
</script>
<script id="tmplEntityChipsContainer" type="text/html">
	<div class="chips-container">
		<!-- ko foreach: $data -->
		<div class="chip">
			<div class="chip-content">
				<div class="chip-display" data-bind="text: DisplayName"></div>
				<div class="chip-logical" data-bind="text: LogicalName"></div>
			</div>
			<span class="delete-btn" data-bind="click: () => $parentContext.$rawData.remove($data)">×</span>
		</div>
		<!-- /ko -->
	</div>
</script>
<script id="tmplEntityChipsDoubleContainer" type="text/html">
	<div class="chips-container">
		<!-- ko foreach: $data -->
		<div class="chip">
			<div class="chip-content" data-bind="with: entity">
				<div class="chip-display" data-bind="text: DisplayName"></div>
				<div class="chip-logical" data-bind="text: LogicalName"></div>
			</div>
			&nbsp;<=&nbsp;
			<div class="chip-content" data-bind="with: before">
				<div class="chip-display" data-bind="text: DisplayName"></div>
				<div class="chip-logical" data-bind="text: LogicalName"></div>
			</div>
			<span class="delete-btn" data-bind="click: () => $parentContext.$rawData.remove($data)">×</span>
		</div>
		<!-- /ko -->
	</div>
</script>
<!-- tmplEntityRelationsDialog -->
<script id="tmplEntityRelationsDialog" type="text/html">
	<div style="display:flex; flex-direction:column; flex:1 1 100%">
		<div>
			<!--input data-bind="value:SearchText, valueUpdate: 'afterkeydown'" style="flex:1 1 50%" placeholder="Search" /-->
			<p>Explore the entity relations tree and unselect nodes that have to be excluded from SmartSync.</p>
			<p>Mind that the same entity node can be present on several levels of the dependency tree.</p>
			<p>Root entities can't be unselected.</p>
		</div>
		<div style="flex: 1 1 auto;overflow:auto; background:white;" data-bind="template: { name: 'TreeView', data: EntityTree, as: 'x' }"></div>
	</div>
</script>
<script id="tmplIncludedEntityChips" type="text/html">
	<div class="chips-container">
		<!-- ko foreach: $data -->
		<div class="chip">
			<div class="chip-content">
				<div class="chip-display" data-bind="text: displayName"></div>
				<div class="chip-logical" data-bind="text: logicalName"></div>
			</div>
			&nbsp;+&nbsp;
			<select data-bind="value: relatedEntities, disable: !entity">
				<option value="NoRelated">no related entities</option>
				<option value="Immediate">immediate related entities</option>
				<option value="Deep">deep related entities</option>
			</select>

			<span class="delete-btn" data-bind="click: () => $parentContext.$rawData.remove($data)">×</span>
		</div>
		<!-- /ko -->
	</div>
</script>
<script id="tmplSmartSyncConfig" type="text/html">
	<div data-bind="with: selectedTab()" class="content">
		<!-- Info Banner -->
		<div class="info-banner">
			<div class="info-content">
				<p>SmartSync allows you to select a subset of entities and define conditions that trigger when a particular smart sync should be executed.</p>
				<a href="https://docs.resco.net/wiki/smart_sync_setup" target="_blank">For more information, see our Wiki Documentation</a>
			</div>
		</div>

		<div class="smartsync-group">
			<!-- Page Header -->
			<div class="page-header" style="align-items: center;">
				<div class="header-content">
					<h2>SmartSync profile</h2>
				</div>
				<button type="button" class="add-btn" data-bind="click: addSmartSync">
					<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
					</svg>
					Add&nbsp;SmartSync
				</button>
			</div>

			<!-- ko foreach: smartSyncs -->
			<section>
				<header class="syncConfigHeader">
					<div>
						<button type="button" class="collapse-toggle" data-bind="click: function(){collapsed(!collapsed());}" aria-label="Toggle collapse">
							<span data-bind="text: collapsed() ? '▸' : '▾'"></span>
						</button>
						<h3 data-bind="text: name() || 'SmartSync'"></h3>
					</div>
					<div>
						<button type="button" class="delete-btn right-button" data-bind="click: function(){$parent.deleteSmartSync($data)}">
							<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path
									d="M6.5 17C6.0875 17 5.73437 16.8531 5.44062 16.5594C5.14687 16.2656 5 15.9125 5 15.5V5.5H4V4H8V3H12V4H16V5.5H15V15.491C15 15.9137 14.8531 16.2708 14.5594 16.5625C14.2656 16.8542 13.9125 17 13.5 17H6.5ZM13.5 5.5H6.5V15.5H13.5V5.5ZM8 14H9.5V7H8V14ZM10.5 14H12V7H10.5V14Z"
									fill="currentColor"
								/>
							</svg>
							Delete
						</button>
					</div>
				</header>

				<div class="syncConfigBody" data-bind="visible: !collapsed()">
					<!-- Name and Description -->
					<div class="sync-options-row">
						<div class="option-group">
							<label>Name</label>
							<input type="text" data-bind="value: name" placeholder="SmartSync name..." pattern="[A-Za-z0-9 ]*" required style="min-width: 280px;" />
						</div>
						<div class="option-group-right">
							<label>Description</label>
							<textarea data-bind="value: description" rows="1" placeholder="Enter description..."></textarea>
						</div>
					</div>

					<!-- Sync Configuration Info Box -->
					<div class="info-box">
						<div class="info-icon">1</div>
						<div class="info-content">
							<h4>Sync Configuration</h4>

							<!-- Sync Options -->
							<div class="sync-options-row">
								<div class="option-group">
									<label>Sync Action</label>
									<select data-bind="value: syncAction" required>
										<option value="Sync">Upload and download</option>
										<option value="DownSync">DownSync (download only)</option>
										<option value="UpSync">UpSync (upload only)</option>
									</select>
								</div>

								<div class="option-group" disabled>
									<label>Sync Method</label>
									<select data-bind="value: syncMethod" disabled>
										<option value="Default">Default</option>
										<option value="FullSync">FullSync</option>
										<option value="IncSync">IncSync</option>
									</select>
								</div>

								<div class="option-group-right">
									<label>Excluded Sync Modules</label>
									<div class="flags-container">
										<div class="flag-tag-wrapper">
											<!-- Rozbijeme string na pole a každý kúsok vykreslíme ako span -->
											<!-- ko foreach: syncFlags() ? syncFlags().split(',') : [] -->
											<span class="flag-tag">
												<span data-bind="text: $data.trim()"></span>
											</span>
											<!-- /ko -->
										</div>
										<button type="button" data-bind="click: openSyncFlagsPopup">Manage Exclusions ▾</button>
									</div>

									<!-- <div class="flags-container">
									<input type="text" data-bind="value: syncFlags()" class="flags-input" readonly placeholder="Excluded Sync Modules…" />
									<button type="button" data-bind="click: openSyncFlagsPopup">Manage&nbsp;Exclusions&nbsp;▾</button>
								</div> -->
								</div>
							</div>
						</div>
					</div>

					<!-- Popup modal for SyncFlags -->
					<div class="syncFlagsPopup" data-bind="visible: syncFlagsPopupVisible">
						<div>
							<h3>Select Sync Flags</h3>
							<div class="flags-list">
								<label>
									<input type="checkbox" data-bind="checked: syncFlagsItems['NoPreparation']" />
									<div class="label-text">
										<span class="title">NoPreparation</span>
										<span class="description">Skip the preparation phase of sync (such as permissions update).</span>
									</div>
								</label>
								<label>
									<input type="checkbox" data-bind="checked: syncFlagsItems['NoRemoteConflicts']" />
									<div class="label-text">
										<span class="title">NoRemoteConflicts</span>
										<span class="description">Skip handling of upload conflicts which were resolved via Sync Dashboard.</span>
									</div>
								</label>
								<label>
									<input type="checkbox" data-bind="checked: syncFlagsItems['NoSyncDeletes']" />
									<div class="label-text">
										<span class="title">NoSyncDeletes</span>
										<span class="description">Do not process information from the Delete plugin.</span>
									</div>
								</label>
								<label>
									<input type="checkbox" data-bind="checked: syncFlagsItems['NoEntityImages']" />
									<div class="label-text">
										<span class="title">NoEntityImages</span>
										<span class="description">Skip downloading entity images (icon-sized photos associated with records, e.g. contact photos).</span>
									</div>
								</label>
								<label>
									<input type="checkbox" data-bind="checked: syncFlagsItems['NoSyncShared']" />
									<div class="label-text">
										<span class="title">NoSyncShared</span>
										<span class="description"
											>Skip synchronization of shared records — records made accessible to the current user via explicit sharing rather than
											ownership.</span
										>
									</div>
								</label>
								<label>
									<input type="checkbox" data-bind="checked: syncFlagsItems['NoDocuments']" />
									<div class="label-text">
										<span class="title">NoDocuments</span>
										<span class="description">Skip synchronization of cloud documents (SharePoint, OneDrive, Google Drive, Dropbox, Box, etc.).</span>
									</div>
								</label>
								<label>
									<input type="checkbox" data-bind="checked: syncFlagsItems['NoAttachments']" />
									<div class="label-text">
										<span class="title">NoAttachments</span>
										<span class="description">Skip downloading record attachments (note bodies, email attachments, sales literature files).</span>
									</div>
								</label>
								<label>
									<input type="checkbox" data-bind="checked: syncFlagsItems['NoExchange']" />
									<div class="label-text">
										<span class="title">NoExchange</span>
										<span class="description">Skip synchronization with Exchange, which runs after the main sync engine completes.</span>
									</div>
								</label>
								<label>
									<input type="checkbox" data-bind="checked: syncFlagsItems['OnlyCoreModules']" />
									<div class="label-text">
										<span class="title">OnlyCoreModules</span>
										<span class="description"
											>Run only the essential sync modules (upload + entity download), skipping all optional phases such as customization check,
											preparation, remote conflicts, sync deletes, shared records, entity images, attachments, documents, and email sync.</span
										>
									</div>
								</label>
								<label>
									<input type="checkbox" data-bind="checked: syncFlagsItems['NoCleanup']" />
									<div class="label-text">
										<span class="title">NoCleanup</span>
										<span class="description"
											>Skip the cleanup step — do not delete local records that no longer match the sync filter after downloading.</span
										>
									</div>
								</label>
							</div>
							<div style="text-align:right; margin-top:1.5rem;">
								<button type="button" class="add-btn" data-bind="click:closeSyncFlagsPopup">Close</button>
							</div>
						</div>
					</div>

					<!-- Target Entities Info Box -->
					<div class="info-box">
						<div class="info-icon">2</div>
						<div class="info-content">
							<h4>Target Entities</h4>
							<p>Select the entities to synchronize with this SmartSync profile.</p>
						</div>
						<div class="tab-buttons">
							<button type="button" data-bind="css: { active: !includeAllEntities() }, click: function() { includeAllEntities(false); }">
								Manual Selection
							</button>
							<button type="button" data-bind="css: { active: includeAllEntities() }, click: function() { includeAllEntities(true); }">
								All Entities
							</button>
						</div>
					</div>

					<div class="options-box">
						<!-- Manual Selection Content -->
						<div data-bind="visible: !includeAllEntities()">
							<div class="sync-options-row full-width">
								<div class="entity-list" data-bind="template: { name: 'tmplIncludedEntityChips', data: includedEntities }"></div>
							</div>
							<div class="btn-group">
								<button type="button" class="secondary-btn" data-bind="click: addEntity">
									<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
									</svg>
									Add&nbsp;Entity
								</button>
							</div>
						</div>

						<!-- Excluded Entities Section -->
						<div
							class="excluded-entities-section"
							data-bind="visible: includeAllEntities() || includedEntities().some(e => e.relatedEntities() != 'NoRelated')"
						>
							<h3>Excluded Entities</h3>
							<p>If your SmartSync includes all entities or related entities, you can exclude from the list.</p>

							<div class="sync-options-row">
								<label class="checkbox-label">
									<input type="checkbox" data-bind="checked: acceptGlobalExclusions" /><span>Accept Global Exclusions <sup>1</sup></span>
								</label>
							</div>
							<div class="sync-options-row" style="margin-bottom: 1rem;">
								<label class="checkbox-label">
									<input type="checkbox" data-bind="checked: acceptAutoExclusions" /><span>Accept Auto Exclusions <sup>2</sup></span>
								</label>
							</div>

							<div class="sync-options-row full-width">
								<div class="entity-list" data-bind="template: { name: 'tmplEntityChipsContainer', data: excludedEntities }"></div>
							</div>

							<div class="btn-group" style="display:flex;">
								<button type="button" class="secondary-btn" data-bind="click: addExcludedEntity">
									<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
									</svg>
									Add Entity to Exclusions
								</button>
								<button
									type="button"
									class="secondary-btn"
									data-bind="visible: !includeAllEntities(), click: editRelations"
									style="margin-left: 0.5rem;"
								>
									<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path
											d="M3 17H4V16H5V17H6V16H7V17H17V16H18V17H19V3H3V17ZM4 4H18V15H4V4ZM6 6H5V7H6V6ZM6 9H5V10H6V9ZM6 12H5V13H6V12ZM9 6H8V7H9V6ZM9 9H8V10H9V9ZM9 12H8V13H9V12ZM12 6H11V7H12V6ZM12 9H11V10H12V9ZM12 12H11V13H12V12ZM15 6H14V7H15V6ZM15 9H14V10H15V9ZM15 12H14V13H15V12Z"
											fill="currentColor"
										/>
									</svg>
									Explore Relations
								</button>
							</div>
						</div>
					</div>

					<!-- Triggers Info Box -->
					<div class="info-box">
						<div class="info-icon">3</div>
						<div class="info-content">
							<h4>Triggers</h4>
							<p>Select actions and conditions that trigger the execution of this SmartSync profile.</p>
						</div>
						<!-- Triggers Header -->
						<button type="button" class="add-btn" data-bind="click: addTrigger">
							<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
							</svg>
							Add Trigger
						</button>
					</div>

					<!-- Triggers List -->
					<!-- ko foreach: triggers -->
					<div class="options-box">
						<div class="sync-options-row" style="align-items: center;">
							<div class="option-group">
								<label>Action</label>
								<div class="tab-buttons">
									<button
										type="button"
										data-bind="css: { active: action() === 'OnChange' }, click: function() { action('OnChange'); }"
										style="padding: 0.375rem 0.75rem;"
									>
										OnChange
									</button>
									<button
										type="button"
										data-bind="css: { active: action() === 'OnAppStart' }, click: function() { action('OnAppStart'); }"
										style="padding: 0.375rem 0.75rem;"
									>
										OnAppStart
									</button>
									<button
										type="button"
										data-bind="css: { active: action() === 'PeriodicSync' }, click: function() { action('PeriodicSync'); }"
										style="padding: 0.375rem 0.75rem;"
									>
										PeriodicSync
									</button>
								</div>
							</div>

							<div class="option-group">
								<label><span data-bind="text: action() === 'PeriodicSync' ? 'Period (in seconds)' : 'Delay (in seconds)'"></span></label>
								<input type="number" data-bind="value: delay" min="0" placeholder="0" />
							</div>

							<div class="option-group" data-bind="visible: action() === 'OnChange'" style="flex-grow: 1; ">
								<label>Trigger Entity</label>
								<div class="entity-list" data-bind="template: { name: 'tmplEntityChipsContainer', data: changedEntities }"></div>
							</div>
							<div class="option-group btn-group" data-bind="visible: action() === 'OnChange'">
								<button type="button" class="secondary-btn" data-bind="click: addChangedEntity" style="white-space: nowrap;">
									<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
									</svg>
									Add Entity
								</button>
							</div>
							<button type="button" class="delete-btn" data-bind="click: function(){$parent.deleteTrigger($data)}">
								<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path
										d="M6.5 17C6.0875 17 5.73437 16.8531 5.44062 16.5594C5.14687 16.2656 5 15.9125 5 15.5V5.5H4V4H8V3H12V4H16V5.5H15V15.491C15 15.9137 14.8531 16.2708 14.5594 16.5625C14.2656 16.8542 13.9125 17 13.5 17H6.5ZM13.5 5.5H6.5V15.5H13.5V5.5ZM8 14H9.5V7H8V14ZM10.5 14H12V7H10.5V14Z"
										fill="currentColor"
									/>
								</svg>
							</button>
						</div>
					</div>
					<!-- /ko -->
				</div>
			</section>
			<!-- /ko -->
		</div>
		<!-- Global Exclusions -->
		<section class="global-exclusions-section">
			<header class="syncConfigHeader" style="border: none;">
				<div style="flex-direction: column;  align-items: flex-start;">
					<h2 style="margin: 0;"><sup>1</sup> Global Exclusions</h2>
					<p style="margin: 0px;">A set of entities that can be excluded from any SmartSync profile globally.</p>
				</div>
				<div class="btn-group">
					<button
						type="button"
						class="secondary-btn tooltipsource"
						data-bind="click: detectGlobalExclusions"
						data-tooltip="SmartSync.DetectGlobalExclusions"
					>
						<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
						</svg>
						Auto-detect "stable" entities
					</button>
					<button type="button" class="add-btn tooltipsource" data-bind="click: addGlobalExclusion" data-tooltip="SmartSync.GlobalExclusions">
						<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M9.25 10.75H5V9.25H9.25V5H10.75V9.25H15V10.75H10.75V15H9.25V10.75Z" fill="currentColor" />
						</svg>
						Add Global Exclusion
					</button>
				</div>
			</header>
			<div class="syncConfigBody">
				<div class="sync-options-row full-width">
					<div
						class="entity-list tooltipsource"
						data-bind="template: { name: 'tmplEntityChipsContainer', data: globalExclusions }"
						data-tooltip="SmartSync.GlobalExclusions"
					></div>
				</div>
			</div>
		</section>

		<!-- Auto Exclusions -->
		<section class="global-exclusions-section">
			<header class="syncConfigHeader">
				<div style="flex-direction: column;  align-items: flex-start;">
					<h2 style="margin: 0;"><sup>2</sup> Auto Exclusions</h2>
					<p style="margin: 0px; max-width: 700px; line-height: 1.4;">
						Resco Mobile CRM detects "stable entities" at runtime: entities already downloaded in mobile app, last modified more than 6 months ago,
						with up to 1000 records. If you enable Auto Exclusions in your SmartSync profile, these entities are skipped during SmartSync.
					</p>
					<p>
						The list is not available in Woodford, but you can find it using
						<a href="https://docs.resco.net/wiki/Storage_analyzer" target="_blank">Storage Analyzer</a> or sync log if needed.
					</p>
				</div>
			</header>
		</section>
	</div>
</script>
<!--
    SyncConfig Editor Template
    -->
<script id="tmplSyncConfigEditor" type="text/html">
	<div class="syncConfigEditorTab">
		<!-- ko foreach: tabs -->
		<button
			data-bind="attr: { class: $data === $parent.selectedTab() ? 'tabLink tabLink-selected' : 'tabLink' }, click: function(){ $parent.selectTab($data)}"
		>
			<div style="display: flex; flex-direction: column; align-items: center; min-width: 120px;">
				<!--i data-bind="attr:{ class: 'woodfordsprite icon-woodford_'+ icon }"></i>-->
				<label data-bind="text: caption"></label>
			</div>
		</button>
		<!-- /ko -->

		<div class="syncConfigContainer" data-bind="template: selectedTab().template"></div>
	</div>
</script>
<!-- BEGIN: tmplFormLayoutDialog-->
<script id="tmplFormLayoutDialog" type="text/html">
	<div class="layoutDialogSettingsWrapper">
		<label class="label">Open form in full screen</label>
		<select
			class="value"
			data-bind="value: layoutProperties.isFullScreen, options: behaviorOptions, optionsText: getOptionsText('isFullScreen'), optionsValue: 'Value'"
		></select>
		<label class="label">Allow resizing form</label>
		<select
			class="value"
			data-bind="value: layoutProperties.isResizable, options: behaviorOptions, optionsText: getOptionsText('isResizable'), optionsValue: 'Value'"
		></select>
		<div class="section">Select layout</div>
		<div></div>
		<label class="label">Flexible form</label>
		<select
			class="value"
			data-bind="value: layoutProperties.isFlexible, options: behaviorOptionsIsFlexible, optionsText: getOptionsText('isFlexible'), optionsValue: 'Value'"
		></select>
	</div>
	<div class="layoutDialogImageWrapper" data-bind="css: {'disabled': $parent.isFlexibleFormDisabled()}">
		<!-- ko foreach: {data: layoutOptions, as: 'option', noChildContext: true} -->
		<div class="layoutImage">
			<img
				data-bind="class: 'icon-woodford_FormDesigner_' + option.image, css: {'selected': (!isFlexibleFormDisabled() && layoutProperties.flexiPanelMode() === option.value)}, click: () => onLayoutImageClick(option.value)"
			/>
			<span class="iconDescription" data-bind="text: option.label"></span>
		</div>
		<!-- /ko -->
	</div>
	<div class="layoutDialogLayoutTypeWrapper" data-bind="css: {'disabled': $parent.isFlexibleFormDisabled()}">
		<label class="label">Cards Layout</label>
		<p>
			<input
				id="Strict"
				class="toggle toggle-left"
				name="layoutToggle"
				type="radio"
				data-bind="checked: layoutProperties.isLayoutStrict , checkedValue: 1, disable: $parent.isFlexibleFormDisabled()"
			/>
			<label for="Strict" class="btnleft">Strict</label>
			<input
				id="Dynamic"
				class="toggle toggle-right"
				name="layoutToggle"
				type="radio"
				data-bind="checked: layoutProperties.isLayoutStrict , checkedValue: 0, disable: $parent.isFlexibleFormDisabled()"
			/>
			<label for="Dynamic" class="btnright">Dynamic</label>
		</p>
		<div></div>
		<label class="label" style="text-align: left;"
			>Select if the cards will be displayed strictly as designed or arranged dynamically within the panel to make the most of the space.
			<a href="https://docs.resco.net/wiki/Flexible_form#Configuring_layout" target="_blank">Learn more</a></label
		>
	</div>
	<div class="layoutDialogLayoutTypeWrapper" data-bind="css: {'disabled': $parent.isFlexibleFormDisabled()}">
		<label class="label">Cards expanding</label>
		<p>
			<input
				id="Default"
				class="toggle toggle-left"
				name="expandToggle"
				type="radio"
				data-bind="checked: layoutProperties.isSingleCardExpand, checkedValue: 0, disable: $parent.isFlexibleFormDisabled()"
			/>
			<label for="Default" class="btnleft">Default</label>
			<input
				id="SingleCard"
				class="toggle toggle-right"
				name="expandToggle"
				type="radio"
				data-bind="checked: layoutProperties.isSingleCardExpand, checkedValue: 1, disable: $parent.isFlexibleFormDisabled()"
			/>
			<label for="SingleCard" class="btnright">Single Card</label>
		</p>
		<div></div>
		<label class="label" style="text-align: left;"
			>Choose Single card if you want to keep only a single card expanded when interacting with forms</label
		>
	</div>
</script>
<!-- BEGIN: tmplChartDesigner -->
<script id="tmplChartDesigner" type="text/html">
	<div class="designer chartDesigner">
		<div class="designer__leftPanel">
			<div class="wfheader">
				<label class="label">Properties</label>
			</div>
			<div class="designerPanel" style="overflow:auto">
				<table style="width:100%">
					<tbody>
						<tr style="background-color:#eee">
							<td style="padding:5px"><b>Legend Entries (Series)</b></td>
							<td style="margin:5px"><b>Aggregation</b></td>
							<td style="margin:5px"><b>Limit</b></td>
							<td style="margin:5px"><b>Color</b></td>
							<td></td>
						</tr>
						<!-- ko foreach: Series -->
						<tr>
							<td>
								<button style="width:100%" data-bind="click: $parent.OnSeriesAttributeClicked.bind($parent)">
									<span data-bind="text: AttributeLabelProperty"></span>
								</button>
							</td>
							<td>
								<select
									style="width:100%"
									data-bind="value: AggregationProperty, options: AggregationListProperty, optionsText: 'Key', optionsValue: 'Value'"
								></select>
							</td>
							<td>
								<select data-bind="value: LimitProperty, options: LimitList, optionsText: 'Key', optionsValue: 'Value'"></select>
								<input
									style="width:3em"
									type="number"
									min="1"
									max="2147483647"
									data-bind="value:$parent.Chart().LimitCountProperty, visible:LimitProperty"
								/>
							</td>
							<td>
								<color-editor
									style="display: block; width: 100%; height: 100%;"
									params="value: ColorProperty, materialSchemes: $parent.materialSchemes, previewOnly: true"
								></color-editor>
							</td>
							<td><button data-bind="click: $parent.OnSeriesDeleteClicked.bind($parent), visible: $parent.CanDelSeries">X</button></td>
						</tr>
						<!-- /ko -->
					</tbody>
				</table>

				<button style="margin-left:3px" data-bind="click: $data.OnAddSeriesClicked.bind($data), visible: CanAddSeries">Add Series</button>

				<!-- ko if: Chart().KindProperty()===6 -->

				<div style="height:2em"></div>
				<div style="padding: 5px; width: 100%; box-sizing: border-box; background-color:#eee;"><b>Values</b></div>

				<table style="width:100%">
					<tbody>
						<!-- ko foreach: GaugeValues -->
						<tr>
							<td colspan="4"><span data-bind="text:ValueLabel"> </span></td>
						</tr>
						<tr>
							<td>
								<select
									style="width:100%"
									data-bind="value: IsConstantProperty, options: ConstantList, optionsText: 'Key', optionsValue: 'Value'"
								></select>
							</td>
							<td>
								<button style="width:100%" data-bind="visible:!IsConstantProperty(), click: $parent.OnSeriesAttributeClicked.bind($parent)">
									<span data-bind="text: AttributeLabelProperty"></span>
								</button>
								<input style="width:100%" type="number" data-bind="visible:IsConstantProperty, value:NumericValueProperty" />
							</td>
							<td>
								<select
									style="width:100%"
									data-bind="visible:!IsConstantProperty(), value: AggregationProperty, options: AggregationListProperty, optionsText: 'Key', optionsValue: 'Value'"
								></select>
							</td>
							<td><input style="width:100%" type="color" data-bind="visible:$index()===0, value:ColorProperty" /></td>
						</tr>
						<!-- /ko -->
					</tbody>
				</table>

				<!-- /ko -->
				<!-- ko if: Chart().KindProperty()!==6 -->

				<div style="height:2em"></div>
				<div style="padding: 5px; width: 100%; box-sizing: border-box; background-color:#eee;"><b>Horizontal Axis Label</b></div>

				<table style="width:100%">
					<tbody>
						<!-- ko foreach: GroupBySeries -->
						<tr>
							<td width="100%">
								<button style="width:100%" data-bind="click: $parent.OnAxisAttributeClicked.bind($parent)">
									<span data-bind="text: AxisLabelProperty"></span>
								</button>
							</td>
							<td>
								<select
									data-bind="value: DateGroupingProperty, options: DateGroupingList, optionsText: 'Key', optionsValue: 'Value', visible: DateGroupingProperty, valueAllowUnset: true"
								></select>
							</td>
							<td>
								<button data-bind="click: $parent.OnGroupByDeleteClicked.bind($parent), visible: $parent.CanDelGroupBySeries">X</button>
							</td>
						</tr>
						<!-- /ko -->
					</tbody>
				</table>

				<button style="margin-left:3px" data-bind="click: $data.OnAddGroupByClicked.bind($data), visible: $data.CanAddGroupBySeries">
					Add Field
				</button>

				<!-- ko with: Chart -->

				<br />
				<div style="height:2em"></div>
				<div style="padding: 5px; width: 100%; box-sizing: border-box; background-color:#eee;"><b>Drill Down</b></div>
				<input type="checkbox" data-bind="checked: DrillDownEnabledProperty" />
				<button data-bind="click: $parent.OnDrillDownClicked.bind($parent), enable: DrillDownEnabledProperty">
					<span data-bind="text: DrillDownLabelProperty"></span>
				</button>

				<div style="height:2em"></div>
				<div style="padding: 5px; width: 100%; box-sizing: border-box; background-color:#eee;"><b>Settings</b></div>
				<div data-bind="visible: KindProperty()===5">
					Donut Ratio:<input type="number" data-bind="value:PieDonutRatioProperty" min="1" max="99" />%
				</div>
				<div data-bind="visible: KindProperty()===0 || KindProperty()===1">
					Style:<select data-bind="value: BarStyleProperty, options: BarStyleList, optionsText: 'Key', optionsValue: 'Value' "></select>
				</div>
				<div data-bind="visible: KindProperty()===7">
					Style:<select data-bind="value: AreaStyleProperty, options: AreaStyleList, optionsText: 'Key', optionsValue: 'Value' "></select>
				</div>
				<div data-bind="visible: KindProperty()===3 || KindProperty()===5">
					Style:<select data-bind="value: LabelStyleProperty, options: LabelStyleList, optionsText: 'Key', optionsValue: 'Value' "></select>
				</div>
				<!-- /ko -->
				<!-- /ko -->
			</div>
		</div>
		<div class="designerPanelOuter" style="flex:4 1 auto; display:flex; flex-direction:column">
			<div class="wfheader" style="border-left:0; flex: 0 0 auto;">
				<label class="label">Designer</label>
			</div>
			<div style="flex:1 1 auto; display: flex; justify-content: center;border-right:1px solid #B7B7B7">
				<div style="display: flex; flex-direction: column; justify-content: center;">
					<i
						class="woodfordsprite icon-woodford_FunnelChart"
						data-bind="attr:{ class: 'woodfordsprite icon-woodford_'+ Chart().KindLabelProperty() + 'Chart' }"
					></i>
				</div>
			</div>
		</div>
		<div class="designer__fieldsPanel">
			<div class="wfheader" style="border-left:0">
				<label class="label">Fields</label>
			</div>
			<div class="designerPanel" style="border-left:0;overflow:auto;display:flex;flex-direction:column"></div>
		</div>
	</div>
</script>
<!-- END: tmplChartDesigner-->
</head><body class="app"><!-- ko template: { name: 'tmplAppForm' } --><!-- /ko --><script src="3924.bundle.js?data=c39010d57d6ff00b"></script><script src="1292.bundle.js?data=a1dd0bcdf725448f"></script><script src="7046.bundle.js?data=86fc3b4173fd6457"></script><script src="3891.bundle.js?data=0ddd219925bb069b"></script><script src="6707.bundle.js?data=b10d9cf5600aa399"></script><script src="145.bundle.js?data=ada859bb18a9e283"></script><script src="5317.bundle.js?data=b0e8348311a606dd"></script><script src="1500.bundle.js?data=83d4299e61286f75"></script><script src="5216.bundle.js?data=d3e0380e89e680d4"></script><script src="8599.bundle.js?data=ec371b9603a63aa6"></script><script src="1583.bundle.js?data=6c2cb241c4c72d7b"></script><script src="3567.bundle.js?data=c6a30a1370c3a30d"></script><script src="main_c3373795.bundle.js?data=45202e3c38f26916"></script><script src="main_7beda613.bundle.js?data=4e99c052f487e7f9"></script><script src="main_31f8ea5a.bundle.js?data=125f969e1c00f535"></script><script src="main_017397ff.bundle.js?data=db55d1e4e026d9fa"></script><script src="main_4c120c8f.bundle.js?data=a6782b3a0edb0fb8"></script><script src="polyfills.bundle.js?data=16911963983dcac5"></script></body></html>