<!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"/><script src="../../ClientGlobalContext.js.aspx"></script><script src="libs/sortable.js"></script><base href=""><link href="563.ea814bd5c4b22537.css" rel="stylesheet"><link href="102.8a007db9105c114f.css" rel="stylesheet"><link href="main.5aec8c89389ec9f9.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 type="text/html" id="tmplAddSemanticColorDialog">
	<div class="addSemanticColorDialog">
		<div class="label section">
			<span class="section-label">Label</span>
			<div class="label-input input-container"><input type="text" data-bind="textInput: label" /></div>
		</div>
		<div class="color section">
			<span class="section-label">Color</span>
			<div class="color-input input-container" data-bind="click: function(data, event) { $parent.openColorPicker(event, $parent.color)}">
				<div class="color-preview" data-bind="style: {background: color}"></div>
				<span data-bind="text: color"></span>
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplFlexibleJsonEditor">
	<div class="flexibleJsonEditor">
		<div class="flexibleJsonEditor__editor">
			<h1>Configurator for JSON file</h1>
			<div class="flexibleJsonEditor__section">
				<div class="flexibleJsonEditor__property">
					<input id="includeUnanswered" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: includeUnanswered" />
					<label for="includeUnanswered" class="flexibleJsonEditor__header">
						<h2>Include unanswered questions in the Flexible JSON file</h2>
						<p>Unanswered questions take up extra space in the JSON file, however storing them can be useful for third-party reporting tools.</p>
					</label>
				</div>
				<div class="flexibleJsonEditor__property">
					<input id="isMinJson" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: isMinJson" />
					<label for="isMinJson" class="flexibleJsonEditor__header">
						<h2>Minimize data saved in the JSON file</h2>
						<p>This will leave only the mandatory Questionnaire fields and Question fields in the JSON file.</p>
					</label>
				</div>
				<!-- ko ifnot: isMinJson -->
				<div class="flexibleJsonEditor__property">
					<input id="serializeDefaultFields" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: serializeDefaultFields" />
					<label for="serializeDefaultFields" class="flexibleJsonEditor__header">
						<h2>Serialize fields even if their value equals default value</h2>
						<p>
							If checked, the final json will contain field (for example label) even if its value is not changed comparing to its default value (the
							one defined in the template). This might cause the data to take up much more space.
							<a target="_blank" href="https://docs.resco.net/wiki/JSON_storage_for_questionnaires#Configuration_in_the_designer">Learn more</a>
						</p>
					</label>
				</div>
				<!-- /ko -->
			</div>
			<!-- ko ifnot: isMinJson -->
			<div class="flexibleJsonEditor__section">
				<div class="flexibleJsonEditor__header">
					<h2>Question fields</h2>
					<p>Select question fields to include (serialize) in your JSON file every time the questionnaire is completed.</p>
				</div>

				<table class="flexibleJsonEditor__table">
					<tr>
						<td><input type="checkbox" checked disabled /></td>
						<td><label>Value</label></td>
						<td><p>Holds the answer (value) of the question</p></td>
					</tr>
					<tr>
						<td><input id="questionScore" type="checkbox" data-bind="enable: false, checked: questionnaire.scoringEnabled" disabled /></td>
						<td><label for="questionScore">Score</label></td>
						<td><p>Score for the answer, only serialized if scoring is enabled on the questionnaire</p></td>
					</tr>
					<tr>
						<td><input id="questionLabel" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: questionLabel" /></td>
						<td><label for="questionLabel">Label</label></td>
						<td><p>Label of the question</p></td>
					</tr>
					<tr>
						<td><input id="questionDescription" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: questionDescription" /></td>
						<td><label for="questionDescription">Description</label></td>
						<td><p>Description of the question</p></td>
					</tr>
					<tr>
						<td><input id="questionVisible" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: questionVisible" /></td>
						<td><label for="questionVisible">Visible</label></td>
						<td><p>1 if question is visible; 0 if not</p></td>
					</tr>
					<tr>
						<td><input id="questionRequired" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: questionRequired" /></td>
						<td><label for="questionRequired">Required</label></td>
						<td><p>1 if question is visible; 0 if not</p></td>
					</tr>
					<tr>
						<td><input id="questionValueLabel" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: questionValueLabel" /></td>
						<td><label for="questionValueLabel">Value Label</label></td>
						<td><p>Human readable value (for lookup this might be primaryname, label of the option...)</p></td>
					</tr>
					<tr>
						<td><input id="questionShowOnReport" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: questionShowOnReport" /></td>
						<td><label for="questionShowOnReport">Show On Report</label></td>
						<td><p>1 if question should be part of report; 0 otherwise</p></td>
					</tr>
					<tr>
						<td><input id="questionAnsweredOn" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: questionAnsweredOn" /></td>
						<td><label for="questionAnsweredOn">Answered On</label></td>
						<td><p>The no of milliseconds since the question was answered since creation of questionnaire</p></td>
					</tr>
					<tr>
						<td><input id="questionIndex" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: questionIndex" /></td>
						<td><label for="questionIndex">Index</label></td>
						<td><p>Index of the question (* if keys are names)</p></td>
					</tr>
					<tr>
						<td><input id="questionStyle" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: questionStyle" /></td>
						<td><label for="questionStyle">Style</label></td>
						<td><p>Style of the question</p></td>
					</tr>
				</table>
			</div>
			<div class="flexibleJsonEditor__section">
				<div class="flexibleJsonEditor__header">
					<h2>Question group fields</h2>
					<p>Select question group fields to include (serialize) in your JSON file every time the questionnaire is completed.</p>
				</div>
				<table class="flexibleJsonEditor__table">
					<tr>
						<td><input type="checkbox" checked disabled /></td>
						<td><label>Name</label></td>
						<td><p>Holds the name of the group</p></td>
					</tr>
					<tr>
						<td><input id="groupLabel" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: groupLabel" /></td>
						<td><label for="groupLabel">Label</label></td>
						<td><p>Label of the group; label might have been changed and differs from the original template</p></td>
					</tr>
					<!-- ko ifnot: questionnaire.isNqpQuestionnaire() -->
					<tr>
						<td><input id="groupDescription" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: groupDescription" /></td>
						<td><label for="groupDescription">Description</label></td>
						<td><p>Description of the group</p></td>
					</tr>
					<!-- /ko -->
					<tr>
						<td><input id="groupVisible" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: groupVisible" /></td>
						<td><label for="groupVisible">Visible</label></td>
						<td><p>Whether the group is initially visible or not</p></td>
					</tr>
					<tr>
						<td><input id="groupExpanded" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: groupExpanded" /></td>
						<td><label for="groupExpanded">Expanded</label></td>
						<td><p>If the group is initially expanded the value is 1, otherwise it is 0</p></td>
					</tr>
					<!-- ko ifnot: isMinJson -->
					<tr>
						<td><input type="checkbox" data-bind="checked: questionnaire.scoringEnabled" disabled /></td>
						<td><label>Score</label></td>
						<td><p>Overall score of the group</p></td>
					</tr>
					<tr>
						<td>
							<!-- ko if: questionnaire.scoringEnabled -->
							<input id="groupScoreLabel" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: groupScoreLabel" />
							<!-- /ko -->
							<!-- ko ifnot: questionnaire.scoringEnabled -->
							<input id="groupScoreLabel" type="checkbox" disabled />
							<!-- /ko -->
						</td>
						<td><label for="groupScoreLabel">Score Label</label></td>
						<td><p>The label of the group scoring result</p></td>
					</tr>
					<!-- /ko -->
				</table>
			</div>
			<!-- /ko -->
			<div class="flexibleJsonEditor__section">
				<div class="flexibleJsonEditor__header">
					<h2>Questionnaire fields</h2>
					<p>Select questionnaire fields to include (serialize) in your JSON file every time the questionnaire is completed.</p>
				</div>
				<table class="flexibleJsonEditor__table">
					<tr>
						<td><input type="checkbox" checked disabled /></td>
						<td><label>Questionnaire Id</label></td>
						<td><p>The id of the questionnaire</p></td>
					</tr>
					<!-- ko ifnot: questionnaire.isNqpQuestionnaire() -->
					<tr>
						<td><input type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: questionnaireDefaultStorage" disabled /></td>
						<td><label>Default storage</label></td>
						<td><p>Name of the default storage of binary questions (e.g. images)</p></td>
					</tr>
					<!-- /ko -->
					<tr>
						<td>
							<input id="questionnaireAnsweredOn" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: questionnaireAnsweredOn" />
						</td>
						<td><label for="questionnaireAnsweredOn">Answered On</label></td>
						<td><p>The date when the questionnaire was answered</p></td>
					</tr>
					<tr>
						<td>
							<input id="questionnaireCreatedBy" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: questionnaireCreatedBy" />
						</td>
						<td><label for="questionnaireCreatedBy">Created By</label></td>
						<td><p>Name of the user who filled the questionnaire</p></td>
					</tr>
					<tr>
						<td>
							<input id="questionnaireCreatedById" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: questionnaireCreatedById" />
						</td>
						<td><label for="questionnaireCreatedById">Created By Id</label></td>
						<td><p>Id of the user who filled the questionnaire</p></td>
					</tr>
					<tr>
						<td>
							<input id="questionnaireTemplateId" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: questionnaireTemplateId" />
						</td>
						<td><label for="questionnaireTemplateId">Template Id</label></td>
						<td><p>The id of the questionnaire template</p></td>
					</tr>
					<!-- ko ifnot: isMinJson -->
					<tr>
						<td><input type="checkbox" data-bind="checked: questionnaire.scoringEnabled" disabled /></td>
						<td><label>Score</label></td>
						<td><p>Overall score of the questionnaire</p></td>
					</tr>
					<tr>
						<td>
							<!-- ko if: questionnaire.scoringEnabled -->
							<input id="questionnaireScoreLabel" type="checkbox" data-bind="enable: !questionnaire.isReadOnly, checked: questionnaireScoreLabel" />
							<!-- /ko -->
							<!-- ko ifnot: questionnaire.scoringEnabled -->
							<input id="questionnaireScoreLabel" type="checkbox" disabled />
							<!-- /ko -->
						</td>
						<td><label for="questionnaireScoreLabel">Score Label</label></td>
						<td><p>The label of the questionnaire scoring result</p></td>
					</tr>
					<!-- /ko -->
				</table>
			</div>
		</div>
		<div class="flexibleJsonEditor__preview">
			<h1>JSON Preview</h1>
			<div data-bind="jsonFormatter: { data: jsonPreview, config: { hoverPreviewEnabled: true } }"></div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplLocalizationEditor">
	<!-- ko if: selectedLanguageIndex() >= 0 -->
	<div class="localizationEditor">
		<!-- ko foreach: displayItems -->
		<div class="question__box">
			<span class="question__title" data-bind="text: label"></span><br />
			<!-- ko foreach: locItems -->
			<div class="question__row">
				<div class="question__label">
					<span data-bind="text: label"></span>
					<!-- ko if: isCustom  && !$parents[1].isReadOnly --><span
						style="color: blue; cursor: pointer"
						data-bind="click: $parent.removeCustomItem.bind($parent, $index())"
						>X</span
					><!-- /ko -->
				</div>
				<input
					class="question__input"
					data-bind="value: defaultText, enable: isCustom && !$parents[1].isReadOnly,attr:{title: !$parents[1].isReadOnly ? defaultText : '' }"
				/>
				<input
					class="question__input"
					data-bind="value: localizedText, enable: !$parents[1].isReadOnly, attr: { placeholder: !$parents[1].isReadOnly ? defaultText : '', title: !$parents[1].isReadOnly ? defaultText : '' }"
				/>
				<br />
			</div>
			<!-- /ko -->
			<!-- ko if: canHaveCustomItem && !$parent.isReadOnly -->
			<div class="question__row question__addItem" data-bind="click: addCustomItem">&#43; Add custom string</div>
			<!-- /ko -->
		</div>
		<!-- /ko -->
	</div>
	<!-- /ko -->
</script>

<script type="text/html" id="tmplLanguageListItem">
	<div class="countryButton" data-bind="style: { background: isSelected() ? 'white' : 'rgb(242, 242, 242)' } ">
		<span data-bind="text: label"></span>
	</div>
</script>

<script id="tmplAddLanguageDialog" type="text/html">
	<div>
		<div style="width:60px;display:inline-block;font-weight:bold">Language</div>
		<select style="width:200px" data-bind="options: languages, optionsText: 'name', value: selectedLanguage, valueAllowUnset: false"></select>
	</div>
</script>

<script type="text/html" id="tmplAddCustomLocItemDialog">
	<div style="width: 100%; padding-top: 20px"><b>Name:</b> <input type="text" style="width: 330px" data-bind="value: name" /></div>
	<div style="width: 100%; padding-top: 20px"><b>Label:</b> <input type="text" style="width: 330px" data-bind="value: label" /></div>
</script>

<script type="text/html" id="tmplLocalizationEditorPropertyPanel">
	<div class="propertyBar">
		<div class="propertyGroup">
			<div class="property">
				<div class="propertyName" title="Language Selection">Language Selection</div>
				<div class="propertyValue">
					<select data-bind="value: selectLanguageMode, valueAllowUnset: false, enable: !isReadOnly">
						<!-- ko if: isNqp -->
						<option value="0">Disallow</option>
						<option value="1">Allow</option>
						<!-- /ko -->
						<!-- ko ifnot: isNqp -->
						<option value="0">Automatic</option>
						<option value="1">Selected by User</option>
						<!-- /ko -->
					</select>
				</div>
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplBasePageDialog">
	<div
		class="basePageDialog"
		style="height: 100%"
		data-bind="template: { name: page.TemplateName, data: page, afterRender: function(elements) { page.Appended(elements); } }"
	></div>
</script>
<script type="text/html" id="tmplQuestionsLayoutEditor">
	<resco-grideditor
		class="questionsLayoutEditor"
		params="editor: editor"
		data-bind="css: { hasLeftPanelInvoker: hasLeftPanelInvokerVisible(), hasRightPanelInvoker: hasRightPanelInvokerVisible() }"
	></resco-grideditor>
</script>

<script type="text/html" id="tmplQuestionsLayoutItemProperties">
	<div class="propertyBar">
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Question</div>
			<div class="property">
				<div class="propertyName" title="Name">Name</div>
				<div class="propertyValue">
					<input type="text" data-bind="value: label, enable: false" />
				</div>
			</div>
		</div>
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Layout</div>
			<div class="property">
				<div class="propertyName" title="Column">Column</div>
				<div class="propertyValue">
					<input type="number" data-bind="value: column, enable: !isReadOnly" />
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Row">Row</div>
				<div class="propertyValue">
					<input type="number" data-bind="value: row, enable: !isReadOnly" />
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Column Span">Column Span</div>
				<div class="propertyValue">
					<input type="number" data-bind="value: colSpan, enable: !isReadOnly" />
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Row Span">Row Span</div>
				<div class="propertyValue">
					<input type="number" data-bind="value: rowSpan, enable: !isReadOnly" />
				</div>
			</div>
		</div>
		<!-- ko if: showBorderProperties -->
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Border</div>
			<div class="property">
				<div class="propertyName" title="Color">Color</div>
				<div class="propertyValue" style="cursor: pointer">
					<div
						style="width: 35px; height: 100%; border: solid 1px black; display: inline-block"
						data-bind="cbColorPicker: borderColor, style: {background: borderColor()}"
					></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: borderColor, text: borderColor"></span>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Left">Left</div>
				<div class="propertyValue">
					<input type="number" data-bind="value: borderThickness.Left, enable: !isReadOnly" />
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Top">Top</div>
				<div class="propertyValue">
					<input type="number" data-bind="value: borderThickness.Top, enable: !isReadOnly" />
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Right">Right</div>
				<div class="propertyValue">
					<input type="number" data-bind="value: borderThickness.Right, enable: !isReadOnly" />
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Bottom">Bottom</div>
				<div class="propertyValue">
					<input type="number" data-bind="value: borderThickness.Bottom, enable: !isReadOnly" />
				</div>
			</div>
		</div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplQuestionsLayoutRowProperties">
	<div class="propertyBar">
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Row</div>
			<div class="property">
				<div class="propertyName" title="AutoHeight">AutoHeight</div>
				<div class="propertyValue">
					<input type="checkbox" data-bind="checked: data.autoHeight, enable: !isReadOnly" />
				</div>
			</div>
			<!-- ko if: !data.autoHeight() -->
			<div class="property">
				<div class="propertyName" title="Height">Height</div>
				<div class="propertyValue">
					<input type="number" data-bind="value: data.height, enable: !isReadOnly" />
				</div>
			</div>
			<!-- /ko -->
		</div>
	</div>
</script>

<script type="text/html" id="tmplQuestionsLayoutColumnProperties">
	<div class="propertyBar">
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Column</div>
			<div class="property">
				<div class="propertyName" title="Width">Width</div>
				<div class="propertyValue">
					<input type="number" data-bind="value: data.width, enable: !isReadOnly" />
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Size Type">Size Type</div>
				<div class="propertyValue">
					<select data-bind="value: data.sizeType, options: data.sizeTypes, optionsText: 'value', optionsValue: 'key',  enable: !isReadOnly"></select>
				</div>
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplQuestionsListViewItem">
	<div class="questionsListViewItem" data-bind="css: { questionsListViewItem__selected: isSelected() }">
		<span class="questionsListViewItem__index" data-bind="text: $index() + 1"></span>
		<div class="questionsListViewItem__label">
			<span class="questionsListViewItem__label__inner" data-bind="text: label"></span>
		</div>
	</div>
</script>

<script type="text/html" id="tmplQuestionsLayoutGridCellContent">
	<div class="questionsLayoutGridCellContent gridEditorCell" data-bind="css: { questionsLayoutGridCellContent__selected: isSelected }">
		<div class="questionsLayoutGridCellContent__index">
			<span data-bind="text: $index() + 1"></span>
			<div class="questionsLayoutGridCellContent__index__icon">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
		<span class="questionsLayoutGridCellContent__label" data-bind="text: label"></span>
	</div>
</script>
<script type="text/html" id="tmplQuestionsListView">
	<div class="questionsListView">
		<h1 class="questionsListView__header">Questions in order</h1>
		<div class="questionsListView__list" data-bind="foreach: items">
			<div class="questionsListView__item" data-bind="click: $parent.select.bind($parent, $data)">
				<!-- ko template: {name: itemTemplateName()} --><!-- /ko -->
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplQWizardDialog">
	<div class="qWizardDialog"><!-- ko template: { name: pageTemplateName } --><!-- /ko --></div>
</script>

<script type="text/html" id="tmplQWizardDialogStartPage">
	<div class="qWizardDialog__startOptions">
		<div class="qWizardDialog__startOption"
			data-bind="click: setStartOption.bind($data, startOptions[0]), css: {qWizardDialog__startOption__selected: selectedStartOption() === startOptions[0]}">
			<i class="questionnairesprite icon-questionnaire_QWizardDialog_blank"></i>
			<br />
			<h1>Blank Template</h1>
		</div>
		<div class="qWizardDialog__startOption"
			data-bind="click: setStartOption.bind($data, startOptions[1]), css: {qWizardDialog__startOption__selected: selectedStartOption() === startOptions[1]}">
			<i class="questionnairesprite icon-questionnaire_QWizardDialog_xls"></i>
			<br />
			<h1>Import from Excel</h1>
		</div>
		<!-- <div class="qWizardDialog__startOption"
			data-bind="click: setStartOption.bind($data, startOptions[2]), css: {qWizardDialog__startOption__selected: selectedStartOption() === startOptions[2]}, visible: canParseForm">
			<i class="questionnairesprite icon-questionnaire_QWizardDialog_pdf"></i>
			<h1>Scan and Extract</h1>
		</div> -->
		<div class="qWizardDialog__startOption"
			data-bind="click: setStartOption.bind($data, startOptions[3]), css: {qWizardDialog__startOption__selected: selectedStartOption() === startOptions[3]}">
			<i class="questionnairesprite icon-questionnaire_QWizardDialog_ai"></i>
			<br />
			<h1>AI Assistant</h1>
		</div>
	</div>
	<div class="qWizardDialog__page qWizardDialog__startPage">
		<!-- <div class="qWizardDialog__page__helpText" data-bind="visible: selectedStartOption() === startOptions[0]">
			<p>Looking for some inspiration? Find useful free templates in
				<a target="_blank" href="https://www.resco.net/library">Resco Template Library</a>.
			</p>
		</div> -->
		<div class="qWizardDialog__page__helpText" data-bind="visible: selectedStartOption() === startOptions[1]">
			<h1>import data from Excel spreadsheet</h1>
			<p>Do you have questions in text format and want to import them all at once?
			<ol>
				<li>Copy and paste questions into this
					<a target="_blank" href="https://resco.net/downloads/inspections_import_template.zip">Excel document</a>
					and follow the pre-defined structure.
				</li>
				<li>Import the Excel document with the <b>SELECT FILE</b> button.</li>
			</ol>
			<a target="_blank" href="https://docs.resco.net/wiki/Questionnaire_Designer#Import_XLS.2FCSV">Learn more about the
				functionality ›</a>
			</p>
		</div>
		<!-- ko if: selectedStartOption() === startOptions[0] -->
		<!--ko template: 'tmplQWizardDialogSummary' --><!-- /ko -->
		<!-- /ko -->
		<div class="qWizardDialog__page__helpText" data-bind="visible: selectedStartOption() === startOptions[2]">
			<h1>Import existing form with “Scan & Extract” tool.
				<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
			</h1>
			<table>
				<tr>
					<td>Supported formats:</td>
					<th>PDF or PNG.</th>
				</tr>
				<tr>
					<td>File size limit:</td>
					<th>Maximum 10MB and less than 10 pages long.</th>
				</tr>
			</table>
			<!-- ko ifnot: amazonCredentialsEntered -->
			<p>Document transformation utilizes Amazon Textract service.
			We provide you with initial complimentary <b>credit of <span data-bind="text: maxParseFormUsageCount"></span> pages</b>.
			You've uploaded <b>
			<b data-bind="css: { qWizardDialog__page__errorText: formParserMaxUsageExceeded }">
				<span data-bind="text: parseFormUsageCount"></span>/<span data-bind="text: maxParseFormUsageCount"></span></b>
			pages
			<span data-bind="visible: formParserMaxUsageExceeded"> and used all complimentary credits.</span>
			<span data-bind="visible: !formParserMaxUsageExceeded()"> so far.</span>
			</b>
			</p>

			<p>Click on the button below to enter your own Amazon Textract credentials.
				You can learn more about the service and create an account
				<a target="_blank" href="https://docs.resco.net/wiki/Questionnaire_Designer#Import_PDF.2Fimage">here</a>.
			</p>
			<!-- /ko -->
			<!-- ko if: amazonCredentialsEntered -->
			<p>
				Click on the gear icon below to change your Amazon Textract credentials. You can learn more about the
				service <a target="_blank" href="https://docs.resco.net/wiki/Questionnaire_Designer#Import_PDF.2Fimage">here</a>.
			</p>
			<!-- /ko -->
			<div class="qWizardDialog__page__configureTextract">
				<!-- ko ifnot: showTextractCredentials -->
				<div data-bind="click: function() {showTextractCredentials(true)}" class="qWizardDialog__page__configureTextract__button">
					<span>Amazon Textract Credentials</span>
				</div>
				<!-- /ko -->
				<!-- ko if: showTextractCredentials -->
				<h3 class="qWizardDialog__page__title">Amazon Credentials</h3>
				<div class="qWizardDialog__textractCredentials">
					<div class="qWizardDialog__textractCredentials__field">
						<label for="userAwsAccessKeyId">Access Key Id</label>
						<input name="userAwsAccessKeyId" data-bind="value: userAwsAccessKeyId" type="text">
					</div>
					<div class="qWizardDialog__textractCredentials__field">
						<label for="userAwsSecretAccessKey">Secret Access Key</label>
						<input name="userAwsSecretAccessKey" data-bind="value: userAwsSecretAccessKey" type="password">
					</div>
					<div class="qWizardDialog__textractCredentials__field">
						<label for="userAwsS3BucketName">S3 Bucket Name</label>
						<input name="userAwsS3BucketName" data-bind="value: userAwsS3BucketName" type="text">
					</div>
					<div class="qWizardDialog__textractCredentials__field">
						<label for="userAwsRegion">Region</label>
						<input name="userAwsRegion" data-bind="value: userAwsRegion" type="text">
					</div>
					<button data-bind="click: clearTextractCredentials">CLEAR</button>
				</div>
				<!-- /ko -->
			</div>
			<!-- ko if: showPrivacyConsent -->
			<h3 class="qWizardDialog__page__title">CONSENT</h3>
			<div class="qWizardDialog__page__consent">
				<input data-bind="checked: privacyConsentAgreed" type="checkbox">
				<p>I understand that the requested service is provided by Amazon Web Service and hereby I agree with Amazon Textract
					<a target="_blank" href="https://aws.amazon.com/service-terms/">Terms and Conditions</a> and
					<a target="_blank" href="https://aws.amazon.com/agreement/">Privacy Policy</a>.</p>
			</div>
			<!-- /ko -->
			<div class="qWizardDialog__page__warning">
				<div class="qWizardDialog__page__warning__separator"></div>
				<div>
					<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
					<div>
						<p><span><b>Preview feature</b></span>
							<span>By evaluating a Preview feature or software, Resco asks our customers to help improving the feature or
								software, and
								offers the opportunity to contribute to shaping it before the official release. It’s also a great
								opportunity to test if
								it is suitable for your specific use case.</span>
						</p>
					</div>
				</div>
			</div>
		</div>
		<div class="qWizardDialog__page__helpText" data-bind="visible: selectedStartOption() === startOptions[3]">
			<h1>Describe your form</h1>
			<p>Enter a description of the form you want to create. The more details you provide, the better the AI will understand your needs.
			You may also upload a sample file to help the AI generate a questionnaire that meets your requirements.</p>
			<div style="border: solid 1px rgba(0, 0, 0, 0.157); border-radius: 8px; background: white; padding: 12px">
				<textarea data-bind="value: aiPrompt" placeholder="Enter a description of the form you want to create" style="width: 100%; box-sizing: border-box; height: 15em; font-size: 16px; font-family: 'Segoe UI'; border: 0px; outline: none; resize: none"></textarea>
				<input type="file" data-bind="event: { change: onFileSelected }" />
			</div>
		</div>
	</div>
	<div class="qWizardDialog__footer">
		<button data-bind="click: cancel" class="qWizardDialog__footer__button qWizardDialog__footer__button__secondary">CANCEL</button>
		<!-- ko if: selectedStartOption() === startOptions[0] -->
		<button data-bind="click: next, enable: nextEnabled" class="qWizardDialog__footer__button qWizardDialog__footer__button__secondary qWizardDialog__footer__button__margin">SETTINGS</button>
		<button data-bind="click: create" class="qWizardDialog__footer__button qWizardDialog__footer__button__primary">CREATE</button>
		<!-- /ko -->
		<!-- ko if: selectedStartOption() === startOptions[1] -->
		<button data-bind="click: next, enable: nextEnabled" class="qWizardDialog__footer__button qWizardDialog__footer__button__primary qWizardDialog__footer__button__margin">SELECT FILE</button>
		<!-- /ko -->
		<!-- ko if: selectedStartOption() === startOptions[2] -->
		<button data-bind="click: next, enable: nextEnabled" class="qWizardDialog__footer__button qWizardDialog__footer__button__primary qWizardDialog__footer__button__margin">SCAN & EXTRACT</button>
		<!-- /ko -->
		<!-- ko if: selectedStartOption() === startOptions[3] -->
		<button data-bind="click: next, enable: nextEnabled" class="qWizardDialog__footer__button qWizardDialog__footer__button__primary qWizardDialog__footer__button__margin">GENERATE</button>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplQWizardDialogSummary">
	<div class="qWizardDialog__page__summary">
		<h2>QUESTIONNAIRE SETTINGS</h2>
		<div class="qWizardDialog__page__summary__inner">
			<table>
				<tr data-bind="style: {display: canChangeDataModel ? 'table-row' : 'none'}">
					<td>Player Technology</td>
					<th>
						<div>
							<span data-bind="text: dataModelSgmCtrl.label"></span>
							<!-- ko if: dataModelSgmCtrl.value() !== newDataModelOption.value() -->
							<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
							<!-- /ko -->
						</div>
					</th>
				</tr>
				<tr>
					<td>Versioning</td>
					<th>
						<div>
							<span data-bind="text: versioningSgmCtrl.label"></span>
							<!-- ko if: versioningSgmCtrl.value() !== onVersioningOption.value() -->
							<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
							<!-- /ko -->
						</div>
					</th>
				</tr>
				<tr>
					<td>Dependency</td>
					<th>
						<div>
							<span data-bind="text: templateDependentSgmCtrl.label"></span>
							<!-- ko if: templateDependentSgmCtrl.value() !== fullDependencyOption.value() -->
							<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
							<!-- /ko -->
						</div>
					</th>
				</tr>
				<tr>
					<td>Answer Storage</td>
					<th>
						<div>
							<span data-bind="text: storageSgmCtrl.label"></span>
							<!-- ko if: storageSgmCtrl.value() === legacyJSONStorageOption.value() -->
							<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
							<!-- /ko -->
						</div>
					</th>
				</tr>
				<!-- ko if: possibleAnswerEntities.length > 1 -->
				<tr>
					<td>Answer Entity</td>
					<th>
						<div>
							<span data-bind="text: answerEntity"></span>
							<!-- ko if: answerEntity() === "resco_questionnaire" -->
							<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
							<!-- /ko -->
						</div>
					</th>
				</tr>
				<!-- /ko -->
				<tr>
					<td>Score</td>
					<th data-bind="text: scoringSgmCtrl.label"></th>
				</tr>
			</table>
		</div>
		<!-- ko if: isSomePropertyDeprecated-->
		<div class="qWizardDialog__page__warning">
			<div class="qWizardDialog__page__warning__separator"></div>
			<div>
				<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
				<div>
					<p>
						<span>
							We encourage changing 'Questionnaire settings' to the recommended configuration. Optionally, you can adjust individual options in
							'Settings'.
						</span>
						<span
							><a target="_blank" href="https://docs.resco.net/wiki/Deprecations#Active_deprecations">Learn more</a> about the upcoming changes.</span
						>
					</p>
					<button data-bind="click: setToRecommended">Set to recommended</button>
				</div>
			</div>
		</div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplQWizardDialogUploadPage">
	<div class="qWizardDialog__page qWizardDialog__uploadPage">
		<!-- ko template: { name: 'tmplUploadTemplateComponent', data: uploadTemplateComponent } -->
		<!-- /ko -->
	</div>
	<div class="qWizardDialog__footer">
		<button data-bind="click: back" class="qWizardDialog__footer__button qWizardDialog__footer__button__secondary">BACK</button>
		<button
			data-bind="click: next, enable: nextEnabled"
			class="qWizardDialog__footer__button qWizardDialog__footer__button__primary qWizardDialog__footer__button__margin"
		>
			NEXT
		</button>
	</div>
</script>

<script type="text/html" id="tmplQWizardDialogSummaryPage">
	<div class="qWizardDialog__page"><!--ko template: 'tmplQWizardDialogSummary' --><!-- /ko --></div>
	<div class="qWizardDialog__footer">
		<button data-bind="click: back" class="qWizardDialog__footer__button qWizardDialog__footer__button__secondary">BACK</button>
		<button
			data-bind="click: next, enable: nextEnabled"
			class="qWizardDialog__footer__button qWizardDialog__footer__button__secondary qWizardDialog__footer__button__margin"
		>
			SETTINGS
		</button>
		<button data-bind="click: create" class="qWizardDialog__footer__button qWizardDialog__footer__button__primary">CREATE</button>
	</div>
</script>

<script type="text/html" id="tmplQWizardDialogFirstPage">
	<div class="qWizardDialog__page">
		<!-- ko if: canUseNewDataModel -->
		<div class="qWizardDialog__page__property">
			<p class="qWizardDialog__page__property__title">DATA MODEL</p>
			<div class="qWizardDialog__page__property__content">
				<div data-bind="template: { name: 'tmplSegmentedControl', data: dataModelSgmCtrl }"></div>
				<!-- ko if: dataModelSgmCtrl.value() === "Gen 1" -->
				<!-- <i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i> -->
				<!-- /ko -->
			</div>
			<!-- ko if: dataModelSgmCtrl.value() === "Gen 1" -->
			<!-- <div class="qWizardDialog__page__warning">
				<div>
					<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
					<div>
						<p>
							<span>This data model is being deprecated and will not be supported in the future. We recommend switching to the new data model.</span>
							<span
								><a target="_blank" href="https://docs.resco.net/wiki/Deprecations#json">Learn more</a>
								about the upcoming changes and how to switch or
								<a href="https://resconet.atlassian.net/servicedesk/customer/portal/3" target="_blank">Contact us</a>.</span
							>
						</p>
					</div>
				</div>
			</div> -->
			<!-- /ko -->
			<p class="qWizardDialog__page__property__help">
				<span
					>Choose the type of player that this questionnaire is designed to run on. Select “Gen 1” (legacy) for the old proprietary player, or “Gen 2”
					(web-based) for the new modern version.</span
				>
				<span><b>Gen 2 is recommended for a faster, feature-rich experience.</b></span>
			</p>
		</div>
		<!-- /ko -->
		<div class="qWizardDialog__page__property">
			<p class="qWizardDialog__page__property__title">ANSWER STORAGE</p>
			<div class="qWizardDialog__page__property__content">
				<div data-bind="template: { name: 'tmplSegmentedControl', data: storageSgmCtrl }"></div>
				<!-- ko if: storageSgmCtrl.value() === legacyJSONStorageOption.value() -->
				<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
				<!-- /ko -->
			</div>
			<!-- ko if: storageSgmCtrl.value() === legacyJSONStorageOption.value() -->
			<div class="qWizardDialog__page__warning">
				<div>
					<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
					<div>
						<p>
							<span
								>This JSON format is being deprecated and will not be supported in the future. We recommend switching to the new JSON format with
								higher efficiency and configuration possibilities.</span
							>
							<span
								><a target="_blank" href="https://docs.resco.net/wiki/Deprecations#json">Learn more</a>
								about the upcoming changes and how to switch or
								<a href="https://resconet.atlassian.net/servicedesk/customer/portal/3" target="_blank">Contact us</a>.</span
							>
						</p>
					</div>
				</div>
			</div>
			<!-- /ko -->
			<p class="qWizardDialog__page__property__help">
				<span
					><b>JSON format</b> offers faster synchronization compared with the Records option. It allows adjusting serialization properties (i.e. what
					will be included in the answer field).</span
				>
				<span
					>With <b>Records</b> storage option, each question answer is saved as an individual record. Records synchronization is significantly slower
					compared with the JSON but records allow working with the data directly without processing.
					<a target="_blank" href="https://docs.resco.net/wiki/Answer_Storage">Learn more ›</a></span
				>
				<span>Recommended option: <b>JSON</b></span>
			</p>
		</div>
		<!-- ko if: canHaveSeparatedAnswer() -->
		<div class="qWizardDialog__page__property">
			<p class="qWizardDialog__page__property__title">ANSWER ENTITY</p>
			<div class="qWizardDialog__page__property__content">
				<div data-bind="template: { name: 'tmplSegmentedControl', data: answerEntitySgmCtrl }"></div>
			</div>
			<!-- ko if: answerEntity() === "resco_questionnaire" -->
			<div class="qWizardDialog__page__warning">
				<div>
					<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
					<div>
						<p>
							<span
								>If answered questionnaires are stored in the same entity as templates, you need to define more complex sync filters to get all the
								templates and only relevant answers onto the mobile device.<br />
								Having the answers stored in a separate entity allows the use of server-side security to filter only those records that are available
								to the user.</span
							>
							<span
								><a target="_blank" href="https://docs.resco.net/wiki/Deprecations#json">Learn more</a>
								about the upcoming changes and how to switch or
								<a href="https://resconet.atlassian.net/servicedesk/customer/portal/3" target="_blank">Contact us</a>.</span
							>
						</p>
					</div>
				</div>
			</div>
			<!-- /ko -->
			<p class="qWizardDialog__page__property__help">
				<span> <b>Answer entity</b> is an entity/table where the answered questionnaire data are stored. </span>
				<span>Recommended option: <b>resco_questionnaireanswer</b></span>
			</p>
		</div>
		<!-- /ko -->
	</div>
	<div class="qWizardDialog__footer">
		<button data-bind="click: back" class="qWizardDialog__footer__button qWizardDialog__footer__button__secondary">CLOSE</button>
		<button
			data-bind="click: next, enable: nextEnabled"
			class="qWizardDialog__footer__button qWizardDialog__footer__button__primary qWizardDialog__footer__button__margin"
		>
			NEXT
		</button>
	</div>
</script>

<script type="text/html" id="tmplQWizardDialogSecondPage">
	<div class="qWizardDialog__page">
		<div class="qWizardDialog__page__property">
			<p class="qWizardDialog__page__property__title">DEPENDENCY</p>
			<div class="qWizardDialog__page__property__content">
				<div data-bind="template: { name: 'tmplSegmentedControl', data: templateDependentSgmCtrl }"></div>
				<!-- ko if: templateDependentSgmCtrl.value() !== fullDependencyOption.value() -->
				<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
				<!-- /ko -->
			</div>
			<!-- ko if: templateDependentSgmCtrl.value() !== fullDependencyOption.value() -->
			<div class="qWizardDialog__page__warning">
				<div>
					<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
					<div>
						<p>
							<span
								>This configuration option is being deprecated and will not be supported in the future.
								<a target="_blank" href="https://docs.resco.net/wiki/Deprecations#dependency">Learn more</a> about the upcoming changes.</span
							>
						</p>
					</div>
				</div>
			</div>
			<!-- /ko -->
			<p class="qWizardDialog__page__property__help">
				<span>No dependency saves questionnaire template data with each answered questionnaire.</span>
				<span
					>Dependency allows excluding questionnaire template data from each answered questionnaire and saves database space.
					<a target="_blank" href="https://docs.resco.net/wiki/Best_practices_for_deploying_Inspections#Eliminate_redundant_data"
						>Learn more ›</a
					></span
				>
				<span>Recommended option: <b>On</b></span>
			</p>
		</div>
		<div class="qWizardDialog__page__property">
			<p class="qWizardDialog__page__property__title">VERSIONING</p>
			<div class="qWizardDialog__page__property__content">
				<div data-bind="template: { name: 'tmplSegmentedControl', data: versioningSgmCtrl }"></div>
				<!-- ko if: versioningSgmCtrl.value() !== onVersioningOption.value() -->
				<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
				<!-- /ko -->
			</div>
			<!-- ko if: versioningSgmCtrl.value() !== onVersioningOption.value() -->
			<div class="qWizardDialog__page__warning">
				<div>
					<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
					<div>
						<p>
							<span
								>This configuration option is being deprecated and will not be supported in the future.
								<a target="_blank" href="https://docs.resco.net/wiki/Deprecations#dependency">Learn more</a> about the upcoming changes.</span
							>
						</p>
					</div>
				</div>
			</div>
			<!-- /ko -->
			<p class="qWizardDialog__page__property__help">
				<span
					>Versioned templates grant you more control over the lifecycle of questionnaire templates.
					<a target="_blank" href="https://docs.resco.net/wiki/Questionnaire_Designer#Life_cycle_of_a_questionnaire_template">Learn more ›</a></span
				>
				<span>Recommended option: <b>On</b></span>
			</p>
		</div>
		<div class="qWizardDialog__page__property">
			<p class="qWizardDialog__page__property__title">SCORE</p>
			<div data-bind="template: { name: 'tmplSegmentedControl', data: scoringSgmCtrl }"></div>
			<p class="qWizardDialog__page__property__help">
				<span
					>Scoring allows you to assign a score to each answer. You can define ranges for overall score levels and quickly evaluate how the
					questionnaire was answered, e.g. pass or fail.
					<a target="_blank" href="https://docs.resco.net/wiki/Questionnaire_Designer#Scoring">Learn more ›</a>
				</span>
			</p>
		</div>
	</div>
	<div class="qWizardDialog__footer">
		<button data-bind="click: back" class="qWizardDialog__footer__button qWizardDialog__footer__button__secondary">BACK</button>
		<button
			data-bind="click: create"
			class="qWizardDialog__footer__button qWizardDialog__footer__button__primary qWizardDialog__footer__button__margin"
		>
			CREATE
		</button>
	</div>
</script>
<script type="text/html" id="tmplResultsEditor">
	<div style="display: flex; width: 100%; height: 100%">
		<div class="listView" data-bind="css: { hasLeftPanelInvoker: hasLeftPanelInvokerVisible() }">
			<div
				data-bind="grid: gridResults"
				data-definitiononly="false"
				data-twowaybinding="false"
				data-resetcolumns="false"
				data-resizablecolumns="true"
				style="flex: 1 1 auto; white-space:nowrap; height: 100%; width:100%"
			></div>
		</div>
		<!-- ko if: selectedResult() -->
		<div class="result-view" style="flex: 1 1 auto; height: 100%; width:100%">
			<span data-bind="click: closeResultView" class="result-view-close icon-commonui_icon_close_black" title="Close"></span>
			<a class="result-view-backToHeader" href="#result-view-header">
				<div class="icon-commonui_icon_arrow_up"></div>
			</a>
			<!-- ko with: selectedResult() -->
			<div class="result-view-header" id="result-view-header">
				<div class="result-view-header-item">
					<span class="result-view-item-label">Name</span>
					<span class="result-view-item-value" data-bind="text: questionnaire.name()"></span>
				</div>
				<div class="result-view-header-item">
					<span class="result-view-item-label">Regarding record</span>
					<span class="result-view-item-value" data-bind="text: questionnaire.regardingLabel"></span>
				</div>
				<div class="result-view-header-item">
					<span class="result-view-item-label">Last Modified By</span>
					<span class="result-view-item-value" data-bind="text: questionnaire.lastModifiedByLabel"></span>
				</div>
				<div class="result-view-header-item">
					<span class="result-view-item-label">Last Modified On</span>
					<span class="result-view-item-value" data-bind="text: questionnaire.lastModifiedOnLabel"></span>
				</div>
				<div class="result-view-header-item">
					<span class="result-view-item-label">Duration</span>
					<span class="result-view-item-value" data-bind="text: questionnaire.durationLabel"></span>
				</div>
				<div class="result-view-header-result-item">
					<div class="result-view-questionnaireResultAndScore">
						<span class="result-view-questionnaireResultAndScore-label">Overall result</span>
						<div class="result-view-resultAndScore">
							<!-- ko if: questionnaire.questionnaireResult !== "-" -->
							<span>Result</span>
							<div
								class="result-view-resultAndScore-result"
								data-bind="text: questionnaire.questionnaireResult, attr: { title: questionnaire.questionnaireResult }"
							></div>
							<!-- /ko -->
							<span>Score</span>
							<div class="result-view-resultAndScore-score" data-bind="text: questionnaire.score"></div>
						</div>
					</div>
					<!-- ko if: questionnaire.scoringEnabled() && questionnaire.groups.length > 0 -->
					<!-- ko if: showGroupsResults -->
					<div class="result-view-groupsResultsAndScores">
						<!-- ko foreach: questionnaire.groups -->
						<div class="result-view-groupResultAndScore">
							<a class="result-view-groupResultAndScore-label" data-bind="text: label, attr: { title: label, href: `#${name()}` }"></a>
							<div class="result-view-resultAndScore">
								<!-- ko if: result !== "-" -->
								<span>Result</span>
								<div class="result-view-resultAndScore-result" data-bind="text: result, attr: { title: result }"></div>
								<!-- /ko -->
								<span>Score</span>
								<div class="result-view-resultAndScore-score" data-bind="text: score"></div>
							</div>
						</div>
						<!-- /ko -->
					</div>
					<!-- /ko -->
					<div
						class="result-view-showResultsByGroups"
						data-bind="click: function() { showGroupsResults(!showGroupsResults()); }, text: showGroupsResults() ? 'Hide results by groups' : 'Show results by groups'"
					></div>
					<!-- /ko -->
				</div>
			</div>
			<div class="result-view-body">
				<div class="result-view-group">
					<div class="result-view-questions">
						<!-- ko foreach: questionItems -->
						<!-- ko template: { name: 'tmplResultViewQuestion' } --><!-- /ko -->
						<!-- /ko -->
					</div>
				</div>
				<!-- ko foreach: questionGroupItems -->
				<div class="result-view-group" data-bind="attr: { id: questionGroup.name }">
					<div class="result-view-group-label" data-bind="text: questionGroup.label"></div>
					<div class="result-view-questions">
						<!-- ko if: $parent.questionnaire.scoringEnabled() -->
						<div class="result-view-resultAndScore">
							<!-- ko if: questionGroup.result !== "-" -->
							<span>Result</span>
							<div class="result-view-resultAndScore-result" data-bind="text: questionGroup.result, attr: { title: questionGroup.result }"></div>
							<!-- /ko -->
							<span>Score</span>
							<div class="result-view-resultAndScore-score" data-bind="text: questionGroup.score"></div>
						</div>
						<!-- /ko -->
						<!-- ko foreach: questionItems -->
						<!-- ko template: { name: 'tmplResultViewQuestion' } --><!-- /ko -->
						<!-- /ko -->
					</div>
				</div>
				<!-- /ko -->
			</div>
			<!-- /ko -->
		</div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplResultViewQuestion">
	<div class="result-view-question-label" data-bind="text: question.label() ? question.label() : question.name()"></div>
	<!-- ko if: hasValue -->
	<!-- ko if: isText -->
	<div class="result-view-question-text" data-bind="text: text"></div>
	<!-- /ko -->
	<!-- ko if: isBinary -->
	<div class="resultItem__images__containter">
		<div class="resultItem__images">
			<!-- ko foreach: {data: atttachmentsSrc, as: 'src'} -->
			<img class="resultItem__image" data-bind="attr: { src: src }, click: $parent.openModal.bind($parent, src)" />
			<!-- /ko -->
		</div>
	</div>
	<!-- /ko -->
	<!-- ko if: isStatic -->
	<div>
		<img class="resultItem__image" data-bind="attr: { src: src }, click: openModal.bind($data, src())" />
	</div>
	<!-- /ko -->
	<!-- ko if: isVisual -->
	<canvas data-bind="canvas: canvas, event: { mousemove: onMouseMove, click: onMouseClick }" style="max-width: 100%;"></canvas>
	<!-- /ko -->
	<!-- /ko -->
	<!-- ko ifnot: hasValue -->
	<div class="result-view-question-text unanswered">Not provided</div>
	<!-- /ko -->
	<div class="resultItem__modalImage" data-bind="click: closeModal, css: { resultItem__modalImage__visible: !!modalImageSrc() }">
		<img data-bind="attr: { src: modalImageSrc }" />
		<span data-bind="click: closeModal" class="result-view-close icon-commonui_icon_close" title="Close"></span>
	</div>
</script>

<script type="text/html" id="tmplFilterPanel">
	<div class="leftPanel-wrapper">
		<!-- ko if: possibleAnswerEntities.length > 1 -->
		<b>Answer Entity</b>
		<select data-bind="options: possibleAnswerEntities, value: answerEntity, valueAllowUnset: false"></select>
		<!-- /ko -->
		<div class="filter-checkbox">
			<label for="autorun">Apply filter changes automatically</label>
			<input id="autorun" type="checkbox" data-bind="checked: autorun" />
		</div>
		<div class="filter-checkbox">
			<label for="completed">Completed</label>
			<input id="completed" type="checkbox" data-bind="checked: completed" />
		</div>
		<b>Created By</b>
		<select data-bind="options: owners, optionsText: 'name', value: selectedOwner, valueAllowUnset: false"></select>

		<!-- ko if: !fixedRegarding -->
		<b>Regarding Record</b>
		<div>
			<!-- ko ifnot: regardingRecord() -->
			<button class="filter-button-add" data-bind="click: selectRegardingClick">+ Add</button>
			<!-- /ko -->
			<!-- ko if: regardingRecord() -->
			<span
				style="text-decoration: underline; color: blue; cursor: pointer"
				data-bind="text: regardingRecordLabel, click: selectRegardingClick"
			></span>
			<span data-bind="click: clearRegardingClick" title="Clear" class="commonuisprite  icon-questionnaire_iconDelete"></span>
			<!-- /ko -->
		</div>
		<!-- /ko -->

		<b>Created Date</b>
		<div class="input-wrapper">
			<span>After</span>
			<div class="input_filter" data-bind="css: { 'input_filter__with-clear': createdAfter() }">
				<input data-bind="datetimepicker: createdAfter, datetimepicker-options: { hideTimePicker: true }" size="16" type="text" readonly="readonly" />
				<div class="input_filter-inlineClear">
					<span
						data-bind="click: function() { createdAfter(undefined); }, visible: createdAfter"
						title="Clear"
						class="commonuisprite  icon-questionnaire_iconDelete"
					></span>
				</div>
			</div>
		</div>

		<div class="input-wrapper">
			<span>Before</span>
			<div class="input_filter" data-bind="css: { 'input_filter__with-clear': createdBefore() }">
				<input
					data-bind="datetimepicker: createdBefore, datetimepicker-options: { hideTimePicker: true }"
					size="16"
					type="text"
					readonly="readonly"
				/>
				<div class="input_filter-inlineClear">
					<span
						data-bind="click: function() { createdBefore(undefined); }, visible: createdBefore"
						title="Clear"
						class="commonuisprite  icon-questionnaire_iconDelete"
					></span>
				</div>
			</div>
		</div>

		<b>Result</b>
		<input type="text" data-bind="value: questionnaireResult" />

		<b>Score</b>
		<div style="display: flex">
			<select
				style="margin-right: 5px"
				data-bind="options: QuestionnaireBuilder.UI.RangeFilter.operators, value: scoreFilter.operator, valueAllowUnset: false"
			></select>
			<input data-bind="value: scoreFilter.strRange1" size="4" type="number" step="any" />
			<!-- ko if: scoreFilter.operator() === "Between" -->
			<input style="margin-left: 5px" data-bind="value: scoreFilter.strRange2" size="4" type="number" step="any" />
			<!-- /ko -->
		</div>

		<b>Duration</b>
		<div style="display: flex">
			<select
				style="margin-right: 5px; min-width: 75px"
				data-bind="options: QuestionnaireBuilder.UI.RangeFilter.operators, value: durationFilter.operator, valueAllowUnset: false"
			></select>
			<input data-bind="value: durationFilter.strRange1" size="4" type="number" step="1" />
			<select style="margin-left: 5px; width: 45px" data-bind="value: durationFilter.strRange1Unit">
				<option value="1">s</option>
				<option value="60">m</option>
				<option value="3600">h</option>
			</select>
			<br />
			<!-- ko if: durationFilter.operator() === "Between" -->
			<input style="margin-left: 5px" data-bind="value: durationFilter.strRange2" size="4" type="number" step="1" />
			<select style="margin-left: 5px; width: 45px" data-bind="value: durationFilter.strRange2Unit">
				<option value="1">s</option>
				<option value="60">m</option>
				<option value="3600">h</option>
			</select>
			<!-- /ko -->
		</div>

		<b>Template</b>
		<select data-bind="options: templates, optionsText: 'name', value: selectedTemplate, valueAllowUnset: false"></select>

		<!-- ko if: versions() && versions().length > 0 -->
		<b>Version</b>
		<select data-bind="options: versions, optionsText: 'name', value: selectedVersion, valueAllowUnset: false"></select>
		<!-- /ko -->

		<!-- ko template: { name: 'tmplDynamicFilter', foreach: dynamicFilters } --><!-- /ko -->

		<!-- ko if: questions() && questions().length > 0 -->
		<!-- ko template: { name: 'tmplAnswerGroupFilterItem', data: simpleAnswerFilter } --><!-- /ko -->
		<!-- /ko -->

		<!-- ko ifnot: autorun -->
		<div class="button-search-wrapper">
			<button class="button-search" data-bind="click: onFilterChanged.bind($data, true)">Search</button>
		</div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplSimpleAnswerFilterItem">
	<div style="border: solid 1px silver; padding: 5px">
		<span
			style="text-decoration: underline; color: blue; cursor: pointer"
			data-bind="click: removeAnswerClick"
			title="Remove"
			class="commonuisprite  icon-questionnaire_iconDelete close-icon"
		></span>
		<select data-bind="options: filterPanel.questions, optionsText: 'displayLabel', value: question"></select
		><br />
		<select data-bind="options: operators, value: operator"></select
		><br />
		<!-- ko if: valueTemplateName() -->
		<!-- ko template: { name: valueTemplateName } --><!-- /ko -->
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplFilterStringValue">
	<input type="text" data-bind="value: value" />
</script>

<script type="text/html" id="tmplFilterMultiChoiceValue">
	MultiChoice
</script>

<script type="text/html" id="tmplFilterNumericValue">
	<input type="number" step="any" data-bind="value: value" />
</script>

<script type="text/html" id="tmplFilterPicklistValue">
	<select data-bind="options: options, optionsText: 'value', optionsValue: 'key', value: value"></select>
</script>

<script type="text/html" id="tmplFilterLookupValue">
	<span style="text-decoration: underline; color: blue; cursor: pointer" data-bind="text: lookupLabel, click: selectLookupClick"></span>
</script>

<script type="text/html" id="tmplFilterDateTimeValue">
	<input
		data-bind="datetimepicker: value, datetimepicker-options: { hideTimePicker: question().format() === QuestionnaireBuilder.Data.QuestionDisplayFormat.DateOnly }"
		size="16"
		type="text"
		readonly="readonly"
		style="width: 120px"
	/>
</script>

<script type="text/html" id="tmplAnswerGroupFilterItem">
	<div style="width: 100%; padding: 5px" data-bind="style: {backgroundColor: level > 1 ? '#E2E2E2' : '#F2F2F2'}">
		<!-- ko foreach: items -->
		<!-- ko template: { name: templateName } --><!-- /ko -->
		<!-- ko if: $index() !== $parent.items().length - 1 -->
		<div class="separator_filter" data-bind="text: $parent.logicalOperator()"></div>
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: items().length === 0 -->
		<button class="filter-button-add" data-bind="click: addAnswerClick">+ Add Answer Filter</button>
		<!-- /ko -->
		<!-- ko if: items().length > 0 && level < 2 -->
		<span style="text-decoration: underline; color: blue; cursor: pointer" data-bind="click: andClick">And</span> |
		<span style="text-decoration: underline; color: blue; cursor: pointer" data-bind="click: orClick">Or</span>
		<!-- /ko -->
	</div>
</script>
<script type="text/html" id="tmplCloneDialog">
	<div style="width: 100%; padding-top: 20px"><b>Label:</b> <input type="text" style="width: 330px" data-bind="value: name" /></div>
</script>
<script type="text/html" id="tmplDemoDataDialog">
	<ul>
		<!-- ko foreach: demoData.verticals -->
		<li>
			<div style="cursor: pointer; padding: 5px; display: flex" data-bind="click: toggleExpand">
				<i class="questionnairesprite icon-questionnaire_Folder"></i>
				<span style="padding-left: 5px" data-bind="text: name"></span>
			</div>
			<!-- ko if: expanded() -->
			<ul style="margin-left: 20px; margin-top: 10px">
				<!-- ko foreach: questionnaires -->
				<li>
					<input type="checkbox" data-bind="enable: enabled, checked: selected, attr: {id: id}" />
					<label style="font-weight: bold" data-bind="text: name, attr: {for: id}"></label>
					<br /><span style="padding-left: 25px" data-bind="text: description"></span><br /><br />
				</li>
				<!-- /ko -->
			</ul>
			<!-- /ko -->
		</li>
		<!-- /ko -->
	</ul>
</script>
<script type="text/html" id="tmplEditFolderDialog">
	<div style="width: 100%; padding-top: 20px">
		<b>Folder Name:</b> <input type="text" style="width: 330px" data-bind="value: folderName, attr: { maxlength: maxNameLength }" />
	</div>
</script>
<script type="text/html" id="tmplEnableVersioningDialog">
	<div>
		You are about to turn on the versioning on the questionnaire template '<span data-bind="text: questionnaire.name"></span>'.<br />
		This action <b>cannot</b> be reverted.<br />
	</div>
</script>
<script type="text/html" id="tmplMainPageStatusBar">
	<div class="statusBar">
		<div class="itemsCount">
			<!-- ko if: Editor() -->
			<!--Items: <span data-bind="text: Editor().questionnaireItems().length"></span>-->
			<!-- /ko -->
		</div>
	</div>
</script>

<script type="text/html" id="tmplQuestionnairesEditor">
	<div style="display: flex; width: 100%; height: 100%;">
		<div data-bind="attr:{ class:showGrid() ? 'listView':'cardView'}">
			<!-- ko if: !showGrid() -->
			<div class="questionnaireEditor" data-bind="css: { hasLeftPanelInvoker: hasLeftPanelInvokerVisible() }">
				<!-- ko foreach: displayedItems -->
				<!-- ko if: !showInTableOnly -->
				<div class="box" data-bind="multiClick: function(count) { multiClick(count); }, attr: { 'data-test': 'questionnairesEditor-cardView-' + $index() }, css: { 'firstRecentlyImportedItem': $index() === $parent.firstRecentlyImportedItemIndex() }">
					<!-- ko template: { name: templateName } --><!-- /ko -->
				</div>
				<!-- /ko -->
				<!-- /ko -->
				<div data-test="questionnairesEditor-cardView-createNew" class="box"">
					<div class="box__content box__newItem" data-bind="click: newQuestionnaireClick">
						<i class="questionnairesprite icon-questionnaire_Add_32"></i>
						<!-- ko if: !showSnippets() -->New Questionnaire<!-- /ko -->
						<!-- ko if: showSnippets() -->New Snippet<!-- /ko -->
					</div>
				</div>
			</div>
			<!-- /ko -->
			<!-- ko if: showGrid() -->
			<div
				data-bind="grid: gridQuestionnaires"
				data-definitiononly="false"
				data-twowaybinding="false"
				data-resizablecolumns="true"
				style="white-space:nowrap; height: calc(100% - 10px); width:100%"
			>
				<div data-columnname="Name" data-size="2*" data-horalign="left">
					<div style="width: 100%; height: 100%; padding: 5px 12px; display:flex;align-items:center">
						<!-- ko if: data instanceof QuestionnaireBuilder.UI.LevelUpItem -->..<!-- /ko -->
						<!-- ko if: data instanceof QuestionnaireBuilder.UI.FolderItem -->
						<i class="questionnairesprite icon-questionnaire_Folder_20"></i>
						<span style="padding-left:8px;" data-bind="text: data.data.name"></span>
						<!-- /ko -->
						<!-- ko if: data instanceof QuestionnaireBuilder.UI.QuestionnaireItem -->
						<!-- ko if: data.data.icon.imageB64() -->
						<div class="questionnaireIcon">
							<img data-bind="attr: { src: 'data:image/png;base64, ' + data.data.icon.imageB64() }" />
						</div>
						<!-- /ko -->
						<!-- ko if: !data.data.icon.imageB64() -->
						<i class="questionnairesprite icon-questionnaire_Questionnaire"></i>
						<!-- /ko -->
						<span style="padding-left:8px;" data-bind="text: data.data.name"></span>
						<!-- /ko -->
					</div>
				</div>
				<div data-columnname="Description" data-size="5*" data-horalign="left">
					<!-- ko if: data instanceof QuestionnaireBuilder.UI.QuestionnaireItem -->
					<div style="width: 100%; height: 100%; padding: 5px 12px" data-bind="text: data.data.description"></div>
					<!-- /ko -->
				</div>
				<div data-columnname="Status" data-size="*" data-horalign="center">
					<!-- ko if: data instanceof QuestionnaireBuilder.UI.QuestionnaireItem -->
					<div style="width: 100%; height: 100%; padding: 5px 12px; text-align:left;" data-bind="text: data.data.statusLabel"></div>
					<!-- /ko -->
				</div>
			</div>
			<!-- /ko -->
		</div>
	</div>
</script>

<script type="text/html" id="tmplRescoQuestionnairesEditorHeader">
	<div
		style="height: 37px;padding:5px 12px; font-weight: bold; display: flex; border-bottom: solid 1px #CCC; background: #EEEEEE; align-items: center"
	>
		<div data-test="questionnairesEditor-breadCrumb" style="flex: 1 1 auto; color: #7B7B7B; font-size: 12px">
			<!-- ko template: { name: 'tmplBreadCrumb', data: { folder: activeFolder(), editor: $data } } --><!-- /ko -->
		</div>
		<div class="viewToggle">
			<div
				class="viewToggle__button"
				data-test="questionnairesEditor-viewToggle-card"
				data-bind="click: onShowList, style: { backgroundColor: !showGrid() ? '#0066CC' : 'white' }"
			>
				<i data-bind="attr:{ class:'rescosdkcontrolssprite icon-questionnaire_'+(!showGrid()? 'CardSelected_24':'Card_24')}"></i>
			</div>
			<div
				class="viewToggle__button"
				data-test="questionnairesEditor-viewToggle-list"
				data-bind="click: onShowGrid, style: { backgroundColor: showGrid() ? '#0066CC' : 'white' }"
			>
				<i data-bind="attr:{ class:'rescosdkcontrolssprite icon-questionnaire_'+(showGrid()? 'ListSelected_24':'List_24') }"></i>
			</div>
		</div>
	</div>
</script>

<script type="text/html" id="tmplBreadCrumb">
	<div style="display:inline-block">
		<!-- ko if: folder.parentFolder() -->
		<!-- ko template: { name: 'tmplBreadCrumb', data: { folder: folder.parentFolder(), editor: editor } } --><!-- /ko -->
		<!-- /ko -->
		<!-- ko if: folder.data -->
		> <span style="cursor: pointer" data-bind="click: editor.selectFolder.bind(editor, folder), text: folder.data.name()"></span>
		<!-- /ko -->
		<!-- ko if: !folder.data -->
		<span
			style="cursor: pointer"
			data-bind="click: editor.selectFolder.bind(editor, folder), text: editor.showSnippets() ? 'Snippets List' : 'Questionnaires List'"
		></span>
		<!-- /ko -->
	</div>
</script>

<!--<script type="text/html" id="tmplLevelUpBox">
		<div class="shadowbox content" style="left: 0px; top: 0px; color: #0066CC; font-size: 22px; text-align: center; padding-top: 90px; height: 100%; width: 100%" data-bind="click: executeCommand.bind($data, QuestionnaireBuilder.UI.QuestionnairesEditor.CMD_UP)">
			<i class="questionnairesprite icon-questionnaire_UpFolder_32" /><br />
			..
		</div>
	</script>-->

<script type="text/html" id="tmplFolderBox">
	<div class="box__shadowbox box__content box__newFolder" data-bind="click: $parent.selectItem.bind($parent)">
		<div class="box__main">
			<div class="box__header">
				<div class="box__status">
					<div class="box__icon">
						<i class="questionnairesprite icon-questionnaire_Folder_32"></i>
					</div>
					<span class="box__status_label--orange">Folder</span>
				</div>
				<input type="checkbox" data-bind="checked: isSelected, visible: $parent.canSelectMultiple" />
			</div>
			<h1
				class="box__title"
				data-bind="attr:{title:data.name},text: data.name, click: executeCommand.bind($data, QuestionnaireBuilder.UI.QuestionnairesEditor.CMD_OPEN_FOLDER), clickBubble: false"
			></h1>
			<div class="box__description" data-bind="text: itemsCount() + ' item(s)'"></div>
		</div>
	</div>
</script>

<script type="text/html" id="tmplSelectedFolderBox">
	<div class="box__shadowbox box__content box__newFolder selected" data-bind="click: $parent.selectItem.bind($parent)">
		<div class="box__main">
			<div class="box__header">
				<div class="box__status">
					<div class="box__icon">
						<i class="questionnairesprite icon-questionnaire_Folder_32"></i>
					</div>
					<span class="box__status_label--orange">Folder</span>
				</div>
				<input type="checkbox" data-bind="checked: isSelected, visible: $parent.canSelectMultiple" />
			</div>
			<h1
				class="box__title"
				data-bind="attr:{title:data.name},text: data.name, click: executeCommand.bind($data, QuestionnaireBuilder.UI.QuestionnairesEditor.CMD_OPEN_FOLDER), clickBubble: false"
			></h1>
			<div class="box__description" data-bind="text: itemsCount() + ' item(s)'"></div>
		</div>
	</div>
</script>

<script type="text/html" id="tmplQuestionnaireBox">
	<!-- ko if: data.versioningEnabled -->
	<div class="box__shadowbox" style="left: 5px; top: 5px"></div>
	<!-- /ko -->
	<div
		class="box__content"
		data-bind="click: $parent.selectItem.bind($parent),css:{box__shadowbox:!data.versioningEnabled, box__nqpBackground:data.featureVersion() >= 1000}"
	>
		<div class="box__main">
			<div class="box__header">
				<div class="box__status">
					<!-- ko if: data.icon.imageB64() -->
					<div class="box__icon">
						<img data-bind="attr: { src: 'data:image/png;base64, ' + data.icon.imageB64() }" />
					</div>
					<!-- /ko -->
					<span class="box__status_label" data-bind="text: data.statusLabel, style: {color: statusColor}"></span>
				</div>
				<!-- ko if: data.versioningEnabled && data.versionList && data.versionList.questionnaires -->
				<span
					class="box__versionInfo"
					data-bind="text:'Ver. '+(data.versionList.questionnaires[data.versionList.questionnaires.length - 1].version()), click: executeCommand.bind($data, QuestionnaireBuilder.UI.QuestionnairesEditor.CMD_VERSION_HISTORY), clickBubble: false"
					style="overflow: hidden"
				></span>
				<!-- /ko -->
				<input type="checkbox" data-bind="checked: isSelected, visible: $parent.canSelectMultiple" />
			</div>
			<h1
				class="box__title"
				data-bind="attr:{title:data.name},text: data.name, click: executeCommand.bind($data, QuestionnaireBuilder.UI.QuestionnairesEditor.CMD_EDIT), clickBubble: false"
			></h1>
			<div class="box__description" data-bind="text: data.description"></div>
			<!-- ko if: data.isSnippet -->
			<div class="snippet-info" data-bind="text: data.contentInfo" style="overflow: hidden"></div>
			<!-- /ko -->
		</div>
	</div>
</script>

<script type="text/html" id="tmplSelectedQuestionnaireBox">
	<!-- ko if: data.versioningEnabled -->
	<div class="box__shadowbox" style="left: 5px; top: 5px"></div>
	<!-- /ko -->
	<div
		class="box__shadowbox box__content selected"
		data-bind="click: $parent.selectItem.bind($parent), css:{box__nqpBackground:data.featureVersion() >= 1000}"
	>
		<div class="box__main">
			<div class="box__header">
				<div class="box__status">
					<!-- ko if: data.icon.imageB64() -->
					<div class="box__icon">
						<img data-bind="attr: { src: 'data:image/png;base64, ' + data.icon.imageB64() }" />
					</div>
					<!-- /ko -->
					<span class="box__status_label" data-bind="text: data.statusLabel, style: {color: statusColor}"></span>
				</div>
				<!-- ko if: data.versioningEnabled && data.versionList && data.versionList.questionnaires -->
				<span
					class="box__versionInfo"
					data-bind="text:'Ver. '+(data.versionList.questionnaires[data.versionList.questionnaires.length - 1].version()), click: executeCommand.bind($data, QuestionnaireBuilder.UI.QuestionnairesEditor.CMD_VERSION_HISTORY), clickBubble: false"
					style="overflow: hidden"
				></span>
				<!-- /ko -->
				<input type="checkbox" data-bind="checked: isSelected, visible: $parent.canSelectMultiple" />
			</div>
			<h1
				class="box__title"
				data-bind="attr:{title:data.name},text: data.name, click: executeCommand.bind($data, QuestionnaireBuilder.UI.QuestionnairesEditor.CMD_EDIT), clickBubble: false"
			></h1>
			<div class="box__description" data-bind="text: data.description"></div>
			<!-- ko if: data.isSnippet -->
			<div class="snippet-info" data-bind="text: data.contentInfo" style="overflow: hidden"></div>
			<!-- /ko -->
		</div>
		<div class="box__bottom" data-bind="visible: !$parent.canSelectMultiple()">
			<!-- ko if: !data.versioningEnabled || !data.isReadOnly -->
			<span
				class="box__bottom__btn"
				data-bind="click: executeCommand.bind($data, QuestionnaireBuilder.UI.QuestionnairesEditor.CMD_EDIT), clickBubble: false"
				>Edit</span
			>
			<!-- /ko -->
			<!-- ko if: data.versioningEnabled && data.isReadOnly-->
			<span
				class="box__bottom__btn"
				data-bind="click: executeCommand.bind($data, QuestionnaireBuilder.UI.QuestionnairesEditor.CMD_VIEW), clickBubble: false"
				>View</span
			>
			<!-- /ko -->
			<span
				class="box__bottom__btn"
				data-bind="click: executeCommand.bind($data, QuestionnaireBuilder.UI.QuestionnairesEditor.CMD_CLONE), clickBubble: false"
				>Clone</span
			>
			<span
				class="box__bottom__btn"
				data-bind="click: executeCommand.bind($data, QuestionnaireBuilder.UI.QuestionnairesEditor.CMD_DELETE), clickBubble: false"
				>Delete</span
			>
		</div>
	</div>
</script>
<script type="text/html" id="tmplPublishDialog">
	<div>
		You are about to publish the draft. Previously published version will be archived and you will not be able to modify it anymore. If you want to
		modify the published version, create a new revision.<br />
	</div>
	<br />
	<div style="width: 100%; padding-top: 20px">
		<b>Publish Notes:</b><br />
		<textarea type="text" style="width: 95%" rows="8" data-bind="value: comments"></textarea>
	</div>
</script>
<script type="text/html" id="tmplQuestionnairesFilterPanel">
	<div class="questionnairesEditorHeader" style="width: 100%; height: 100%; background: #F2F2F2; overflow: auto; border-right-width: 0px">
		<!-- ko foreach: items -->
		<div class="qehItem" data-bind=" click: select">
			<span data-bind="text: label"></span>
			<i data-bind="attr:{ class:'icon icon-commonui_'+(isSelected() ? 'Expanded_32':'Collapsed_32')}"></i>
		</div>
		<!-- ko if: isSelected() -->
		<!-- ko foreach: items -->
		<!-- ko if: isVisible() -->
		<div
			class="qehItemSmall"
			data-bind="css: { qehItemSelected: isSelected() }, click: select, attr: { 'data-test': 'questionniaresFilterPanel-filterItem-' + name }"
		>
			<span data-bind="text: label"></span>
		</div>
		<!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
		<div style="flex: 1 1 auto"></div>
	</div>
</script>
<script type="text/html" id="tmplReviseDialog">
	<div class="reviseDialog">
		<h1 class="reviseDialog__header">
			You are about to create a new <b>editable draft</b> based on the selected version of the questionnaire. This draft will allow you to make
			changes while preserving the original version, whether it's <b>archived</b> or currently <b>published</b>.
		</h1>
		<div data-bind="visible: draft">
			<p>
				<span class="reviseDialog__bold">Note:</span>
				There is already a draft of the new questionnaire version. By revising this version, that draft will be archived.
			</p>
		</div>
		<div class="reviseDialog__option" data-bind="visible: canReapplyAssociations">
			<p>Do you want to apply the associations from the previous version?</p>
			<div class="reviseDialog__input">
				<input id="cbAssociate" type="checkbox" data-bind="checked: reapplyAssociations" />
				<label class="reviseDialog__bold reviseDialog__clickable" for="cbAssociate">Apply</label>
			</div>
		</div>
		<div class="reviseDialog__option" data-bind="visible: canReuseMobileReport">
			<p>Do you want to reuse the reports associated with the previous version?</p>
			<div class="reviseDialog__input">
				<input id="cbReport" type="checkbox" data-bind="checked: reuseMobileReport" />
				<label class="reviseDialog__bold reviseDialog__clickable" for="cbReport">Reuse</label>
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplSelectFolderDialog">
	<div style="width: 100%; height: 100%; overflow: auto; padding: 10px; background: white; border: solid 1px black">
		<!-- ko template: { name: "tmplSelectFolderDialogItem", data: { folder: rootFolder, dialog: $data } } --><!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplSelectFolderDialogItem">
	<div style="width: 100%">
		<div>
			<div
				style="cursor: pointer; padding: 5px; border: dotted 1px silver"
				data-bind="click: dialog.selectFolder.bind(dialog, folder), style: {backgroundColor: folder === dialog.selectedFolder() ? '#D8F0F8' : 'transparent', borderWidth: folder === dialog.selectedFolder() ? '1px' : '0px'}"
			>
				<i class="questionnairesprite icon-questionnaire_Folder"></i>
				<span data-bind="text: folder.data ? folder.data.name : folder.rootFolderName"></span>
			</div>
			<div style="padding-left: 15px">
				<!-- ko foreach: folder.folders -->
				<!-- ko ifnot: $parent.dialog.excludedNodes.includes($data) -->
				<!-- ko template: { name: "tmplSelectFolderDialogItem", data: { folder: $data, dialog: $parent.dialog } } --><!-- /ko -->
				<!-- /ko -->
				<!-- /ko -->
			</div>
		</div>
	</div>
</script>
<script id="tmplComponentsList" type="text/html">
	<div class="componentsList">
		<!-- ko foreach: components -->
		<!-- ko template: {name: componentItemTemplateName }--><!-- /ko -->
		<!-- /ko -->
	</div>
</script>

<script id="tmplQuestionnaireComponent" type="text/html">
	<div
		class="component tooltipsource"
		data-bind="css: { disabled: !enabled }, attr: {'data-tooltip': enabled ? 'ComponentsList.' + name : 'QuestionnaireEditor.RequiredFeatureVersion2', 'data-test': 'componentsList-componentItem-' + name }, event : { dblclick: addButtonClicked }"
	>
		<div class="draggable-component" data-bind="cbDragItem: enabled ? $data : undefined">
			<div class="componentImage">
				<i data-bind="{ attr: { class: 'questionnairesprite icon-questionnaire_ComponentItems_' + imageName}}"></i>
			</div>
			<div class="componentLabel" data-bind="text: label"></div>
			<div class="componentAddIcon" data-bind="click: addButtonClicked">
				<i data-bind="attr: { 'data-test': 'componentsList-componentItem-' + name + '-add' }" class="questionnairesprite icon-questionnaire_Add"></i>
			</div>
			<div class="componentDragIcon">
				<i
					data-bind="attr: { 'data-test': 'componentsList-componentItem-' + name + '-drag' }"
					class="questionnairesprite icon-questionnaire_Drag"
				></i>
			</div>
		</div>
	</div>
</script>

<script id="tmplComponentItem" type="text/html">
	<div class="componentsHeader" data-bind="text: label"></div>
</script>

<script id="tmplComponentItemGhost" type="text/html">
	<div class="draggableComponentGhost" data-bind="text: label"></div>
</script>
<script type="text/html" id="tmplCreateSnippetDialog">
	<div style="width: 100%; padding-top: 20px">
		<b>Name:</b><br />
		<input type="text" style="width: 100%; box-sizing: border-box" data-bind="value: name" /><br />
		<br />
		<b>Description:</b><br />
		<input type="text" style="width: 100%; box-sizing: border-box" data-bind="value: description" /><br />
		<br />
		<span data-bind="html: infoLabel"></span><br />
		<br />
		<b>Folder</b>
		<div style="width: 100%; overflow: auto; padding: 10px; background: white; border: solid 1px black">
			<!-- ko template: { name: "tmplSelectSnippetFolderDialogItem", data: { folder: rootFolder, dialog: $data } } --><!-- /ko -->
		</div>
	</div>
</script>

<script type="text/html" id="tmplSelectSnippetFolderDialogItem">
	<div style="width: 100%">
		<div>
			<div
				style="cursor: pointer; padding: 5px; border: dotted 1px silver"
				data-bind="click: dialog.selectFolder.bind(dialog, folder), style: {backgroundColor: folder === dialog.selectedFolder() ? '#D8F0F8' : 'transparent', borderWidth: folder === dialog.selectedFolder() ? '1px' : '0px'}"
			>
				<i class="questionnairesprite icon-questionnaire_Folder"></i>
				<span data-bind="text: folder.data ? folder.data.name : folder.rootFolderName"></span>
			</div>
			<div style="padding-left: 15px">
				<!-- ko foreach: folder.folders -->
				<!-- ko if: $data !== $parent.dialog.excludedNode -->
				<!-- ko template: { name: "tmplSelectSnippetFolderDialogItem", data: { folder: $data, dialog: $parent.dialog } } --><!-- /ko -->
				<!-- /ko -->
				<!-- /ko -->
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplEditCommandsDialog">
	<div style="flex: 0 0 auto; height: 97px; position: relative;" data-bind="template: { name: 'tmplRescoToolbar', data: Toolbar}"></div>
	<div style="display:flex; flex-direction:row;flex:1 1 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: m_items -->
			<div
				style="display:flex; align-items:center; flex-direction:row"
				data-bind="multiClick: $parent.OnSelectedItemClick.bind($parent), style: {backgroundColor: (Selected() ? '#9ecfe9':'')}"
			>
				<!-- ko if: $parent.firstSavingCommandIndex === $index() -->
				<div
					class="tooltipsource"
					style="padding: 7px; flex: 0 0 auto; font-weight: bold"
					data-bind="text: Name"
					data-tooltip="QuestionnaireEditor.CommandDialog.FirstSavingCommand"
				></div>
				<!-- /ko -->
				<!-- ko ifnot: $parent.firstSavingCommandIndex === $index() -->
				<div style="padding: 7px; flex: 0 0 auto" data-bind="text: Name"></div>
				<!-- /ko -->
				<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>
				<!-- ko ifnot: $parent.isReadOnly -->
				<button style="flex:0 0 auto" data-bind="click: $parent.Button_Click.bind($parent), visible:OptionsVisibility">...</button>
				<!-- /ko -->
			</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: sortedAvailItems -->
			<div
				style="padding:7px;"
				data-bind="text:Name, multiClick: $parent.OnAvailableItemClick.bind($parent), style: {backgroundColor: (Selected() ? '#9ecfe9':'')}"
			></div>
			<!-- /ko -->
		</div>
	</div>
</script>
<script type="text/html" id="tmplEditLookupViewDialog">
	<div style="height: 100%; overflow: auto; padding: 0px; display: flex">
		<div style="flex: 1 1 auto">
			<div style="margin: 10px; padding: 5px; width: 640px; border: solid 1px black; background: #eee">
				<!-- ko template: { name: primaryCell.templateName + 'View', data: primaryCell } --><!-- /ko -->
				<!-- ko foreach: secondaryCells -->
				<!-- ko template: { name: templateName + 'View' } --><!-- /ko -->
				<!-- /ko -->
				<!-- ko if: secondaryCells().length <= 6 -->
				<span style="cursor: pointer; color: blue; text-decoration: underline; padding-left: 10px" data-bind="click: addRow">Add Row</span>
				<!-- /ko -->
			</div>
		</div>
		<!-- ko if: selectedCell() -->
		<div style="border-left: solid 1px #ddd; flex: 0 0 auto; background: #eee; padding: 10px">
			<!-- ko template: { name: selectedCell().templateName + 'Editor', data: selectedCell } --><!-- /ko -->
		</div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplLookupViewCellDefinitionView"></script>

<script type="text/html" id="tmplLookupViewCellDefinitionEditor"></script>

<script type="text/html" id="tmplLookupViewPrimaryCellDefinitionView">
	<div style="width: 100%; padding: 5px; cursor: pointer" data-bind="click: select">
		<div
			style="height: 32px; padding: 3px; width: 100%; border: solid 1px black; box-sizing: border-box; font-size: 16px"
			data-bind="text: binding() ? '[' + binding() + ']' : '', attr: {title: errMsg}, style: {backgroundColor: isSelected() ? '#ccc' : 'white', borderColor: errMsg() ? 'red' : 'black'}"
		></div>
	</div>
</script>

<script type="text/html" id="tmplLookupViewPrimaryCellDefinitionEditor">
	<div style="display: flex; width: 100%">
		<div style="flex: 0 0 70px; padding: 3px; line-height: 22px">Binding</div>
		<div style="flex: 1 1 auto; padding: 3px">
			<select
				type="text"
				style="width: 100%; padding: 2px"
				data-bind="options: editor.bindings, value: binding, valueAllowUnset: false, enable: !editor.isReadOnly"
			></select>
		</div>
	</div>
</script>

<script type="text/html" id="tmplLookupViewSecondaryCellDefinitionView">
	<div style="width: 100%; padding: 5px; padding-top: 0px; cursor: pointer; display: flex" data-bind="click: select">
		<!-- ko if: hasLabel() -->
		<div
			style="height: 26px; padding: 3px; flex: 0 0 160px; border: solid 1px black; box-sizing: border-box; color: #444; font-size: 12px; margin-right: 5px"
			data-bind="text: label, style: {backgroundColor: isSelected() ? '#ccc' : 'white'}"
		></div>
		<!-- /ko -->
		<div
			style="height: 26px; padding: 3px; flex: 1 1 auto; display: flex; border: solid 1px black; box-sizing: border-box; color: #444; font-size: 12px"
			data-bind="style: {backgroundColor: isSelected() ? '#ccc' : 'white', borderColor: errMsg() ? 'red' : 'black'}, attr: {title: errMsg}"
		>
			<div style="flex: 1 1 auto" data-bind="text: binding() ? '[' + binding() + ']' : ''"></div>
			<!-- ko if: isSelected() -->
			<div style="flex: 0 0 100; text-align: right; cursor: pointer; color: blue; text-decoration: underline" data-bind="click: remove">Remove</div>
			<!-- /ko -->
		</div>
	</div>
</script>

<script type="text/html" id="tmplLookupViewSecondaryCellDefinitionEditor">
	<!-- ko template: { name: 'tmplLookupViewPrimaryCellDefinitionEditor' } --><!-- /ko -->
	<div style="display: flex; width: 100%">
		<div style="flex: 0 0 70px; padding: 3px; line-height: 22px">Show Label</div>
		<div style="flex: 1 1 auto; padding: 3px">
			<input type="checkbox" data-bind="checked: hasLabel" />
		</div>
	</div>
	<!-- ko if: hasLabel() -->
	<div style="display: flex; width: 100%">
		<div style="flex: 0 0 70px; padding: 3px; line-height: 22px">Label</div>
		<div style="flex: 1 1 auto; padding: 3px">
			<input type="text" style="width: 100%; padding: 2px" data-bind="value: label" />
		</div>
	</div>
	<!-- /ko -->
</script>

<script type="text/html" id="tmplLookupViewImageCellDefinitionView">
	Image
</script>

<script type="text/html" id="tmplLookupViewImageCellDefinitionEditor"></script>
<script type="text/html" id="tmplEditSimpleRuleDialog">
	<div style="font-size: 1.3em; height: 100%; overflow: auto; padding: 0px; display: block">
		<div style="width: 100%; padding: 10px 10px 0px 10px; font-weight: bold" data-bind="text: infoLabel"></div>
		<!-- ko if: root() -->
		<!-- ko template: {name: root().templateName, data: root()} --><!-- /ko -->
		<!-- /ko -->
		<!-- ko if: groupLogicalOperator() -->
		<div style="padding: 10px">
			<!-- ko if: !isReadOnly -->
			<span style="font-weight: bold" data-bind="text: groupLogicalOperator"></span><br />
			<br />
			<span class="simpleRuleButton primary" data-bind="click: addNewGroup">add condition group</span>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- ko if: !groupLogicalOperator() && !isReadOnly -->
		<div style="padding: 10px">
			<div class="simpleRuleButton primary" style="width: 60px; text-align: center; display: inline-block" data-bind="click: groupAnd">and</div>
			<div class="simpleRuleButton primary" style="width: 60px; text-align: center; display: inline-block" data-bind="click: groupOr">or</div>
		</div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplSimpleRuleGroup">
	<div
		class="simpleRuleGroup"
		style="width: 100%; background: white; padding-bottom: 0px"
		data-bind="style: { paddingTop: canAddCondition ? '10px' : '0px'}"
	>
		<!-- ko foreach: items -->
		<!-- ko template: {name: $data.templateName} --><!-- /ko -->
		<!-- ko if: ($index() < ($parent.items().length - 1)) -->
		<div
			style="padding: 10px; width: 100%; font-weight: bold"
			data-bind="text: $parent.logicalOperator, style: {background: $parent.parent ? 'white' : '#f8f8f8'}"
		></div>
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: canAddCondition -->
		<div style="width: 100%; background: #f8f8f8; padding: 10px">
			<span class="simpleRuleButton primary" data-bind="click: addNewCondition">add condition</span>
		</div>
		<!-- /ko -->
	</div>
	<br />
</script>

<script type="text/html" id="tmplSimpleRuleCondition">
	<div
		class="simpleRuleCondition"
		data-bind="style: {background: validationError() ? 'red' : 'white', marginTop: parent ? '0px' : '10px', marginBottom: parent ? '0px' : '10px', paddingRight: parent && !editor.isReadOnly ? '65px' : 'inherit' }"
	>
		<!-- ko template: { name: 'tmplSimpleRulePathNode', data: variable.pathNode } --><!-- /ko -->
		<!-- ko if: variable.isSet() -->
		<div
			data-bind="rescoDropDown: {items: possibleOperators, emptyText: 'Select Operator', displayProperty: 'label', value: operator, readOnly: editor.isReadOnly}"
		></div>
		<!-- ko if: operator() && operator().arity > 1 -->
		<!-- ko if: !operator().constantOnly-->
		<div data-bind="rescoDropDown: {items: ['value', 'answer on'], emptyText: 'Select', value: argumentType, readOnly: editor.isReadOnly}"></div>
		<!-- /ko -->
		<!-- ko with: argument -->
		<!-- ko if: !isConstant() -->
		<!-- ko template: { name: 'tmplSimpleRulePathNode', data: variable.pathNode } --><!-- /ko -->
		<!-- /ko -->
		<!-- ko if: isConstant() -->
		<!-- ko template: { name: constantEditor, afterRender: onEditorRendered.bind($data) } --><!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: parent && !editor.isReadOnly -->
		<span class="simpleRuleButton secondary" style="position: absolute; right: 10px" data-bind="click: remove">remove</span>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplSimpleRulePathNode">
	<div
		data-bind="rescoDropDown: {items: filteredNodes, emptyText: 'Select', displayProperty: 'label', value: selectedNode, readOnly: !variable || variable.readOnly}"
	></div>
	<!-- ko if: selectedNode() && selectedNode().nodes.length > 0 -->
	<!-- ko template: { name: 'tmplSimpleRulePathNode', data: selectedNode } --><!-- /ko -->
	<!-- /ko -->
</script>

<script type="text/html" id="tmplSimpleRuleStringEditor">
	<input
		class="simpleRuleConstantEditor"
		type="text"
		style="border: solid 1px silver; padding: 3px; font-size: 1em"
		data-bind="value: constant.value, enable: !readOnly"
	/>
</script>

<script type="text/html" id="tmplSimpleRuleNumberEditor">
	<input
		class="simpleRuleConstantEditor"
		style="border: solid 1px silver; padding: 3px; font-size: 1em"
		type="number"
		step="any"
		data-bind="value: constant.value, enable: !readOnly"
	/>
</script>

<script type="text/html" id="tmplSimpleRuleDateTimeEditor">
	<!-- ko if: !readOnly -->
	<input
		class="simpleRuleConstantEditor"
		style="border: solid 1px silver; padding: 3px; font-size: 1em"
		data-bind="datetimepicker: constant.value"
		size="16"
		type="text"
		readonly="readonly"
	/>
	<!-- /ko -->
	<!-- ko if: readOnly -->
	<input
		class="simpleRuleConstantEditor"
		style="border: solid 1px silver; padding: 3px; font-size: 1em"
		data-bind="value: constant.value"
		size="16"
		type="text"
		readonly="readonly"
	/>
	<!-- /ko -->
</script>

<script type="text/html" id="tmplSimpleRuleOptionsEditor">
	<div
		class="simpleRuleConstantEditor"
		data-bind="rescoDropDown: {items: options, displayProperty: 'label', valueProperty: 'value', value: constant.value, readOnly: readOnly }"
	></div>
</script>

<script type="text/html" id="tmplSimpleRuleLookupEditor">
	<span
		class="simpleRuleConstantEditor"
		style="color: blue; cursor: pointer"
		data-bind="click: openLookupDialog, text: constant.value() ? constant.label() : 'Select entity'"
	></span>
</script>

<script type="text/html" id="tmplSimpleRuleTargetsPicker">
	<span
		class="simpleRuleConstantEditor"
		style="color: blue; cursor: pointer"
		data-bind="click: openLookupDialog, text: constant.value() ? constant.label() : 'Select entity'"
	></span>
</script>
<script type="text/html" id="tmplEntityMappingDialog">
	<div class="mappingWizard"><!-- ko template: { name: pageTemplate } --><!-- /ko --></div>
</script>

<script type="text/html" id="tmplWizardSelectSourceKind">
	<p>
		This feature allows you to link a question to a particular record field. You can read a field to populate the answer automatically or save the
		answer to a record field at the end – or both.
	</p>
	<br />
	<h1>Which record should be linked to this question?</h1>
	<br />
	<div class="action" data-bind="click: setRegardingSourceType">
		<i class="questionnairesprite icon-questionnaire_QuestionEditor_mappingType"></i>
		<div>
			<h2>Regarding record</h2>
		</div>
	</div>
	<p>Record from which the questionnaire was started will be used as a source of the data mapping.</p>
	<br />
	<div class="action" data-bind="click: setLookupSourceType">
		<i class="questionnairesprite icon-questionnaire_QuestionEditor_mappingType"></i>
		<h2>Record from a lookup question</h2>
	</div>
	<p>User will have to answer a lookup question to determine exactly which record will be used as a source of the data mapping.</p>
</script>

<script type="text/html" id="tmplWizardRegardingScenarios">
	<h1>Link regarding record</h1>
	<p>Define which entity the questionnaire is triggered from and then select the field you want to link.</p>
	<!-- ko foreach: regardingScenarios -->
	<div class="mappingScenario">
		<div style="flex: 4 4 auto">
			<span class="tooltipsource" data-tooltip="QuestionnaireEditor.MappingWizard.RegardingEntity">Entity</span><br />
			<select data-bind="options: availableTargets, optionsText: 'name', value: selectedTarget, enable: !$parent.isReadOnly"></select
			><br />
		</div>
		<div style="flex: 3 3 auto">
			<!-- ko if: selectedTarget() -->
			<span class="tooltipsource" data-tooltip="QuestionnaireEditor.MappingWizard.RegardingField">Field</span><br />
			<select
				data-bind="options: selectedTarget().bindableFields, value: selectedTarget().boundField, valueAllowUnset: true, optionsCaption: '(None)', enable: !$parent.isReadOnly"
			></select>
			<!-- /ko -->
		</div>
		<div class="removeScenario">
			<!-- ko if: $index() > 0 && !$parent.isReadOnly -->
			<i
				class="questionnairesprite icon-questionnaire_QuestionEditor_deleteScenario"
				data-bind="click: $parent.deleteRegardingScenario.bind($parent, $index())"
				title="Delete"
			></i>
			<!-- /ko -->
		</div>
	</div>
	<!-- /ko -->
	<br />
	<!-- ko ifnot: isReadOnly -->
	<div class="tooltipsource action" data-tooltip="QuestionnaireEditor.MappingWizard.AddRegardingScenario" data-bind="click: addRegardingScenario">
		<i class="questionnairesprite icon-questionnaire_Add"></i>
		<h2>Add another scenario</h2>
	</div>
	<!-- /ko -->
</script>

<script type="text/html" id="tmplWizardLookupTargets">
	<h1>Link record from a lookup question</h1>
	<br />
	<span class="tooltipsource" data-tooltip="QuestionnaireEditor.MappingWizard.ChooseLookup">Choose lookup question</span><br />
	<select data-bind="options: sourceList, value: source, optionsText: 'label', valueAllowUnset: true, enable: !isReadOnly"></select
	><br />
	<!-- ko if: source() -->
	<!-- ko foreach: source().targets -->
	<div class="mappingLookupTarget">
		<div style="flex: 0 0 50px">
			<i class="questionnairesprite icon-questionnaire_QuestionEditor_lookupTarget" style="margin: 10px"></i>
		</div>
		<div style="flex: 1 1 auto">
			<div style="display: inline-block" class="tooltipsource" data-tooltip="QuestionnaireEditor.MappingWizard.SelectLookupField">
				Select a field from the "<span style="font-weight: bold" data-bind="text: $data.name"></span>" entity
			</div>
			<br />
			<select
				data-bind="options: bindableFields, value: boundField, valueAllowUnset: true, optionsCaption: '(None)', enable: !$parent.isReadOnly"
			></select>
		</div>
	</div>
	<!-- /ko -->
	<!-- /ko -->
</script>

<script type="text/html" id="tmplWizardMappingMode">
	<h1>When to apply data mappings</h1>
	<p>Specify how you want to use the data mapping you just created.</p>
	<br />
	<!-- ko template: { name: 'tmplSetMappingModes' } --><!-- /ko -->
</script>

<script type="text/html" id="tmplSetMappingModes">
	<div style="display: flex">
		<div style="flex: 1 1 auto">
			<h1>Read data</h1>
			<label class="radioItem" data-bind="css: { radioItemSelected: mappingModeRead() === 1 }">
				<input type="radio" name="mappingRead" data-bind="checked: mappingModeRead, checkedValue: 1, enable: !isReadOnly" />
				When questionnaire created
			</label>
			<label class="radioItem" data-bind="css: { radioItemSelected: mappingModeRead() === 3 }">
				<input type="radio" name="mappingRead" data-bind="checked: mappingModeRead, checkedValue: 3, enable: !isReadOnly" />
				On create and on change
			</label>
			<label class="radioItem" data-bind="css: { radioItemSelected: mappingModeRead() === 0 }">
				<input type="radio" name="mappingRead" data-bind="checked: mappingModeRead, checkedValue: 0, enable: !isReadOnly" />
				Never
			</label>
		</div>
		<div style="flex: 1 1 auto">
			<h1>Write data</h1>
			<label class="radioItem radioItemSelected" data-bind="css: { radioItemSelected: mappingModeWrite() === 12 }">
				<input type="radio" name="mappingWrite" data-bind="checked: mappingModeWrite, checkedValue: 12, enable: !isReadOnly" />
				On every Save
			</label>
			<label class="radioItem" data-bind="css: { radioItemSelected: mappingModeWrite() === 8 }">
				<input type="radio" name="mappingWrite" data-bind="checked: mappingModeWrite, checkedValue: 8, enable: !isReadOnly" />
				On Complete only
			</label>
			<label class="radioItem" data-bind="css: { radioItemSelected: mappingModeWrite() === 0 }">
				<input type="radio" name="mappingWrite" data-bind="checked: mappingModeWrite, checkedValue: 0, enable: !isReadOnly" />
				Never
			</label>
		</div>
	</div>
</script>

<script type="text/html" id="tmplMappingDialogSettings">
	<!-- ko template: { name: 'tmplSetMappingModes' } --><!-- /ko -->
	<br />
	<!-- ko template: { name: wizardStepTemplates[1] }--><!-- /ko -->
</script>
<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>
<script id="tmplQuestionItemsTreeView" type="text/html">
	<div class="leftPanel__questions">
		<div
			class="questionnaireHeader"
			data-bind="text: root.label, click: root.select.bind(root), style: { background: root.isSelected() ? '#FFFFFF' : '#F2F2F2' }"
		></div>
		<ul
			id="rootQuestionsNavigation"
			class="questionnaireNavigation"
			data-bind="knockoutSortableJs: { foreach: root.children,
					options: {
						onStart: onItemDragged.bind($data),
						animation: 150,
						disabled: root.editor.isReadOnly(),
						filter: '.disableDnd',
						dragClass: 'sortable-drag',
						ghostClass: 'sortable-ghost',
						chosenClass: 'sortable-chosen',
						forceFallback: true,
						fallbackOnBody: true,
						group: {
							name: 'sharedGroup',
							pull: true,
							put: true
						},
					},
					customOptions: {
						onEnd: onItemMoved.bind($data),
					},
					container: document.querySelector('.leftPanel__questions'),
				}, 
				attr: {'data-type':'rootlist'}"
		>
			<li data-bind="attr: {'data-type':'rootchild'}, click: select, css: {'selected': isSelected(), 'disableDnd':question?.isLogo() ?? false }">
				<div>
					<i data-bind="{ attr: { class: 'questionnairesprite icon-questionnaire_ComponentItems_' + iconName}}"></i>
					<span class="label" data-bind="text: label, attr:{title: label}"></span>
					<!-- ko if: hasRules -->
					<span class="rule">Rules</span>
					<!-- /ko -->
					<i data-bind="{ attr: { class: 'questionnairesprite icon-questionnaire_QuestionEditor_drag_indicator'}}"></i>
				</div>
			</li>
		</ul>

		<ul
			id="groupNavigation"
			class="questionnaireNavigation nested"
			data-bind="knockoutSortableJs: {
					foreach: root.groups,
					options: {
						onStart: onItemDragged.bind($data),
						animation: 150,
						disabled: root.editor.isReadOnly(),
						filter: '.disableDnd',
						dragClass: 'sortable-drag',
						ghostClass: 'sortable-ghost',
						chosenClass: 'sortable-chosen',
						forceFallback: true,
						fallbackOnBody: true,
						group: {
							name: 'sharedGroup',
							pull: true,
							put: true
						},
	       			},
					customOptions: {
						onEnd: onItemMoved.bind($data),
					},
					container: document.querySelector('.leftPanel__questions'),
	   			}, 
				attr: {'data-type':'grouplist'}"
		>
			<li
				data-bind="attr: {'data-type':'group'}, 
					css: { 'collapsed': isCollapsed, 'selected': isSelected() }, 
					click: select,
					clickBubble: false"
			>
				<div data-bind="click: function(data) { isCollapsed(!isCollapsed()); return true; }">
					<i
						data-bind="{ attr: { class: 'questionnairesprite icon-questionnaire_QuestionEditor_' + (isCollapsed() === false ? 'expand' : 'collapse')}}"
					></i>
					<span class="label" data-bind="text: label, attr:{title: label}"></span>
					<!-- ko if: hasRules -->
					<span class="rule">Rules</span>
					<!-- /ko -->
					<i data-bind="{ attr: { class: 'questionnairesprite icon-questionnaire_QuestionEditor_drag_indicator'}}"></i>
				</div>
				<ul
					data-bind="knockoutSortableJs: {
							foreach: children,
							options: {
								onStart: $parent.onItemDragged.bind($data),
								animation: 150,
								disabled: $parent.root.editor.isReadOnly(),
								filter: '.disableDnd',
								dragClass: 'sortable-drag',
								ghostClass: 'sortable-ghost',
								chosenClass: 'sortable-chosen',
								forceFallback: true,
								fallbackOnBody: true,
								group: {
									name: 'sharedGroup',
									pull: true,
									put: true
								},
							},
							customOptions: {
								onEnd: $parent.onItemMoved.bind($data),
							},
							container: document.querySelector('.leftPanel__questions'),
						},
						attr: {'data-type':'groupchildlist'}"
				>
					<li data-bind="attr: {'data-type':'groupchild'}, click: select, clickBubble: false, css: { 'selected': isSelected() }, ">
						<div>
							<i data-bind="{ attr: { class: 'questionnairesprite icon-questionnaire_ComponentItems_' + iconName}}"></i>
							<span class="label" data-bind="text: label, attr:{title: label}"></span>
							<!-- ko if: hasRules -->
							<span class="rule">Rules</span>
							<!-- /ko -->
							<i data-bind="{ attr: { class: 'questionnairesprite icon-questionnaire_QuestionEditor_drag_indicator'}}"></i>
						</div>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</script>
<script id="tmplPreviewSettingsDialog" type="text/html">
	<div style="width: 100%; padding: 10px">
		<div style="display: flex; flex-direction: row; margin-bottom: 10px">
			<div style="flex: 0 0 100px; font-weight: bold">Language</div>
			<select style="flex: 1 1 200px" data-bind="options: languages, optionsText: 'name', value: selectedLanguage, valueAllowUnset: false"></select>
		</div>
		<div style="display: flex; flex-direction: row">
			<div style="flex: 0 0 100px; font-weight: bold">Questionnaire</div>
			<select
				style="flex: 1 1 200px"
				data-bind="options: answeredQuestionnaireActions, value:selectedQuestionnaireAction, valueAllowUnset: false"
			></select
			><br />
		</div>
		<div style="display: flex; flex-direction: row">
			<div style="flex: 0 0 100px"></div>
			<div
				style="flex: 1 1 200px; text-align: left; text-decoration:underline; color: blue; cursor: pointer"
				data-bind="click:showSelectExistingQuestionnaireDialog, visible:selectedAnsweredQuestionnaireDisplayName(), text: selectedAnsweredQuestionnaireDisplayName"
			></div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplReportThemeDialog">
	<div style="width: 100%; padding-top: 20px">
		<b>Theme:</b>
		<select
			style="width: 80%; box-sizing: border-box"
			data-bind="options: QuestionnaireBuilder.Data.ReportTheme.list, optionsText: 'name', value: selectedTheme, valueAllowUnset: false"
		></select>
	</div>
</script>
<script type="text/html" id="tmplSelectReportDialog">
	<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 1" data-binding="name" data-horalign="left" data-sort="ascending"></div>
		</div>
		<!--<div style="flex: 1 1 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;"/>
			<button data-bind="enable:hasMorePages, click:onNextClicked">&gt;</button>
		</div>-->
	</div>
</script>
<script type="text/html" id="tmplSelectQuestionDialog">
	<div style="width: 100%; height: 100%; overflow: auto; background: white; border: solid 1px black">
		<!-- ko foreach: items -->
		<div
			style="cursor: pointer; padding: 3px"
			data-bind="text: label, click: select, style: {backgroundColor: isSelected() ? '#ddd' : 'transparent'}"
		></div>
		<!-- /ko -->
	</div>
</script>
<script type="text/html" id="tmplExportStylesDialog">
	<div style="width: 100%; padding-top: 20px">
		<b>Styles:</b><br />
		<div style="background: white; border: solid 1px black; width: 100%; height: 400px; overflow: auto">
			<div style="border-bottom: solid 1px #eeeeee; width: 100%; height: 25px">
				<input type="checkbox" data-bind="checked: selectFormStyles" /> Form
			</div>
			<!-- ko foreach: formStyleListItems -->
			<!-- ko template: { name: 'tmplExportStylesDialogStyleListItem'} --><!-- /ko -->
			<!-- /ko -->
			<div style="border-bottom: solid 1px #eeeeee; width: 100%; height: 25px">
				<input type="checkbox" data-bind="checked: selectReportStyles" /> Report
			</div>
			<!-- ko foreach: reportStyleListItems -->
			<!-- ko template: { name: 'tmplExportStylesDialogStyleListItem'} --><!-- /ko -->
			<!-- /ko -->
		</div>
	</div>
</script>

<script type="text/html" id="tmplExportStylesDialogStyleListItem">
	<div style="padding-left: 15px; border-bottom: solid 1px #eeeeee; width: 100%; height: 25px">
		<input type="checkbox" data-bind="checked: isSelected" /> <span data-bind="text: styleItem.style.name"></span>
	</div>
</script>
<script type="text/html" id="tmplStyleEditor">
	<div style="display: flex; flex-direction: column; width: 100%; height: 100%; align-content: center; align-items: center">
		<div style="display: flex; flex-direction: row; align-content: center; align-items: center; height: 100%">
			<!-- ko if: selectedItem() -->
			<!-- ko with: selectedItem() -->
			<div
				style="padding: 8px; width: 480px; background-color: white; border: dotted 1px #888; overflow: hidden;"
				data-bind="style: {backgroundColor: backgroundColor}"
			>
				<!-- ko if: strLabelPosition() === '0' || strLabelPosition() === '1' -->
				<div
					style="box-sizing: border-box; width: 30%; height: 100%; float: left; display: inline-block; padding-right: 5px; padding-left: 5px; line-height: 30px; overflow: hidden;"
					data-bind="style: {color: labelForegroundColor, fontWeight: labelBold() ? 'bold' : 'normal', fontStyle: labelItalic() ? 'italic' : 'normal', textDecoration: strLabelDecoration() === '4' ? 'underline' : strLabelDecoration() === '8' ? 'line-through' : 'none', textAlign: strLabelHorizontalAlignment() === '2' ? 'right' : strLabelHorizontalAlignment() === '3' ? 'center' : 'left'} "
				>
					Label
				</div>
				<!-- /ko -->
				<!-- ko if: strLabelPosition() === '2' -->
				<div
					style="box-sizing: border-box; width: 100%; height: 20px; float: left; display: block; padding-right: 5px; padding-left: 5px; line-height: 20px; overflow: hidden;"
					data-bind="style: {color: labelForegroundColor, fontWeight: labelBold() ? 'bold' : 'normal', fontStyle: labelItalic() ? 'italic' : 'normal', textDecoration: strLabelDecoration() === '4' ? 'underline' : strLabelDecoration() === '8' ? 'line-through' : 'none', textAlign: strLabelHorizontalAlignment() === '2' ? 'right' : strLabelHorizontalAlignment() === '3' ? 'center' : 'left'} "
				>
					Label
				</div>
				<!-- /ko -->
				<div
					style="position: relative; box-sizing: border-box; height: 100%; font-size: 14px; float: left; line-height: 30px; position: relative; border: solid;"
					data-bind="style: { backgroundColor: editorBackgroundColor, borderRadius: editorCornerRadius() + 'px', width: strLabelPosition() === '2' || strLabelPosition() === '4' || strLabelPosition() === '5' ? '100%' : '70%',  displayBlock: strLabelPosition() === '2' ? 'block' : 'inline-block', borderColor: editorBorderColor, borderWidth:  (editorBorderWidth() ? editorBorderWidth() + 'px' : 0)}"
				>
					<input
						style="box-sizing: border-box; width: 100%; height: 100%; border: 0px; background-color: transparent; padding-left: 5px; padding-right: 5px;"
						data-bind="style: {color: editorForegroundColor, fontWeight: editorBold() ? 'bold' : 'normal', fontStyle: editorItalic() ? 'italic' : 'normal', textDecoration: strEditorDecoration() === '4' ? 'underline' : strEditorDecoration() === '8' ? 'line-through' : 'none', textAlign: strEditorHorizontalAlignment() === '1' ? 'right' : strEditorHorizontalAlignment() === '2' ? 'center' : 'left'}"
						value="Value"
					/>
					<!-- ko if: strLabelPosition() === '5' -->
					<div
						style="position: absolute; left: 15px; top: -14px; font-size: 12px; box-sizing: border-box; padding: 5px; overflow: hidden; line-height: normal"
						data-bind="style: {color: labelForegroundColor, backgroundColor: backgroundColor, fontWeight: labelBold() ? 'bold' : 'normal', fontStyle: labelItalic() ? 'italic' : 'normal', textDecoration: strLabelDecoration() === '4' ? 'underline' : strLabelDecoration() === '8' ? 'line-through' : 'none'} "
					>
						Label
					</div>
					<!-- /ko -->
				</div>
				<!-- ko if: strLabelPosition() === '3' -->
				<div
					style="box-sizing: border-box; width: 30%; height: 100%; float: left; display: inline-block; padding-right: 5px; padding-left: 5px; line-height: 30px; overflow: hidden;"
					data-bind="style: {color: labelForegroundColor, fontWeight: labelBold() ? 'bold' : 'normal', fontStyle: labelItalic() ? 'italic' : 'normal', textDecoration: strLabelDecoration() === '4' ? 'underline' : strLabelDecoration() === '8' ? 'line-through' : 'none', textAlign: strLabelHorizontalAlignment() === '2' ? 'right' : strLabelHorizontalAlignment() === '3' ? 'center' : 'left'} "
				>
					Label
				</div>
				<!-- /ko -->
			</div>
			<!-- /ko -->
			<!-- /ko -->
		</div>
	</div>
</script>

<script type="text/html" id="tmplStyleEditorPreviewLabel">
	<div
		style="display: inline-block"
		data-bind="style: {height: (strLabelPosition() === '2' ? '40px' : '80px'), width: (strLabelPosition() === '2' ? '100%' : '25%')}"
	>
		<div
			style="width: 100%; height: 100%; display: flex"
			data-bind="style: {flexDirection: strLabelPosition() === '2' ? 'row' : 'column', justifyContent: (strLabelHorizontalAlignment() === '0' || strLabelHorizontalAlignment() === '1') ? 'flex-start' : (strLabelHorizontalAlignment() === '3' ? 'center' : 'flex-end')}"
		>
			<span data-bind="style: {fontWeight: (labelBold() ? 'bold' : 'normal')}">Sample Label</span>
		</div>
	</div>
</script>

<script type="text/html" id="tmplAddStyleDialog">
	<div style="width: 100%; padding-top: 20px"><b>Name:</b> <input type="text" style="width: 330px" data-bind="value: name" /></div>
</script>

<script type="text/html" id="tmplStyleListItem">
	<div style="cursor: pointer; width: 100%; height: 28px; border-bottom: solid 1px #F2F2F2; display: flex; flex-direction: row">
		<div
			style="padding: 5px; flex: 1 1 auto; width: 100%; display: flex"
			data-bind="text: label, style: { background: isSelected() ? '#5294E0' : 'white' } "
		></div>
	</div>
</script>

<script type="text/html" id="tmplStylePropertyPanel">
	<div class="propertyBar">
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Style</div>
			<div class="property">
				<div class="propertyName" title="Name">Name</div>
				<div class="propertyValue">
					<input type="text" placeholder="Name" data-bind="value: label, enable: !isReadOnly" />
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Height">Height</div>
				<div class="propertyValue">
					<input type="text" data-bind="value: height, enable: !isReadOnly" />
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Background">Background</div>
				<div class="propertyValue" data-bind="style: {cursor: !isReadOnly ? 'pointer' : 'auto'}">
					<div class="colorPreview" data-bind="cbColorPicker: backgroundColor, style: {background: backgroundColor}"></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: backgroundColor, text: backgroundColor"></span>
				</div>
			</div>
			<div class="propertyGroupTitle">Value</div>
			<div class="property">
				<div class="propertyName" title="Width">Width</div>
				<div class="propertyValue"><input type="text" data-bind="value: editorWidth, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Corner Radius">Corner Radius</div>
				<div class="propertyValue"><input type="number" data-bind="value: editorCornerRadius, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Border color">Border color</div>
				<div class="propertyValue" data-bind="style: {cursor: !isReadOnly ? 'pointer' : 'auto'}">
					<div class="colorPreview" data-bind="cbColorPicker: editorBorderColor, style: {background: editorBorderColor}"></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: editorBorderColor, text: editorBorderColor"></span>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Border width">Border width</div>
				<div class="propertyValue"><input type="number" data-bind="value: editorBorderWidth, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Color">Color</div>
				<div class="propertyValue" data-bind="style: {cursor: !isReadOnly ? 'pointer' : 'auto'}">
					<div class="colorPreview" data-bind="cbColorPicker: editorForegroundColor, style: {background: editorForegroundColor}"></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: editorForegroundColor, text: editorForegroundColor"></span>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Background Color">Background Color</div>
				<div class="propertyValue" data-bind="style: {cursor: !isReadOnly ? 'pointer' : 'auto'}">
					<div class="colorPreview" data-bind="cbColorPicker: editorBackgroundColor, style: {background: editorBackgroundColor}"></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: editorBackgroundColor, text: editorBackgroundColor"></span>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Disabled Color">Disabled Color</div>
				<div class="propertyValue" data-bind="style: {cursor: !isReadOnly ? 'pointer' : 'auto'}">
					<div class="colorPreview" data-bind="cbColorPicker: editorDisabledColor, style: {background: editorDisabledColor}"></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: editorDisabledColor, text: editorDisabledColor"></span>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Alignment">Alignment</div>
				<div class="propertyValue">
					<div class="propertyValue">
						<select data-bind="value: strEditorHorizontalAlignment, valueAllowUnset: false, enable: !isReadOnly">
							<option value="0">Near</option>
							<option value="1">Far</option>
							<option value="2">Center</option>
						</select>
					</div>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Font Name">Font Name</div>
				<div class="propertyValue"><input type="text" data-bind="value: editorFontName, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Font Size">Font Size</div>
				<div class="propertyValue"><input type="number" data-bind="value: editorFontSize, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Bold">Bold</div>
				<div class="propertyValue"><input type="checkbox" data-bind="checked: editorBold, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Italic">Italic</div>
				<div class="propertyValue"><input type="checkbox" data-bind="checked: editorItalic, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Text Decoration">Text Decoration</div>
				<div class="propertyValue">
					<div class="propertyValue">
						<select data-bind="value: strEditorDecoration, valueAllowUnset: false, enable: !isReadOnly">
							<option value="0">Default</option>
							<option value="4">Underline</option>
							<option value="8">Strikeout</option>
						</select>
					</div>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Multiline">Multiline</div>
				<div class="propertyValue"><input type="checkbox" data-bind="checked: isMultiline, enable: !isReadOnly" /></div>
			</div>
			<div class="propertyGroupTitle">Label</div>
			<div class="property">
				<div class="propertyName" title="Width">Width</div>
				<div class="propertyValue"><input type="text" data-bind="value: labelWidth, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Color">Color</div>
				<div class="propertyValue" data-bind="style: {cursor: !isReadOnly ? 'pointer' : 'auto'}">
					<div class="colorPreview" data-bind="cbColorPicker: labelForegroundColor, style: {background: labelForegroundColor}"></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: labelForegroundColor, text: labelForegroundColor"></span>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Font Name">Font Name</div>
				<div class="propertyValue"><input type="text" data-bind="value: labelFontName, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Font Size">Font Size</div>
				<div class="propertyValue"><input type="number" data-bind="value: labelFontSize, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Bold">Bold</div>
				<div class="propertyValue"><input type="checkbox" data-bind="checked: labelBold, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Italic">Italic</div>
				<div class="propertyValue"><input type="checkbox" data-bind="checked: labelItalic, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Text Decoration">Text Decoration</div>
				<div class="propertyValue">
					<div class="propertyValue">
						<select data-bind="value: strLabelDecoration, valueAllowUnset: false, enable: !isReadOnly">
							<option value="0">Default</option>
							<option value="4">Underline</option>
							<option value="8">Strikeout</option>
						</select>
					</div>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Position">Position</div>
				<div class="propertyValue">
					<div class="propertyValue">
						<select data-bind="value: strLabelPosition, valueAllowUnset: false, enable: !isReadOnly">
							<option value="0">PlatformDefault</option>
							<option value="1">Left</option>
							<option value="2">Top</option>
							<option value="3">Right</option>
							<option value="4">Hidden</option>
							<!-- ko if: featureVersion > 1 -->
							<option value="5">Border Top</option>
							<!-- /ko -->
						</select>
					</div>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Alignment">Alignment</div>
				<div class="propertyValue">
					<div class="propertyValue">
						<select data-bind="value: strLabelHorizontalAlignment, valueAllowUnset: false, enable: !isReadOnly">
							<option value="0">PlatformDefault</option>
							<option value="1">Near</option>
							<option value="2">Far</option>
							<option value="3">Center</option>
						</select>
					</div>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Auto Width">Auto Width</div>
				<div class="propertyValue"><input type="checkbox" data-bind="checked: labelAutoWidth, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Auto Height">Auto Height</div>
				<div class="propertyValue"><input type="checkbox" data-bind="checked: labelAutoHeight, enable: !isReadOnly" /></div>
			</div>
			<!-- ko if: featureVersion > 1 -->
			<div class="propertyGroupTitle">Description</div>
			<div class="property">
				<div class="propertyName" title="Color">Color</div>
				<div class="propertyValue" data-bind="style: {cursor: !isReadOnly ? 'pointer' : 'auto'}">
					<div
						class="colorPreview"
						data-bind="cbColorPicker: supportingTextForegroundColor, style: {background: supportingTextForegroundColor}"
					></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: supportingTextForegroundColor, text: supportingTextForegroundColor"></span>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Font Name">Font Name</div>
				<div class="propertyValue"><input type="text" data-bind="value: supportingTextFontName, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Font Size">Font Size</div>
				<div class="propertyValue"><input type="number" data-bind="value: supportingTextFontSize, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Alignment">Alignment</div>
				<div class="propertyValue">
					<div class="propertyValue">
						<select data-bind="value: strSupportingTextAlignment, valueAllowUnset: false, enable: !isReadOnly">
							<option value="0">Near</option>
							<option value="1">Far</option>
							<option value="2">Center</option>
						</select>
					</div>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Position">Position</div>
				<div class="propertyValue">
					<div class="propertyValue">
						<select data-bind="value: strSupportingTextPosition, valueAllowUnset: false, enable: !isReadOnly">
							<option value="0">Bottom</option>
							<option value="1">Top</option>
						</select>
					</div>
				</div>
			</div>
			<!-- /ko -->
			<div class="propertyGroupTitle">Colors</div>
			<div class="property">
				<div class="propertyName" title="Link">Link</div>
				<div class="propertyValue" data-bind="style: {cursor: !isReadOnly ? 'pointer' : 'auto'}">
					<div class="colorPreview" data-bind="cbColorPicker: linkColor, style: {background: linkColor}"></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: linkColor, text: linkColor"></span>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Button">Button</div>
				<div class="propertyValue" data-bind="style: {cursor: !isReadOnly ? 'pointer' : 'auto'}">
					<div class="colorPreview" data-bind="cbColorPicker: buttonColor, style: {background: buttonColor}"></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: buttonColor, text: buttonColor"></span>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Error">Error</div>
				<div class="propertyValue" data-bind="style: {cursor: !isReadOnly ? 'pointer' : 'auto'}">
					<div class="colorPreview" data-bind="cbColorPicker: errorColor, style: {background: errorColor}"></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: errorColor, text: errorColor"></span>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Separator">Separator</div>
				<div class="propertyValue" data-bind="style: {cursor: !isReadOnly ? 'pointer' : 'auto'}">
					<div class="colorPreview" data-bind="cbColorPicker: separatorColor, style: {background: separatorColor}"></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: separatorColor, text: separatorColor"></span>
				</div>
			</div>
			<div class="propertyGroupTitle">Image</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.StylePropertyPanel.BasePath">
				<div class="propertyName" title="Base Path">Base Path</div>
				<div class="propertyValue">
					<input type="text" data-bind="value: imageBasePath, enable: !isReadOnly" />
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.StylePropertyPanel.ComboAlignment">
				<div class="propertyName" title="Combo Alignment">Combo Alignment</div>
				<div class="propertyValue">
					<div class="propertyValue">
						<select data-bind="value: strComboBoxImageAlignment, valueAllowUnset: false, enable: !isReadOnly">
							<option value="0">Text Only</option>
							<option value="1">Left</option>
							<option value="2">Right</option>
							<option value="3">Top</option>
							<option value="4">Bottom</option>
							<option value="5">Image Only</option>
						</select>
					</div>
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.StylePropertyPanel.PickerAlignment">
				<div class="propertyName" title="Picker Alignment">Picker Alignment</div>
				<div class="propertyValue">
					<div class="propertyValue">
						<select data-bind="value: strPickerImageStyle, valueAllowUnset: false, enable: !isReadOnly">
							<option value="0">Text Only</option>
							<option value="1">Left</option>
							<option value="2">Right</option>
							<option value="3">Top</option>
							<option value="4">Bottom</option>
							<option value="5">Image Only</option>
						</select>
					</div>
				</div>
			</div>
			<div class="propertyGroupTitle">Other</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.StylePropertyPanel.MaxItemsCount">
				<div class="propertyName" title="Max items count">Max items count</div>
				<div class="propertyValue">
					<input type="number" data-bind="value: radioButtonMaxCount, enable: !isReadOnly" />
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.StylePropertyPanel.SegmentedButtons">
				<div class="propertyName" title="Segmented Buttons">Segmented Buttons</div>
				<div class="propertyValue">
					<select data-bind="value: strSegmentedButtonsLayout, valueAllowUnset: false, enable: !isReadOnly">
						<option value="0">Horizontal</option>
						<option value="1">Vertical</option>
					</select>
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.StylePropertyPanel.MinuteIncrement">
				<div class="propertyName" title="Minute Increment">Minute Increment</div>
				<div class="propertyValue">
					<input type="number" data-bind="value: minuteIncrement, enable: !isReadOnly" />
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.StylePropertyPanel.WrapText">
				<div class="propertyName" title="Wrap Text">Wrap Text</div>
				<div class="propertyValue"><input type="checkbox" data-bind="checked: wrapText, enable: !isReadOnly" /></div>
			</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.StylePropertyPanel.AutoCorrect">
				<div class="propertyName" title="Auto Correct">Auto Correct</div>
				<div class="propertyValue"><input type="checkbox" data-bind="checked: autoCorrect, enable: !isReadOnly" /></div>
			</div>
		</div>
	</div>
</script>

<script type="text/html" id="tmplReportStylePropertyPanel">
	<div class="propertyBar">
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Style</div>
			<div class="property">
				<div class="propertyName" title="Name">Name</div>
				<div class="propertyValue">
					<input type="text" placeholder="Name" data-bind="value: label, enable: !isReadOnly" />
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Background">Background</div>
				<div class="propertyValue" data-bind="style: {cursor: !isReadOnly ? 'pointer' : 'auto'}">
					<div class="colorPreview" data-bind="cbColorPicker: backgroundColor, style: {background: backgroundColor}"></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: backgroundColor, text: backgroundColor"></span>
				</div>
			</div>
			<div class="propertyGroupTitle">Value</div>
			<div class="property">
				<div class="propertyName" title="Color">Color</div>
				<div class="propertyValue" data-bind="style: {cursor: !isReadOnly ? 'pointer' : 'auto'}">
					<div class="colorPreview" data-bind="cbColorPicker: editorForegroundColor, style: {background: editorForegroundColor}"></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: editorForegroundColor, text: editorForegroundColor"></span>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Alignment">Alignment</div>
				<div class="propertyValue">
					<div class="propertyValue">
						<select data-bind="value: strEditorHorizontalAlignment, valueAllowUnset: false, enable: !isReadOnly">
							<option value="0">Near</option>
							<option value="1">Far</option>
							<option value="2">Center</option>
							<option value="3">Justify</option>
						</select>
					</div>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Font Name">Font Name</div>
				<div class="propertyValue"><input type="text" data-bind="value: editorFontName, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Font Size">Font Size</div>
				<div class="propertyValue"><input type="number" data-bind="value: editorFontSize, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Bold">Bold</div>
				<div class="propertyValue"><input type="checkbox" data-bind="checked: editorBold, enable: !isReadOnly" /></div>
			</div>
			<div class="propertyGroupTitle">Label</div>
			<div class="property">
				<div class="propertyName" title="Color">Color</div>
				<div class="propertyValue" data-bind="style: {cursor: !isReadOnly ? 'pointer' : 'auto'}">
					<div class="colorPreview" data-bind="cbColorPicker: labelForegroundColor, style: {background: labelForegroundColor}"></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: labelForegroundColor, text: labelForegroundColor"></span>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Font Name">Font Name</div>
				<div class="propertyValue"><input type="text" data-bind="value: labelFontName, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Font Size">Font Size</div>
				<div class="propertyValue"><input type="number" data-bind="value: labelFontSize, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Bold">Bold</div>
				<div class="propertyValue"><input type="checkbox" data-bind="checked: labelBold, enable: !isReadOnly" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Position">Position</div>
				<div class="propertyValue">
					<div class="propertyValue">
						<select data-bind="value: strLabelPosition, valueAllowUnset: false, enable: !isReadOnly">
							<option value="1">Left</option>
							<option value="2">Top</option>
							<option value="3">Right</option>
							<option value="4">Hidden</option>
						</select>
					</div>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Alignment">Alignment</div>
				<div class="propertyValue">
					<div class="propertyValue">
						<select data-bind="value: strLabelHorizontalAlignment, valueAllowUnset: false, enable: !isReadOnly">
							<option value="1">Near</option>
							<option value="2">Far</option>
							<option value="3">Center</option>
							<option value="4">Justify</option>
						</select>
					</div>
				</div>
			</div>
		</div>
	</div>
</script>

<script type="text/html" id="tmplStyleEditorPreviewLabel">
	<div
		style="display: inline-block"
		data-bind="style: {height: (strLabelPosition() === '2' ? '40px' : '80px'), width: (strLabelPosition() === '2' ? '100%' : '25%')}"
	>
		<div
			style="width: 100%; height: 100%; display: flex"
			data-bind="style: {flexDirection: strLabelPosition() === '2' ? 'row' : 'column', justifyContent: (strLabelHorizontalAlignment() === '0' || strLabelHorizontalAlignment() === '1') ? 'flex-start' : (strLabelHorizontalAlignment() === '3' ? 'center' : 'flex-end')}"
		>
			<span data-bind="style: {fontWeight: (labelBold() ? 'bold' : 'normal')}"> Sample Label </span>
		</div>
	</div>
</script>
<script type="text/html" id="tmplVersionEditor">
	<div style="display: flex; width: 100%; height: 100%;">
		<div
			data-bind="grid: gridVersions"
			data-definitiononly="false"
			data-twowaybinding="false"
			style="white-space:nowrap; height: calc(100% - 10px); width:100%"
		>
			<div data-columnname="Status" data-binding="data.statusLabel" data-size="120" data-horalign="left">
				<div style="padding: 5px">
					<span
						style="font-weight: bold; text-transform: uppercase"
						data-bind="text: data.data.statusLabel(), style: { color: data.statusColor() }"
					></span>
				</div>
			</div>
			<div data-columnname="Version" data-binding="data.version" data-size="90" data-horalign="center" data-sort="desc"></div>
			<div data-columnname="Name" data-binding="data.name" data-flex="1 2 15%" data-horalign="left"></div>
			<div data-columnname="Publish Notes" data-binding="data.publishNotes" data-flex="1 6 70%" data-horalign="left"></div>
			<div data-columnname="Published On" data-binding="data.publishedOnLabel" data-size="140" data-horalign="right"></div>
			<div data-columnname="Archived On" data-binding="data.archivedOnLabel" data-size="140" data-horalign="right"></div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplDynamicFilter">
	<div class="dynamicFilter">
		<p><b data-bind="text: label"></b></p>
		<!-- ko template: { name: templateName } --><!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplStringDynamicFilter">
	<div class="input-wrapper">
		<input type="text" data-bind="value: value" />
	</div>
</script>

<script type="text/html" id="tmplBooleanDynamicFilter">
	<div class="input-wrapper">
		<label class="switch" data-bind="attr: { for: id }">
			<input type="checkbox" data-bind="checked: value, attr: { id: id }" />
			<span class="slider round"></span>
		</label>
	</div>
</script>

<script type="text/html" id="tmplNumberDynamicFilter">
	<div class="input-wrapper numberFilter_wrapper">
		<input type="number" data-bind="value: from" placeholder="From" />
		<input type="number" data-bind="value: to" placeholder="To" />
	</div>
</script>

<script type="text/html" id="tmplDateDynamicFilter">
	<div class="input-wrapper dateFilter_wrapper">
		<span>After</span>
		<div class="dateFilter input_filter">
			<input
				class="dateFilter_input"
				data-bind="datetimepicker: after, datetimepicker-options: { hideTimePicker: true }"
				type="text"
				readonly="readonly"
				size="16"
			/>
			<span
				data-bind="click: function() { after(undefined); }"
				title="Clear"
				class="commonuisprite  icon-questionnaire_iconDelete datePicker_clear"
			></span>
		</div>
	</div>
	<div class="input-wrapper">
		<span>Before</span>
		<div class="dateFilter input_filter">
			<input
				class="dateFilter_input"
				data-bind="datetimepicker: before, datetimepicker-options: { hideTimePicker: true }"
				type="text"
				readonly="readonly"
				size="16"
			/>
			<span
				data-bind="click: function() { before(undefined); }"
				title="Clear"
				class="commonuisprite  icon-questionnaire_iconDelete datePicker_clear"
			></span>
		</div>
	</div>
</script>
<script type="text/html" id="tmplExportResultsDialog">
	<div class="exportResultsDialog">
		<div class="property">
			<p>File name</p>
			<input type="text" data-bind="value: fileName" />
		</div>
		<div class="property">
			<p>Export type</p>
			<div data-bind="template: { name: 'tmplSegmentedControl', data: exportOptionSgmCtrl }"></div>
		</div>
		<!-- ko ifnot: isExportImagesSelected() -->
		<div class="property">
			<p>Table header</p>
			<div data-bind="template: { name: 'tmplSegmentedControl', data: tableHeaderSgmCtrl }"></div>
		</div>
		<!-- /ko -->
		<div class="property">
			<p>Select Questions to export for template</p>
			<select data-bind="options: exportTemplateItems, value: selectedExportTemplateItem, optionsText: 'templateName'"></select>
		</div>
		<div class="selectQuestions" data-bind="with: selectedExportTemplateItem">
			<!-- ko ifnot: questionGroupItems().length -->
			<p>No question to select for this export type</p>
			<!-- /ko -->
			<div class="selectQuestions__checkbox">
				<input type="checkbox" id="allSelected" data-bind="checked: allSelected" />
				<label for="allSelected" data-bind="text: '[' + (allSelected() ? 'Deselect' : 'Select') + ' all]'"></label>
			</div>
			<div class="selectQuestions__group-list" data-bind="foreach: questionGroupItems">
				<div class="selectQuestions__group">
					<div class="selectQuestions__checkbox">
						<input type="checkbox" data-bind="checked: selected, attr: { id: name }" />
						<label data-bind="text: label, attr: { for: name }"></label>
					</div>
					<div class="selectQuestions__question-list" data-bind="foreach: questionItems">
						<div class="selectQuestions__question selectQuestions__checkbox">
							<input type="checkbox" data-bind="checked: selected, attr: { id: name }" />
							<label data-bind="text: label, attr: { for: name }"></label>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- ko if: isExportImagesSelected() && imageNameConventionComponent() -->
		<div class="property"><!-- ko template: { name: 'tmplImageNameConventionComponent', data: imageNameConventionComponent() } --><!-- /ko --></div>
		<!-- /ko -->
	</div>
</script>
<script type="text/html" id="tmplImageNameConventionComponent">
	<div class="imageNameConventionComponent">
		<div>
			<p>Define image name convention</p>
			<div class="variableList usedVariableList" data-bind="foreach: usedVariableList, sortableList: usedVariableList">
				<!-- ko template: { name: templateName } --><!-- /ko -->
			</div>
		</div>
		<div>
			<p>Image name variables</p>
			<div class="variableList possibleVariableList" data-bind="foreach: possibleVariableList">
				<!-- ko template: { name: templateName } --><!-- /ko -->
			</div>
		</div>
		<div>
			<p>Image name example</p>
			<p class="resultExample" data-bind="text: resultExample"></p>
		</div>
	</div>
</script>

<script type="text/html" id="tmplPossibleVariable">
	<div class="variable">
		<span data-bind="text: $data.value"></span>
		<i class="button button__add questionnairesprite icon-questionnaire_add_var" data-bind="click: $parent.addVariable.bind($parent)"></i>
	</div>
</script>

<script type="text/html" id="tmplPossibleVariableFormat">
	<div class="variable variable__format">
		<span data-bind="text: $data.value"></span>
		<input type="text" placeholder="MM-DD-YYYY" data-bind="value: format" />
		<i class="button button__add questionnairesprite icon-questionnaire_add_const" data-bind="click: $parent.addVariable.bind($parent)"></i>
	</div>
</script>

<script type="text/html" id="tmplPossibleConst">
	<div class="variable variable__const">
		<input type="text" data-bind="value: value" placeholder="Custom text..." />
		<i class="button button__add questionnairesprite icon-questionnaire_add_const" data-bind="click: $parent.addVariable.bind($parent)"></i>
	</div>
</script>

<script type="text/html" id="tmplUsedVariable">
	<div class="variable">
		<div class="variable__drag">
			<i class="questionnairesprite icon-questionnaire_Move"></i>
		</div>
		<span data-bind="text: $data.value"></span>
		<!-- ko if: canRemove -->
		<i
			class="delete button button__delete questionnairesprite icon-questionnaire_delete_var"
			data-bind="click: $parent.removeVariable.bind($parent)"
		></i>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplUsedVariableFormat">
	<div class="variable variable__format">
		<div class="variable__drag">
			<i class="questionnairesprite icon-questionnaire_Move"></i>
		</div>
		<span data-bind="text: $data.value"></span>
		<input type="text" placeholder="MM-DD-YYYY" data-bind="value: format, click: onClick, hasFocus: hasFocus" />
		<!-- ko if: canRemove -->
		<i class="delete button button__delete questionnairesprite icon-questionnaire_Delete" data-bind="click: $parent.removeVariable.bind($parent)"></i>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplUsedConst">
	<div class="variable variable__usedconst">
		<div class="variable__drag">
			<i class="questionnairesprite icon-questionnaire_Move"></i>
		</div>
		<input type="text" data-bind="value: value, click: onClick, hasFocus: hasFocus" />
		<i class="delete button button__delete questionnairesprite icon-questionnaire_Delete" data-bind="click: $parent.removeVariable.bind($parent)"></i>
	</div>
</script>
<script type="text/html" id="tmplResultsGridOrderDialog">
	<div class="resultsGridOrderDialog">
		<div class="container" data-bind="template: { name: 'tmplResultsGridField', foreach: fields }, sortableList: fields"></div>
	</div>
</script>

<script type="text/html" id="tmplResultsGridField">
	<div class="resultsGridField">
		<i class="questionnairesprite icon-questionnaire_QuestionEditor_drag"></i>
		<span class="displayName" data-bind="text: displayName"></span>
	</div>
</script>
<script type="text/html" id="tmplUploadTemplateComponent">
	<div class="uploadTemplate">
		<p class="uploadTemplate__info">Edit imported template. Choose correct question type.</p>
		<div class="uploadTemplate__items" data-bind="foreach: items">
			<div class="uploadTemplate__item" data-bind="template: { name: templateName } "></div>
		</div>
	</div>
</script>

<script type="text/html" id="tmplUploadQuestionGroupTemplateItem">
	<div class="uploadTemplate__groupItem" data-bind="css: { uploadTemplate__ignored: skipped }">
		<div
			class="uploadTemplate__item__ignore uploadTemplate__groupItem__ignore"
			data-bind="style: { visibility: skipped() ? 'visible' : 'hidden' }, 
			click: function() { skipped(!skipped()) }, 
			attr: { title:  skipped() ? 'Include Group' : 'Ignore Group' }"
		>
			<i class="questionnairesprite icon-questionnaire_QWizardDialog_Ignore"></i>
		</div>
		<input type="text" data-bind="value: name, enable: !skipped()" />
		<div class="uploadTemplate__groupItem__repeatable">
			<input type="checkbox" data-bind="checked: repeatable, , enable: !skipped(), attr: { id: name }" />
			<label data-bind="attr: { for: name }">Repeatable</label>
		</div>
	</div>
	<div class="uploadTemplate__items uploadTemplate__groupItems" data-bind="foreach: questions">
		<div class="uploadTemplate__item" data-bind="template: { name: templateName } "></div>
	</div>
</script>

<script type="text/html" id="tmplUploadQuestionTemplateItem">
	<div class="uploadTemplate__questionItem" data-bind="css: { uploadTemplate__ignored: skipped }">
		<div class="uploadTemplate__questionItem__ignore__container" data-bind="attr: { title:  skipped() ? 'Include Question' : 'Ignore Question' }">
			<div class="uploadTemplate__item__ignore uploadTemplate__questionItem__ignore"
				data-bind="style: { visibility: skipped() ? 'visible' : 'hidden' }, click: function() { skipped(!skipped()) }">
				<i class="questionnairesprite icon-questionnaire_QWizardDialog_Ignore"></i>
			</div>
		</div>
		<div class="uploadTemplate__tree">
			<div class="uploadTemplate__connector"></div>
			<div class="uploadTemplate__questionItem__properties">
				<input type="text" data-bind="value: name, enable: !skipped()">
				<div class="uploadTemplate__questionItem__options" data-bind="foreach: { data: options, as: 'option' }">
					<div class="uploadTemplate__questionItem__option">
						<span data-bind="text: $parent.type().name === 'lookupQuestion' ? 'Target:' : 'Label:'"></span>
						<input type="text" data-bind="value: option.value, enable: !$parent.skipped()">
					</div>
				</div>
			</div>
			<select data-bind="options: types, value: type, optionsText: 'label', enable: !skipped()">
		</div>
	</div>
</script>
<script type="text/html" id="tmplGlobalStyleDialog">
	<div class="globalStyleDialog">
		<div class="globalStyleDialog_controls">
			<div class="globalStyleDialog_saveAndClose button" data-bind="click: saveAndClose, clickBubble: false, css: { disabled: isReadOnly }">
				<i class="commonuisprite icon-commonui_Toolbar_Mono_SaveAndClose_32 iconLarge"></i>
				<span class="button-title">Save & Close</span>
			</div>
			<div class="globalStyleDialog_importStyle button" data-bind="click: importStyle, clickBubble: false, visible: allowImport">
				<i class="commonuisprite icon-commonui_Toolbar_Mono_Import_32 iconLarge"></i>
				<span class="button-title">Import</span>
			</div>
		</div>
		<div class="globalStyleDialog_editor">
			<div class="color section">
				<div class="title">Color</div>
				<div class="theme_color style-option">
					Theme Color
					<div
						class="color-input"
						data-bind="click: function(data, event) { $parent.openColorPicker(event, $parent.themeColor)}, style: {cursor: !isReadOnly ? 'pointer' : 'auto'}, css: { disabled: isReadOnly }"
					>
						<div class="color-preview" data-bind="style: {background: themeColor}"></div>
						<span data-bind="text: themeColor"></span>
					</div>
				</div>
				<div class="theme_variant style-option">
					Theme
					<div
						data-bind="template: { name: 'tmplSegmentedControl', data: themeVariantSgmtCtrl }"
						data-test="questionnaireEditor-globalStyleDialog-themeVariant"
					></div>
				</div>
			</div>
			<div class="input section">
				<div class="title">Input</div>
				<div class="input_variant style-option">
					Variant
					<div
						data-bind="template: { name: 'tmplSegmentedControl', data: inputVariantSgmtCtrl }"
						data-test="questionnaireEditor-globalStyleDialog-inputVariant"
					></div>
				</div>
			</div>
			<div class="label section">
				<div class="title">Label</div>
				<div class="description">Adjusts how much space between components and what font size you see.</div>
				<div class="label_position style-option">
					Position
					<div class="label-controls">
						<div
							data-bind="template: { name: 'tmplSegmentedControl', data: globalLabelPositionSgmtCtrl }"
							data-test="questionnaireEditor-globalStyleDialog-labelPosition"
						></div>
						<div class="labelFormat-segmented-control segmentedControl__container" data-bind="css: { disabled: $parent.isReadOnly }">
							<div class="labelFormat-segmented-control-option-item segmentedControl__item">
								<input id="decorationBold" class="segmentedControl__item__input" data-bind="checked: $parent.decorationBold" type="checkbox" />
								<label class="segmentedControl__item__label" for="decorationBold">B</label>
							</div>
							<div class="labelFormat-segmented-control-option-item segmentedControl__item">
								<input id="decorationItalic" class="segmentedControl__item__input" data-bind="checked: decorationItalic" type="checkbox" />
								<label class="segmentedControl__item__label" for="decorationItalic">I</label>
							</div>
							<div class="labelFormat-segmented-control-option-item segmentedControl__item">
								<input id="decorationUnderline" class="segmentedControl__item__input" data-bind="checked: decorationUnderline" type="checkbox" />
								<label class="segmentedControl__item__label" for="decorationUnderline">U</label>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="semantic-colors section">
				<div class="title">Semantic colors</div>
				<div class="description">Customize standard semantic colors or create your own.</div>
				<div class="semantic-colors" data-bind="foreach: semanticColors">
					<div class="style-option">
						<span data-bind="text: name"></span>
						<div class="semantic-color-controls">
							<div
								class="semantic-color-delete"
								data-bind="click: function() { $parent.deleteSemanticColor($index)},visible: isCustom && !$parent.isReadOnly"
							>
								<i class="commonuisprite icon-commonui_Toolbar_Mono_Delete iconSmall"></i>
							</div>
							<div
								class="color-input"
								data-bind="id: name, css: { disabled: $parent.isReadOnly }, click: function(data, event) { $parent.openColorPicker(event, $data.hex) }"
							>
								<div class="color-preview" data-bind="style: {background: hex}"></div>
								<span data-bind="text: hex"></span>
							</div>
						</div>
					</div>
				</div>
				<div class="semantic-color-add" data-bind="click: addSemanticColor, visible: !$parent.isReadOnly">
					<i class="commonuisprite icon-commonui_Toolbar_Mono_addScript_18 iconSmall"></i>
					<span>Create new semantic color</span>
				</div>
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplButtonProperties">
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.Variant">
		<div class="propertyName">Variant</div>
		<div class="propertyValue">
			<select data-bind="value: question.variant, valueAllowUnset: false, enable: !question.isReadOnly">
				<option value="contained">Contained</option>
				<option value="text">Text</option>
				<option value="outlined">Outlined</option>
			</select>
		</div>
	</div>
</script>
<script type="text/html" id="tmplDateAndTimeQuestionProperties">
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.Format">
		<div class="propertyName">Format</div>
		<div class="propertyValue">
			<select
				data-bind="options: QuestionnaireBuilder.UI.DateTimeQuestionEditorItem.formatLabels, optionsText: 'value', optionsValue: 'key', value: question.format, valueAllowUnset: false, enable: !question.isReadOnly"
			></select>
		</div>
	</div>

	<!-- ko if: question.canHaveInlineProperties() -->
	<!-- ko template: { name: 'tmplLabelInlineProperties', data: { view: labelPropertiesViewModel, enabled: !question.isReadOnly } } --><!-- /ko -->
	<!-- /ko -->
</script>

<script type="text/html" id="tmplDateAndTimeQuestionReportingProperties">
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.Format">
		<div class="propertyName">Format</div>
		<div class="propertyValue"><input type="text" data-bind="value: question.reportingProperties.format" /></div>
	</div>
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.PreviewAnswer">
		<div class="propertyName">Preview Answer</div>
		<div class="propertyValue">
			<input style="border: 0px" type="text" data-bind="datetimepicker: question.reportingProperties.previewAnswer" size="16" readonly="readonly" />
		</div>
	</div>
</script>

<script type="text/html" id="tmplDateAndTimeQuestionContent">
	<!-- ko if: isActive() -->
	<div class="questionEditor__description__wrapper">
		<span>Default value:</span>
		<!-- ko if: defaultIsMacro() -->
		<span type="text" style="text-decoration: underline" title="Default Value" data-bind="text: question.defaultValue()"></span>
		<!-- /ko -->
		<!-- ko if: !defaultIsMacro() -->
		<input
			class="questionEditor__description__limitInput"
			data-bind="datetimepicker: question.defaultValue, datetimepicker-options: { hideTimePicker: isDateOnly() }, enable: !editor.isReadOnly()"
			size="16"
			type="text"
			readonly="readonly"
		/>
		<!-- /ko -->
		<!-- ko if: !editor.isReadOnly() -->
		<!-- ko if: question.defaultValue() -->
		<div class="deleteIcon" data-bind="click: clearDefaultValue">
			<i class="questionnairesprite icon-questionnaire_QuestionEditor_delete"></i>
		</div>
		<!-- /ko -->
		<div class="deleteIcon" data-bind="cbRescoDropDownList: defaultValueMacroDropDown">
			<i class="questionnairesprite icon-questionnaire_QuestionEditor_ellipsis"></i>
		</div>
		<!-- /ko -->
		<!-- ko if: editor.scoringEnabled() -->
		<div class="questionEditor__description__wrapper">
			<span>Score:</span>
			<input class="questionEditor__description__limitInput" type="number" step="any" data-bind="value: question.scoreForAnswered" />
		</div>
		<!-- /ko -->
	</div>
	<!-- /ko -->
</script>
<script type="text/html" id="tmplLogo">
	<div
		class="questionnaireLogoContainer"
		data-bind="css: { 'logo-height-small': coverLogoHeight() === 'small', 'logo-height-large': coverLogoHeight() === 'large', 'logo-height-extra': coverLogoHeight() === 'extra' }"
	>
		<div class="logo" data-bind="click: !isReadOnly() ? logoPicker.uploadLogo.bind(logoPicker) : null, css: { 'read-only': isReadOnly() }">
			<!-- ko if: isReadOnly() && (!logoPicker.logo() || !logoPicker.logo().imageB64()) -->
			<!-- ko template: { name: "tmplAddLogoPlaceholder" } -->
			<!-- /ko-->

			<!-- /ko-->

			<!-- ko if: !isReadOnly() && !isSelected() && (!logoPicker.logo() || !logoPicker.logo().imageB64()) -->
			<!-- ko template: { name: "tmplAddLogoPlaceholder" } -->
			<!-- /ko-->
			<!-- /ko-->

			<!-- ko if: (!isSelected() || isReadOnly()) && logoPicker.logo() && logoPicker.logo().imageB64() -->
			<img
				title="not editable, or not selected, but having logo"
				data-bind="attr: { 
						src: logoPicker.logo() && logoPicker.logo().imageB64() ? 
							'data:' + logoPicker.logo().mimeType() + ';base64,' + logoPicker.logo().imageB64() : '' 
						}, style: { objectFit: coverLogoFitting() }"
			/>
			<!-- /ko-->

			<!-- ko if: isSelected() && !isReadOnly() && (!logoPicker.logo() || !logoPicker.logo().imageB64()) -->
			<!-- ko template: { name: "tmplAddLogoPlaceholder" } -->
			<!-- /ko-->
			<!-- /ko-->

			<!-- ko if: isSelected() && !isReadOnly() && logoPicker.logo() && logoPicker.logo().imageB64() -->
			<img
				title="selected, editable, having image"
				data-bind="
					attr: { 
                src: logoPicker.logo() && logoPicker.logo().imageB64() ? 
                    'data:' + logoPicker.logo().mimeType() + ';base64,' + logoPicker.logo().imageB64() : '' 
            }, style: { objectFit: coverLogoFitting() }"
			/>
			<button
				class="btnDeleteLogo"
				type="button"
				data-bind="click: function(data, event) { 
				logoPicker.removeLogo(); 
				event.stopPropagation(); 
				return false;
			}"
			>
				<i class="questionnairesprite icon-questionnaire_QuestionEditor_delete"></i>
			</button>
			<!-- /ko-->
		</div>
	</div>
</script>

<script type="text/html" id="tmplAddLogoPlaceholder">
	<div class="addLogoPlaceholder">
		<i class="questionnairesprite icon-questionnaire_Add"></i>
		Add logo
	</div>
</script>
<script type="text/html" id="tmplLookupQuestionProperties">
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.Filter">
		<div class="propertyName">Filter</div>
		<div class="propertyValue">
			<span class="fakeTextInput" style="color: #0066CC; text-decoration: underline; cursor: pointer" data-bind="click: openFilterDialog"
				>Edit...</span
			>
		</div>
	</div>
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.AllowCreateNew">
		<div class="propertyName">Allow Create New</div>
		<div class="propertyValue">
			<select data-bind="value: question.allowCreateNew, valueAllowUnset: false, enable: !question.isReadOnly">
				<option value="0">No</option>
				<option value="1">Manual</option>
				<option value="2">Automatic</option>
				<option value="3">Both</option>
			</select>
		</div>
	</div>
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.LookupMappingWizard">
		<div class="propertyName">Create mappings</div>
		<div class="propertyValue">
			<span class="fakeTextInput" style="color: #0066CC; text-decoration: underline; cursor: pointer" data-bind="click: openMappingDialog"
				>Open wizard...</span
			>
		</div>
	</div>
	<!-- ko if: question.parentQuestionnaire?.isNqpQuestionnaire() -->
	<div class="property tooltipsource" data-bind="attr: { 'data-tooltip': question.parentQuestionnaire?.supportsNqpFeatureVersion(2) ? '' : 'QuestionnaireEditor.RequiredFeatureVersion2' }">
		<div class="propertyName"></div>
		<div class="propertyValue">
			<toggle params="value: question.enableBarcodeScanning, enable: !question.isReadOnly && question.parentQuestionnaire?.supportsNqpFeatureVersion(2)"></toggle>Enable Barcode Scanning
		</div>
	</div>
	<!-- /ko -->
	<!-- ko if: question.canHaveInlineProperties() -->
	<!-- ko template: { name: 'tmplLabelInlineProperties', data: { view: labelPropertiesViewModel, enabled: !question.isReadOnly } } --><!-- /ko -->
	<!-- /ko -->
</script>

<script type="text/html" id="tmplLookupQuestionContent">
	<div class="lookupQuestionContent">
		<!-- ko if: !isActive() || editor.isReadOnly() -->
		<span class="questionEditor__description">Targets</span>
		<!-- ko if: editor.isReadOnly() -->
		<!-- ko foreach: question.targets -->
		<span class="questionEditor__description" style="font-style: italic" data-bind="text: $data"></span
		><!-- ko if: $index() !== ($parent.question.targets().length - 1) -->,
		<!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: !editor.isReadOnly() -->
		<!-- ko foreach: question.targets -->
		<!-- ko if: $index() < 10 -->
		<span class="questionEditor__description" style="font-style: italic" data-bind="text: $data"></span
		><!-- ko if: $index() !== ($parent.question.targets().length - 1) -->,
		<!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: question.targets().length > 10 -->
		...
		<!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: isActive() -->
		<div class="questionEditor__description__wrapper">
			<span>Default value:</span>
			<span
				type="text"
				style="color: blue; text-decoration: underline; padding-left: 5px;"
				title="Default Value"
				data-bind="text: defaultValueLabel, click: !editor.isReadOnly() && setDefaultValue, style: { cursor: !editor.isReadOnly() ? 'pointer' : 'default' }"
			>
			</span>
			<!-- ko if: !editor.isReadOnly() -->
			<!-- ko if: question.defaultValue() -->
			<div class="deleteIcon" data-bind="click: clearDefaultValue">
				<i class="questionnairesprite icon-questionnaire_QuestionEditor_delete"></i>
			</div>
			<!-- /ko -->
			<!-- ko if: !question.isNqp -->
			<div class="deleteIcon" title="Smart value" data-bind="cbRescoDropDownList: defaultValueMacroDropDown">
				<i class="questionnairesprite icon-questionnaire_QuestionEditor_ellipsis"></i>
			</div>
			<!-- /ko -->
			<!-- /ko -->
		</div>

		<!-- ko if: editor.scoringEnabled() -->
		<div class="questionEditor__description__wrapper">
			<span>Score:</span>
			<input class="questionEditor__description__limitInput" type="number" step="any" data-bind="value: question.scoreForAnswered" />
		</div>
		<!-- /ko -->
		<!-- ko if: !editor.isReadOnly() -->
		<div style="display: flex; flex-direction: row; width: 100%; margin-bottom: 5px">
			<div class="optionsGridHeader">
				<div>Targets</div>
			</div>
			<div style="flex: 0 0 30px"></div>
		</div>
		<!-- ko foreach: targets -->
		<div class="optionsGridRow" style="display: flex; flex-direction: row; width: 100%;">
			<div style="flex: 1 1 auto; padding-left: 5px; font-size: 1.2em; overflow-x: hidden; text-overflow: ellipsis" data-bind="text: target"></div>
			<!-- ko if: $parent.question.parentQuestionnaire?.isNqpQuestionnaire() && $parent.question.enableBarcodeScanning() -->
			<div style="flex: 0 0 38px; text-align: center; align-self: center;">
				<i
					style="cursor: pointer;"
					class="commonuisprite icon-questionnaire_QuestionEditor_barcode"
					data-bind="click: $parent.setScanAttribute.bind($parent, $index()), attr: { title: 'Scan column: ' + selectedScanAttributeLabel() }"
				>
				</i>
			</div>
			<!-- /ko -->
			<div style="flex: 0 0 38px; text-align: center; align-self: center;">
				<i
					style="cursor: pointer;"
					class="questionnairesprite icon-questionnaire_QuestionEditor_hasView"
					title="View"
					data-bind="click: $parent.editView.bind($parent, $index()), attr: {class: 'questionnairesprite icon-questionnaire_QuestionEditor_' + (hasView() ? 'hasView' : 'hasNoView')}"
				>
				</i>
			</div>
			<div style="flex: 0 0 38px; text-align: center; align-self: center;">
				<i
					style="cursor: pointer;"
					class="questionnairesprite icon-questionnaire_QuestionEditor_lookupFilter"
					title="Filter"
					data-bind="click: $parent.setFilter.bind($parent, $index()), attr: {class: 'questionnairesprite icon-questionnaire_QuestionEditor_' + (hasFilter() ? 'lookupFilter' : 'lookupNoFilter')}"
				>
				</i>
			</div>
			<div>
				<i
					style="cursor: pointer;"
					class="questionnairesprite icon-questionnaire_QuestionEditor_RemoveOption"
					title="Remove Option"
					data-bind="click: $parent.removeTarget.bind($parent, $index())"
				>
				</i>
			</div>
		</div>
		<!-- /ko -->
		<div class="optionsGridRow" data-bind="visible: isNewTargetDropdownVisible() || targets().length === 0">
			<div style="flex: 1 1 auto">
				<select
					class="baseEditorItem__selector"
					data-bind="options: possibleTargets, value: newTarget, optionsCaption: 'Select target entity'"
				></select>
			</div>
		</div>
		<div
			class="addNewOption"
			title="Add new target"
			data-bind="click: showNewTargetDropdown, css: { addNewOption__disabled: isNewTargetDropdownVisible() || targets().length === 0 }"
		>
			<i class="questionnairesprite icon-questionnaire_Add"></i>
			add new target
		</div>
		<!-- /ko -->
		<!-- /ko -->
	</div>
</script>
<script type="text/html" id="tmplLookupMappingWizard">
	<div class="mappingWizard"><!-- ko template: { name: pageTemplate } --><!-- /ko --></div>
</script>

<script type="text/html" id="tmplLookupMappingWizardFieldsStep">
	<div class="selectFieldsPage">
		<div class="generalInfo">
			<h1>create questions in bulk</h1>
			This feature allows you to link questions to particular entity fields in your CRM. You can read a field to populate the answer automatically or
			save the answer to a record field at the end or both.
			<br />
			<br />
			<div class="targetsContainer">
				<!-- ko if: sourceIsLookup -->
				<div class="tooltipsource" data-tooltip="QuestionnaireEditor.MappingWizard.LookupTargets">Select target entity</div>
				<select data-bind="options: targets, value: selectedTarget"></select>
				<!-- /ko -->
				<!-- ko if: !sourceIsLookup -->
				<div class="tooltipsource" data-tooltip="QuestionnaireEditor.MappingWizard.RegardingEntities">Select regarding entity</div>
				<select data-bind="options: targets, value: selectedTarget"></select>
				<!-- /ko -->
			</div>
			<br />
		</div>
		<div class="fieldsContainer">
			<div class="fieldsPanel">
				<h2>Available Fields</h2>
				<input type="text" class="search" data-bind="value: searchText, valueUpdate: 'keyup'" placeholder="Search field by name..." />
				<div class="fieldsList">
					<!-- ko foreach: availableFields -->
					<input type="checkbox" data-bind="click: $parent.addField.bind($parent, $data)" />
					<!-- ko if: $parent.showLogicalName() -->
					<span data-bind="text: SchemaName, click: $parent.addField.bind($parent, $data)"></span>
					<!-- /ko -->
					<!-- ko if: !$parent.showLogicalName() -->
					<span data-bind="text: DisplayName, click: $parent.addField.bind($parent, $data)"></span>
					<!-- /ko -->
					<br />
					<!-- /ko -->
				</div>
			</div>
			<div class="fieldsPanel">
				<h2>Selected Fields</h2>
				<div class="fieldsList">
					<!-- ko foreach: selectedFields -->
					<input type="checkbox" checked="checked" data-bind="click: $parent.removeField.bind($parent, $data)" />
					<!-- ko if: $parent.showLogicalName() -->
					<span data-bind="text: SchemaName, click: $parent.removeField.bind($parent, $data)"></span>
					<!-- /ko -->
					<!-- ko if: !$parent.showLogicalName() -->
					<span data-bind="text: DisplayName, click: $parent.removeField.bind($parent, $data)"></span>
					<!-- /ko -->
					<br />
					<!-- /ko -->
				</div>
			</div>
		</div>

		<div class="switchContainer">
			<label class="namesSwitch" data-bind="click: toggleNames">
				<input type="checkbox" data-bind="checked: showLogicalName" />
				<span class="slider round"></span>
			</label>
			<span>Display logical names of the fields</span>
		</div>
		<br />
		<br />
	</div>
</script>

<script type="text/html" id="tmplLookupMappingWizardMappingMode">
	<h1>When to apply data mappings</h1>
	<br />
	<p>Specify how you want to use the data mapping you just created.</p>
	<br />
	<div style="display: flex">
		<div style="flex: 1 1 auto">
			<h1>Read data</h1>
			<label class="radioItem" data-bind="css: { radioItemSelected: mappingModeRead() === 1 }">
				<input type="radio" name="mappingRead" data-bind="checked: mappingModeRead, checkedValue: 1" />
				When questionnaire created
			</label>
			<label class="radioItem" data-bind="css: { radioItemSelected: mappingModeRead() === 3 }">
				<input type="radio" name="mappingRead" data-bind="checked: mappingModeRead, checkedValue: 3" />
				On create and on change
			</label>
			<label class="radioItem" data-bind="css: { radioItemSelected: mappingModeRead() === 0 }">
				<input type="radio" name="mappingRead" data-bind="checked: mappingModeRead, checkedValue: 0" />
				Never
			</label>
		</div>
		<div style="flex: 1 1 auto">
			<h1>Write data</h1>
			<label class="radioItem radioItemSelected" data-bind="css: { radioItemSelected: mappingModeWrite() === 12 }">
				<input type="radio" name="mappingWrite" data-bind="checked: mappingModeWrite, checkedValue: 12" />
				On every Save
			</label>
			<label class="radioItem" data-bind="css: { radioItemSelected: mappingModeWrite() === 8 }">
				<input type="radio" name="mappingWrite" data-bind="checked: mappingModeWrite, checkedValue: 8" />
				On Complete only
			</label>
			<label class="radioItem" data-bind="css: { radioItemSelected: mappingModeWrite() === 0 }">
				<input type="radio" name="mappingWrite" data-bind="checked: mappingModeWrite, checkedValue: 0" />
				Never
			</label>
		</div>
	</div>
</script>
<script type="text/html" id="tmplNumberQuestionProperties">
	<!-- ko if: question.parentQuestionnaire?.isNqpQuestionnaire() -->
	<div class="property tooltipsource" data-bind="attr: { 'data-tooltip': question.parentQuestionnaire?.supportsNqpFeatureVersion(2) ? '' : 'QuestionnaireEditor.RequiredFeatureVersion2' }">
		<div class="propertyName"></div>
		<div class="propertyValue">
			<toggle params="value: question.enableBarcodeScanning, enable: !question.isReadOnly && question.parentQuestionnaire?.supportsNqpFeatureVersion(2)"></toggle>Enable Barcode Scanning
		</div>
	</div>
	<div class="property tooltipsource" data-bind="attr: { 'data-tooltip': question.parentQuestionnaire?.supportsNqpFeatureVersion(2) ? '' : 'QuestionnaireEditor.RequiredFeatureVersion2' }">
		<div class="propertyName"></div>
		<div class="propertyValue"><toggle params="value: isSlider, enable: !question.isReadOnly && question.parentQuestionnaire?.supportsNqpFeatureVersion(2)"></toggle>Slider</div>
	</div>
	<!-- ko if: isSlider() -->
	<div class="propertyGroup">
		<div class="propertyGroupTitle">Slider Configuration</div>
		<div class="property tooltipsource">
			<div class="propertyName"></div>
			<div class="propertyValue"><toggle params="value: showLabels, enable: !question.isReadOnly"></toggle>Show Labels</div>
		</div>
		<div class="property tooltipsource">
			<div class="propertyName"></div>
			<div class="propertyValue"><toggle params="value: showMinMax, enable: !question.isReadOnly"></toggle>Show Min/Max</div>
		</div>
		<div class="property tooltipsource">
			<div class="propertyName"></div>
			<div class="propertyValue"><toggle params="value: showMarks, enable: !question.isReadOnly"></toggle>Show Marks</div>
		</div>
	</div>
	<!-- /ko -->
	<!-- /ko -->
	<!-- ko template: { name: 'tmplLabelInlineProperties', data: { view: labelPropertiesViewModel, enabled: !question.isReadOnly } } --><!-- /ko -->
</script>

<script type="text/html" id="tmplNumberQuestionPreviewValue">
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.PreviewAnswer">
		<div class="propertyName">Preview Answer</div>
		<div class="propertyValue">
			<input type="number" data-bind="value: question.reportingProperties.previewAnswer" />
		</div>
	</div>
</script>

<script type="text/html" id="tmplNumberQuestionContent">
	<div>
		<!-- ko with: question -->
		<!-- ko if: !$parent.isActive() || $parent.editor.isReadOnly() -->
		<!-- ko if: defaultValue() !== undefined && defaultValue() !== null -->
		<span class="questionEditor__description">Default value:</span> <span data-bind="text: defaultValue"></span>
		<!-- /ko -->
		<!-- ko if: minimum() !== undefined && minimum() !== null -->
		<span class="questionEditor__description">Minimum:</span><span data-bind="text: minimum"></span>
		<!-- /ko -->
		<!-- ko if: maximum() !== undefined && maximum() !== null -->
		<span class="questionEditor__description">Maximum:</span> <span data-bind="text: maximum"></span>
		<!-- /ko -->
		<!-- ko if: parentQuestionnaire?.isNqpQuestionnaire() && step() !== undefined && step() !== null -->
		<span class="questionEditor__description">Step:</span><span data-bind="text: step"></span>
		<!-- /ko -->
		<!-- ko if: crmType !== Resco.Data.WebService.CrmType.Integer && precision() !== undefined && precision() !== null -->
		<span class="questionEditor__description">Precision:</span><span data-bind="text: precision"></span>
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: $parent.isActive() && !$parent.editor.isReadOnly() -->
		<div class="questionEditor__description__wrapper">
			<span style="width:17%">Default value:</span>
			<input
				style="width: 100px"
				placeholder="Add default value"
				class="questionEditor__description__input"
				type="number"
				data-bind="value: defaultValue"
			/>
		</div>

		<div class="questionEditor__description__wrapper" style="flex-wrap: wrap; gap: 0.25rem;">
			<div style="display: flex;flex-direction: row; flex: 1 1 auto;align-items: baseline">
				<span>Minimum:</span>
				<input
					class="questionEditor__description__limitInput"
					type="text"
					style="width: 100%; max-width: 8rem; min-width: 3rem"
					data-bind="value: minimum"
				/>
			</div>
			<div style="display: flex;flex-direction: row; flex: 1 1 auto;align-items: baseline">
				<span>Maximum:</span>
				<input
					class="questionEditor__description__limitInput"
					type="text"
					style="width: 100%; max-width: 8rem; min-width: 3rem"
					data-bind="value: maximum"
				/>
			</div>
			<div style="display: flex;flex-direction: row; flex: 1 1 auto; align-items: baseline;">
				<!-- ko if: crmType !== Resco.Data.WebService.CrmType.Integer -->
				<span>Precision:</span>
				<input
					class="questionEditor__description__limitInput"
					type="text"
					style="width: 100%; max-width: 4rem; min-width: 3rem"
					data-bind="value: precision, enable: !$parent.isSlider()"
				/>
				<!-- /ko -->
			</div>
			<!-- ko if: parentQuestionnaire?.isNqpQuestionnaire() -->
			<div style="display: flex;flex-direction: row; flex: 1 1 auto; align-items: baseline;">
				<span>Step:</span>
				<input
					class="questionEditor__description__limitInput"
					type="text"
					style="width: 100%; max-width: 4rem; min-width: 3rem"
					data-bind="value: $parent.step, attr: { placeholder: $parent.stepPlaceholder }"
				/>
			</div>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- /ko -->
	</div>
	<!-- ko template: { name: 'tmplNumberQuestionConditionalStyles' } --><!-- /ko -->
</script>

<script type="text/html" id="tmplNumberQuestionConditionalStyles">
	<!-- ko if: isActive() && !editor.isReadOnly() -->
	<!-- ko if: !conditionalStyleItems().length -->
	<p class="conditionStyles-noConditionalStyles" title="Add Smart Range" data-bind="click: createConditionalStyle">
		<i class="questionnairesprite icon-questionnaire_Add"></i>Smart range
	</p>
	<!-- /ko -->
	<!-- ko if: conditionalStyleItems().length -->
	<div class="conditionStyles">
		<div class="optionsGridHeader">
			<div>Smart range:</div>
		</div>
		<!-- ko foreach: conditionalStyleItems -->
		<div class="conditionStyles-row">
			<p class="conditionStyles-row__label">From</p>
			<input class="conditionStyles-row__input" type="number" step="any" placeholder="-&infin;" data-bind="value: $data.fromCondition.value" />
			<p class="conditionStyles-row__label">To</p>
			<input class="conditionStyles-row__input" type="number" step="any" placeholder="&infin;" data-bind="value: $data.toCondition.value" />
			<div style="margin: 0 10px 0 auto;" title="Select style" class="conditionStyles-style conditionStyles-editableItem">
				<!-- ko ifnot: isNQP -->
				<div
					class="conditionStyles-styleIcon"
					data-bind="style: { 'background-color': $data.styleDropDown.value() ? $data.styleDropDown.value().backgroundColor : ($data.styleDropDown.emptyItem() ? $data.styleDropDown.emptyItem().backgroundColor : 'transparent')}"
				></div>
				<div
					class="conditionStyles-styleDropDown"
					data-bind="cbRescoDropDownList: $data.styleDropDown, text: $data.styleDropDown.value() ? $data.styleDropDown.value().name : '<Default>'"
				></div>
				<!-- ko if: $data.styleDropDown.value() -->
				<div
					class="conditionStyles-styleButtonPart"
					data-bind="click: $parent.editor.openEditStylesPage.bind($parent.editor, $data.styleDropDown.value().name, false)"
				>
					<i title="Edit" class="commonuisprite icon-questionnaire_QuestionEditor_optionEdit"></i>
				</div>
				<!-- /ko -->
				<!-- /ko -->
				<!-- ko if: isNQP -->
				<div
					class="conditionStyles-styleIcon"
					title="Edit semantic color"
					data-bind="style: { 'background-color': $data.semanticColorDropdown.value() ? $data.semanticColorDropdown.value().hex : ($data.semanticColorDropdown.emptyItem() ? $data.semanticColorDropdown.emptyItem().backgroundColor : 'transparent') },
					click: function(data, event) { $parent.editor.editSemanticColor(event, $data.semanticColorDropdown.value().name, event.target) }"
				></div>
				<div
					class="conditionStyles-styleDropDown"
					data-bind="cbRescoDropDownList: $data.semanticColorDropdown, text: $data.semanticColorDropdown.value() ? $data.semanticColorDropdown.value().name : '<Default>'"
				></div>
				<!-- ko if: $data.semanticColorDropdown.value() -->
				<div class="conditionStyles-styleButtonPart" data-bind="click: $parent.editor.showGlobalStyleDialog.bind($parent.editor)">
					<i title="Edit global style" class="commonuisprite icon-questionnaire_QuestionEditor_optionEdit"></i>
				</div>
				<!-- /ko -->
				<!-- /ko -->
			</div>
			<!-- ko if: $parent.editor.scoringEnabled() -->
			<p class="conditionStyles-row__label">Score</p>
			<input type="number" step="any" class="conditionStyles-row__input" data-bind="value: score" />
			<!-- /ko -->
			<div style="flex: 0 0 30px" class="conditionStyles-buttonIcon conditionStyles-editableItem">
				<!-- ko if: $index() > 0 --><i
					class="questionnairesprite icon-questionnaire_QuestionEditor_MoveOptionUp"
					title="Move Up"
					data-bind="click: $parent.moveConditionalStyle.bind($parent, $index(), -1)"
				></i>
				<!-- /ko -->
				<!-- ko if: $index() <= 0 -->
				<div style="flex: 0 0 30px"></div>
				<!-- /ko -->
			</div>
			<div style="flex: 0 0 30px" class="conditionStyles-buttonIcon conditionStyles-editableItem">
				<!-- ko if: $index() < ($parent.conditionalStyleItems().length - 1) --><i
					class="questionnairesprite icon-questionnaire_QuestionEditor_MoveOptionDown"
					title="Move Down"
					data-bind="click: $parent.moveConditionalStyle.bind($parent, $index(), 1)"
				>
				</i
				><!-- /ko -->
				<!-- ko if: $index() >= ($parent.conditionalStyleItems().length - 1) -->
				<div style="flex: 0 0 30px"></div>
				<!-- /ko -->
			</div>
			<div style="flex: 0 0 30px" class="conditionStyles-buttonIcon">
				<i
					class="conditionStyles-remove conditionStyles-editableItem questionnairesprite icon-questionnaire_QuestionEditor_RemoveOption"
					title="Remove Smart Range"
					data-bind="click: $parent.removeConditionalStyle.bind($parent, $index())"
				>
				</i>
			</div>
		</div>
		<!-- /ko -->
		<div
			class="conditionStyles-footer conditionStyles-buttonIcon conditionStyles-editableItem"
			title="Add Smart Range"
			data-bind="click: createConditionalStyle"
		>
			<i class="questionnairesprite icon-questionnaire_Add"></i>
		</div>
	</div>
	<!-- /ko -->
	<!-- /ko -->
	<!-- ko if: !isActive() || editor.isReadOnly() -->
	<!-- ko if: conditionalStyleItems().length -->
	<div class="conditionStyles">
		<div class="optionsGridHeader">
			<div>Smart range:</div>
		</div>
		<!-- ko foreach: conditionalStyleItems -->
		<!-- ko if: $index() < 3 -->
		<div class="conditionStyles-row">
			<p style="flex: 0 0 40px;">From</p>
			<p style="flex: 0 0 10%;" data-bind="text: $data.fromCondition.value() ? $data.fromCondition.value : '-&infin;'"></p>
			<p style="flex: 0 0 40px;">To</p>
			<p style="flex: 0 0 10%;" data-bind="text: $data.toCondition.value() ? $data.toCondition.value : '&infin;'"></p>
			<div style="margin: 0 10px 0 auto;" class="conditionStyles-style">
				<!-- ko ifnot: isNQP-->
				<div
					class="conditionStyles-styleIcon"
					data-bind="style: { 'background-color': $data.styleDropDown.value() ? $data.styleDropDown.value().backgroundColor : ($data.styleDropDown.emptyItem() ? $data.styleDropDown.emptyItem().backgroundColor : 'transparent') }"
				></div>
				<div data-bind="text: $data.styleDropDown.value() ? $data.styleDropDown.value().name : '<Default>'"></div>
				<!-- ko if: $data.styleDropDown.value() -->
				<div
					class="conditionStyles-styleButtonPart"
					data-bind="click: $parent.editor.openEditStylesPage.bind($parent.editor, $data.styleDropDown.value().name, false)"
				>
					<i title="Edit" class="commonuisprite icon-questionnaire_QuestionEditor_optionEdit"></i>
				</div>
				<!-- /ko -->
				<!-- /ko -->
				<!-- ko if: isNQP-->
				<div
					title="Edit semantic color"
					class="conditionStyles-styleIcon"
					data-bind="style: { 'background-color': $data.semanticColorDropdown.value() ? $data.semanticColorDropdown.value().hex : ($data.semanticColorDropdown.emptyItem() ? $data.semanticColorDropdown.emptyItem().backgroundColor : 'transparent') }"
				></div>
				<div data-bind="text: $data.semanticColorDropdown.value() ? $data.semanticColorDropdown.value().name : '<Default>'"></div>
				<!-- ko if: $data.semanticColorDropdown.value() -->
				<div class="conditionStyles-styleButtonPart" data-bind="click: $parent.editor.showGlobalStyleDialog.bind($parent.editor)">
					<i title="Edit global style" class="commonuisprite icon-questionnaire_QuestionEditor_optionEdit"></i>
				</div>
				<!-- /ko -->
				<!-- /ko -->
			</div>
			<!-- ko if: $parent.editor.scoringEnabled() -->
			<p style="flex: 0 0 45px">Score</p>
			<p style="flex: 0 0 40px" data-bind="text: score"></p>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: conditionalStyleItems().length > 3 -->
		<div class="conditionStyles-more">
			<div>Click to show more...</div>
		</div>
		<!-- /ko -->
	</div>
	<!-- /ko -->
	<!-- /ko -->
</script>
<script type="text/html" id="tmplOptionSetQuestionProperties">
	<!-- ko template: { name: 'tmplLabelInlineProperties', data: { view: labelPropertiesViewModel, enabled: !question.isReadOnly } } --><!-- /ko -->
	<!-- ko template: { name: 'tmplChoiceInlineProperties', data: { view: choicePropertiesViewModel, enabled: !question.isReadOnly } } --><!-- /ko -->
</script>

<script type="text/html" id="tmplOptionSetQuestionPreviewValue">
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.PreviewAnswer">
		<div class="propertyName">Preview Answer</div>
		<div class="propertyValue">
			<select
				data-bind="options: question.options, optionsText: 'value', optionsValue: 'key', optionsCaption: '', value: question.reportingProperties.previewAnswer"
			></select>
		</div>
	</div>
</script>

<script type="text/html" id="tmplOptionSetQuestionContent">
	<!-- ko if: isActive() -->
	<div class="questionEditor__description__wrapper">
		<span>Default value:</span>
		<select
			class="questionEditor__description__dropDown"
			data-bind="options: optionItems, optionsText: 'value', optionsValue: 'key', optionsCaption: '[none]', valueAllowUnset: true, value: question.defaultValue, enable: !editor.isReadOnly()"
		></select>
	</div>
	<!-- /ko -->
	<div>
		<!-- ko template: { name: 'tmplOptionEditorItems' } -->
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplOptionEditorItems">
	<!-- ko if: isActive() || optionItems().length > 0 -->
	<div class="optionsGridHeader">
		<!-- ko if: ($data instanceof QuestionnaireBuilder.UI.OptionSetQuestionEditorItem) -->
		<div style="flex: 1 0 10%;" class="value">Value</div>
		<!-- /ko -->
		<div style="flex: 1 0 20%;">Label</div>
		<!-- ko if: question.format() !== QuestionnaireBuilder.Data.QuestionDisplayFormat.MultiStringList && question.format() !== QuestionnaireBuilder.Data.QuestionDisplayFormat.MultiStringListInput -->
		<div style="flex: 0 1 220px;">
			<span>Smart style</span>
		</div>
		<!-- /ko -->
		<!-- ko if: editor.scoringEnabled() -->
		<div style="flex: 0 0 60px;">
			<span>Score</span>
		</div>
		<!-- /ko -->
		<!-- ko if: isActive() && !editor.isReadOnly() -->
		<div style="flex: 0 0 30px"></div>
		<div style="flex: 0 0 30px"></div>
		<div style="flex: 0 0"></div>
		<!-- /ko -->
	</div>
	<!-- /ko -->
	<!-- ko if: ($data instanceof QuestionnaireBuilder.UI.OptionSetQuestionEditorItem) -->
	<div class="optionsGridRow">
		<div style="flex: 1 0 10%">
			<span class="key">not answered</span>
		</div>
		<div style="flex: 1 0 20%">
			<input
				type="text"
				placeholder="Custom label"
				data-bind="
				value: canChangeClearOptionLabel() ? question.clearOptionLabel : undefined,
				enable: !editor.isReadOnly() && canChangeClearOptionLabel,
				css: { tooltipsource: !canChangeClearOptionLabel() },
				attr: {
					'data-tooltip': canChangeClearOptionLabel() ? '' : 'QuestionnaireEditor.RequiredFeatureVersion2'
				}"
			/>
		</div>
		<div style="flex: 0 1 220px;"></div>
		<!-- ko if: editor.scoringEnabled() -->
		<div style="flex: 0 0 10%;"></div>
		<!-- /ko -->
		<!-- ko if: isActive() && !editor.isReadOnly() -->
		<div style="flex: 0 0 70px"></div>
		<!-- /ko -->
	</div>
	<!-- /ko -->
	<!-- ko foreach: optionItems -->
	<!-- ko if: $parent.isActive() || $index() < 3 -->
	<div class="optionsGridRow">
		<!-- ko if: ($parent instanceof QuestionnaireBuilder.UI.OptionSetQuestionEditorItem) -->
		<div style="flex: 1 0 10%" class="key">
			<input type="number" step="1" data-bind="value: key, enable: !$parent.editor.isReadOnly()" />
		</div>
		<!-- /ko -->
		<div style="flex: 1 0 20%" class="value">
			<input
				type="text"
				data-bind="value: value,
					valueUpdate: 'keyup',
					hasFocus: $index() === ($parent.optionItems().length - 1),
					enable: !$parent.editor.isReadOnly(),
					cbRescoEnterKey: $parent.addOption.bind($parent)"
			/>
		</div>
		<!-- ko if: $parent.question.format() !== QuestionnaireBuilder.Data.QuestionDisplayFormat.MultiStringList && $parent.question.format() !== QuestionnaireBuilder.Data.QuestionDisplayFormat.MultiStringListInput -->
		<!-- ko if: $parent.question.isNqp -->
		<!-- ko template: { name: 'tmplConditionSemanticColorDropdown' } -->
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko ifnot: $parent.question.isNqp -->
		<!-- ko template: { name: 'tmplConditionStyleDropDown' } -->
		<!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: $parent.editor.scoringEnabled() -->
		<div style="flex: 0 0 10%">
			<input type="number" step="any" data-bind="value: score, enable: !$parent.editor.isReadOnly()" />
		</div>
		<!-- /ko -->
		<!-- ko if: $parent.isActive() && !$parent.editor.isReadOnly() -->
		<div style="flex: 0 0 20px;" class="button-move">
			<!-- ko if: $index() > 0 --><i
				style="cursor: pointer;"
				class="questionnairesprite icon-questionnaire_QuestionEditor_MoveOptionUp"
				title="Move Up"
				data-bind="click: $parent.moveOption.bind($parent, $index(), -1)"
			>
			</i
			><!-- /ko -->
			<!-- ko if: $index() <= 0 -->
			<div style="flex: 0 0 30px;"></div>
			<!-- /ko -->
		</div>
		<div style="flex: 0 0 20px;" class="button-move">
			<!-- ko if: $index() < ($parent.optionItems().length - 1) --><i
				class="questionnairesprite icon-questionnaire_QuestionEditor_MoveOptionDown"
				title="Move Down"
				data-bind="click: $parent.moveOption.bind($parent, $index(), 1)"
			>
			</i
			><!-- /ko -->
			<!-- ko if: $index() >= ($parent.optionItems().length - 1) -->
			<div style="flex: 0 0 30px;"></div>
			<!-- /ko -->
		</div>
		<div style="flex: 0 0 30px;" class="button-remove">
			<!-- ko if: $parent.optionItems().length > 1 -->
			<i
				class="questionnairesprite icon-questionnaire_QuestionEditor_RemoveOption"
				title="Remove Option"
				data-bind="click: $parent.removeOption.bind($parent, $index())"
			>
			</i>
			<!-- /ko -->
		</div>
		<!-- /ko -->
	</div>
	<!-- /ko -->
	<!-- /ko -->
	<!-- ko if: !isActive() && optionItems().length > 3 -->
	<div class="optionsGridFooter">
		<div>Click to show more...</div>
	</div>
	<!-- /ko -->
	<!-- ko if: isActive() && !editor.isReadOnly() -->
	<div class="addNewOption" title="Add new option" data-bind="click: addOption, css: { addNewOption__disabled: !canAddNewOption() }">
		<i class="questionnairesprite icon-questionnaire_Add"></i>
		add new option
	</div>
	<!-- /ko -->
</script>
<script type="text/html" id="tmplBaseEditorItem">
	<div class="baseEditorItemRoot" style="position: relative">
		<!-- ko if: hasDropZone() -->
		<div
			style="position: absolute; bottom: 0px; left: 0px; width: 100%; height: 100%; opacity: 0.01"
			data-bind="cbDropZoneBinding: { data: $data, position: QuestionnaireBuilder.UI.ActiveDropZone.Under }"
		></div>
		<!-- /ko -->

		<!--ko if: editor-->
		<div class="itemSelector" data-bind="visible: editor.multiSelectEnabled, click:select, clickBubble: false;">
			<!--ko if: isSelected-->
			<input type="checkbox" checked />
			<!--/ko-->
			<!--ko ifnot: isSelected-->
			<input type="checkbox" />
			<!--/ko-->
		</div>
		<div class="itemHierarchyIndicator"></div>
		<!--/ko-->

		<div
			class="baseEditorItem"
			data-bind="
				attr: {
					'data-test': typeof $index === 'function' ? 'questionnaireEditor-baseEditorItem-' + $index() : ''
				}"
		>
			<div
				class="card"
				data-bind="
				click: select,
				clickBubble: false,
				style: {
					border: errorMessage() ? 'dashed 2px red' : (isSelected() ? 'dashed 2px #2E69D8' : 'solid 1px #E1E4E8'),
					borderBottomColor: errorMessage() ? 'red' : (isSelected() ? '#2E69D8' : '#E1E4E8')
				}"
			>
				<div
					class="dragHandle customCommandImage card__handler"
					data-bind="cbDragItem: canDrag() ? $data : undefined, style: { cursor: canDrag() ? 'pointer' : 'default' }, isSelected: isSelected()"
				>
					<!-- ko if: canDrag() -->
					<i class="questionnairesprite icon-questionnaire_QuestionEditor_drag"></i>
					<!-- /ko -->
				</div>
				<div class="card__main">
					<!-- ko if: editorTemplateName -->
					<!-- ko template: { name: editorTemplateName } --><!-- /ko -->
					<!-- /ko -->
				</div>
				<div class="card__controls">
					<!-- ko if: errorMessage() -->
					<div class="card__controls__error" style="position: absolute; left: 0px; top: 0px;" data-bind="attr: {title: errorMessage()}">
						<i class="questionnairesprite icon-questionnaire_QuestionEditor_delete"></i>
						<div style="padding-left: 5px">Error</div>
					</div>
					<!-- /ko -->
					<p
						class="question_type"
						data-bind="
							text: title,
							attr: {
								'data-test': typeof $index === 'function' ? 'questionnaireEditor-baseEditorItem-' + $index() + '-title' : ''
							}"
					></p>
					<!-- ko if: isSelected() && !editor.multiSelectEnabled() -->
					<div class="buttons_column"><!-- ko template: {name: customCommandsTemplateName } --><!-- /ko --></div>
					<!-- /ko -->
					<!-- ko if: !isSelected() || editor.multiSelectEnabled() -->
					<div class="buttons_row"><!-- ko template: {name: customCommandsTemplateName } --><!-- /ko --></div>
					<!-- /ko -->
				</div>
				<!-- ko ifnot: parent && parent.multiSelectEnabled -->
				<div class="card__buttons">
					<!-- ko if: isSelected() && !editor.isReadOnly() -->
					<div class="card__buttons__remove" data-bind="click: remove">
						<i class="questionnairesprite icon-questionnaire_QuestionEditor_remove"></i>
					</div>
					<!-- ko if: canMoveUp() -->
					<div class="card__buttons__up" data-bind="click: moveUp">
						<i class="questionnairesprite icon-questionnaire_QuestionEditor_arrowUp"></i>
					</div>
					<!-- /ko -->
					<!-- ko if: canMoveDown() -->
					<div class="card__buttons__down" data-bind="click: moveDown">
						<i class="questionnairesprite icon-questionnaire_QuestionEditor_arrowDown"></i>
					</div>
					<!-- /ko -->
					<!-- /ko -->
				</div>
				<!-- /ko -->
			</div>
			<!-- ko template: { name: 'tmplCreateButtons' } --><!-- /ko -->
		</div>
		<!-- ko if: activeDropZone() === QuestionnaireBuilder.UI.ActiveDropZone.Under && dropGhost -->
		<!-- ko template: { name: 'tmplDropGhostItem', data: dropGhost } --><!-- /ko -->
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplGroupEditorItem">
	<div
		class="baseEditorItem baseEditorItemRoot"
		style="overflow: visible; position: relative; background: transparent;"
		data-bind="cbDropZoneBinding: $data.questionsDropZone, click: select, clickBubble: false, doubleClick: toggleCollapsed"
	>
		<!--ko if: parent-->
		<div class="itemSelector" data-bind="visible: multiSelectEnabled">
			<!--ko if: isSelected-->
			<input type="checkbox" checked />
			<!--/ko-->
			<!--ko ifnot: isSelected-->
			<input type="checkbox" />
			<!--/ko-->
		</div>
		<!-- /ko -->

		<div
			class="card"
			style="background-color: #f4f4f4;"
			data-bind="style: {border: errorMessage() ? 'dashed 2px red' : (isSelected() ? 'dashed 2px #2E69D8' : 'solid 2px #E1E4E8')}"
		>
			<div
				class="dragHandle customCommandImage"
				style="width: 3em; background: transparent; display: flex; flex-direction: column; justify-content: center; align-items: center"
				data-bind="cbDragItem: canDrag() ? $data : undefined, style: { cursor: canDrag() ? 'pointer' : 'default' }"
			>
				<!-- ko if: canDrag() -->
				<i class="questionnairesprite icon-questionnaire_QuestionEditor_drag"></i>
				<!-- /ko -->
			</div>
			<div class="card__main">
				<!-- ko if: editorTemplateName -->
				<!-- ko template: { name: editorTemplateName } --><!-- /ko -->
				<!-- /ko -->
			</div>
			<div style="width: 240px; display: flex; flex-direction: column; justify-content: center; align-items: center">
				<div class="card__controls">
					<div style="display: flex; flex-direction: row; margin: 10px"><!-- ko template: {name: customCommandsTemplateName } --><!-- /ko --></div>
				</div>
			</div>
			<div class="card__buttons">
				<!-- ko if: isSelected() && !editor.isReadOnly() -->
				<div class="card__buttons__remove" data-bind="click: remove">
					<i class="questionnairesprite icon-questionnaire_QuestionEditor_remove"></i>
				</div>
				<!-- ko if: canMoveUp() -->
				<div class="card__buttons__up" data-bind="click: moveUp">
					<i class="questionnairesprite icon-questionnaire_QuestionEditor_arrowUp"></i>
				</div>
				<!-- /ko -->
				<!-- ko if: canMoveDown() -->
				<div class="card__buttons__down" data-bind="click: moveDown">
					<i class="questionnairesprite icon-questionnaire_QuestionEditor_arrowDown"></i>
				</div>
				<!-- /ko -->
				<!-- /ko -->
			</div>
		</div>
	</div>

	<!-- ko if: !editor.isReadOnly() && !editor.multiSelectEnabled() && isSelected()  -->
	<div class="inGroupCreateButtons">
		<!-- ko if: (questionsDropZone.items().length > 0) && !isCollapsed() -->
		<div class="itemHierarchyIndicator"></div>
		<!-- /ko -->
		<!-- ko template: { name: 'tmplCreateButtons' } --><!-- /ko -->
	</div>
	<!-- /ko -->

	<!-- ko if: !isCollapsed() -->
	<!-- ko if: questionsDropZone.activeDropZone() !== QuestionnaireBuilder.UI.ActiveDropZone.None && questionsDropZone.dropGhost -->
	<div style="padding: 0px"><!-- ko template: { name: 'tmplDropGhostItem', data: questionsDropZone.dropGhost } --><!-- /ko --></div>
	<!-- /ko -->
	<div style="position: relative" data-bind="foreach: questionsDropZone.items">
		<!-- ko template: { name: templateName, afterRender: function(elements, form) { appended(elements); } } --><!-- /ko -->
	</div>
	<!-- /ko -->
	<!-- ko if: group.parentQuestionnaire?.scoringEnabled() && !group.parentQuestionnaire.isSnippet() && customizeResults() -->
	<div class="groupEditorItem__results">
		<!-- ko template: { name: 'tmplResultTable', data: { item: $data, resultTable: group.resultTable, title: 'Question group result' } } --><!-- /ko -->
	</div>
	<!-- /ko -->
	<!-- ko if: hasDropZone() -->
	<div style="width: 100%; min-height: 20px" data-bind="cbDropZoneBinding: $data"></div>
	<!-- /ko -->
	<!-- ko if: !hasDropZone() -->
	<div style="width: 100%; min-height: 20px"></div>
	<!-- /ko -->
	<!-- ko if: activeDropZone() !== QuestionnaireBuilder.UI.ActiveDropZone.None && dropGhost -->
	<div style="padding: 0px"><!-- ko template: { name: 'tmplDropGhostItem', data: dropGhost } --><!-- /ko --></div>
	<!-- /ko -->
</script>

<script type="text/html" id="tmplCreateButtons">
	<!-- ko if: enabledGroupInlineAdd() || enabledGroupInlineClone() || enabledQuestionInlineAdd() || enabledQuestionInlineClone() -->
	<div class="create_buttons">
		<!-- ko if: enabledGroupInlineAdd() -->
		<div class="add_group_button" data-bind="click: addGroupWithButton.bind($data, false), clickBubble: false">
			<div>Group</div>
			<i class="questionnairesprite icon-questionnaire_QuestionEditor_add"></i>
		</div>
		<!-- /ko -->
		<!-- ko if: enabledGroupInlineClone() -->
		<div class="clone_button" data-bind="click: clone, clickBubble: false">
			<i class="questionnairesprite icon-questionnaire_QuestionEditor_clone"></i>
		</div>
		<!-- /ko -->
		<!-- ko if: enabledQuestionInlineAdd() -->
		<div class="add_component_button" data-bind="click: openAddComponentDialog.bind($data), clickBubble: false">
			<div>Component</div>
			<i class="questionnairesprite icon-questionnaire_QuestionEditor_add"></i>
		</div>
		<!-- /ko -->
		<!-- ko if: enabledQuestionInlineClone() -->
		<div class="clone_button" data-bind="click: clone, clickBubble: false">
			<i class="questionnairesprite icon-questionnaire_QuestionEditor_clone"></i>
		</div>
		<!-- /ko -->
	</div>
	<!-- /ko -->
</script>

<script type="text/html" id="tmplCreateButtonsHeader">
	<!-- ko if: enabledGroupInlineAddForHeader() || enabledQuestionInlineAddForHeader() -->
	<div class="create_buttons">
		<!-- ko if: enabledGroupInlineAddForHeader() -->
		<div class="add_group_button" data-bind="click: addGroupWithButton.bind($data, true), clickBubble: false">
			<div>Group</div>
			<i class="questionnairesprite icon-questionnaire_QuestionEditor_add"></i>
		</div>
		<!-- /ko -->
		<!-- ko if: enabledQuestionInlineAddForHeader() -->
		<div class="add_component_button" data-bind="click: openAddComponentDialog.bind($data), clickBubble: false">
			<div>Component</div>
			<i class="questionnairesprite icon-questionnaire_QuestionEditor_add"></i>
		</div>
		<!-- /ko -->
	</div>
	<!-- /ko -->
</script>

<script type="text/html" id="tmplSmartPropertyButton">
	<div
		class="customCommandImage"
		style="width: 30px; height: 30px; border-radius: 15px; margin: 5px;"
		data-bind="click: buttonClicked, cbRescoDropDownList: dropDownItem, style: { backgroundColor: buttonColor, cursor: smartProperty() === null || !editor.isReadOnly() ? 'pointer' : 'inherit'}, attr: {title: title}"
	>
		<i data-bind="attr: {class: icon}"></i>
	</div>
</script>

<script type="text/html" id="tmplSmartPropertyButtonLabeled">
	<div class="labeled_buttons">
		<p data-bind="text: title" , style="display: flex; justify-content: center; margin-left: -40px;"></p>
		<div
			class="customCommandImage"
			style="width: 30px; height: 30px; border-radius: 15px; margin: 5px;"
			data-bind="click: buttonClicked, cbRescoDropDownList: dropDownItem, style: { backgroundColor: buttonColor, cursor: smartProperty() === null || !editor.isReadOnly() ? 'pointer' : 'inherit'}"
		>
			<i data-bind="attr: {class: icon}"></i>
		</div>
	</div>
</script>

<script type="text/html" id="tmplLayoutButton">
	<div
		class="customCommandImage"
		style="width: 30px; height: 30px; border-radius: 15px; margin: 5px;"
		data-bind="click: buttonClicked, cbRescoDropDownList: dropDownList, style: { backgroundColor: buttonColor, cursor: !editor.isReadOnly() ? 'pointer' : 'inherit'}, attr: {title: title}"
	>
		<i data-bind="attr: {class: icon}"></i>
	</div>
</script>

<script type="text/html" id="tmplMappingButton">
	<div
		class="customCommandImage"
		style="width: 30px; height: 30px; border-radius: 15px; margin: 5px; cursor: pointer"
		data-bind="click: buttonClicked, style: { backgroundColor: buttonColor }, attr: {title: title}"
	>
		<i data-bind="attr: {class: icon}"></i>
	</div>
</script>

<script type="text/html" id="tmplMappingButtonLabeled">
	<div class="labeled_buttons">
		<p data-bind="text: title" , style="display: flex; justify-content: center; margin-left: -40px;"></p>
		<div
			class="customCommandImage"
			style="width: 30px; height: 30px; border-radius: 15px; margin: 5px; cursor: pointer"
			data-bind="click: buttonClicked, style: { backgroundColor: buttonColor }"
		>
			<i data-bind="attr: {class: icon}"></i>
		</div>
	</div>
</script>

<script type="text/html" id="tmplEditLayout">
	<div
		class="dropdownitem"
		data-bind="style: { 'opacity': $parent.isEditable && $index() === 2 ? '0.6' : '1', 'cursor': $parent.isEditable && $index() === 2 ? 'default' : 'pointer' }, text: $data, css: {'selected' : $parent.highlightSelected() && $data === $parent.selectedItem() }, click: $parent.isEditable && $index() === 2 ? null : $parent.selectValue.bind($parent, $data, $index())"
	></div>
</script>

<script type="text/html" id="tmplGroupCustomCommands">
	<!--<div class="customCommandImage" style="width: 30px; height: 30px; border-radius: 15px; margin: 0px 5px" title="Visible" data-bind="click: onVisibleClicked, cbRescoDropDownList: visibleDropDown, style: { backgroundColor: smartVisibleButtonColor, cursor: group.isVisible() === null || !editor.isReadOnly() ? 'pointer' : 'inherit'}, attr: {title: group.isVisible() === null ? 'Smart Visible' : (group.isVisible() === false ? 'Hidden' : 'Visible')}">
		<i data-bind="attr: {class: 'questionnairesprite icon-questionnaire_QuestionEditor_' + (group.isVisible() === false ? 'hide' : 'show')}" />
	</div>
	<div class="customCommandImage" style="width: 30px; height: 30px; border-radius: 15px; margin: 0px 5px;display: flex;justify-content: center;align-items: center" title="Visible" data-bind="click: onExpandedClicked, cbRescoDropDownList: expandedDropDown, style: { backgroundColor: smartExpandedButtonColor, cursor: group.isExpanded() === null || !editor.isReadOnly() ? 'pointer' : 'inherit'}, attr: {title: group.isExpanded() === null ? 'Smart Expanded' : (group.isExpanded() === false ? 'Collapsed' : 'Expanded')}">
		<i data-bind="attr: {class: 'questionnairesprite icon-questionnaire_QuestionEditor_' + (group.isExpanded() === false ? 'collapsed' : 'expanded')}" />
	</div>
	<div class="customCommandImage" style="width: 30px; height: 30px; border-radius: 15px; margin: 0px 5px;display: flex;justify-content: center;align-items: center" title="Layout" cbRescoDropDownList: layoutDropDown, style: { backgroundColor: smartExpandedButtonColor, cursor: !editor.isReadOnly() ? 'pointer' : 'inherit'}, attr: {title: layoutType === LayoutType.List ? 'list' : 'grid'}">
		<i data-bind="attr: {class: 'questionnairesprite icon-questionnaire_QuestionEditor_' + (group.layoutType() === LayoutType.List ? 'list' : 'grid')}" />
	</div>-->
	<!-- ko template: { name: 'tmplSmartPropertyButton', data: smartVisibleButton } -->
	<!-- /ko -->
	<!-- ko template: { name: 'tmplSmartPropertyButton', data: smartExpandedButton } -->
	<!-- /ko -->
	<!-- ko if: editor.mappingEnabled() -->
	<div class="empty_button"></div>
	<!-- /ko -->
</script>

<script type="text/html" id="tmplQuestionCustomCommands">
	<!-- ko template: { name: (isSelected() && !parent.multiSelectEnabled()) ? 'tmplSmartPropertyButtonLabeled' : 'tmplSmartPropertyButton', data: smartEnabledButton } -->
	<!-- /ko -->
	<!-- ko template: { name: (isSelected() && !parent.multiSelectEnabled()) ? 'tmplSmartPropertyButtonLabeled' : 'tmplSmartPropertyButton', data: smartVisibleButton } -->
	<!-- /ko -->
	<!-- ko template: { name: (isSelected() && !parent.multiSelectEnabled()) ? 'tmplSmartPropertyButtonLabeled' : 'tmplSmartPropertyButton', data: smartRequiredButton } -->
	<!-- /ko -->
	<!-- ko if: editor.mappingEnabled() -->
	<!-- ko if: mappingButton -->
	<!-- ko template: { name: (isSelected() && !parent.multiSelectEnabled()) ? 'tmplMappingButtonLabeled' : 'tmplMappingButton', data: mappingButton } -->
	<!-- /ko -->
	<!-- /ko -->
	<!-- ko if: !mappingButton -->
	<div class="empty_button"></div>
	<!-- /ko -->
	<!-- /ko -->
</script>

<script type="text/html" id="tmplQuestionnaireEditorHeader">
	<!-- ko if: Toolbar && Toolbar.Visible() -->
	<div data-bind="template: { name: Toolbar.TemplateName, data: Toolbar }"></div>
	<!-- /ko -->
</script>

<script type="text/html" id="tmplQuestionnaireEditor">
	<div
		id="questionnaireEditor"
		data-bind="click: deselect, css: { hasLeftPanelInvoker: hasLeftPanelInvokerVisible(), hasRightPanelInvoker: hasRightPanelInvokerVisible() }"
	>
		<!-- ko template: { name: 'tmplQuestionnaireEditorItem', data: questionnaireItem, afterRender: ParentPage.AfterRender.bind(ParentPage) } --><!-- /ko -->
		<div
			style="width: calc(100% - 17px); background: red; opacity: 0; height: 20px; position: absolute; left: 0px; top: 0px"
			data-bind="cbDropScrollBinding: -10"
		></div>
		<div
			style="width: calc(100% - 17px); background: red; opacity: 0; height: 20px; position: absolute; left: 0px; bottom: 0px"
			data-bind="cbDropScrollBinding: 10"
		></div>
	</div>
</script>

<script type="text/html" id="tmplQuestionnaireEditorItem">
	<div class="questionnaireEditorItem">
		<div
			class="questionnaireEditorItem__header"
			data-bind="click: select, clickBubble: false, style: {border: errorMessage() ? 'dashed 2px red' : (isSelected() ? 'dashed 2px #2E69D8' : 'solid 1px #E1E4E8'), borderBottomColor: errorMessage() ? 'red' : (isSelected() ? '#2E69D8' : '#E1E4E8')}"
		>
			<!-- ko if: !isSelected() || editor.isReadOnly() -->
			<!-- ko template: { name: "tmplRescoHeaderImage", data: { galleryControl: $parent.galleryControl, isReadOnly: editor.isReadOnly() } } -->
			<!-- /ko-->
			<div class="questionnaireEditorItemProperties">
				<h3 class="questionnaireEditorItemProperties__title questionnaireEditorItem__wrapText" data-bind="text: questionnaire.name"></h3>
				<!-- ko if: editor.isReadOnly() -->
				<p>* Questionnaire is <b>read-only</b> and cannot be modified</p>
				<!-- /ko -->
				<p class="questionnaireEditorItemProperties__description questionnaireEditorItem__wrapText" data-bind="text: questionnaire.description"></p>
				<!-- ko if: $parent.isNqp() && questionnaire.showCoverLogo() -->
				<!-- ko template: { name: "tmplLogo", data: { logoPicker: $parent.logoPicker, isReadOnly: editor.isReadOnly, isSelected: isSelected, coverLogoFitting: questionnaire.coverLogoFitting, coverLogoHeight: questionnaire.coverLogoHeight } } -->
				<!-- /ko -->
				<!-- /ko -->
				<!-- ko if: $parent.isNqp() && questionnaire.showCoverTableContents() && isSelected() -->
				<input class="questionnaireEditorItemProperties__title" type="text" placeholder="Table of Content" disabled />
				<!-- /ko -->
			</div>
			<!-- /ko -->
			<!-- ko if: isSelected()  && !editor.isReadOnly() -->
			<div class="questionnaireIconContainer">
				<!-- ko template: { name: "tmplRescoHeaderImage", data: { galleryControl: $parent.galleryControl, isReadOnly: editor.isReadOnly() } } -->
				<!-- /ko-->
				<!-- ko if: $parent.galleryControl.selectedItem() && $parent.galleryControl.selectedItem().b64() -->
				<div class="deleteIcon" title="Remove Icon" data-bind="click: $parent.galleryControl.clearImage.bind($parent.galleryControl)">
					<i class="questionnairesprite icon-questionnaire_QuestionEditor_delete"></i>
				</div>
				<!-- /ko -->
			</div>
			<div class="questionnaireEditorItemProperties">
				<div class="questionnaireEditorItemProperties__fieldLabel">Title</div>
				<input
					class="questionnaireEditorItemProperties__title"
					type="text"
					data-bind="value: questionnaire.name, click: function() { return true; }, clickBubble: false, attr: { maxlength: questionnaire.maxNameLength }"
					placeholder="Name"
				/>
				<!-- ko if: $parent.isNqp() && questionnaire.showCoverLogo() -->
				<div class="questionnaireEditorItemProperties__fieldLabel">Logo</div>
				<!-- ko template: { name: "tmplLogo", data: { logoPicker: $parent.logoPicker, isReadOnly: editor.isReadOnly, isSelected: isSelected, coverLogoFitting: questionnaire.coverLogoFitting, coverLogoHeight: questionnaire.coverLogoHeight } } -->
				<!-- /ko -->
				<!-- /ko -->
				<div class="questionnaireEditorItemProperties__fieldLabel">Description</div>
				<autosize-textarea
					class="questionnaireEditorItemProperties__description"
					params="placeholder: 'Description', value: questionnaire.description"
					data-renderMode="append"
				></autosize-textarea>
				<!-- ko if: $parent.isNqp() && questionnaire.showCoverTableContents()-->
				<div class="questionnaireEditorItemProperties__fieldLabel">TOC</div>
				<input class="questionnaireEditorItemProperties__title" type="text" placeholder="Table of Content" disabled />
				<!-- /ko -->
			</div>
			<!-- /ko -->
		</div>

		<!-- ko template: { name: 'tmplCreateButtonsHeader' } --><!-- /ko -->

		<div
			style=" width: 100%; min-height: 4px"
			data-bind="cbDropZoneBinding: { data: questionsDropZone, position: QuestionnaireBuilder.UI.ActiveDropZone.Over }, style: {paddingTop: (questionsDropZone.activeDropZone() !== QuestionnaireBuilder.UI.ActiveDropZone.None && questionsDropZone.dropGhost) ? '20px' : '0px'}"
		>
			<!-- ko if: questionsDropZone.activeDropZone() !== QuestionnaireBuilder.UI.ActiveDropZone.None && questionsDropZone.dropGhost -->
			<!-- ko template: { name: 'tmplDropGhostItem', data: questionsDropZone.dropGhost } --><!-- /ko -->
			<!-- /ko -->
			<!-- ko if: questionsDropZone.highlightDropZone() && questionsDropZone.activeDropZone() === QuestionnaireBuilder.UI.ActiveDropZone.None -->
			<div style="width: 100%; padding-top: 20px">
				<div style="border: dashed 3px #aaaaaa; height: 100px; width: 100%; text-align: center; color: #aaaaaa; font-size: 20px; line-height: 100px">
					DROP HERE
				</div>
			</div>
			<!-- /ko -->
		</div>
		<div style="position: relative" data-bind="foreach: questionsDropZone.items">
			<!-- ko template: { name: templateName, afterRender: function(elements, form) { appended(elements); } } --><!-- /ko -->
		</div>

		<div
			style="width: 100%; min-height: 20px"
			data-bind="cbDropZoneBinding: { data: groupsDropZone, position: QuestionnaireBuilder.UI.ActiveDropZone.Over }, style: {paddingTop: (groupsDropZone.activeDropZone() !== QuestionnaireBuilder.UI.ActiveDropZone.None && groupsDropZone.dropGhost) ? '20px' : '0px'}"
		>
			<!-- ko if: groupsDropZone.activeDropZone() !== QuestionnaireBuilder.UI.ActiveDropZone.None && groupsDropZone.dropGhost -->
			<!-- ko template: { name: 'tmplDropGhostItem', data: groupsDropZone.dropGhost } --><!-- /ko -->
			<!-- /ko -->
			<!-- ko if: groupsDropZone.highlightDropZone() && groupsDropZone.activeDropZone() === QuestionnaireBuilder.UI.ActiveDropZone.None -->
			<div style="width: 100%; padding-top: 20px">
				<div style="border: dashed 3px #aaaaaa; height: 100px; width: 100%; text-align: center; color: #aaaaaa; font-size: 20px; line-height: 100px">
					DROP HERE
				</div>
			</div>
			<!-- /ko -->
		</div>
		<div class="groups" style="position: relative" data-bind="foreach: groupsDropZone.items">
			<!-- ko template: { name: templateName, afterRender: function(elements, form) { appended(elements); } } --><!-- /ko -->
		</div>

		<!-- ko template: { name: 'tmplCreateButtons' } --><!-- /ko -->

		<!-- ko if: questionnaire.scoringEnabled() && !questionnaire.isSnippet() -->
		<div class="questionnaireEditorItem__footer">
			<!-- ko template: { name: 'tmplResultTable', data: { item: $data, resultTable: questionnaire.resultTable, title: 'Questionnaire result' } } --><!-- /ko -->
		</div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplQuestionnairePropertyPanel">
	<div class="propertyBar">
		<!-- ko with: questionnaireItem.questionnaire -->
		<div class="propertyGroup">
			<!-- ko ifnot: $parent.questionnaireItem.isSelected() -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionnaireProperties.Label">
				<div class="propertyName">Label</div>
				<div class="propertyValue">
					<input type="text" placeholder="Name" data-bind="value: name, enable: !isReadOnly, attr: { maxlength: maxNameLength }" />
				</div>
			</div>
			<!-- ko if: $data.versionName -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionnaireProperties.Name">
				<div class="propertyName">Name</div>
				<div class="propertyValue">
					<input type="text" placeholder="Version Name" data-bind="value: versionName, enable: false" />
				</div>
			</div>
			<!-- /ko -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionnaireProperties.Id">
				<div class="propertyName">Id</div>
				<div class="propertyValue">
					<input type="text" style="font-size: 0.7em" placeholder="Id" data-bind="value: id, enable: false" />
				</div>
			</div>
			<!-- ko if: versioningEnabled -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionnaireProperties.Version">
				<div class="propertyName">Version</div>
				<div class="propertyValue">
					<input type="text" placeholder="Version" data-bind="value: version, enable: false" />
				</div>
			</div>
			<!-- /ko -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionnaireProperties.Status">
				<div class="propertyName">Status</div>
				<div class="propertyValue"><span class="fakeTextInput disabled" data-bind="text: statusLabel"></span></div>
			</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionnaireProperties.LastModifiedOn">
				<div class="propertyName">Last Modified On</div>
				<div class="propertyValue"><span class="fakeTextInput disabled" data-bind="text: lastModifiedOnLabel"></span></div>
			</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionnaireProperties.LastModifiedBy">
				<div class="propertyName">Last Modified By</div>
				<div class="propertyValue"><span class="fakeTextInput disabled" data-bind="text: lastModifiedBy"></span></div>
			</div>
			<!-- ko if: !isSnippet() -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionnaireProperties.CompressProperties">
				<div class="propertyName"></div>
				<div class="propertyValue"><toggle params="value: compressProperties, enable: !isReadOnly"></toggle>Compress properties</div>
			</div>
			<!-- /ko -->
			<!-- /ko -->
			<!-- ko if: $parent.questionnaireItem.isSelected() -->
			<div class="propertyGroupTitle">Cover Card</div>
			<!-- ko if: $parent.isNqp -->
			<div class="propertyGroupSubTitle">Elements</div>
			<div class="property">
				<div class="propertyValue" style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;">
					<label>
						<input type="checkbox" data-bind="checked: showCoverTableContents, enable: !isReadOnly" />
						<span>Table of Contents</span>
					</label>
					<label>
						<input type="checkbox" data-bind="checked: showCoverLogo, enable: !isReadOnly" />
						<span>Image/Logo</span>
					</label>
				</div>
			</div>
			<div class="propertyGroupSubTitle">Logo</div>
			<div class="property">
				<div class="propertyGroupSubTitle">Height</div>
				<div class="propertyValue withSegmentedBox">
					<div class="segmentedBox" data-bind="css: { disabled: isReadOnly }">
						<div class="segment" data-bind="css: { selectedSegment: coverLogoHeight() === 'small' }, click: function() { coverLogoHeight('small'); }">
							Small
						</div>
						<div class="segment" data-bind="css: { selectedSegment: coverLogoHeight() === 'large' }, click: function() { coverLogoHeight('large'); }">
							Large
						</div>
						<div class="segment" data-bind="css: { selectedSegment: coverLogoHeight() === 'extra' }, click: function() { coverLogoHeight('extra'); }">
							Extra
						</div>
					</div>
				</div>
			</div>
			<div class="property">
				<div class="propertyGroupSubTitle">Fitting</div>
				<div class="propertyValue withSegmentedBox">
					<div class="segmentedBox" data-bind="css: { disabled: isReadOnly }">
						<div
							class="segment"
							data-bind="css: { selectedSegment: coverLogoFitting() === 'cover' }, click: function() { coverLogoFitting('cover'); }"
						>
							Cover
						</div>
						<div
							class="segment"
							data-bind="css: { selectedSegment: coverLogoFitting() === 'contain' }, click: function() { coverLogoFitting('contain'); }"
						>
							Contain
						</div>
						<div class="segment" data-bind="css: { selectedSegment: coverLogoFitting() === 'fill' }, click: function() { coverLogoFitting('fill'); }">
							Fill
						</div>
					</div>
				</div>
			</div>
			<!-- /ko -->
			<!-- ko if: !isReadOnly -->
			<div class="propertyGroupSubTitle">Questionnaire Icon</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionnaireProperties.QuestionnaireIcon">
				<div class="propertyValue" style="padding: 0;flex-direction: column;">
					<!-- ko template: {name: "tmplRescoImageGallery", data: $parent.galleryControl} -->
					<!-- /ko-->
				</div>
			</div>
			<!-- /ko -->
			<!-- /ko -->
		</div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplGroupEditor">
	<div class="questionEditor__label" style="display: flex; align-items: center;">
		<i
			style="cursor: pointer; margin-right: 4px"
			data-bind="click: toggleCollapsed, attr: {class: 'questionnairesprite icon-questionnaire_ComponentItems_' + (isCollapsed() === false ? 'collapseQuestion' : 'expandQuestion')}, clickBubble: false"
		></i>
		<!-- ko if: !isActive() || editor.isReadOnly() -->
		<div class="questionEditor__wrapText" style="white-space: normal">
			<span style="cursor: pointer; color: #2e69d8;" data-bind="text: title, click: toggleCollapsed, clickBubble: false"></span>:
			<span data-bind="text: group.label"></span>
		</div>
		<!-- /ko -->
		<!-- ko if: isActive() && !editor.isReadOnly() -->
		<div style="cursor: pointer; color: #2e69d8" data-bind="text: title() + ': ', click: toggleCollapsed, clickBubble: false"></div>
		<input class="questionEditor__label__input" type="text" data-bind="value: group.label" />
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplGroupPropertyPanel">
	<div class="propertyBar">
		<!-- ko with: group -->
		<div class="propertyGroup">
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.Name">
				<div class="propertyName">Name</div>
				<div class="propertyValue">
					<input type="text" placeholder="Name" data-bind="value: $parent.name, enable: !isReadOnly, attr: { maxlength: maxNameLength }" />
				</div>
			</div>
		</div>
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Content Layout</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.LayoutType">
				<div class="propertyName">Type</div>
				<div class="propertyValue withSegmentedBox">
					<div class="segmentedBox" data-bind="css: { disabled: isReadOnly }">
						<div class="segment" data-bind="css: { selectedSegment: layoutType() !== 1 }, click: function() { $parent.setListLayout(); }">Auto</div>
						<div class="segment" data-bind="css: { selectedSegment: layoutType() === 1 }, click: function() { $parent.setGridLayout(); }">Grid</div>
					</div>
				</div>
			</div>
			<!-- ko if: layoutType() === 1 -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.GridLayout">
				<div class="propertyName">Grid Layout</div>
				<div class="propertyValue">
					<span style="color: blue; text-decoration: underline; cursor: pointer" data-bind="click: $parent.editLayout.bind($parent, false)"
						>Edit</span
					>
				</div>
			</div>
			<!-- /ko -->
		</div>
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Properties</div>
			<!-- ko if: parentQuestionnaire && parentQuestionnaire.reuseEnabled() -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.Reuse">
				<div class="propertyName"></div>
				<div class="propertyValue"><toggle params="value: $parent.reuseFromPrevious, enable: !isReadOnly"></toggle>Reuse</div>
			</div>
			<!-- /ko -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.Repeatable">
				<div class="propertyName"></div>
				<div class="propertyValue"><toggle params="value: repeatable, enable: !isReadOnly"></toggle>Repeatable</div>
			</div>
			<!-- ko if: repeatable() -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.MinRepeatCount">
				<div class="propertyName">Min Repeat Count</div>
				<div class="propertyValue"><input type="number" min="0" data-bind="value: minRepeatCount, enable: !isReadOnly" /></div>
			</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.MaxRepeatCount">
				<div class="propertyName">Max Repeat Count</div>
				<div class="propertyValue"><input type="number" min="1" data-bind="value: maxRepeatCount, enable: !isReadOnly" /></div>
			</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.ShowRepeatButton">
				<div class="propertyName"></div>
				<div class="propertyValue"><toggle params="value: showRepeatButton, enable: !isReadOnly"></toggle>Show Repeat Button</div>
			</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.ShowDeleteRepeatedButton">
				<div class="propertyName"></div>
				<div class="propertyValue"><toggle params="value: showDeleteRepeatedButton, enable: !isReadOnly"></toggle>Show Delete Button</div>
			</div>
			<!-- ko if: parentQuestionnaire && parentQuestionnaire.isNqpQuestionnaire() -->
			<div class="property tooltipsource" data-bind="attr: { 'data-tooltip': parentQuestionnaire.supportsNqpFeatureVersion(2) ? 'QuestionnaireEditor.GroupProperties.CompactView' : 'QuestionnaireEditor.RequiredFeatureVersion2' }">
				<div class="propertyName">Display Style</div>
				<div class="propertyValue withSegmentedBox">
					<div class="segmentedBox" data-bind="css: { disabled: isReadOnly || !parentQuestionnaire.supportsNqpFeatureVersion(2) }">
						<div class="segment" data-bind="css: { selectedSegment: !compactView() }, click: function() { if (!isReadOnly && parentQuestionnaire.supportsNqpFeatureVersion(2)) { compactView(false); } }">
							Cards
						</div>
						<div class="segment" data-bind="css: { selectedSegment: compactView() }, click: function() { if (!isReadOnly && parentQuestionnaire.supportsNqpFeatureVersion(2)) { compactView(true); } }">
							Table
						</div>
					</div>
				</div>
			</div>
			<!-- /ko -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.CopyValues">
				<div class="propertyName"></div>
				<div class="propertyValue"><toggle params="value: copyValues, enable: !isReadOnly"></toggle>Enable to copy values</div>
			</div>
			<!-- ko if: copyValues() -->
			<div class="property">
				<div class="propertyName">Copy values</div>
				<div class="propertyValue withSegmentedBox">
					<div class="segmentedBox" data-bind="css: { disabled: isReadOnly }">
						<div
							class="segment"
							data-bind="css: { selectedSegment: copyValuesType() === 'InAllQuestions' }, click: function() { copyValuesType('InAllQuestions'); }"
						>
							In all questions
						</div>
						<div class="segment" data-bind="css: { selectedSegment: copyValuesType() === 'Custom' }, click: function() { copyValuesType('Custom'); }">
							Custom
						</div>
					</div>
				</div>
			</div>
			<!-- /ko -->
			<!-- /ko -->
			<!-- ko if: parentQuestionnaire && parentQuestionnaire.scoringEnabled() && !parentQuestionnaire.isSnippet() -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.CustomizeResults">
				<div class="propertyName">Customize Results</div>
				<div class="propertyValue"><input type="checkbox" data-bind="checked: $parent.customizeResults, enable: !isReadOnly" /></div>
			</div>
			<!-- /ko -->
		</div>
		<!-- ko if: parentQuestionnaire && parentQuestionnaire.enableAutoreport && !parentQuestionnaire.isNqpQuestionnaire() -->
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Reporting</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.ShowHeader">
				<div class="propertyName"></div>
				<div class="propertyValue"><toggle params="value: reportingProperties.showHeader, enable: !isReadOnly"></toggle>Show Header</div>
			</div>
			<!-- ko if: reportingProperties.showHeader() -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.HeaderStyle">
				<div class="propertyName">Header Style</div>
				<div class="propertyValue withButton">
					<div class="propertyValuePart">
						<select
							data-bind="options: parentQuestionnaire ? parentQuestionnaire.reportingProperties.reportStyles.items : [], optionsText: 'name', optionsValue: 'name', value: reportingProperties.styleName, valueAllowUnset: true, optionsCaption: '<Default>', enable: !isReadOnly"
						></select>
					</div>
					<!-- ko if: reportingProperties.styleName() -->
					<div
						class="propertyButtonPart"
						data-bind="click: $parent.editor.openEditStylesPage.bind($parent.editor, reportingProperties.styleName(), true)"
					>
						<i title="Edit" class="commonuisprite icon-questionnaire_propertyEdit"></i>
					</div>
					<!-- /ko -->
				</div>
			</div>
			<!-- /ko -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.QuestionsLayout">
				<div class="propertyName">Questions Layout</div>
				<div class="propertyValue">
					<select data-bind="value: reportingProperties.questionsLayout, valueAllowUnset: false, enable: !isReadOnly">
						<option value="0">Custom</option>
						<option value="1">Horizontal</option>
						<option value="2">Vertical</option>
					</select>
				</div>
			</div>
			<!-- ko if: reportingProperties.questionsLayout() === 0 -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.CustomLayout">
				<div class="propertyName">Custom Layout</div>
				<div class="propertyValue">
					<span style="color: blue; text-decoration: underline; cursor: pointer" data-bind="click: $parent.editReportLayout.bind($parent, false)"
						>Edit</span
					>
					<!-- ko if: layoutType() === 1 -->
					&nbsp;|
					<span style="color: blue; text-decoration: underline; cursor: pointer" data-bind="click: $parent.editReportLayout.bind($parent, true)"
						>Copy from Form</span
					>
					<!-- /ko -->
				</div>
			</div>
			<!-- /ko -->
			<!-- ko if: repeatable() -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.RepeatLayout">
				<div class="propertyName">Repeat Layout</div>
				<div class="propertyValue">
					<select data-bind="value: reportingProperties.repeatableGroupLayout, valueAllowUnset: false, enable: !isReadOnly">
						<option value="0">Default</option>
						<option value="2">Compact</option>
					</select>
				</div>
			</div>
			<!-- /ko -->
			<!-- ko if: reportingProperties.questionsLayout() !== QuestionnaireBuilder.Data.ReportQuestionsLayout.Custom -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.BreakAfter">
				<div class="propertyName">Break After</div>
				<div class="propertyValue">
					<input type="number" data-bind="value: reportingProperties.breakAfter, enable: !isReadOnly" />
				</div>
			</div>
			<!-- /ko -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.BorderType">
				<div class="propertyName">Border Type</div>
				<div class="propertyValue">
					<select data-bind="value: reportingProperties.border, valueAllowUnset: false, enable: !isReadOnly">
						<option value="0">No Border</option>
						<option value="1">Outside Border</option>
						<!-- ko if: reportingProperties.questionsLayout() !== QuestionnaireBuilder.Data.ReportQuestionsLayout.Custom -->
						<option value="2">Rows</option>
						<option value="3">Columns</option>
						<option value="4">Grid</option>
						<!-- /ko -->
					</select>
				</div>
			</div>
			<!-- ko if: reportingProperties.border() !== QuestionnaireBuilder.Data.ReportGroupBorder.None -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.GroupProperties.LineColor">
				<div class="propertyName">Line Color</div>
				<div class="propertyValue" data-bind="style: {cursor: !isReadOnly ? 'pointer' : 'auto'}">
					<div
						style="width: 35px; height: 100%; border: solid 1px black; display: inline-block"
						data-bind="cbColorPicker: reportingProperties.borderColor, style: {background: reportingProperties.borderColor}"
					></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: reportingProperties.borderColor, text: reportingProperties.borderColor"></span>
				</div>
			</div>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplQuestionEditor">
	<div style="width: 100%;" data-bind="attr: {class: rootClass}">
		<!-- ko if: !isActive() || editor.isReadOnly() -->
		<!-- ko if: showLabel -->
		<div class="questionEditor__label--wrapper">
			<span class="questionEditor__label questionEditor__wrapText" data-bind="text: question.label"></span>
			<!-- ko if: editor.scoringEnabled() && (minScore() || maxScore()) -->
			<div class="scoringLabel" data-bind="attr: {title: 'Score: ' + minScore() + ' - ' + maxScore()}">
				<span class="scoringLabel__name">Max Score:</span><span class="scoringLabel__number" data-bind="text: Math.floor(maxScore())"></span>
			</div>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- ko if: showDescription -->
		<div class="questionEditor__description questionEditor__wrapText" data-bind="text: question.description"></div>
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: isActive() && !editor.isReadOnly() -->
		<!-- ko if: showLabel -->
		<div class="questionEditor__label--wrapper">
			<input class="questionEditor__label" type="text" placeholder="Set Label" data-bind="value: question.label" />
			<!-- ko if: editor.scoringEnabled() && (minScore() || maxScore()) -->
			<div class="scoringLabel" data-bind="attr: {title: 'Score: ' + minScore() + ' - ' + maxScore()}">
				<span class="scoringLabel__name">Max Score:</span><span class="scoringLabel__number" data-bind="text: Math.floor(maxScore())"></span>
			</div>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- ko if: showDescription -->
		<div class="questionEditor__description__wrapper" style="margin-left: 0">
			<autosize-textarea
				class="questionEditor__description__inputDescr"
				style="padding-left: 10px"
				params="placeholder: 'Add Description', value: question.description"
				data-renderMode="append"
			></autosize-textarea>
		</div>
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if:questionContentTemplateName -->
		<!-- ko template: { name: questionContentTemplateName } --><!-- /ko -->
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplAggregatedQuestionsPropertyPanel">
	<div class="propertyBar">
		<!-- ko if: showProperties -->
		<div class="propertyGroup">
			<!-- ko if: questionsStyle.editor.isNqp -->
			<div class="propertyGroupTitle">Semantic Color</div>
			<!-- /ko -->
			<!-- ko ifnot: questionsStyle.isNqp -->
			<div class="propertyGroupTitle">Style</div>
			<!-- /ko -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.StyleName">
				<div class="propertyName">Name</div>
				<div class="propertyValue withButton">
					<!-- ko if: questionsStyle.isNqp -->
					<div class="propertyValuePart">
						<select
							data-bind="options: questionsStyle.availableSemanticColors, optionsText: 'name', optionsValue: 'name', value: questionsStyle.selectedStyle, valueAllowUnset: false, enable: !questionsStyle.isReadOnly, event:{ change: questionsStyle.onStyleChange.bind($data.questionsStyle)}"
						></select>
					</div>
					<!-- ko if: questionsStyle.selectedStyle() && !questionsStyle.hasDifferentQuestionStyles() -->
					<span
						data-bind="style: { backgroundColor: questionsStyle.availableSemanticColors().find(color => color.name === questionsStyle.selectedStyle()).hex, width: '8px', height: '10px', display: 'inline-block', borderRadius: '3px', margin: '2px', border: '1px solid black' }"
					></span>
					<div class="propertyButtonPart" data-bind="click: questionsStyle.editor.showGlobalStyleDialog.bind(questionsStyle.editor)">
						<i title="Edit" class="commonuisprite icon-questionnaire_propertyEdit"></i>
					</div>
					<!-- /ko -->
					<!-- /ko -->
					<!-- ko ifnot: questionsStyle.isNqp -->
					<div class="propertyValuePart">
						<select
							data-bind="options: questionsStyle.styles ? questionsStyle.styles : [], optionsText: 'name', optionsValue: 'name', value: questionsStyle.selectedStyle, valueAllowUnset: false, enable: !questionsStyle.isReadOnly, event:{ change: questionsStyle.onStyleChange.bind($data.questionsStyle)}"
						></select>
					</div>
					<!-- ko if: questionsStyle.selectedStyle() && !questionsStyle.hasDifferentQuestionStyles() -->
					<div
						class="propertyButtonPart"
						data-bind="click: questionsStyle.editor.openEditStylesPage.bind(questionsStyle.editor, questionsStyle.selectedStyle(), false)"
					>
						<i title="Edit" class="commonuisprite icon-questionnaire_propertyEdit"></i>
					</div>
					<!-- /ko -->
					<!-- /ko -->
				</div>
			</div>
		</div>
		<!-- ko if: !$parent.isNqp -->
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Reporting</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.ShowOnReport">
				<div class="propertyName">Show on Report</div>
				<div class="propertyValue">
					<input type="checkbox" data-bind="nullableChecked: reportingStyles.showOnReport, enable: !reportingStyles.isReadOnly" />
				</div>
			</div>
			<!-- ko if: reportingStyles.enableAutoreport -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.Style">
				<div class="propertyName">Style</div>
				<div class="propertyValue withButton">
					<div class="propertyValuePart">
						<select
							data-bind="options: reportingStyles.styles ? reportingStyles.styles : [], optionsText: 'name', optionsValue: 'name', optionsCaption: '<Default>', value: reportingStyles.selectedStyle, valueAllowUnset: true, enable: !reportingStyles.isReadOnly, event:{ change: reportingStyles.onReportStyleChange.bind($data.reportingStyles)}"
						></select>
					</div>
					<!-- ko if: reportingStyles.reportingProperties.styleName() && !reportingStyles.hasDifferentReportingStyles() -->
					<div
						class="propertyButtonPart"
						data-bind="click: reportingStyles.editor.openEditStylesPage.bind(reportingStyles.editor, reportingStyles.styleName(), true)"
					>
						<i title="Edit" class="commonuisprite icon-questionnaire_propertyEdit"></i>
					</div>
					<!-- /ko -->
				</div>
			</div>
			<!-- /ko -->
		</div>
		<!-- /ko -->

		<!-- ko if: reuse.reuseEnabled() || copyValues.copyValuesEnabled() -->
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Properties</div>
			<!-- ko if: reuse.reuseEnabled() -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.Reuse">
				<div class="propertyName">Reuse</div>
				<div class="propertyValue"><input type="checkbox" data-bind="nullableChecked: reuse.reuseFromPrevious, enable: !reuse.isReadOnly" /></div>
			</div>
			<!-- /ko -->
			<!-- ko if: copyValues.copyValuesEnabled() -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.CopyValues">
				<div class="propertyName">Copy values</div>
				<div class="propertyValue"><input type="checkbox" data-bind="nullableChecked: copyValues.copyValues, enable: !copyValues.isReadOnly" /></div>
			</div>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplQuestionPropertyPanel">
	<div class="propertyBar">
		<!-- ko with: question -->
		<div class="propertyGroup">
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.Name">
				<div class="propertyName">Name</div>
				<div class="propertyValue">
					<input
						type="text"
						placeholder="Name"
						data-bind="value: $parent.name, enable: !isReadOnly && $parent.name() !== QuestionnaireBuilder.Data.Question.regardingIdName && $parent.name() !== QuestionnaireBuilder.Data.Question.questionnaireLogoName, attr: { maxlength: maxNameLength }"
					/>
				</div>
			</div>
			<!-- ko if: isNqp -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.SemanticColorName">
				<div class="propertyName">Semantic Color</div>
				<div class="propertyValue withButton">
					<div class="propertyValuePart">
						<select
							data-bind="options: availableSemanticColors, optionsText: 'name', optionsValue: 'value', value: style, valueAllowUnset: false, enable: !isReadOnly"
						></select>
					</div>
					<!-- ko if: style() -->
					<span
						data-bind="style: { backgroundColor: availableSemanticColors().find(color => color.name === style()).hex, width: '8px', height: '10px', display: 'inline-block', borderRadius: '3px', margin: '2px', border: '1px solid black' }, click: function(data, event) { $parent.editor.editSemanticColor(event, style(), event.target)}"
					></span>
					<div class="propertyButtonPart" data-bind="click: $parent.editor.showGlobalStyleDialog.bind($parent.editor)">
						<i title="Edit" class="commonuisprite icon-questionnaire_propertyEdit"></i>
					</div>
					<!-- /ko -->
				</div>
			</div>
			<!-- /ko -->
			<!-- ko ifnot: isNqp -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.StyleName">
				<div class="propertyName">Style</div>
				<div class="propertyValue withButton">
					<div class="propertyValuePart">
						<select
							data-bind="options: parentQuestionnaire ? parentQuestionnaire.styles.items : [], optionsText: 'name', optionsValue: 'name', value: style, valueAllowUnset: false, enable: !isReadOnly"
						></select>
					</div>
					<!-- ko if: style() -->
					<div class="propertyButtonPart" data-bind="click: $parent.editor.openEditStylesPage.bind($parent.editor, style(), false)">
						<i title="Edit" class="commonuisprite icon-questionnaire_propertyEdit"></i>
					</div>
					<!-- /ko -->
				</div>
			</div>
			<!-- /ko -->
		</div>
		<!-- ko if: (parentGroup && parentGroup.copyValues()) || (parentQuestionnaire && !parentQuestionnaire.isSnippet() && parentQuestionnaire.reuseEnabled()) -->
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Properties</div>
			<!-- ko if: parentGroup && parentGroup.copyValues() -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.CopyValues">
				<div class="propertyName"></div>
				<div class="propertyValue"><toggle params="value: copyValues, enable: !isReadOnly"></toggle>Copy values</div>
			</div>
			<!-- /ko -->
			<!-- ko if: parentQuestionnaire && !parentQuestionnaire.isSnippet() && parentQuestionnaire.reuseEnabled() -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.Reuse">
				<div class="propertyName"></div>
				<div class="propertyValue"><toggle params="value: reuseFromPrevious, enable: !isReadOnly"></toggle>Reuse</div>
			</div>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- ko if: $parent.propertiesTemplateName-->
		<div class="propertyGroup"><!-- ko template: {name: $parent.propertiesTemplateName, data: $parent } --><!-- /ko --></div>
		<!-- /ko -->
		<!-- ko if: parentQuestionnaire && !parentQuestionnaire.isNqpQuestionnaire()  -->
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Reporting</div>
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.ShowOnReport">
				<div class="propertyName"></div>
				<div class="propertyValue"><toggle params="value: showOnReport, enable: !isReadOnly"></toggle>Show on Report</div>
			</div>
			<!-- ko if: parentQuestionnaire && parentQuestionnaire.enableAutoreport && showOnReport -->
			<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.Style">
				<div class="propertyName">Style</div>
				<div class="propertyValue withButton">
					<div class="propertyValuePart">
						<select
							data-bind="options: parentQuestionnaire ? parentQuestionnaire.reportingProperties.reportStyles.items : [], optionsText: 'name', optionsValue: 'name', optionsCaption: '<Default>', value: reportingProperties.styleName, valueAllowUnset: true, enable: !isReadOnly"
						></select>
					</div>
					<!-- ko if: reportingProperties.styleName() -->
					<div
						class="propertyButtonPart"
						data-bind="click: $parent.editor.openEditStylesPage.bind($parent.editor, reportingProperties.styleName(), true)"
					>
						<i title="Edit" class="commonuisprite icon-questionnaire_propertyEdit"></i>
					</div>
					<!-- /ko -->
				</div>
			</div>
			<!-- ko if: $parent.autoreportPropertiesTemplateName -->
			<!-- ko template: {name: $parent.autoreportPropertiesTemplateName, data: $parent } --><!-- /ko -->
			<!-- /ko -->
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplResultTable">
	<div class="conditionStyles resultTable">
		<div class="conditionStyles-titleBar">
			<p class="conditionStyles-title" data-bind="text: title"></p>
			<div class="availableRange">
				<span class="availableRange__label">Available range:</span>
				<span
					class="availableRange__number"
					data-bind="text: item.minScore, attr: {title: 'Score: ' + item.minScore() + ' - ' + item.maxScore()}"
				></span>
				-
				<span
					class="availableRange__number"
					data-bind="text: item.maxScore, attr: {title: 'Score: ' + item.minScore() + ' - ' + item.maxScore()}"
				></span>
			</div>
		</div>

		<div class="conditionStyles-row-footer">
			<div style="flex: 0 0 90px" class="value">From</div>
			<div style="flex: 0 0 90px">To</div>
			<div style="flex: 1 1 auto">Result</div>
			<div style="flex: 0 0 30px"></div>
		</div>

		<!-- ko foreach: resultTable.lines -->
		<div class="conditionStyles-row">
			<div style="flex: 0 0 80px;margin: 3px 10px 3px 0;">
				<input type="number" placeholder="-&infin;" step="any" data-bind="value: from, enable: !$parent.item.editor.isReadOnly()" />
			</div>
			<div style="flex: 0 0 80px;  margin: 3px 10px 3px 0;">
				<input type="number" placeholder="&infin;" step="any" data-bind="value: to, enable: !$parent.item.editor.isReadOnly()" />
			</div>
			<div style="flex: 1 1 auto; margin: 3px 10px 3px 0;">
				<input type="text" maxlength="256" data-bind="value: result, enable: !$parent.item.editor.isReadOnly()" />
			</div>
			<!-- ko if: !$parent.item.editor.isReadOnly() -->
			<div style="flex: 0 0 30px" class="conditionStyles-buttonIcon">
				<i
					class="conditionStyles-remove conditionStyles-editableItem questionnairesprite icon-questionnaire_QuestionEditor_RemoveOption"
					title="Remove smart range"
					data-bind="click: $parent.resultTable.removResultRange.bind($parent.resultTable, $index())"
				>
				</i>
			</div>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- ko if: !item.editor.isReadOnly() -->
		<div
			class="conditionStyles-footer conditionStyles-buttonIcon conditionStyles-editableItem"
			title="Add smart range"
			data-bind="click: resultTable.addNewResultRange.bind(resultTable)"
		>
			<i class="questionnairesprite icon-questionnaire_Add"></i>
		</div>
		<!-- /ko -->
	</div>
</script>

<!-- templates for reporting preview values -->

<script type="text/html" id="tmplTextAreaQuestionPreviewValue">
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.PreviewAnswer">
		<div class="propertyName">Preview Answer</div>
		<div class="propertyValue">
			<textarea data-bind="value: question.reportingProperties.previewAnswer" style="border: 0; font-family: 'Arial'; width: 100%; height: 95%">
			</textarea>
		</div>
	</div>
</script>

<script type="text/html" id="tmplLookupQuestionPreviewValue">
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.PreviewAnswer">
		<div class="propertyName">Preview Answer</div>
		<div class="propertyValue">
			<span
				type="text"
				class="fakeTextInput"
				style="color: #0066CC; text-decoration: underline; padding-left: 5px;"
				title="Default Value"
				data-bind="text: defaultValueLabel, click: !editor.isReadOnly() && setDefaultValue, style: { cursor: !editor.isReadOnly() ? 'pointer' : 'default' }"
			>
			</span>
		</div>
	</div>
</script>

<script type="text/html" id="tmplChoiceQuestionPreviewValue">
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.PreviewAnswer">
		<div class="propertyName">Preview Answer</div>
		<div class="propertyValue">
			<select
				data-bind="options: optionItems, optionsText: 'value', optionsValue: 'value', optionsCaption: '', value: question.reportingProperties.previewAnswer"
			></select>
		</div>
	</div>
</script>
<!-- END Reporting template for preview values -->

<script type="text/html" id="tmplStyleDropDownEmpty">
	<div
		class="conditionStyles-style conditionStylesListItem"
		data-bind="css: {'selected' : !$parent.selectedItem() }, click: $parent.selectValue.bind($parent, undefined, -1)"
	>
		<div class="conditionStyles-styleIcon" data-bind="style: { 'background-color': $data.backgroundColor }"></div>
		<p data-bind="text: '<Default>'"></p>
	</div>
</script>

<script type="text/html" id="tmplStyleDropDownItem">
	<div
		class="conditionStyles-style conditionStylesListItem"
		data-bind="css: {'selected' : $data === $parent.selectedItem() }, click: $parent.selectValue.bind($parent, $data, $index())"
	>
		<div class="conditionStyles-styleIcon" data-bind="style: { 'background-color': $data.backgroundColor }"></div>
		<p data-bind="text: $data.name"></p>
	</div>
</script>

<script type="text/html" id="tmplConditionStyleDropDown">
	<div style="flex: 0 1 220px;" title="Smart style" class="conditionStyles-style conditionStyles-editableItem">
		<div
			class="conditionStyles-styleIcon"
			data-bind="style: { 'background-color': $data.styleDropDown.value() ? $data.styleDropDown.value().backgroundColor : ($data.styleDropDown.emptyItem() ? $data.styleDropDown.emptyItem().backgroundColor : 'transparent') }"
		></div>
		<!-- ko if: $parent.isActive() && !$parent.editor.isReadOnly() -->
		<div
			class="conditionStyles-styleDropDown"
			data-bind="cbRescoDropDownList: $data.styleDropDown, text: $data.styleDropDown.value() ? $data.styleDropDown.value().name : '<Default>'"
		></div>
		<!-- /ko -->
		<!-- ko ifnot: $parent.isActive() && !$parent.editor.isReadOnly() -->
		<div data-bind="text: $data.styleDropDown.value() ? $data.styleDropDown.value().name : '<Default>'"></div>
		<!-- /ko -->
		<!-- ko if: $parent.isActive() && $data.styleDropDown.value() -->
		<div
			class="conditionStyles-styleButtonPart"
			data-bind="click: $parent.editor.openEditStylesPage.bind($parent.editor, $data.styleDropDown.value().name, false)"
		>
			<i title="Edit" class="commonuisprite icon-questionnaire_QuestionEditor_optionEdit"></i>
		</div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplSemanticColorDropDownItem">
	<div
		class="conditionStyles-style conditionStylesListItem"
		data-bind="css: {'selected' : $data === $parent.selectedItem() }, click: $parent.selectValue.bind($parent, $data, $index())"
	>
		<div class="conditionStyles-styleIcon" data-bind="style: { 'background-color': $data.hex }"></div>
		<p data-bind="text: $data.name"></p>
	</div>
</script>

<script type="text/html" id="tmplSemanticColorDropDownEmpty">
	<div
		class="conditionStyles-style conditionStylesListItem"
		data-bind="css: {'selected' : !$parent.selectedItem() }, click: $parent.selectValue.bind($parent, undefined, -1)"
	>
		<div class="conditionStyles-styleIcon" data-bind="style: { 'background-color': $data.hex }"></div>
		<p data-bind="text: '<Default>'"></p>
	</div>
</script>

<script type="text/html" id="tmplConditionSemanticColorDropdown">
	<div style="flex: 0 1 220px;" title="Smart style" class="conditionStyles-style conditionStyles-editableItem">
		<div
			class="conditionStyles-styleIcon"
			data-bind="style: { 'background-color': $data.semanticColorDropdown.value() ? $data.semanticColorDropdown.value().hex : ($data.semanticColorDropdown.emptyItem() ? $data.semanticColorDropdown.emptyItem().hex : 'transparent') }, click: function(data, event) { $parent.editor.editSemanticColor(event, $data.semanticColorDropdown.value().name, event.target) }"
		></div>
		<!-- ko if: $parent.isActive() && !$parent.editor.isReadOnly() -->
		<div
			class="conditionStyles-styleDropDown"
			data-bind="cbRescoDropDownList: $data.semanticColorDropdown, text: $data.semanticColorDropdown.value() ? $data.semanticColorDropdown.value().name : '<Default>'"
		></div>
		<!-- /ko -->
		<!-- ko ifnot: $parent.isActive() && !$parent.editor.isReadOnly() -->
		<div data-bind="text: $data.semanticColorDropdown.value() ? $data.semanticColorDropdown.value().name : '<Default>'"></div>
		<!-- /ko -->
		<!-- ko if: $parent.isActive() && $data.semanticColorDropdown.value() -->
		<div class="conditionStyles-styleButtonPart" data-bind="click: $parent.editor.showGlobalStyleDialog.bind($parent.editor)">
			<i title="Edit" class="commonuisprite icon-questionnaire_QuestionEditor_optionEdit"></i>
		</div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplBinaryQuestionContent">
	<div>
		<!-- ko if: !isActive() || editor.isReadOnly() -->
		<div class="questionEditor__wrapText" style="font-size: 14px; margin: 5px 0 5px 10px">
			<span>Placeholder:</span>
			<span style="font-style: italic" data-bind="text: question.placeholder"></span>
		</div>
		<!-- /ko -->
		<!-- ko if: isActive() && !editor.isReadOnly() -->
		<div class="questionEditor__description__wrapper">
			<span style="width: 12%;">Placeholder:</span>
			<input class="questionEditor__description__input" type="text" placeholder="Add placeholder" data-bind="value: question.placeholder" />
		</div>
		<!-- /ko -->
		<!-- ko if: editor.scoringEnabled() -->
		<div class="questionEditor__description__wrapper">
			<span style="width: 12%;">Score:</span>
			<!-- ko if: isActive() && !editor.isReadOnly() -->
			<input class="questionEditor__description__limitInput" type="number" step="any" data-bind="value: question.scoreForAnswered" />
			<!-- /ko -->
			<!-- ko ifnot: isActive() && !editor.isReadOnly() -->
			<span style="font-style: italic" data-bind="text: question.scoreForAnswered"></span>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- ko with: question.annotations()[0] -->
		<!-- ko ifnot: isCloudDocument -->
		<div class="questionEditor__defaultImageValue">
			<!-- ko if: !$parent.isActive() || $parent.editor.isReadOnly() -->
			<!-- ko if: imageB64() -->
			<span>Default value:</span>
			<img style="max-width: 300px; max-height: 300px" data-bind="attr: { src: 'data:' + mimeType() + ';base64, ' + imageB64() }" />
			<!-- /ko -->
			<!-- /ko -->
			<!-- ko if: $parent.isActive() && !$parent.editor.isReadOnly() -->
			<!-- ko if: imageB64() -->
			<span>Default value:</span>
			<img style="max-width: 300px; max-height: 300px" data-bind="attr: { src: 'data:' + mimeType() + ';base64, ' + imageB64() }" /><br />
			<div class="questionEditor__description editorButton" data-bind="click: $parent.removeDefaultMedia.bind($parent)">
				<i class="questionnairesprite icon-questionnaire_Delete"></i> <span>Remove Default Image/Media</span>
			</div>
			<!-- /ko -->
			<!-- ko if: !imageB64() -->
			<div class="questionEditor__description editorButton" data-bind="click: $parent.addDefaultMedia.bind($parent)">
				<i class="questionnairesprite icon-questionnaire_Add"></i><span>Add Default Image/Media</span>
			</div>
			<!-- /ko -->
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplSignatureQuestionContent">
	<div>
		<!-- ko if: editor.scoringEnabled() -->
		<span class="questionEditor__description">Score:</span>
		<!-- ko if: isActive() && !editor.isReadOnly() -->
		<input class="questionEditor__description__limitInput" type="number" step="any" data-bind="value: question.scoreForAnswered" />
		<!-- /ko -->
		<!-- ko ifnot: isActive() && !editor.isReadOnly() -->
		<span style="font-style: italic" data-bind="text: question.scoreForAnswered"></span>
		<!-- /ko -->
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplBinaryQuestionProperties">
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.ImageDescription" data-bind="visible: canStoreDescription">
		<div class="propertyName"></div>
		<div class="propertyValue"><toggle params="value: question.showDescriptionField, enable: !question.isReadOnly"></toggle>Image Description</div>
	</div>
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.StorageEntity">
		<div class="propertyName">Storage Entity</div>
		<div class="propertyValue">
			<select
				data-bind="options: QuestionnaireBuilder.UI.getBinaryStorages(), optionsText: 'value', optionsValue: 'key', value: question.binaryStorage, enable: !question.isReadOnly && !question.isNqp"
			></select>
		</div>
	</div>
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.MaxCount">
		<div class="propertyName">Max Count</div>
		<div class="propertyValue"><input type="number" min="1" max="100" data-bind="value: question.maxCount, enable: !question.isReadOnly" /></div>
	</div>
	<!-- ko if: question.maxCount() === 1 -->
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.Width">
		<div class="propertyName">Dimension</div>
		<div class="propertyValue twoInputs">
			<span>W</span><input placeholder="Default" type="number" min="0" data-bind="value: question.imageWidth, enable: !question.isReadOnly" />
			<span>H</span><input placeholder="Default" type="number" min="0" data-bind="value: question.imageHeight, enable: !question.isReadOnly" />
		</div>
	</div>
	<!-- /ko -->
	<!-- ko if: question.maxCount() > 1 -->
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.MaxWidth">
		<div class="propertyName">Max Width (px)</div>
		<div class="propertyValue">
			<input placeholder="Default" type="number" min="1" data-bind="value: question.maxImageWidth, enable: !question.isReadOnly" />
		</div>
	</div>
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.MaxHeight">
		<div class="propertyName">Max Height (px)</div>
		<div class="propertyValue">
			<input placeholder="Default" type="number" min="1" data-bind="value: question.maxImageHeight, enable: !question.isReadOnly" />
		</div>
	</div>
	<!-- /ko -->
	<div class="propertyGroup">
		<div class="propertyGroupTitle">Actions</div>
		<div class="property">
			<div class="fullContent">
				<icontextbutton
					params="icon:'questionnairesprite icon-questionnaire_QuestionEditor_content_copy', text:'Copy settings', enable:true, onClick: () => copyMask($data)"
				></icontextbutton>
				<icontextbutton
					params="icon:'questionnairesprite icon-questionnaire_QuestionEditor_content_paste', text:'Paste settings', enable:!question.isReadOnly,  onClick: () => setMask($data)"
				></icontextbutton>
			</div>
		</div>
		<div class="propertyGroupSubTitle">Select actions for image files:</div>

		<div class="property">
			<div class="chipsset">
				<!-- ko if: question.maxCount() === 1 -->
				<chips
					class="tooltipsource"
					data-tooltip="QuestionnaireEditor.QuestionProperties.Signature"
					params="label: 'Signature', value: cbCaptureInk, enable: !question.isReadOnly"
				></chips>
				<!-- /ko -->
				<chips
					class="tooltipsource"
					data-tooltip="QuestionnaireEditor.QuestionProperties.CapturePhoto"
					params="label: 'Capture Photo', value: cbCapturePhoto, enable: !question.isReadOnly"
				></chips>
				<chips
					class="tooltipsource"
					data-tooltip="QuestionnaireEditor.QuestionProperties.SelectPhoto"
					params="label: 'Select Photo', value: cbSelectPhoto, enable: !question.isReadOnly"
				></chips>
				<chips
					class="tooltipsource"
					data-tooltip="QuestionnaireEditor.QuestionProperties.EditImage"
					params="label: 'Edit Image', value: cbEditImage, enable: !question.isReadOnly"
				></chips>
				<!-- ko if: !question.isNqp-->
				<chips
					class="tooltipsource"
					data-tooltip="QuestionnaireEditor.QuestionProperties.UseLastPhotoTaken"
					params="label: 'Use Last Photo Taken', value: cbUseLastPhotoTaken, enable: !question.isReadOnly"
				></chips>
				<chips
					class="tooltipsource"
					data-tooltip="QuestionnaireEditor.QuestionProperties.LoadFrom"
					params="label: 'Load From', value: cbLoadFrom, enable: !question.isReadOnly"
				></chips>
				<chips
					class="tooltipsource"
					data-tooltip="QuestionnaireEditor.QuestionProperties.Paste"
					params="label: 'Paste', value: cbPaste, enable: !question.isReadOnly"
				></chips>
				<!-- /ko -->
			</div>
		</div>

		<div class="propertyGroupSubTitle">Select actions for other file types:</div>
		<!-- ko if: question.maxCount() > 1 || question.isNqp-->
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.MaxSize">
			<div class="propertyName">Max Size (KB)</div>
			<div class="propertyValue">
				<input placeholder="Default" type="number" min="1" data-bind="value: question.maxFileSize, enable: !question.isReadOnly" />
			</div>
		</div>
		<!-- /ko -->
		<div class="property">
			<div class="chipsset">
				<chips
					class="tooltipsource"
					data-tooltip="QuestionnaireEditor.QuestionProperties.SelectFile"
					params="label: 'Select File', value: cbSelectFile, enable: !question.isReadOnly"
				></chips>
				<chips
					class="tooltipsource"
					data-tooltip="QuestionnaireEditor.QuestionProperties.RecordAudio"
					params="label: 'Record Audio', value: cbRecordAudio, enable: !question.isReadOnly"
				></chips>
				<chips
					class="tooltipsource"
					data-tooltip="QuestionnaireEditor.QuestionProperties.RecordVideo"
					params="label: 'Record Video', value: cbRecordVideo, enable: !question.isReadOnly"
				></chips>
				<!-- ko if: !question.isNqp-->
				<chips
					class="tooltipsource"
					data-tooltip="QuestionnaireEditor.QuestionProperties.Import"
					params="label: 'Import', value: cbImport, enable: !question.isReadOnly"
				></chips>
				<!-- /ko -->
			</div>
		</div>

		<!-- ko if: question.maxCount() > 1 -->
		<div class="propertyGroupTitle">Image Grid</div>
		<div class="propertyGroupSubTitle">Form</div>
		<!-- ko ifnot: $parent.isNqp -->
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.ImagesPerRow">
			<div class="propertyName">Images per Row</div>
			<div class="propertyValue">
				<input
					type="number"
					placeholder="Default"
					min="1"
					max="100"
					data-bind="value: question.thumbnailFormBreakAfter, enable: !question.isReadOnly"
				/>
			</div>
		</div>
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.ImageCount">
			<div class="propertyName">Image Count</div>
			<div class="propertyValue">
				<input
					type="number"
					placeholder="Default"
					min="1"
					max="100"
					data-bind="value: question.thumbnailFormMaxCount, enable: !question.isReadOnly"
				/>
			</div>
		</div>
		<!-- /ko -->
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.ThumbnailFormImageFit">
			<div class="propertyName">Image Fit</div>
			<div class="propertyValue">
				<select
					data-bind="
					options: [{key: 0, value: 'Cover'}, {key: 1, value: 'Contain'}],
					optionsText: 'value',
					optionsValue: 'key',
					value: question.thumbnailFormImageFit,
					enable: !question.isReadOnly"
				></select>
			</div>
		</div>
		<div class="propertyGroupSubTitle">Report</div>
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.ReportImagesPerRow">
			<div class="propertyName">Images per Row</div>
			<div class="propertyValue">
				<input
					type="number"
					placeholder="Default"
					min="1"
					max="100"
					data-bind="value: question.thumbnailReportBreakAfter, enable: !question.isReadOnly"
				/>
			</div>
		</div>
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.ReportImageCount">
			<div class="propertyName">Image Count</div>
			<div class="propertyValue">
				<input
					type="number"
					placeholder="Default"
					min="1"
					max="100"
					data-bind="value: question.thumbnailReportMaxCount, enable: !question.isReadOnly"
				/>
			</div>
		</div>
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.ThumbnailReportImageFit">
			<div class="propertyName">Image Fit</div>
			<div class="propertyValue">
				<select
					data-bind="
					options: [{key: 0, value: 'Cover'}, {key: 1, value: 'Contain'}],
					optionsText: 'value',
					optionsValue: 'key',
					value: question.thumbnailReportImageFit,
					enable: !question.isReadOnly"
				></select>
			</div>
		</div>
		<!-- /ko -->
	</div>
	<!-- ko if: question.canHaveInlineProperties() -->
	<!-- ko template: { name: 'tmplLabelInlineProperties', data: { view: labelPropertiesViewModel, enabled: !question.isReadOnly } } --><!-- /ko -->
	<!-- /ko -->
</script>

<script type="text/html" id="tmplSignatureQuestionProperties">
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.StorageEntity">
		<div class="propertyName">Storage Entity</div>
		<div class="propertyValue">
			<select
				data-bind="options: QuestionnaireBuilder.UI.getBinaryStorages(), optionsText: 'value', optionsValue: 'key', value: question.binaryStorage, enable: !question.isReadOnly && !question.isNqp"
			></select>
		</div>
	</div>
</script>

<script type="text/html" id="tmplVisualQuestionContent">
	<!-- ko if: !isActive() || editor.isReadOnly() -->
	<div class="questionEditor__wrapText" style="font-size: 14px; margin: 5px 0 5px 10px">
		<span style="width: 12%">Placeholder:</span>
		<span style="font-style: italic" data-bind="text: question.placeholder"></span>
	</div>
	<!-- /ko -->
	<!-- ko if: isActive() && !editor.isReadOnly() -->
	<div class="questionEditor__description__wrapper">
		<span style="width: 12%">Placeholder:</span>
		<input class="questionEditor__description__input" type="text" placeholder="Add placeholder" data-bind="value: question.placeholder" />
	</div>
	<!-- /ko -->
	<!-- ko if: editor.scoringEnabled() -->
	<div class="questionEditor__description__wrapper">
		<span style="width:12%">Score:</span>
		<!-- ko if: isActive() && !editor.isReadOnly() -->
		<input class="questionEditor__description__limitInput" type="number" step="any" data-bind="value: question.scoreForAnswered" />
		<!-- /ko -->
		<!-- ko ifnot: isActive() && !editor.isReadOnly() -->
		<span style="font-style: italic" data-bind="text: question.scoreForAnswered"></span>
		<!-- /ko -->
	</div>
	<!-- /ko -->
	<!-- ko if: isActive() || question.allowedGroups().length > 0 -->
	<div class="optionsGridHeader">
		<div style="flex: 1 1 auto;">Allowed Groups</div>
		<div style="flex: 0 0 30px"></div>
		<div style="flex: 0 0 100px"></div>
		<div style="flex: 0 0 30px"></div>
		<!-- ko if: isActive() && !editor.isReadOnly() -->
		<div style="flex: 0 0 30px"></div>
		<!-- /ko -->
	</div>
	<!-- /ko -->
	<!-- ko foreach: question.allowedGroups -->
	<!-- ko if: $parent.isActive() || $index() < 3 -->
	<div class="optionsGridRow">
		<div style="flex: 1 1 auto;" data-bind="text: groupName"></div>
		<div style="flex: 0 0 30px; text-align: center; align-self: center" title="Color">
			<!-- ko if: $parent.isActive() && !$parent.editor.isReadOnly() -->
			<div
				style="cursor: pointer; height: 16px; width: 16px; border-radius: 8px; border: solid 1px #E1E4E8;"
				data-bind="cbColorPicker: color, style: {background: color()}"
			></div>
			<!-- /ko -->
			<!-- ko ifnot: $parent.isActive() && !$parent.editor.isReadOnly() -->
			<div style="height: 16px; width: 16px; border-radius: 8px; border: solid 1px #E1E4E8" data-bind="style: {background: color()}"></div>
			<!-- /ko -->
		</div>
		<div style="flex: 0 0 100px; align-self: center; cursor: pointer; display: flex; justify-content: center;" title="Icon">
			<!-- ko if: annotation.imageB64() -->
			<img
				style="display: inline-block; max-width: 50px; max-height: 30px; display: inline"
				data-bind="attr: { src: 'data:' + annotation.mimeType() + ';base64, ' + annotation.imageB64() }"
			/>
			<!-- ko if: $parent.isActive() && !$parent.editor.isReadOnly() -->
			<i class="questionnairesprite icon-questionnaire_QuestionEditor_darkDelete" data-bind="click: removeIcon" title="Remove Icon"></i>
			<!-- /ko -->
			<!-- /ko -->
			<!-- ko if: !annotation.imageB64() && $parent.isActive() && !$parent.editor.isReadOnly() -->
			<i
				class="questionnairesprite icon-questionnaire_QuestionEditor_darkAdd"
				data-bind="click: $parent.isActive() && !$parent.editor.isReadOnly() && addIcon"
				title="Add Icon"
			>
			</i>
			<!-- /ko -->
		</div>
		<div
			style="flex: 0 0 30px; text-align: center;"
			title="Required"
			data-bind="style: { color: required() ? 'black' : 'silver' }, click: $parent.isActive() && !$parent.editor.isReadOnly() && $parent.toggleGroupRequired.bind($parent, $index()), clickBubble: false"
		>
			<i
				style="cursor: pointer"
				data-bind="attr: {class: 'questionnairesprite icon-questionnaire_QuestionEditor_' + (required() ? 'darkRequired' : 'darkNonRequired'), title: required() ? 'Required' : 'Non Required'}"
			>
			</i>
		</div>
		<!-- ko if: $parent.isActive() && !$parent.editor.isReadOnly() -->
		<div style="flex: 0 0 30px; text-align: center; align-self: center;">
			<i
				style="cursor: pointer;"
				class="questionnairesprite icon-questionnaire_QuestionEditor_RemoveOption"
				title="Remove Option"
				data-bind="click: $parent.removeGroup.bind($parent, $index())"
			>
			</i>
		</div>
		<!-- /ko -->
	</div>
	<!-- /ko -->
	<!-- /ko -->
	<!-- ko if: !isActive() && question.allowedGroups().length > 3 -->
	<div class="optionsGridFooter">
		<div>Click to show more...</div>
	</div>
	<!-- /ko -->
	<!-- ko if: isActive() && !editor.isReadOnly() -->
	<div class="optionsGridRow">
		<div style="flex: 1 1 auto">
			<select data-bind="options: possibleAllowedGroups, optionsText: 'label', value: newAllowedGroup"></select>
		</div>
		<div style="flex: 0 0 30px">
			<i class="questionnairesprite icon-questionnaire_Add" title="Add" data-bind="click: addGroup" style="cursor: pointer; margin-left: 10px"></i>
		</div>
	</div>
	<!-- /ko -->
</script>

<script type="text/html" id="tmplVisualQuestionProperties">
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.StorageEntity">
		<div class="propertyName">Storage</div>
		<div class="propertyValue">
			<select
				data-bind="options: Resco.Data.MetadataCache.instance.annotationEntities, value: question.binaryStorage, enable: !question.isReadOnly"
			></select>
		</div>
	</div>
	<div class="propertyGroup">
		<div class="propertyGroupTitle">Actions</div>
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.CapturePhoto">
			<div class="propertyName"></div>
			<div class="propertyValue"><toggle params="value: cbCapturePhoto, enable: !question.isReadOnly"></toggle>Capture Photo</div>
		</div>
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.SelectPhoto">
			<div class="propertyName"></div>
			<div class="propertyValue"><toggle params="value: cbSelectPhoto, enable: !question.isReadOnly"></toggle>Select Photo</div>
		</div>
	</div>
</script>

<!--AI Image recognition question editor template-->

<script type="text/html" id="tmplAIImageRecognitionQuestionContent">
	<div>
		<!-- ko if: !isActive() || editor.isReadOnly() -->
		<div class="questionEditor__wrapText" style="font-size: 14px; margin: 5px 0 5px 10px">
			Placeholder: <span style="font-style: italic" data-bind="text: question.placeholder"></span>
		</div>
		<br />
		<!-- ko if: editor.scoringEnabled() -->
		<div class="questionEditor__description__wrapper">
			Score: <span style="font-style: italic" data-bind="text: question.scoreForAnswered"></span>
		</div>
		<br /><!-- /ko -->
		<!-- ko if: allowedResultQuestion() -->Result Target: <span style="font-style: italic" data-bind="text: allowedResultQuestion().label()"></span
		><br /><!-- /ko -->
		<!-- ko if: allowedProbabilityQuestion() -->Probability Target:
		<span style="font-style: italic" data-bind="text: allowedProbabilityQuestion().label()"></span
		><!-- /ko -->
		<!-- /ko -->
		<!-- ko if: isActive() && !editor.isReadOnly() -->
		<div class="questionEditor__description__wrapper">
			<span style="width: 12%;">Placeholder:</span>
			<input class="questionEditor__description__input" type="text" placeholder="Add placeholder" data-bind="value: question.placeholder" />
		</div>

		<!-- ko if: editor.scoringEnabled() -->
		<div class="questionEditor__description__wrapper">
			<span style="width: 12%;">Score:</span>
			<input class="questionEditor__description__limitInput" type="number" step="any" data-bind="value: question.scoreForAnswered" />
		</div>
		<!-- /ko -->

		<div class="optionsGridHeader"><div>Result Target:</div></div>
		<div class="optionsGridRow">
			<div style="flex: 1 1 auto;">
				<select data-bind="options: possibleResultAllowedQuestions, optionsText: 'label', value: allowedResultQuestion"></select>
			</div>
		</div>
		<div class="optionsGridHeader"><div>Probability Target:</div></div>
		<div class="optionsGridRow">
			<div style="flex: 1 1 auto;">
				<select
					data-bind="options: possibleProbabilityAllowedQuestions, optionsText: 'label', value: allowedProbabilityQuestion, optionsCaption: ''"
				></select>
			</div>
		</div>
		<!-- /ko -->
	</div>
</script>

<!--AI Image recognition data question template-->
<script type="text/html" id="tmplAIImageRecognitionQuestionProperties">
	<!--<div class="property tooltipsource" data-tooltip="">
		<div class="propertyName">Store Image</div>
		<div class="propertyValue"><input type="checkbox" data-bind="checked: cbStoreImage, enable: cbStoreImageEnabled" /></div>
	</div>-->
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.StorageEntity">
		<div class="propertyName">Storage</div>
		<div class="propertyValue">
			<select
				data-bind="options: Resco.Data.MetadataCache.instance.annotationEntities, value: question.binaryStorage, enable: !question.isReadOnly"
			></select>
		</div>
	</div>
	<div class="propertyGroup">
		<div class="propertyGroupTitle">Actions</div>
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.CapturePhoto">
			<div class="propertyName"></div>
			<div class="propertyValue"><toggle params="value: cbCapturePhoto, enable: !question.isReadOnly"></toggle>Capture Photo</div>
		</div>
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.SelectPhoto">
			<div class="propertyName"></div>
			<div class="propertyValue"><toggle params="value: cbSelectPhoto, enable: !question.isReadOnly"></toggle>Select Photo</div>
		</div>
	</div>
</script>

<script type="text/html" id="tmplStaticQuestionCustomCommands">
	<!-- ko template: { name: isSelected() ? 'tmplSmartPropertyButtonLabeled' : 'tmplSmartPropertyButton', data: smartVisibleButton } -->
	<!-- /ko -->
	<div class="empty_button"></div>
	<div class="empty_button"></div>
	<!-- ko if: editor.mappingEnabled() -->
	<div
		style="		width: 30px;
		height: 30px;
		border-radius: 15px;
		margin: 5px;
		background: #E3E3E3
"
	></div>
	<!-- /ko -->
</script>

<script type="text/html" id="tmplStaticLinkContent">
	<div>
		<!-- ko if: !isActive() || editor.isReadOnly() -->
		<!-- ko if: question.linkLabel() -->
		<div class="questionEditor__wrapText" style="font-size: 14px; margin-left: 10px" data-bind="text: question.linkLabel"></div>
		<!-- /ko -->
		<div class="questionEditor__wrapText" style="font-size: 14px; margin: 5px 0 5px 10px">
			<!-- ko if: question.linkLabel() -->(<!-- /ko --><span
				style="color: blue; text-decoration: underline; cursor: pointer; padding: 0 3px;"
				data-bind="text: question.type === QuestionnaireBuilder.Data.StaticLinkType.Entity ? primaryName() : question.link()"
			>
			</span
			><!-- ko if: question.linkLabel() -->)<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- ko if: isActive() && !editor.isReadOnly() -->
		<div class="questionEditor__description__wrapper">
			<span style="width:6%">Label:</span>
			<input class="questionEditor__description__input" type="text" placeholder="Link Label" data-bind="value: question.linkLabel" />
		</div>
		<!-- ko if: question.type === QuestionnaireBuilder.Data.StaticLinkType.Http -->
		<div class="questionEditor__description__wrapper">
			<span style="width:6%">Link:</span>
			<input class="questionEditor__description__input" type="text" placeholder="Link" data-bind="value: question.link" />
		</div>
		<!-- /ko -->
		<!-- ko if: question.type === QuestionnaireBuilder.Data.StaticLinkType.Entity -->
		<div class="questionEditor__description__wrapper">
			<span>Record:</span>
			<span style="color: blue; text-decoration: underline; cursor: pointer; margin:0 4px;" data-bind="text: primaryName, click: selectRecord"
				>Change</span
			>
		</div>
		<!-- /ko -->
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplHoustonGuideContent">
	<div>
		<!-- ko if: !isActive() || editor.isReadOnly() -->
		<span style="font-size:14px;margin-left: 10px;" data-bind="text: question.linkLabel"></span>
		<span class="questionEditor__description" data-bind="text: question.link()"></span>
		<!-- /ko -->
		<!-- ko if: isActive() && !editor.isReadOnly() -->
		<div class="questionEditor__description__wrapper" data-bind="visible: question.link()">
			<span style="width:13%">Guide Title:</span>
			<!-- ko ifnot: isButton -->
			<input class="questionEditor__description__input" type="text" placeholder="Guide Title" data-bind="value: question.linkLabel" />
			<!-- /ko -->
			<!-- ko if: isButton -->
			<p data-bind="text: question.linkLabel"></p>
			<!-- /ko -->
		</div>
		<div class="questionEditor__description__wrapper">
			<span style="width:13%">Link to guide:</span>
			<input class="questionEditor__description__input" type="text" placeholder="Link" data-bind="value: question.link" />
		</div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplHoustonGuideProperties">
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.DisplayAs">
		<div class="propertyName">Display as</div>
		<div class="propertyValue">
			<select
				data-bind="options: displayAsOptions, optionsText: 'value', optionsValue: 'key', value: question.displayAs, enable: !question.isReadOnly"
			></select>
		</div>
	</div>
</script>

<script type="text/html" id="tmplStaticImageContent">
	<div>
		<!-- ko if: question.annotation.isCloudDocument() -->
		<i
			>* Cloud documents are loaded from the cloud storage. The image should be located on <br />
			<span style="font-weight: bold" data-bind="text: cloudFilePath"></span
		></i>
		<!-- /ko -->
		<!-- ko if: !question.annotation.isCloudDocument() -->
		<!-- ko if: !isActive() || editor.isReadOnly() -->
		<!-- ko if: question.annotation.imageB64() -->
		<img
			style="max-width: 300px; max-height: 300px"
			data-bind="attr: { src: 'data:' + question.annotation.mimeType() + ';base64, ' + question.annotation.imageB64() }"
		/>
		<!-- /ko -->
		<!-- ko if: !question.annotation.imageB64() -->
		<span class="questionEditor__label">No Image</span>
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: isActive() && !editor.isReadOnly() -->
		<!-- ko if: question.annotation.imageB64() -->
		<img
			style="max-width: 300px; max-height: 300px"
			data-bind="attr: { src: 'data:' + question.annotation.mimeType() + ';base64, ' + question.annotation.imageB64() }"
		/><br />
		<div class="questionEditor__description editorButton" data-bind="click: removeImage">
			<i class="questionnairesprite icon-questionnaire_Delete"></i> <span>Remove Image</span>
		</div>
		<!-- /ko -->
		<!-- ko if: !question.annotation.imageB64() -->
		<div class="questionEditor__description editorButton" data-bind="click: addImage">
			<i class="questionnairesprite icon-questionnaire_Add"></i> <span>Add Image</span>
		</div>
		<!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplStaticImageProperties">
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.StorageEntity">
		<div class="propertyName">Storage Entity</div>
		<div class="propertyValue">
			<select
				data-bind="options: QuestionnaireBuilder.UI.getBinaryStorages(), optionsText: 'value', optionsValue: 'key', value: question.annotation.binaryStorage, enable: !question.isReadOnly && !question.isNqp"
			></select>
		</div>
	</div>
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.Width">
		<div class="propertyName">Dimension</div>
		<div class="propertyValue twoInputs">
			<span>W</span><input placeholder="Default" type="number" min="0" data-bind="value: question.imageWidth, enable: !question.isReadOnly" />
			<span>H</span><input placeholder="Default" type="number" min="0" data-bind="value: question.imageHeight, enable: !question.isReadOnly" />
		</div>
	</div>
</script>

<script type="text/html" id="tmplButtonContent">
	<div class="questionEditor__description__wrapper">
		<input
			class="questionEditor__description__inputDescr"
			type="text"
			placeholder="Add button click text"
			data-bind="value: question.commandLabel, enable: !question.isReadOnly"
		/>
	</div>
	<!-- ko ifnot: selectedCommand() && selectedCommand().isCustom -->
	<div class="questionEditor__buttonContent">
		<select
			class="questionEditor__buttonContent__buttonActionDropdown"
			data-bind="optionsCaption: '<Select button action>',
			options: buttonCommands,
			optionsText: 'commandLabel',
			value: selectedCommand,
			enable: !question.isReadOnly"
		></select>
		<!-- ko if: canEditRules -->
		<div
			class="questionEditor__buttonContent__buttonIcon"
			title="Define what happens when the button is clicked."
			data-bind="click: showRulePage, clickBubble: false"
		>
			<i class="questionnairesprite icon-questionnaire_iconEditRules"></i>
			<span>Edit rules</span>
		</div>
		<!-- /ko -->
		<!-- ko if: selectReportVisible -->
		<div class="questionEditor__buttonContent__selectReport">
			<!-- ko if: isActive() && !question.isReadOnly -->
			<div
				class="questionEditor__buttonContent__reportName questionEditor__buttonContent__buttonIcon"
				data-bind="visible: question.reportId, click: selectReport"
			>
				<i class="questionnairesprite icon-questionnaire_iconEditRules"></i>
				<span data-bind="text: question.reportName, visible: question.reportName"></span>
				<span data-bind="visible: !question.reportName() && question.reportId()">Configure</span>
			</div>
			<div
				class="questionEditor__buttonContent__buttonIcon"
				title="Define a report to run after the button is clicked."
				data-bind="click: selectReport, visible: !question.reportId()"
			>
				<i class="questionnairesprite icon-questionnaire_iconEditRules"></i>
				<span>Select report</span>
			</div>
			<div
				class="questionEditor__buttonContent__buttonIcon"
				title="Clear selected report."
				data-bind="click: clearReport, visible: question.reportId"
			>
				<i class="questionnairesprite icon-questionnaire_iconRemoveCommand"></i>
				<span>Clear</span>
			</div>
			<!-- /ko -->
		</div>
		<!-- /ko -->
	</div>
	<!-- /ko -->
	<!-- ko if:  selectedCommand() && selectedCommand().isCustom -->
	<div class="questionEditor__buttonContent">
		<div class="questionEditor__description__wrapper">
			<span>custom_</span>
			<input
				class="questionEditor__description__inputDescr"
				type="text"
				placeholder="Add button id"
				data-bind="value: commandId, enable: !question.isReadOnly"
			/>
		</div>
		<!-- ko if: isActive() && !question.isReadOnly -->
		<div
			class="questionEditor__buttonContent__buttonIcon"
			title="Define what happens when the button is clicked."
			data-bind="click: showRulePage, clickBubble: false"
		>
			<i class="questionnairesprite icon-questionnaire_iconEditRules"></i>
			<span>Edit rules</span>
		</div>
		<div class="questionEditor__buttonContent__buttonIcon" title="Remove the custom button action." data-bind="click: deleteButtonOption">
			<i class="questionnairesprite icon-questionnaire_iconRemoveCommand"></i>
			<span>Remove command</span>
		</div>
		<!-- /ko -->
	</div>
	<!-- /ko -->
</script>

<script type="text/html" id="tmplButtonCustomCommands">
	<!-- ko template: { name: isSelected() ? 'tmplSmartPropertyButtonLabeled' : 'tmplSmartPropertyButton', data: smartEnabledButton } -->
	<!-- /ko -->
	<!-- ko template: { name: isSelected() ? 'tmplSmartPropertyButtonLabeled' : 'tmplSmartPropertyButton', data: smartVisibleButton } -->
	<!-- /ko -->
	<div class="empty_button"></div>
	<!-- ko if: editor.mappingEnabled() -->
	<div class="empty_button"></div>
	<!-- /ko -->
</script>

<script type="text/html" id="tmplDropGhostItem">
	<div style="opacity: 0.75;flex-basis: 100%;">
		<!-- ko if: ghostTemplateName --><!-- ko template: { name: ghostTemplateName } --><!-- /ko --><!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplComponentGhost">
	<!-- ko template: { name: editorItem.dragGhostTemplateName, data: editorItem } -->
	<!-- /ko -->
</script>

<script type="text/html" id="tmplSnippetGhost">
	<div class="snippetDropGhost">
		<div
			style="font-size: 14px; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; overflow: hidden"
			data-bind="text: snippetItem().snippet.name()"
		></div>
		<div data-bind="text: snippetItem().info"></div>
	</div>
</script>
<script type="text/html" id="tmplRatingQuestionProperties">
	<!-- ko template: { name: 'tmplLabelInlineProperties', data: { view: labelPropertiesViewModel, enabled: !editor.isReadOnly() } } --><!-- /ko -->
	<div class="propertyGroup">
		<div class="propertyGroupTitle">Scale Configuration</div>
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.ChoiceDisplayAs">
			<div class="propertyValue" style="display: flex; flex-direction: column; align-items: baseline;">
				<div class="propertyName">Icon</div>
				<div
					class="segmentedControl__container ratingSegmentedControl"
					data-bind="foreach: iconTypeSgmCtrl.items"
					data-test="questionnaireEditor-propertiesPanel-displayAsSgmCtrl"
				>
					<div class="segmentedControl__item">
						<input
							class="segmentedControl__item__input"
							data-bind="checked: $parent.iconTypeSgmCtrl.value, value: value, enable: enabled(), attr: { id: 'ratingDisplayAs-' + id() }"
							type="radio"
						/>
						<label
							class="segmentedControl__item__label ratingSegmentedControl__label"
							data-bind="attr: { for: 'ratingDisplayAs-' + id(), title: label }"
						>
							<!-- ko if: value() === 0 -->
							<svg class="ratingSegmentedControl__icon" viewBox="0 0 24 24" aria-hidden="true">
								<path
									d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54z"
								/>
							</svg>
							<!-- /ko -->
							<!-- ko if: value() === 1 -->
							<svg class="ratingSegmentedControl__icon" viewBox="0 0 24 24" aria-hidden="true">
								<path d="m12 17.27 6.18 3.73-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
							</svg>
							<!-- /ko -->
							<!-- ko if: value() === 2 -->
							<svg class="ratingSegmentedControl__icon" viewBox="0 0 24 24" aria-hidden="true">
								<path
									d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-3 6.5c.83 0 1.5.67 1.5 1.5S9.83 11.5 9 11.5 7.5 10.83 7.5 10 8.17 8.5 9 8.5zm3 9c-2.33 0-4.31-1.46-5.11-3.5h10.22c-.8 2.04-2.78 3.5-5.11 3.5zm3-6c-.83 0-1.5-.67-1.5-1.5S14.17 8.5 15 8.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
								/>
							</svg>
							<!-- /ko -->
						</label>
					</div>
				</div>
			</div>
		</div>
		<div class="property">
			<div class="propertyValue" style="display: flex; flex-direction: column; align-items: baseline;">
				<div class="propertyName">Rating step</div>
				<div
					class="segmentedControl__container ratingSegmentedControl"
					data-bind="foreach: stepSgmCtrl.items"
					data-test="questionnaireEditor-propertiesPanel-ratingStepSgmCtrl"
				>
					<div class="segmentedControl__item">
						<input
							class="segmentedControl__item__input"
							data-bind="checked: $parent.stepSgmCtrl.value, value: value,
							enable: enabled() && !$parent.isEmoticons(),
							attr: { id: 'ratingStep-' + id() }"
							type="radio"
						/>
						<label class="segmentedControl__item__label ratingSegmentedControl__label" data-bind="attr: { for: 'ratingStep-' + id(), title: label }">
							<span data-bind="text: label"></span>
						</label>
					</div>
				</div>
			</div>
		</div>
		<div class="property">
			<div class="propertyValue" style="display: flex; flex-direction: column; align-items: baseline;">
				<div class="propertyName">Size</div>
				<div
					class="segmentedControl__container ratingSegmentedControl"
					data-bind="foreach: sizeSgmCtrl.items"
					data-test="questionnaireEditor-propertiesPanel-ratingSizeSgmCtrl"
				>
					<div class="segmentedControl__item">
						<input
							class="segmentedControl__item__input"
							data-bind="checked: $parent.sizeSgmCtrl.value, value: value, enable: enabled(), attr: { id: 'ratingSize-' + id() }"
							type="radio"
						/>
						<label class="segmentedControl__item__label ratingSegmentedControl__label" data-bind="attr: { for: 'ratingSize-' + id(), title: label }">
							<span data-bind="text: label"></span>
						</label>
					</div>
				</div>
			</div>
		</div>
	</div>
</script>

<script type="text/html" id="tmplRatingQuestionPreviewValue">
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.PreviewAnswer">
		<div class="propertyName">Preview Answer</div>
		<div class="propertyValue">
			<input type="number" data-bind="value: question.reportingProperties.previewAnswer" />
		</div>
	</div>
</script>

<script type="text/html" id="tmplRatingQuestionContent">
	<div>
		<!-- ko with: question -->
		<!-- ko if: !$parent.isActive() || $parent.editor.isReadOnly() -->
		<!-- ko if: defaultValue() !== undefined && defaultValue() !== null -->
		<span class="questionEditor__description">Default value:</span> <span data-bind="text: defaultValue"></span>
		<!-- /ko -->
		<!-- ko if: $parent.editor.scoringEnabled() && !$parent.labelRangeItems().length && scoreForAnswered() -->
		<span class="questionEditor__description">Score:</span>
		<span data-bind="text: scoreForAnswered"></span>
		<!-- /ko -->
		<!-- <span class="questionEditor__description">Minimum:</span><span data-bind="text: minimum !== undefined && minimum !== null ? minimum : 0"></span> -->
		<!-- ko if: maximum() !== undefined && maximum() !== null -->
		<span class="questionEditor__description">Maximum:</span> <span data-bind="text: maximum"></span>
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: $parent.isActive() && !$parent.editor.isReadOnly() -->
		<div class="questionEditor__description__wrapper">
			<span style="width:17%">Default value:</span>
			<input
				style="width: 100px"
				placeholder="Add default value"
				class="questionEditor__description__input"
				type="number"
				data-bind="value: defaultValue"
			/>
		</div>

		<div class="questionEditor__description__wrapper">
			<div style="display: flex;flex-direction: row; align-items: baseline">
				<span>Maximum:</span
				><input class="questionEditor__description__limitInput" type="text" data-bind="value: maximum, disable: $parent.isEmoticons()" />
			</div>
		</div>
		<!-- ko if: $parent.editor.scoringEnabled() && !$parent.labelRangeItems().length -->
		<div class="questionEditor__description__wrapper">
			<span style="width:17%">Score:</span>
			<input style="width: 100px" class="questionEditor__description__input" type="number" step="any" data-bind="value: scoreForAnswered" />
		</div>
		<!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
	</div>

	<!-- ko if: isActive() && !editor.isReadOnly() -->
	<!-- ko if: !labelRangeItems().length -->
	<p class="conditionStyles-noConditionalStyles" title="Add Label Range" data-bind="click: createLabelRange">
		<i class="questionnairesprite icon-questionnaire_Add"></i>Label range
	</p>
	<!-- /ko -->
	<!-- ko if: labelRangeItems().length -->
	<div class="conditionStyles">
		<div class="optionsGridHeader">
			<div>Label ranges:</div>
		</div>
		<div class="conditionStyles-row">
			<p class="conditionStyles-row__label">Not answered:</p>
			<input
				class="conditionStyles-row__input"
				style="width: 200px; margin-left: 1rem;"
				placeholder="Not Rated"
				type="text"
				data-bind="value: question.notAnsweredLabel"
			/>
		</div>
		<!-- ko foreach: labelRangeItems -->
		<div class="conditionStyles-row">
			<p class="conditionStyles-row__label">From</p>
			<input class="conditionStyles-row__input" type="number" step="any" data-bind="value: from, disable: true" />
			<p class="conditionStyles-row__label">To</p>
			<input class="conditionStyles-row__input" type="number" step="any" placeholder="&infin;" data-bind="value: to, disable: isLastItem()" />
			<p class="conditionStyles-row__label">Label</p>
			<input class="conditionStyles-row__input" type="text" placeholder="Label" style="width: 200px;" data-bind="value: label" />
			<!-- ko if: $parent.editor.scoringEnabled() -->
			<p class="conditionStyles-row__label">Score</p>
			<input
				class="conditionStyles-row__input"
				type="number"
				step="any"
				placeholder="Score"
				data-bind="value: score, enable: !$parent.editor.isReadOnly()"
			/>
			<!-- /ko -->
			<i
				class="conditionStyles-remove conditionStyles-editableItem questionnairesprite icon-questionnaire_QuestionEditor_RemoveOption"
				title="Remove Label Range"
				data-bind="click: $parent.removeLabelRange.bind($parent, $index())"
			>
			</i>
		</div>
		<!-- /ko -->
		<div
			class="conditionStyles-footer conditionStyles-buttonIcon conditionStyles-editableItem"
			title="Add Label Range"
			data-bind="click: createLabelRange"
		>
			<i class="questionnairesprite icon-questionnaire_Add"></i>
		</div>
	</div>
	<!-- /ko -->
	<!-- /ko -->
	<!-- ko if: !isActive() || editor.isReadOnly() -->
	<!-- ko if: labelRangeItems().length -->
	<div class="conditionStyles">
		<div class="optionsGridHeader">
			<div>Label ranges:</div>
		</div>
		<!-- ko if: question.notAnsweredLabel() -->
		<div class="conditionStyles-row">
			<p class="conditionStyles-row__label">Not answered:</p>
			<p style="margin-left: 1rem;" data-bind="text: question.notAnsweredLabel"></p>
		</div>
		<!-- /ko -->
		<!-- ko foreach: labelRangeItems -->
		<!-- ko if: $index() < 3 -->
		<div class="conditionStyles-row">
			<p style="flex: 0 0 40px;">From</p>
			<p style="flex: 0 0 10%;" data-bind="text: from() !== undefined && from() !== null ? from() : '-&infin;'"></p>
			<p style="flex: 0 0 40px;">To</p>
			<p style="flex: 0 0 10%;" data-bind="text: to() !== undefined && to() !== null ? to() : '&infin;'"></p>
			<p style="flex: 0 0 45px">Label</p>
			<p style="flex: 1 1 auto" data-bind="text: label"></p>
			<!-- ko if: $parent.editor.scoringEnabled() -->
			<p style="flex: 0 0 45px">Score</p>
			<p style="flex: 0 0 10%;" data-bind="text: score"></p>
			<!-- /ko -->
		</div>
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: labelRangeItems().length > 3 -->
		<div class="conditionStyles-more">
			<div>Click to show more...</div>
		</div>
		<!-- /ko -->
	</div>
	<!-- /ko -->
	<!-- /ko -->
</script>
<script type="text/html" id="tmplRegardingQuestionContent">
	<div>
		<!-- ko if: hasFilter() && (!isActive() || editor.isReadOnly()) -->
		<span class="questionEditor__description">Targets</span>
		<!-- ko if: editor.isReadOnly() -->
		<!-- ko foreach: question.targets -->
		<span class="questionEditor__description" style="font-style: italic" data-bind="text: $data"></span
		><!-- ko if: $index() !== ($parent.question.targets().length - 1) -->,
		<!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: !editor.isReadOnly() -->
		<!-- ko foreach: question.targets -->
		<!-- ko if: $index() < 10 -->
		<span class="questionEditor__description" style="font-style: italic" data-bind="text: $data"></span
		><!-- ko if: $index() !== ($parent.question.targets().length - 1) -->,
		<!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: question.targets().length > 10 -->
		...
		<!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: isActive() && !editor.isReadOnly() -->
		<!-- ko ifnot: hasFilter -->
		<div style="color: blue; text-decoration: underline; padding-left: 5px; cursor: pointer;" data-bind="click: setFilter">Set filter</div>
		<!-- /ko -->
		<!-- ko if: hasFilter -->
		<div style="display: flex; flex-direction: row; width: 100%; margin-bottom: 5px">
			<div class="optionsGridHeader">
				<div>Targets</div>
			</div>
			<div style="flex: 0 0 30px"></div>
		</div>
		<!-- ko foreach: targets -->
		<div class="optionsGridRow" style="display: flex; flex-direction: row; width: 100%;">
			<div style="flex: 1 1 auto; padding-left: 5px; font-size: 1.2em; overflow-x: hidden; text-overflow: ellipsis" data-bind="text: target"></div>
			<div style="flex: 0 0 38px; text-align: center; align-self: center;">
				<i
					style="cursor: pointer;"
					class="questionnairesprite icon-questionnaire_QuestionEditor_hasView"
					title="View"
					data-bind="click: $parent.editView.bind($parent, $index()), attr: {class: 'questionnairesprite icon-questionnaire_QuestionEditor_' + (hasView() ? 'hasView' : 'hasNoView')}"
				>
				</i>
			</div>
			<div style="flex: 0 0 38px; text-align: center; align-self: center;">
				<i
					style="cursor: pointer;"
					class="questionnairesprite icon-questionnaire_QuestionEditor_lookupFilter"
					title="Filter"
					data-bind="click: $parent.setFilter.bind($parent, $index()), attr: {class: 'questionnairesprite icon-questionnaire_QuestionEditor_' + (hasFilter() ? 'lookupFilter' : 'lookupNoFilter')}"
				>
				</i>
			</div>
			<div>
				<i
					style="cursor: pointer;"
					class="questionnairesprite icon-questionnaire_QuestionEditor_RemoveOption"
					title="Remove Option"
					data-bind="click: $parent.removeTarget.bind($parent, $index())"
				>
				</i>
			</div>
		</div>
		<!-- /ko -->
		<div class="optionsGridRow" data-bind="visible: isNewTargetDropdownVisible() || targets().length === 0">
			<div style="flex: 1 1 auto">
				<select
					class="baseEditorItem__selector"
					data-bind="options: possibleTargets, value: newTarget, optionsCaption: 'Select target entity'"
				></select>
			</div>
		</div>
		<div
			class="addNewOption"
			title="Add new target"
			data-bind="click: showNewTargetDropdown, css: { addNewOption__disabled: isNewTargetDropdownVisible() || targets().length === 0 }"
		>
			<i class="questionnairesprite icon-questionnaire_Add"></i>
			add new target
		</div>
		<!-- /ko -->
		<!-- /ko -->
	</div>
</script>
<script type="text/html" id="tmplComponentButton">
	<button
		type="button"
		class="component_button tooltipsource"
		data-bind="css: { disabled: $data.enabled === false }, attr: { 'data-tooltip': $data.enabled === false ? $data.disabledTooltip : null }, click: $parent.addComponent.bind($parent, $data)"
	>
		<i data-bind="class: iconName"></i>
		<div class="name" data-bind="text: label"></div>
		<i class="questionnairesprite icon-questionnaire_Add"></i>
	</button>
</script>

<script type="text/html" id="tmplSelectComponent">
	<div class="components">
		<div class="static_components">
			<div class="header">STATIC COMPONENTS</div>
			<div class="content">
				<div data-bind="template: { name: 'tmplComponentButton', foreach: staticComponents }"></div>
			</div>
		</div>
		<div class="question_components">
			<div class="header">QUESTIONS</div>
			<div class="content">
				<div class="inputs">
					<div class="question_type">Single-line Text</div>
					<div data-bind="template: { name: 'tmplComponentButton', foreach: singleLineComponents }"></div>
					<div class="question_type bottom">Multi-line Text</div>
					<div data-bind="template: { name: 'tmplComponentButton', foreach: multiLineComponents }"></div>
				</div>
				<div class="date_time_choices">
					<div class="question_type">Date & Time</div>
					<div data-bind="template: { name: 'tmplComponentButton', foreach: dateTimeComponents }"></div>
					<div class="question_type bottom">Choices</div>
					<div data-bind="template: { name: 'tmplComponentButton', foreach: choicesComponents }"></div>
				</div>
				<div class="media_database_links">
					<div class="question_type">Media</div>
					<div data-bind="template: { name: 'tmplComponentButton', foreach: mediaComponents }"></div>
					<div class="question_type bottom">Database Links</div>
					<div data-bind="template: { name: 'tmplComponentButton', foreach: databaseComponents }"></div>
				</div>
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplStaticRichTextEditorContent">
	<div>
		<!-- ko if: question.isReadOnly || !isActive() || editor.isReadOnly() -->
		<div class="staticRichText__readonly" data-bind="markdownAllowImageDataUri: processedDescription"></div>
		<!-- /ko -->
		<!-- ko if: !question.isReadOnly && isActive() && !editor.isReadOnly() -->
		<textarea
			data-bind="easyMDE: { 
			value: question.description, 
			onImageUpload: handleImageUpload,
			mediaFiles: mediaFiles,
			questionName: question.name(),
			minHeight: '100px',
			maxHeight: '400px'
		  }"
		></textarea>
		<!-- /ko -->
	</div>
</script>
<script type="text/html" id="tmplTextQuestionProperties">
	<!-- ko if: !question.parentQuestionnaire?.isNqpQuestionnaire() -->
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.Format">
		<div class="propertyName">Format</div>
		<div class="propertyValue">
			<select
				data-bind="options: QuestionnaireBuilder.UI.TextQuestionEditorItem.formatLabels, optionsText: 'value', optionsValue: 'key', value: question.format, valueAllowUnset: false, enable: !question.isReadOnly"
			></select>
		</div>
	</div>
	<!-- /ko -->
	<!-- ko if: question.parentQuestionnaire?.isNqpQuestionnaire() && isChoiceFormat()-->
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.AllowCustom">
		<div class="propertyName"></div>
		<div class="propertyValue"><toggle params="value: question.allowCustomOption, enable: !question.isReadOnly"></toggle>Allow Custom Input</div>
	</div>
	<!-- /ko -->
	<!-- ko if: question.parentQuestionnaire?.isNqpQuestionnaire() && !isChoiceFormat() && question.format() !== QuestionnaireBuilder.Data.QuestionDisplayFormat.Barcode -->
	<div class="property tooltipsource" data-bind="attr: { 'data-tooltip': question.parentQuestionnaire?.supportsNqpFeatureVersion(2) ? '' : 'QuestionnaireEditor.RequiredFeatureVersion2' }">
		<div class="propertyName"></div>
		<div class="propertyValue">
			<toggle params="value: question.enableBarcodeScanning, enable: !question.isReadOnly && question.parentQuestionnaire?.supportsNqpFeatureVersion(2)"></toggle>Enable Barcode Scanning
		</div>
	</div>
	<!-- /ko -->
	<!-- ko if: !question.parentQuestionnaire?.isNqpQuestionnaire() -->
	<!-- ko if: canEnableOCR() -->
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.EnableOCR">
		<div class="propertyName"></div>
		<div class="propertyValue"><toggle params="value: question.enableOCR, enable: !question.isReadOnly"></toggle>Enable OCR</div>
	</div>
	<!-- ko if: question.enableOCR() -->
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.OCRImage">
		<div class="propertyName">OCR reference image</div>
		<div class="propertyValue">
			<select
				data-bind="options: ocrImages, value: question.imageOCR, valueAllowUnset: true, optionsCaption: '<none>', enable: !question.isReadOnly"
			></select>
		</div>
	</div>
	<!-- /ko -->
	<!-- /ko -->
	<!-- /ko -->

	<!-- ko if: question.canHaveInlineProperties() -->
	<!-- ko template: { name: 'tmplLabelInlineProperties', data: { view: labelPropertiesViewModel, enabled: !question.isReadOnly } } --><!-- /ko -->

	<!-- ko if: (question.format() === QuestionnaireBuilder.Data.QuestionDisplayFormat.MultiStringList || question.format() === QuestionnaireBuilder.Data.QuestionDisplayFormat.MultiStringListInput) -->
	<!-- ko template: { name: 'tmplChoiceInlineProperties', data: { view: choicePropertiesViewModelMulti, enabled: !question.isReadOnly } } --><!-- /ko -->
	<!-- /ko -->

	<!-- ko if: (question.format() === QuestionnaireBuilder.Data.QuestionDisplayFormat.StringList || question.format() === QuestionnaireBuilder.Data.QuestionDisplayFormat.StringListInput) -->
	<!-- ko template: { name: 'tmplChoiceInlineProperties', data: { view: choicePropertiesViewModelSingle, enabled: !question.isReadOnly } } --><!-- /ko -->
	<!-- /ko -->
	<!-- /ko -->
</script>

<script type="text/html" id="tmplTextQuestionPreviewValue">
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.PreviewAnswer">
		<div class="propertyName">Preview Answer</div>
		<div class="propertyValue">
			<input type="text" data-bind="value: question.reportingProperties.previewAnswer" />
		</div>
	</div>
</script>

<script type="text/html" id="tmplTextQuestionContent">
	<div>
		<!-- ko ifnot: (question.format() === QuestionnaireBuilder.Data.QuestionDisplayFormat.MultiStringList || question.format() === QuestionnaireBuilder.Data.QuestionDisplayFormat.MultiStringListInput || question.format() === QuestionnaireBuilder.Data.QuestionDisplayFormat.StringList || question.format() === QuestionnaireBuilder.Data.QuestionDisplayFormat.StringListInput) -->
		<!-- ko if: editor.isReadOnly() -->
		<!-- ko if: question.defaultValue() !== undefined && question.defaultValue() !== null -->
		Default value: <span data-bind="text: question.defaultValue"></span>
		<!-- /ko -->
		<!-- ko if: question.maxLength() !== undefined && question.maxLength() !== null -->
		Maximum Length: <span data-bind="text: question.maxLength"></span>
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: isActive() && !editor.isReadOnly() -->
		<div class="questionEditor__description__wrapper">
			<span style="width:17%">Default value:</span>
			<autosize-textarea
				class="questionEditor__description__input"
				params="placeholder: 'Add default value', value: question.defaultValue"
				data-renderMode="append"
			></autosize-textarea>
			<!-- ko if: !question.isNqp -->
			<div class="deleteIcon" data-bind="cbRescoDropDownList: defaultValueMacroDropDown">
				<i class="questionnairesprite icon-questionnaire_QuestionEditor_ellipsis"></i>
			</div>
			<!-- /ko -->
		</div>

		<div class="questionEditor__description__wrapper">
			<span style="width:17%;text-overflow: ellipsis;overflow: hidden;">Maximum Length:</span>
			<input class="questionEditor__description__limitInput" type="number" step="1" data-bind="value: question.maxLength" />
		</div>

		<!-- ko if: editor.scoringEnabled() -->
		<div class="questionEditor__description__wrapper">
			<span style="width:17%">Score:</span>
			<input class="questionEditor__description__limitInput" type="number" step="any" data-bind="value: question.scoreForAnswered" />
		</div>
		<!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: isActive() && (question.format() === QuestionnaireBuilder.Data.QuestionDisplayFormat.StringList || question.format() === QuestionnaireBuilder.Data.QuestionDisplayFormat.StringListInput) -->
		<div class="questionEditor__description__wrapper">
			<span>Default value:</span>
			<select
				class="questionEditor__description__dropDown"
				style="width: 150px; border: 1px solid #E1E4E8;"
				data-bind="options: optionItems, optionsText: 'value', optionsValue: 'value', optionsCaption: '[none]', valueAllowUnset: true, value: question.defaultValue, enable: !editor.isReadOnly()"
			></select>
		</div>
		<!-- /ko -->
		<!-- ko if: (isActive() || editor.isReadOnly()) && (question.format() === QuestionnaireBuilder.Data.QuestionDisplayFormat.MultiStringList || question.format() === QuestionnaireBuilder.Data.QuestionDisplayFormat.MultiStringListInput || question.format() === QuestionnaireBuilder.Data.QuestionDisplayFormat.StringList || question.format() === QuestionnaireBuilder.Data.QuestionDisplayFormat.StringListInput) -->
		<!-- ko template: { name: 'tmplOptionEditorItems' } -->
		<!-- /ko -->
		<!-- /ko -->
	</div>
</script>
<script type="text/html" id="tmplTwoOptionsQuestionProperties">
	<!-- ko template: { name: 'tmplLabelInlineProperties', data: { view: labelPropertiesViewModel, enabled: !question.isReadOnly } } --><!-- /ko -->
	<!-- ko template: { name: 'tmplTwoOptionsInlineProperties', data: { view: inlinePropertiesViewModel, enabled: !question.isReadOnly } } --><!-- /ko -->
</script>

<script type="text/html" id="tmplTwoOptionsQuestionPreviewValue">
	<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.PreviewAnswer">
		<div class="propertyName"></div>
		<div class="propertyValue"><toggle params="value: question.reportingProperties.previewAnswer, enable: true"></toggle> Preview Answer</div>
	</div>
</script>

<script type="text/html" id="tmplTwoOptionsQuestionContent">
	<div>
		<!-- ko if: !isActive() -->
		<div class="questionEditor__description">Label 'Yes': <span data-bind="text: question.onItem.value() || 'On'"></span></div>
		<div class="questionEditor__description">Label 'No': <span data-bind="text: question.offItem.value() || 'Off'"></span></div>
		<!-- /ko -->
		<!-- ko if: isActive() -->
		<div class="questionEditor__description__wrapper">
			<span style="width:16%">Default Value:</span>
			<select
				class="questionEditor__description__dropDown"
				data-bind="options: defaultValues, optionsText: 'value', optionsValue: 'key', value: question.defaultValue, enable: !editor.isReadOnly()"
			></select>
		</div>
		<table style="width: 100%;">
			<tr>
				<th>Label</th>
				<th>Smart Style</th>
				<!-- ko if: editor.scoringEnabled() -->
				<th>Score</th>
				<!-- /ko -->
			</tr>
			<tr>
				<td>
					<input
						type="text"
						placeholder="Yes"
						class="questionEditor__description__input"
						data-bind="value: question.onItem.value, enable: !editor.isReadOnly()"
					/>
				</td>
				<td>
					<!-- ko ifnot: question.isNqp -->
					<div style="padding-left: 10px;" data-bind="template: { name: 'tmplConditionStyleDropDown', data: onOption }"></div>
					<!-- /ko -->
					<!-- ko if: question.isNqp -->
					<div style="padding-left: 10px;" data-bind="template: { name: 'tmplConditionSemanticColorDropdown', data: onOption }"></div>
					<!-- /ko -->
				</td>
				<!-- ko if: editor.scoringEnabled() -->
				<td>
					<input type="text" class="questionEditor__description__input" data-bind="value: onOption.score, enable: !editor.isReadOnly()" />
				</td>
				<!-- /ko -->
			</tr>
			<tr>
				<td>
					<input
						type="text"
						placeholder="No"
						class="questionEditor__description__input"
						data-bind="value: question.offItem.value, enable: !editor.isReadOnly()"
					/>
				</td>
				<td>
					<!-- ko ifnot: editor.questionnaireItem.questionnaire.isNqpQuestionnaire() -->
					<div style="padding-left: 10px;" data-bind="template: { name: 'tmplConditionStyleDropDown', data: offOption }"></div>
					<!-- /ko -->
					<!-- ko if: editor.questionnaireItem.questionnaire.isNqpQuestionnaire() -->
					<div style="padding-left: 10px;" data-bind="template: { name: 'tmplConditionSemanticColorDropdown', data: offOption }"></div>
					<!-- /ko -->
				</td>
				<!-- ko if: editor.scoringEnabled() -->
				<td>
					<input type="text" class="questionEditor__description__input" data-bind="value: offOption.score, enable: !editor.isReadOnly()" />
				</td>
				<!-- /ko -->
			</tr>
		</table>
		<!-- /ko -->
	</div>
</script>
<script type="text/html" id="tmplSettingsDialog">
	<div class="qSettingsDialog" data-test="questionnaireEditor-qSettingsDialog">
		<div class="qSettingsDialog__tabs">
			<div
				class="qSettingsDialog__tab"
				data-bind="css: { qSettingsDialog__tabSelected: selectedTab() === 'Features' }, click: () => { selectedTab('Features'); }"
			>
				<div class="qSettingsDialog__tabLabel">Features</div>
			</div>
			<!-- ko if: !options.isSnippet -->
			<div
				class="qSettingsDialog__tab"
				data-bind="css: { qSettingsDialog__tabSelected: selectedTab() === 'Rules' }, click: () => { selectedTab('Rules'); }"
			>
				<div class="qSettingsDialog__tabLabel">Rules</div>
			</div>
			<!-- /ko -->
			<!-- ko if: !options.isNqp -->
			<div
				class="qSettingsDialog__tab"
				data-bind="css: { qSettingsDialog__tabSelected: selectedTab() === 'UserInterface' }, click: () => { selectedTab('UserInterface'); }"
			>
				<div class="qSettingsDialog__tabLabel">User interface</div>
			</div>
			<!-- /ko -->
			<!-- ko if: !options.isSnippet -->
			<div
				class="qSettingsDialog__tab"
				data-bind="css: { qSettingsDialog__tabSelected: selectedTab() === 'Storage' }, click: () => { selectedTab('Storage'); }"
			>
				<div class="qSettingsDialog__tabLabel">Storage</div>
			</div>
			<div
				class="qSettingsDialog__tab"
				data-bind="css: { qSettingsDialog__tabSelected: selectedTab() === 'AutomaticReport' }, click: () => { selectedTab('AutomaticReport'); }"
			>
				<div class="qSettingsDialog__tabLabel">Auto report</div>
			</div>
			<!-- /ko -->
		</div>
		<div class="qSettingsDialog__pages">
			<!-- ko if: selectedTab() === 'Features' -->
			<!-- ko template: { name: 'tmplFeaturesPage', data: featuresPage } --><!-- /ko -->
			<!-- /ko -->
			<!-- ko if: !options.isSnippet -->
			<!-- ko if: selectedTab() === 'Rules' -->
			<!-- ko template: { name: 'tmplRulesPage', data: rulesPage } --><!-- /ko -->
			<!-- /ko -->
			<!-- /ko -->
			<!-- ko if: selectedTab() === 'UserInterface' -->
			<!-- ko template: { name: 'tmplUserInterfacePage', data: userInterfacePage } --><!-- /ko -->
			<!-- /ko -->
			<!-- ko if: !options.isSnippet -->
			<!-- ko if: selectedTab() === 'Storage' -->
			<!-- ko template: { name: 'tmplStoragePage', data: storagePage } --><!-- /ko -->
			<!-- /ko -->
			<!-- ko if: selectedTab() === 'AutomaticReport' -->
			<!-- ko template: { name: 'tmplAutomaticReportPage', data: automaticReportPage } --><!-- /ko -->
			<!-- /ko -->
			<!-- /ko -->
		</div>
	</div>
</script>
<script type="text/html" id="tmplStyleConverterDialog">
	<div class="styleConverterDialog">
		<div class="header">
			<span data-bind="visible: usedStyleSemanticColorPairs().length > 0"
				>You’ve been using these styles for the conditional formatting. Choose how they should be converted to semantic colors.</span
			>
			<span data-bind="visible: usedStyleSemanticColorPairs().length === 0 && unusedStyleSemanticColorPairs().length > 0"
				>No styles are currently used in this questionnaire. If you want to keep some of the unused styles, please select 'Keep' action to convert
				them to semantic color.</span
			>
			<span data-bind="visible: usedStyleSemanticColorPairs().length === 0 && unusedStyleSemanticColorPairs().length === 0"
				>No styles detected in this questionnaire. Click Next to proceed with questionnaire conversion.</span
			>
			<a href="https://docs.resco.net/wiki/Questionnaire_Player_Gen_2" target="_blank">Learn more</a>
		</div>
		<div class="used colors-container" data-bind="visible: usedStyleSemanticColorPairs().length > 0">
			<div class="colors-header" data-bind="click: function() { isUsedCollapsed(!isUsedCollapsed()); }">
				<span class="colors-title">Used</span>
				<span class="arrow" data-bind="css: isUsedCollapsed() ? 'arrow-down' : 'arrow-up'"></span>
			</div>
			<div class="converter" data-bind="foreach: usedStyleSemanticColorPairs, visible: !isUsedCollapsed()">
				<div class="converter-row">
					<div class="style-view">
						<div class="color-preview" data-bind="style: { backgroundColor: style.backgroundColor }"></div>
						<div class="styleName" data-bind="text: style.name"></div>
					</div>
					<span class="arrow"></span>
					<div class="semantic-color-view">
						<span data-bind="text: semanticColor().converted ? 'Keep:' : ''"></span>
						<div class="color-preview" data-bind="style: { backgroundColor: semanticColor().hex }"></div>
						<select
							class="semantic-color-select"
							data-bind="options: $data.availableSemanticColors, optionsText: function(item) {
							if(item.converted) {
								return 'Keep: ' + item.name;
							}
							return item.name;
						}, value: $data.semanticColor"
						></select>
					</div>
				</div>
			</div>
		</div>
		<div class="unused colors-container" data-bind="visible: unusedStyleSemanticColorPairs().length > 0">
			<div class="colors-header" data-bind="click: function() { isUnusedCollapsed(!isUnusedCollapsed()); }">
				<span class="colors-title">Unused</span>
				<span class="arrow" data-bind="css: isUnusedCollapsed() ? 'arrow-down' : 'arrow-up'"></span>
			</div>
			<div class="converter" data-bind="foreach: unusedStyleSemanticColorPairs, visible: !isUnusedCollapsed()">
				<div class="converter-row">
					<div class="style-view">
						<div class="color-preview" data-bind="style: { backgroundColor: style.backgroundColor }"></div>
						<div class="styleName" data-bind="text: style.name"></div>
					</div>
					<span class="arrow"></span>
					<div class="semantic-color-view">
						<span data-bind="text: semanticColor().converted ? 'Keep:' : ''"></span>
						<div class="color-preview" data-bind="style: { backgroundColor: semanticColor().hex }"></div>
						<select
							class="semantic-color-select"
							data-bind="options: $data.availableSemanticColors, optionsText: function(item) {
						if(item.converted) {
							return 'Keep: ' + item.name;
						}
						return item.name;
					}, value: $data.semanticColor"
						></select>
					</div>
				</div>
			</div>
		</div>
	</div>
</script>
<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>
			<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: reportRefName() ? '(' + reportRefName() + ')' : ''"></span>
				</button>
				<!-- /ko -->
				<!-- ko if: reportType() === "Name" -->
				<input type="text" data-bind="value: reportRefName" />
				<!-- /ko -->
			</div>
		</div>
	</div>
	<div class="project__option">
		<div class="project__option--title"><span>Use a filter to select a report</span></div>
		<div class="project__option--columns">
			<div class="project__option--column half-element">
				<!-- 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: outputFileName" />
				</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), attr: { id: 'format' + $data }"
				/>
				<label data-bind="text: $data === '*' ? 'All' : $data, attr: {  for: 'format' + $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.key, checked: $parent.chosenCommands, click: $parent.checkCommands.bind($data,$parent), attr: { id: 'cmd' + $data.key }"
				/>
				<label data-bind="text: $data.value, attr: {  for: 'cmd' + $data.key }"></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>Action after report generation</span></div>
				<div class="project__option">
					<select
						type="text"
						data-bind="options: availableImmediateAction, value: immediateAction, optionsText: 'value', optionsValue: 'key'"
					></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>
	<a href="https://docs.resco.net/wiki/Configure_Run_Report_command" target="_blank">Learn more</a>
</script>
<script type="text/html" id="tmplExportQuestionnairesDialog">
	<div class="importDialog">
		<div style="display: flex; height: 100%">
			<!-- ko if: importExportMode === 0 -->
			<div style="flex: 1 1 50%; display: flex; flex-direction: column;">
				<div style="flex: 0 0 125px">
					<b>Export options</b>
					<hr />
					<br />
					<div style="display: grid; width: 100%; grid-template-columns: auto 1fr auto;">
						<span>File Name</span>
						<input style="margin-left: 8px" data-bind="value: exportFileName" />
						<span>.zip</span>
					</div>
					<br />
					<div style="display: grid; grid-template-columns: 1fr 1fr;">
						<div>
							Export questionnaire versions:<br />
							<br />
							<input type="radio" name="exportQuestionnairesPreset" id="full" data-bind="checked: presetSelectStyle" value="full" /><label for="full"
								>full version history</label
							><br />
							<input type="radio" name="exportQuestionnairesPreset" id="latest" data-bind="checked: presetSelectStyle" value="latest" /><label
								for="latest"
								>just latest version</label
							><br />
							<input type="radio" name="exportQuestionnairesPreset" id="custom" data-bind="checked: presetSelectStyle" value="custom" /><label
								for="custom"
								>custom</label
							><br />
						</div>
						<div>
							Export associated reports:<br />
							<br />
							<input
								type="radio"
								name="exportReportsPreset"
								id="all"
								data-bind="checked: presetSelectReportsStyle, disable: !anyReportsAvailable()"
								value="all"
							/><label for="all">all</label><br />
							<input
								type="radio"
								name="exportReportsPreset"
								id="none"
								data-bind="checked: presetSelectReportsStyle, disable: !anyReportsAvailable()"
								value="none"
							/><label for="none">none</label><br />
							<input
								type="radio"
								name="exportReportsPreset"
								id="customreport"
								data-bind="checked: presetSelectReportsStyle, disable: !anyReportsAvailable()"
								value="custom"
							/><label for="customreport">custom</label><br />
						</div>
					</div>
				</div>
				<br />
				<div style="flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto;">
					<span style="font-weight: bold;">Select items for export</span>
					<div>
						<span style="color: #0066FF; cursor: pointer" data-bind="click: selectAll">Select all</span> |
						<span style="color: #0066FF; cursor: pointer" data-bind="click: deselectAll">Deselect all</span>
					</div>
				</div>
				<div style="flex: 1 1 100%; overflow: auto;">
					<hr />
					<!-- ko foreach: exportFolderRoot.items -->
					<!-- ko template: { name: templateName } --><!-- /ko -->
					<!-- /ko -->
				</div>
			</div>
			<!-- /ko -->
			<div style="flex: 1 1 50%">
				<!-- ko if: !selectedQuestionnaire() -->
				<div class="previewBox">
					<div class="previewBoxHeader">Info</div>
					<div>
						<p>To see more details about the files you're exporting, choose any line with a questionnaire template.</p>
						<p>Preset options makes it easier to select methods in bulk.</p>
					</div>
				</div>
				<!-- /ko -->
				<!-- ko if: selectedQuestionnaire() -->
				<div class="previewBox boxNotEmpty">
					<div class="previewBoxHeader">
						<div style="flex: 1 1 100%">Details</div>
						<svg
							class="closePreview"
							data-bind="click: clearSelectedItem"
							width="14"
							height="14"
							viewBox="0 0 14 14"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
						>
							<path
								d="M1.75 1.00001C1.60058 0.999569 1.45443 1.04377 1.3303 1.12695C1.20617 1.21013 1.10971 1.3285 1.0533 1.46686C0.996891 1.60523 0.983098 1.75729 1.01369 1.90355C1.04428 2.04981 1.11786 2.1836 1.225 2.28776L5.947 7.00751L1.22725 11.7273C1.15562 11.7964 1.09848 11.8792 1.05918 11.9707C1.01987 12.0622 0.999179 12.1606 0.998314 12.2602C0.997448 12.3598 1.01642 12.4585 1.05414 12.5507C1.09185 12.6429 1.14754 12.7266 1.21796 12.7971C1.28837 12.8675 1.37211 12.9232 1.46429 12.9609C1.55646 12.9986 1.65522 13.0176 1.7548 13.0167C1.85439 13.0158 1.9528 12.9951 2.0443 12.9558C2.13581 12.9165 2.21857 12.8594 2.28775 12.7878L7.0075 8.06801L11.7273 12.7878C11.7964 12.8594 11.8792 12.9165 11.9707 12.9558C12.0622 12.9951 12.1606 13.0158 12.2602 13.0167C12.3598 13.0176 12.4585 12.9986 12.5507 12.9609C12.6429 12.9232 12.7266 12.8675 12.797 12.7971C12.8675 12.7266 12.9232 12.6429 12.9609 12.5507C12.9986 12.4585 13.0176 12.3598 13.0167 12.2602C13.0158 12.1606 12.9951 12.0622 12.9558 11.9707C12.9165 11.8792 12.8594 11.7964 12.7878 11.7273L8.068 7.00751L12.7878 2.28776C12.8594 2.21857 12.9165 2.13581 12.9558 2.04431C12.9951 1.95281 13.0158 1.85439 13.0167 1.75481C13.0176 1.65522 12.9986 1.55646 12.9609 1.46429C12.9232 1.37212 12.8675 1.28838 12.797 1.21796C12.7266 1.14754 12.6429 1.09185 12.5507 1.05414C12.4585 1.01643 12.3598 0.997454 12.2602 0.998319C12.1606 0.999185 12.0622 1.01987 11.9707 1.05918C11.8792 1.09849 11.7964 1.15562 11.7273 1.22726L7.0075 5.94701L2.28775 1.22726C2.21786 1.15535 2.13426 1.0982 2.0419 1.05916C1.94953 1.02013 1.85028 1.00001 1.75 1.00001Z"
								fill="#001A33"
							/>
						</svg>
					</div>
					<!-- ko with: selectedQuestionnaire() -->
					<div class="questionnaireDetails">
						Version Name:
						<div class="detailValue" data-bind="text: versionName"></div>
						<!-- ko if: !isVersioned -->
						ID:
						<div class="detailValue" data-bind="text: versions[0].id"></div>
						<!-- /ko -->
					</div>
					<div>
						<!-- ko if: isVersioned-->
						<b>Versions list</b>
						<hr />
						<div class="versionList" style="display: grid; grid-template-columns: auto auto 1fr 24px">
							<div class="versionListHeader"></div>
							<span class="versionListHeader">Version</span>
							<span class="versionListHeader">Label</span>
							<div class="versionListHeader"></div>
							<!-- ko foreach: versions -->
							<div class="versionListItem">
								<input type="checkbox" data-bind="checked: exportItem, click: $parent.changePresetToCustom.bind($parent)" />
							</div>
							<span class="versionListItem" style="text-align: center; color: #0066cc; font-weight: 500" data-bind="text: version"></span>
							<span class="versionListItem" data-bind="text: name"></span>
							<span class="versionListItem" style="cursor: pointer; color: #0066FF; font-weight: bold;" data-bind="attr: {title: id}">ID</span>
							<!-- /ko -->
						</div>
						<br />
						<br />
						<!-- /ko -->
						<!-- ko if: availableReports().length > 0 -->
						<b>Associated reports</b>
						<hr />
						<div class="versionList" style="display: grid" data-bind="style: {gridTemplateColumns: isVersioned ? 'auto 1fr auto' : 'auto 1fr'}">
							<div class="versionListHeader"></div>
							<span class="versionListHeader">Label</span>
							<!-- ko if: isVersioned-->
							<span class="versionListHeader"></span>
							<!-- /ko -->
							<!-- ko foreach: availableReports -->
							<div class="versionListItem">
								<input type="checkbox" data-bind="checked: exportItem, click: $parent.changeReportPresetToCustom.bind($parent)" />
							</div>
							<span class="versionListItem" data-bind="text: name"></span>
							<!-- ko if: $parent.isVersioned-->
							<div
								class="versionListItem"
								style="cursor: pointer; color: #0066FF; font-weight: bold;"
								data-bind="attr: {title: 'This report is associated to version number ' + versionItem.version + ' of this questionnaire.'}"
							>
								<!-- ko template: { name: "tmplAssociateReportSvgIcon" } --><!-- /ko -->
								<span data-bind="text: versionItem.version"></span>
							</div>
							<!-- /ko -->
							<!-- /ko -->
						</div>
						<!-- /ko -->
					</div>
					<!-- /ko -->
				</div>
				<!-- /ko -->
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplFolderExportItem">
	<div class="treeNode">
		<div class="nodePadding">
			<svg
				data-bind="click: toggleExpanded, css: { collapsed: !expanded() }"
				width="24"
				height="24"
				viewBox="0 0 24 24"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
			>
				<path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="black" />
			</svg>
		</div>
		<div class="nodeContent">
			<div class="nodeHeader" style="grid-template-columns: auto auto 1fr">
				<input type="checkbox" data-bind="checked: exportItem, indeterminateValue: exportIndeterminate" />
				<span
					style="max-width: 200px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; word-break: break-all; overflow: hidden; cursor: pointer; font-weight: bold"
					data-bind="attr: {title: name}, text: name, click: toggleExpanded"
				></span>
			</div>
			<!-- ko if: expanded() -->
			<div>
				<!-- ko foreach: items -->
				<!-- ko template: { name: templateName } --><!-- /ko -->
				<!-- /ko -->
			</div>
			<!-- /ko -->
		</div>
	</div>
</script>
<script type="text/html" id="tmplQuestionnaireExportItem">
	<div class="treeNode">
		<div class="nodePadding"></div>
		<div
			class="nodeContent nodeHeader"
			style="cursor: pointer; grid-template-columns: auto 1fr auto;"
			data-bind="style: { background: selected() ? 'white' : 'transparent'}"
		>
			<input type="checkbox" data-bind="checked: exportItem" />
			<span
				style="max-width: 200px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; word-break: break-all; overflow: hidden;"
				data-bind="attr: {title: name}, text: name, click: selectItem"
			></span>
			<span style="color: blue; padding-right: 10px" data-bind="text: versionsSummary, click: selectItem"></span>
		</div>
	</div>
</script>
<script type="text/html" id="tmplImportQuestionnairesDialog">
	<div class="importDialog">
		<!-- ko if: step() === 1 -->
		<div style="display: flex; height: 100%">
			<div style="flex: 1 1 50%; display: flex; flex-direction: column;">
				<div style="flex: 0 0 100px">
					<b>Import options</b>
					<hr />
					<div style="display: grid; grid-template-columns: 1fr 1fr;">
						<div>
							Import questionnaire versions:<br />
							<br />
							<input type="radio" name="importQuestionnairesPreset" id="full" data-bind="checked: presetSelectStyle" value="full" /><label for="full"
								>full version history</label
							><br />
							<input type="radio" name="importQuestionnairesPreset" id="latest" data-bind="checked: presetSelectStyle" value="latest" /><label
								for="latest"
								>just latest version</label
							><br />
							<input type="radio" name="importQuestionnairesPreset" id="custom" data-bind="checked: presetSelectStyle" value="custom" /><label
								for="custom"
								>custom</label
							><br />
						</div>
						<div>
							Import associated reports:<br />
							<br />
							<input
								type="radio"
								name="importReportsPreset"
								id="all"
								data-bind="checked: presetSelectReportsStyle, disable: !anyReportsAvailable()"
								value="all"
							/><label for="all">all</label><br />
							<input
								type="radio"
								name="importReportsPreset"
								id="none"
								data-bind="checked: presetSelectReportsStyle, disable: !anyReportsAvailable()"
								value="none"
							/><label for="none">none</label><br />
							<input
								type="radio"
								name="importReportsPreset"
								id="customreport"
								data-bind="checked: presetSelectReportsStyle, disable: !anyReportsAvailable()"
								value="custom"
							/><label for="customreport">custom</label><br />
						</div>
					</div>
				</div>
				<br />
				<!-- ko if: importExportMode === 0 -->
				<div style="flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto;">
					<span style="font-weight: bold;">Select items for import</span>
					<div>
						<span style="color: #0066FF; cursor: pointer" data-bind="click: selectAll">Select all</span> |
						<span style="color: #0066FF; cursor: pointer" data-bind="click: deselectAll">Deselect all</span>
					</div>
				</div>
				<!-- /ko -->
				<!-- ko if: importExportMode === 1 -->
				<div style="flex: 0 0 auto; font-weight: bold">Select single item for export</div>
				<!-- /ko -->
				<div style="flex: 1 1 100%; overflow: auto;">
					<hr />
					<!-- ko foreach: importFolderRoot.items -->
					<!-- ko template: { name: templateName } --><!-- /ko -->
					<!-- /ko -->
				</div>
			</div>
			<div style="flex: 1 1 50%">
				<!-- ko if: !selectedQuestionnaire() -->
				<div class="previewBox">
					<div class="previewBoxHeader">Info</div>
					<div>
						<p>To see more details about the files you're importing, choose any line with a questionnaire template</p>
						<p>Preset options makes it easier to select methods in bulk.</p>
					</div>
				</div>
				<!-- /ko -->
				<!-- ko if: selectedQuestionnaire() -->
				<div class="previewBox boxNotEmpty">
					<div class="previewBoxHeader">
						<div style="flex: 1 1 100%">Details</div>
						<svg
							class="closePreview"
							data-bind="click: clearSelectedItem"
							width="14"
							height="14"
							viewBox="0 0 14 14"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
						>
							<path
								d="M1.75 1.00001C1.60058 0.999569 1.45443 1.04377 1.3303 1.12695C1.20617 1.21013 1.10971 1.3285 1.0533 1.46686C0.996891 1.60523 0.983098 1.75729 1.01369 1.90355C1.04428 2.04981 1.11786 2.1836 1.225 2.28776L5.947 7.00751L1.22725 11.7273C1.15562 11.7964 1.09848 11.8792 1.05918 11.9707C1.01987 12.0622 0.999179 12.1606 0.998314 12.2602C0.997448 12.3598 1.01642 12.4585 1.05414 12.5507C1.09185 12.6429 1.14754 12.7266 1.21796 12.7971C1.28837 12.8675 1.37211 12.9232 1.46429 12.9609C1.55646 12.9986 1.65522 13.0176 1.7548 13.0167C1.85439 13.0158 1.9528 12.9951 2.0443 12.9558C2.13581 12.9165 2.21857 12.8594 2.28775 12.7878L7.0075 8.06801L11.7273 12.7878C11.7964 12.8594 11.8792 12.9165 11.9707 12.9558C12.0622 12.9951 12.1606 13.0158 12.2602 13.0167C12.3598 13.0176 12.4585 12.9986 12.5507 12.9609C12.6429 12.9232 12.7266 12.8675 12.797 12.7971C12.8675 12.7266 12.9232 12.6429 12.9609 12.5507C12.9986 12.4585 13.0176 12.3598 13.0167 12.2602C13.0158 12.1606 12.9951 12.0622 12.9558 11.9707C12.9165 11.8792 12.8594 11.7964 12.7878 11.7273L8.068 7.00751L12.7878 2.28776C12.8594 2.21857 12.9165 2.13581 12.9558 2.04431C12.9951 1.95281 13.0158 1.85439 13.0167 1.75481C13.0176 1.65522 12.9986 1.55646 12.9609 1.46429C12.9232 1.37212 12.8675 1.28838 12.797 1.21796C12.7266 1.14754 12.6429 1.09185 12.5507 1.05414C12.4585 1.01643 12.3598 0.997454 12.2602 0.998319C12.1606 0.999185 12.0622 1.01987 11.9707 1.05918C11.8792 1.09849 11.7964 1.15562 11.7273 1.22726L7.0075 5.94701L2.28775 1.22726C2.21786 1.15535 2.13426 1.0982 2.0419 1.05916C1.94953 1.02013 1.85028 1.00001 1.75 1.00001Z"
								fill="#001A33"
							/>
						</svg>
					</div>
					<!-- ko with: selectedQuestionnaire() -->
					<div class="questionnaireDetails">
						Version Name:
						<div class="detailValue" data-bind="text: sourceVersionName"></div>
						<!-- ko if: !sourceWasVersionned -->
						ID:
						<div class="detailValue" data-bind="text: versions[0].sourceId"></div>
						<!-- /ko -->
					</div>
					<div>
						<!-- ko if: sourceWasVersionned -->
						<b>Versions list</b>
						<hr />
						<div class="versionList" style="display: grid; grid-template-columns: auto auto 1fr 24px">
							<div class="versionListHeader"></div>
							<span class="versionListHeader">Version</span>
							<span class="versionListHeader">Label</span>
							<div class="versionListHeader"></div>
							<!-- ko foreach: versions -->
							<div class="versionListItem">
								<input type="checkbox" data-bind="checked: importItem, click: $parent.changePresetToCustom.bind($parent)" />
							</div>
							<span class="versionListItem" style="text-align: center; color: #0066cc; font-weight: 500" data-bind="text: sourceVersion"></span>
							<span class="versionListItem" data-bind="attr: {title: name}, text: name"></span>
							<span class="versionListItem" style="cursor: pointer; color: #0066FF; font-weight: bold;" data-bind="attr: {title: sourceId}">ID</span>
							<!-- /ko -->
						</div>
						<br />
						<br />
						<!-- /ko -->
						<!-- ko if: !sourceWasVersionned -->
						<div class="infoDiv">Questionnaire is not versionned</div>
						<br />
						<br />
						<!-- /ko -->
						<!-- ko if: availableReports().length > 0 -->
						<b>Associated reports</b>
						<hr />
						<div
							class="versionList"
							style="display: grid"
							data-bind="style: {gridTemplateColumns: sourceWasVersionned ? 'auto 1fr auto' : 'auto 1fr'}"
						>
							<div class="versionListHeader"></div>
							<span class="versionListHeader">Label</span>
							<!-- ko if: sourceWasVersionned -->
							<span class="versionListHeader"></span>
							<!-- /ko -->
							<!-- ko foreach: availableReports -->
							<div class="versionListItem">
								<input type="checkbox" data-bind="checked: importItem, click: $parent.changeReportPresetToCustom.bind($parent)" />
							</div>
							<span class="versionListItem" data-bind="text: name"></span>
							<!-- ko if: $parent.sourceWasVersionned -->
							<div
								class="versionListItem"
								style="cursor: pointer; color: #0066FF; font-weight: bold;"
								data-bind="attr: {title: 'This report is associated to version number ' + versionItem.sourceVersion + ' of this questionnaire.'}"
							>
								<!-- ko template: { name: "tmplAssociateReportSvgIcon" } --><!-- /ko -->
								<span data-bind="text: versionItem.sourceVersion"></span>
							</div>
							<!-- /ko -->
							<!-- /ko -->
						</div>
						<!-- /ko -->
					</div>
					<!-- /ko -->
				</div>
				<!-- /ko -->
			</div>
		</div>
		<!-- /ko -->
		<!-- ko if: step() === 2 -->
		<!-- ko if: questionnaireItems.length === 1 -->
		<b>You selected 1 template, choose how it should be imported...</b>
		<!-- /ko -->
		<!-- ko if: questionnaireItems.length > 1 -->
		<b>You selected <span data-bind="text: questionnaireItems.length"></span> templates, choose how they should be imported...</b>
		<!-- /ko -->
		<hr />
		<!-- ko foreach: questionnaireItems -->
		<!-- ko template: { name: 'tmplSelectQuestionnaireItemImportTarget' } --><!-- /ko -->
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: step() === 3 -->
		<div style="display: flex; height: 100%">
			<!-- ko if: importExportMode === 0 -->
			<div style="flex: 1 1 50%; display: flex; flex-direction: column;">
				<div style="flex: 0 0 auto; font-weight: bold">
					Import overview
					<hr />
				</div>
				<div style="flex: 1 1 100%; overflow: auto;">
					<!-- ko foreach: previewFolderRoot.items -->
					<!-- ko template: { name: templateName } --><!-- /ko -->
					<!-- /ko -->
				</div>
			</div>
			<!-- /ko -->
			<div data-bind="style: {flex: importExportMode === 0 ? '1 1 50%' : '1 1 100%'}">
				<!-- ko if: !selectedQuestionnaire() -->
				<div class="previewBox">
					<div class="previewBoxHeader">Info</div>
					<div>
						<p>To see more details about the files you're importing, choose any line with a questionnaire template</p>
						<p>Preset options makes it easier to select methods in bulk.</p>
					</div>
				</div>
				<!-- /ko -->
				<!-- ko if: selectedQuestionnaire() -->
				<div class="previewBox boxNotEmpty">
					<div class="previewBoxHeader">
						<div style="flex: 1 1 100%">Details</div>
						<svg
							class="closePreview"
							data-bind="click: clearSelectedItem"
							width="14"
							height="14"
							viewBox="0 0 14 14"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
						>
							<path
								d="M1.75 1.00001C1.60058 0.999569 1.45443 1.04377 1.3303 1.12695C1.20617 1.21013 1.10971 1.3285 1.0533 1.46686C0.996891 1.60523 0.983098 1.75729 1.01369 1.90355C1.04428 2.04981 1.11786 2.1836 1.225 2.28776L5.947 7.00751L1.22725 11.7273C1.15562 11.7964 1.09848 11.8792 1.05918 11.9707C1.01987 12.0622 0.999179 12.1606 0.998314 12.2602C0.997448 12.3598 1.01642 12.4585 1.05414 12.5507C1.09185 12.6429 1.14754 12.7266 1.21796 12.7971C1.28837 12.8675 1.37211 12.9232 1.46429 12.9609C1.55646 12.9986 1.65522 13.0176 1.7548 13.0167C1.85439 13.0158 1.9528 12.9951 2.0443 12.9558C2.13581 12.9165 2.21857 12.8594 2.28775 12.7878L7.0075 8.06801L11.7273 12.7878C11.7964 12.8594 11.8792 12.9165 11.9707 12.9558C12.0622 12.9951 12.1606 13.0158 12.2602 13.0167C12.3598 13.0176 12.4585 12.9986 12.5507 12.9609C12.6429 12.9232 12.7266 12.8675 12.797 12.7971C12.8675 12.7266 12.9232 12.6429 12.9609 12.5507C12.9986 12.4585 13.0176 12.3598 13.0167 12.2602C13.0158 12.1606 12.9951 12.0622 12.9558 11.9707C12.9165 11.8792 12.8594 11.7964 12.7878 11.7273L8.068 7.00751L12.7878 2.28776C12.8594 2.21857 12.9165 2.13581 12.9558 2.04431C12.9951 1.95281 13.0158 1.85439 13.0167 1.75481C13.0176 1.65522 12.9986 1.55646 12.9609 1.46429C12.9232 1.37212 12.8675 1.28838 12.797 1.21796C12.7266 1.14754 12.6429 1.09185 12.5507 1.05414C12.4585 1.01643 12.3598 0.997454 12.2602 0.998319C12.1606 0.999185 12.0622 1.01987 11.9707 1.05918C11.8792 1.09849 11.7964 1.15562 11.7273 1.22726L7.0075 5.94701L2.28775 1.22726C2.21786 1.15535 2.13426 1.0982 2.0419 1.05916C1.94953 1.02013 1.85028 1.00001 1.75 1.00001Z"
								fill="#001A33"
							/>
						</svg>
					</div>
					<!-- ko with: selectedQuestionnaire() -->
					<div class="questionnaireDetails">
						Version Name:
						<div class="detailValue" data-bind="text: targetVersionName"></div>
					</div>
					<br />
					<!-- ko if: warningList().length > 0 -->
					<div class="warningList">
						<!-- ko foreach: warningList -->
						<div class="warningDiv">
							<b>Important!</b><br />
							<span data-bind="text: $data"></span>
						</div>
						<br />
						<!-- /ko -->
					</div>
					<!-- /ko -->
					<div>
						<!-- ko if: sourceWasVersionned || makeVersionned() -->
						<b>Versions list</b>
						<hr />
						<div class="versionList" style="display: grid; grid-template-columns: 60px 1fr 60px 48px">
							<span class="versionListHeader">Original version</span>
							<span class="versionListHeader">Label</span>
							<div class="versionListHeader">New version</div>
							<div class="versionListHeader"></div>
							<!-- ko foreach: versions -->
							<!-- ko if: importItem() -->
							<span class="versionListItem" style="text-align: center" data-bind="text: sourceVersion"></span>
							<span class="versionListItem" data-bind="attr: {title: name}, text: name"></span>
							<span class="versionListItem" style="text-align: center; color: #0066cc; font-weight: 500;" data-bind="text: targetVersion"></span>
							<!-- ko if: warning -->
							<div class="versionListItem" style="cursor: pointer; text-align: right;" data-bind="attr: {title: warning}">
								<div class="warningDot"></div>
								<span style="color: #0066FF; font-weight: bold;">ID</span>
							</div>
							<!-- /ko -->
							<!-- ko if: !warning -->
							<div class="versionListItem" style="cursor: pointer; text-align: right;">
								<span style="color: #0066FF; font-weight: bold;" data-bind="attr: {title: targetId}">ID</span>
							</div>
							<!-- /ko -->
							<!-- /ko -->
							<!-- /ko -->
						</div>
						<br />
						<br />
						<!-- /ko -->
						<!-- ko if: availableReports().length > 0 && numberOfReportsToImport() > 0 -->
						<b>Associated reports</b>
						<hr />
						<div
							class="versionList"
							style="display: grid"
							data-bind="style: {gridTemplateColumns: sourceWasVersionned || makeVersionned() ? '1fr auto' : '1fr'}"
						>
							<span class="versionListHeader">Label</span>
							<!-- ko if: sourceWasVersionned || makeVersionned() -->
							<div class="versionListHeader"></div>
							<!-- /ko -->
							<!-- ko foreach: availableReports -->
							<!-- ko if: importItem() -->
							<span class="versionListItem" data-bind="attr:{title: name}, text: name"></span>
							<!-- ko if: $parent.sourceWasVersionned || $parent.makeVersionned() -->
							<div
								class="versionListItem"
								style="cursor: pointer; color: #0066FF; font-weight: bold;"
								data-bind="attr: {title: 'This report will be associated to version number ' + versionItem.targetVersion + ' of this questionnaire.'}"
							>
								<!-- ko template: { name: "tmplAssociateReportSvgIcon" } --><!-- /ko -->
								<span data-bind="text: versionItem.targetVersion"></span>
							</div>
							<!-- /ko -->
							<!-- /ko -->
							<!-- /ko -->
						</div>
						<!-- /ko -->
					</div>
					<!-- /ko -->
				</div>
				<!-- /ko -->
			</div>
		</div>
		<!-- /ko -->
		<!-- ko if: step() === 4 -->
		<div style="display: flex; height: 100%">
			<!-- ko if: importExportMode === 0 -->
			<div style="flex: 1 1 50%; display: flex; flex-direction: column;">
				<div style="flex: 0 0 auto; font-weight: bold">
					Import results
					<hr />
				</div>
				<div style="flex: 1 1 100%; overflow: auto;">
					<!-- ko foreach: previewFolderRoot.items -->
					<!-- ko template: { name: templateName } --><!-- /ko -->
					<!-- /ko -->
				</div>
			</div>
			<!-- /ko -->
			<div style="flex: 1 1 50%">
				<!-- ko if: !selectedQuestionnaire() -->
				<div class="previewBox">
					<div class="previewBoxHeader">Info</div>
					<div>
						<p>To see details about the imported questionnaire, choose any line with a questionnaire template</p>
					</div>
				</div>
				<!-- /ko -->
				<!-- ko if: selectedQuestionnaire() -->
				<div class="previewBox boxNotEmpty">
					<div class="previewBoxHeader">
						<div style="flex: 1 1 100%">Detailed results</div>
						<svg
							class="closePreview"
							data-bind="click: clearSelectedItem"
							width="14"
							height="14"
							viewBox="0 0 14 14"
							fill="none"
							xmlns="http://www.w3.org/2000/svg"
						>
							<path
								d="M1.75 1.00001C1.60058 0.999569 1.45443 1.04377 1.3303 1.12695C1.20617 1.21013 1.10971 1.3285 1.0533 1.46686C0.996891 1.60523 0.983098 1.75729 1.01369 1.90355C1.04428 2.04981 1.11786 2.1836 1.225 2.28776L5.947 7.00751L1.22725 11.7273C1.15562 11.7964 1.09848 11.8792 1.05918 11.9707C1.01987 12.0622 0.999179 12.1606 0.998314 12.2602C0.997448 12.3598 1.01642 12.4585 1.05414 12.5507C1.09185 12.6429 1.14754 12.7266 1.21796 12.7971C1.28837 12.8675 1.37211 12.9232 1.46429 12.9609C1.55646 12.9986 1.65522 13.0176 1.7548 13.0167C1.85439 13.0158 1.9528 12.9951 2.0443 12.9558C2.13581 12.9165 2.21857 12.8594 2.28775 12.7878L7.0075 8.06801L11.7273 12.7878C11.7964 12.8594 11.8792 12.9165 11.9707 12.9558C12.0622 12.9951 12.1606 13.0158 12.2602 13.0167C12.3598 13.0176 12.4585 12.9986 12.5507 12.9609C12.6429 12.9232 12.7266 12.8675 12.797 12.7971C12.8675 12.7266 12.9232 12.6429 12.9609 12.5507C12.9986 12.4585 13.0176 12.3598 13.0167 12.2602C13.0158 12.1606 12.9951 12.0622 12.9558 11.9707C12.9165 11.8792 12.8594 11.7964 12.7878 11.7273L8.068 7.00751L12.7878 2.28776C12.8594 2.21857 12.9165 2.13581 12.9558 2.04431C12.9951 1.95281 13.0158 1.85439 13.0167 1.75481C13.0176 1.65522 12.9986 1.55646 12.9609 1.46429C12.9232 1.37212 12.8675 1.28838 12.797 1.21796C12.7266 1.14754 12.6429 1.09185 12.5507 1.05414C12.4585 1.01643 12.3598 0.997454 12.2602 0.998319C12.1606 0.999185 12.0622 1.01987 11.9707 1.05918C11.8792 1.09849 11.7964 1.15562 11.7273 1.22726L7.0075 5.94701L2.28775 1.22726C2.21786 1.15535 2.13426 1.0982 2.0419 1.05916C1.94953 1.02013 1.85028 1.00001 1.75 1.00001Z"
								fill="#001A33"
							/>
						</svg>
					</div>
					<!-- ko with: selectedQuestionnaire() -->
					<div>
						<b>Questionnaire details</b>
						<hr />
					</div>
					<div>
						<!-- ko if: sourceWasVersionned || makeVersionned() -->
						<b>Imported versions</b>
						<hr />
						<div class="versionList" style="display: grid; grid-template-columns: 60px 1fr 60px 24px">
							<span class="versionListHeader">Original version</span>
							<span class="versionListHeader">Label</span>
							<div class="versionListHeader">New version</div>
							<div class="versionListHeader"></div>
							<!-- ko foreach: versions -->
							<!-- ko if: importItem() -->
							<span class="versionListItem" data-bind="text: sourceVersion"></span>
							<span class="versionListItem" data-bind="attr: {title: name}, text: name"></span>
							<span class="versionListItem" style="text-align: center; color: #0066cc; font-weight: 500;" data-bind="text: targetVersion"></span>
							<!-- ko if: importStatus() === 2 -->
							<svg
								class="versionListItem"
								style="cursor: pointer"
								width="22"
								height="19"
								viewBox="0 0 22 19"
								fill="none"
								xmlns="http://www.w3.org/2000/svg"
							>
								<title data-bind="text: importResultLabel"></title>
								<path d="M11 3.99L18.53 17H3.47L11 3.99ZM11 0L0 19H22L11 0ZM12 14H10V16H12V14ZM12 8H10V12H12V8Z" fill="#F44F58" />
							</svg>
							<!-- /ko -->
							<!-- ko if: importStatus() !== 2 -->
							<svg
								class="versionListItem"
								style="cursor: pointer"
								width="21"
								height="21"
								viewBox="0 0 21 21"
								fill="none"
								xmlns="http://www.w3.org/2000/svg"
							>
								<title>Imported successfully</title>
								<path
									d="M9.06582 15.0932L16.1158 8.04316L14.7158 6.64316L9.06582 12.2932L6.21582 9.44316L4.81582 10.8432L9.06582 15.0932ZM10.4658 20.4932C9.08249 20.4932 7.78249 20.2307 6.56582 19.7057C5.34915 19.1807 4.29082 18.4682 3.39082 17.5682C2.49082 16.6682 1.77832 15.6098 1.25332 14.3932C0.72832 13.1765 0.46582 11.8765 0.46582 10.4932C0.46582 9.10983 0.72832 7.80983 1.25332 6.59316C1.77832 5.3765 2.49082 4.31816 3.39082 3.41816C4.29082 2.51816 5.34915 1.80566 6.56582 1.28066C7.78249 0.755664 9.08249 0.493164 10.4658 0.493164C11.8492 0.493164 13.1492 0.755664 14.3658 1.28066C15.5825 1.80566 16.6408 2.51816 17.5408 3.41816C18.4408 4.31816 19.1533 5.3765 19.6783 6.59316C20.2033 7.80983 20.4658 9.10983 20.4658 10.4932C20.4658 11.8765 20.2033 13.1765 19.6783 14.3932C19.1533 15.6098 18.4408 16.6682 17.5408 17.5682C16.6408 18.4682 15.5825 19.1807 14.3658 19.7057C13.1492 20.2307 11.8492 20.4932 10.4658 20.4932ZM10.4658 18.4932C12.6992 18.4932 14.5908 17.7182 16.1408 16.1682C17.6908 14.6182 18.4658 12.7265 18.4658 10.4932C18.4658 8.25983 17.6908 6.36816 16.1408 4.81816C14.5908 3.26816 12.6992 2.49316 10.4658 2.49316C8.23249 2.49316 6.34082 3.26816 4.79082 4.81816C3.24082 6.36816 2.46582 8.25983 2.46582 10.4932C2.46582 12.7265 3.24082 14.6182 4.79082 16.1682C6.34082 17.7182 8.23249 18.4932 10.4658 18.4932Z"
									fill="#2FAD00"
								/>
							</svg>
							<!-- /ko -->
							<!-- /ko -->
							<!-- /ko -->
						</div>
						<br />
						<br />
						<!-- /ko -->
						<!-- ko if: !sourceWasVersionned && !makeVersionned() && versions.length > 0 -->
						<div>
							<!-- ko with: versions[0] -->
							<!-- ko if: importStatus() === 2 -->
							<svg style="cursor: pointer" width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
								<title data-bind="text: importResultLabel"></title>
								<path d="M11 3.99L18.53 17H3.47L11 3.99ZM11 0L0 19H22L11 0ZM12 14H10V16H12V14ZM12 8H10V12H12V8Z" fill="#F44F58" />
							</svg>
							<span data-bind="text: importResultLabel"></span>
							<!-- /ko -->
							<!-- ko if: importStatus() !== 2 -->
							<svg style="cursor: pointer" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
								<title>Imported successfully</title>
								<path
									d="M9.06582 15.0932L16.1158 8.04316L14.7158 6.64316L9.06582 12.2932L6.21582 9.44316L4.81582 10.8432L9.06582 15.0932ZM10.4658 20.4932C9.08249 20.4932 7.78249 20.2307 6.56582 19.7057C5.34915 19.1807 4.29082 18.4682 3.39082 17.5682C2.49082 16.6682 1.77832 15.6098 1.25332 14.3932C0.72832 13.1765 0.46582 11.8765 0.46582 10.4932C0.46582 9.10983 0.72832 7.80983 1.25332 6.59316C1.77832 5.3765 2.49082 4.31816 3.39082 3.41816C4.29082 2.51816 5.34915 1.80566 6.56582 1.28066C7.78249 0.755664 9.08249 0.493164 10.4658 0.493164C11.8492 0.493164 13.1492 0.755664 14.3658 1.28066C15.5825 1.80566 16.6408 2.51816 17.5408 3.41816C18.4408 4.31816 19.1533 5.3765 19.6783 6.59316C20.2033 7.80983 20.4658 9.10983 20.4658 10.4932C20.4658 11.8765 20.2033 13.1765 19.6783 14.3932C19.1533 15.6098 18.4408 16.6682 17.5408 17.5682C16.6408 18.4682 15.5825 19.1807 14.3658 19.7057C13.1492 20.2307 11.8492 20.4932 10.4658 20.4932ZM10.4658 18.4932C12.6992 18.4932 14.5908 17.7182 16.1408 16.1682C17.6908 14.6182 18.4658 12.7265 18.4658 10.4932C18.4658 8.25983 17.6908 6.36816 16.1408 4.81816C14.5908 3.26816 12.6992 2.49316 10.4658 2.49316C8.23249 2.49316 6.34082 3.26816 4.79082 4.81816C3.24082 6.36816 2.46582 8.25983 2.46582 10.4932C2.46582 12.7265 3.24082 14.6182 4.79082 16.1682C6.34082 17.7182 8.23249 18.4932 10.4658 18.4932Z"
									fill="#2FAD00"
								/>
							</svg>
							Imported successfully
							<!-- /ko -->
							<!-- /ko -->
						</div>
						<br />
						<br />
						<!-- /ko -->
						<!-- ko if: availableReports().length > 0 && numberOfReportsToImport() > 0 -->
						<b>Associated reports</b>
						<hr />
						<div
							class="versionList"
							style="display: grid"
							data-bind="style: {gridTemplateColumns: sourceWasVersionned || makeVersionned() ? '1fr 75px auto' : '1fr auto'}"
						>
							<span class="versionListHeader">Label</span>
							<!-- ko if: sourceWasVersionned || makeVersionned() -->
							<div class="versionListHeader"></div>
							<!-- /ko -->
							<div class="versionListHeader"></div>
							<!-- ko foreach: availableReports -->
							<!-- ko if: importItem() -->
							<span class="versionListItem" data-bind="text: name"></span>
							<!-- ko if: $parent.sourceWasVersionned || $parent.makeVersionned() -->
							<div
								class="versionListItem"
								style="cursor: pointer; color: #0066FF; font-weight: bold;"
								data-bind="attr: {title: 'This report is associated to version number ' + versionItem.targetVersion + ' of this questionnaire.'}"
							>
								<!-- ko template: { name: "tmplAssociateReportSvgIcon" } --><!-- /ko -->
								<span data-bind="text: versionItem.targetVersion"></span>
							</div>
							<!-- /ko -->
							<!-- ko if: importStatus() === 2 -->
							<svg
								class="versionListItem"
								style="cursor: pointer"
								width="22"
								height="19"
								viewBox="0 0 22 19"
								fill="none"
								xmlns="http://www.w3.org/2000/svg"
							>
								<title data-bind="text: importResultLabel"></title>
								<path d="M11 3.99L18.53 17H3.47L11 3.99ZM11 0L0 19H22L11 0ZM12 14H10V16H12V14ZM12 8H10V12H12V8Z" fill="#F44F58" />
							</svg>
							<!-- /ko -->
							<!-- ko if: importStatus() !== 2 -->
							<svg
								class="versionListItem"
								style="cursor: pointer"
								width="21"
								height="21"
								viewBox="0 0 21 21"
								fill="none"
								xmlns="http://www.w3.org/2000/svg"
							>
								<title>Imported successfully</title>
								<path
									d="M9.06582 15.0932L16.1158 8.04316L14.7158 6.64316L9.06582 12.2932L6.21582 9.44316L4.81582 10.8432L9.06582 15.0932ZM10.4658 20.4932C9.08249 20.4932 7.78249 20.2307 6.56582 19.7057C5.34915 19.1807 4.29082 18.4682 3.39082 17.5682C2.49082 16.6682 1.77832 15.6098 1.25332 14.3932C0.72832 13.1765 0.46582 11.8765 0.46582 10.4932C0.46582 9.10983 0.72832 7.80983 1.25332 6.59316C1.77832 5.3765 2.49082 4.31816 3.39082 3.41816C4.29082 2.51816 5.34915 1.80566 6.56582 1.28066C7.78249 0.755664 9.08249 0.493164 10.4658 0.493164C11.8492 0.493164 13.1492 0.755664 14.3658 1.28066C15.5825 1.80566 16.6408 2.51816 17.5408 3.41816C18.4408 4.31816 19.1533 5.3765 19.6783 6.59316C20.2033 7.80983 20.4658 9.10983 20.4658 10.4932C20.4658 11.8765 20.2033 13.1765 19.6783 14.3932C19.1533 15.6098 18.4408 16.6682 17.5408 17.5682C16.6408 18.4682 15.5825 19.1807 14.3658 19.7057C13.1492 20.2307 11.8492 20.4932 10.4658 20.4932ZM10.4658 18.4932C12.6992 18.4932 14.5908 17.7182 16.1408 16.1682C17.6908 14.6182 18.4658 12.7265 18.4658 10.4932C18.4658 8.25983 17.6908 6.36816 16.1408 4.81816C14.5908 3.26816 12.6992 2.49316 10.4658 2.49316C8.23249 2.49316 6.34082 3.26816 4.79082 4.81816C3.24082 6.36816 2.46582 8.25983 2.46582 10.4932C2.46582 12.7265 3.24082 14.6182 4.79082 16.1682C6.34082 17.7182 8.23249 18.4932 10.4658 18.4932Z"
									fill="#2FAD00"
								/>
							</svg>
							<!-- /ko -->
							<!-- /ko -->
							<!-- /ko -->
						</div>
						<!-- /ko -->
					</div>
					<!-- /ko -->
				</div>
				<!-- /ko -->
			</div>
		</div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplFolderImportItem">
	<div class="treeNode">
		<div class="nodePadding">
			<svg
				data-bind="click: toggleExpanded, css: { collapsed: !expanded() }"
				width="24"
				height="24"
				viewBox="0 0 24 24"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
			>
				<path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="black" />
			</svg>
		</div>
		<div class="nodeContent">
			<div class="nodeHeader" data-bind="style: {gridTemplateColumns: editor.importExportMode === 0 ? 'auto auto 1fr' : 'auto 1fr'}">
				<!-- ko if: editor.importExportMode === 0 -->
				<input type="checkbox" data-bind="checked: importItem, indeterminateValue: importIndeterminate" />
				<!-- /ko -->
				<span style="cursor: pointer; font-weight: bold" data-bind="text: name, click: toggleExpanded"></span>
			</div>
			<!-- ko if: expanded() -->
			<div>
				<!-- ko foreach: items -->
				<!-- ko template: { name: templateName } --><!-- /ko -->
				<!-- /ko -->
			</div>
			<!-- /ko -->
		</div>
	</div>
</script>

<script type="text/html" id="tmplImportFolderSvgIcon">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path
			d="M9.17 6L11.17 8H20V18H4V6H9.17ZM10 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V8C22 6.9 21.1 6 20 6H12L10 4Z"
			fill="#0066CC"
		/>
	</svg>
</script>

<script type="text/html" id="tmplImportQuestionnaireSvgIcon">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M19 5V19H5V5H19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3Z" fill="#0066CC" />
		<path d="M14 17H7V15H14V17ZM17 13H7V11H17V13ZM17 9H7V7H17V9Z" fill="#0066CC" />
	</svg>
</script>

<script type="text/html" id="tmplAssociateReportSvgIcon">
	<svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path
			d="M1.925 4C1.925 2.7175 2.9675 1.675 4.25 1.675H7.25V0.25H4.25C2.18 0.25 0.5 1.93 0.5 4C0.5 6.07 2.18 7.75 4.25 7.75H7.25V6.325H4.25C2.9675 6.325 1.925 5.2825 1.925 4ZM5 4.75H11V3.25H5V4.75ZM11.75 0.25H8.75V1.675H11.75C13.0325 1.675 14.075 2.7175 14.075 4C14.075 5.2825 13.0325 6.325 11.75 6.325H8.75V7.75H11.75C13.82 7.75 15.5 6.07 15.5 4C15.5 1.93 13.82 0.25 11.75 0.25Z"
			fill="#0066FF"
		/>
	</svg>
</script>

<script type="text/html" id="tmplImportErrorSvgIcon">
	<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M11 3.99L18.53 17H3.47L11 3.99ZM11 0L0 19H22L11 0ZM12 14H10V16H12V14ZM12 8H10V12H12V8Z" fill="#FEB705" />
	</svg>
</script>

<script type="text/html" id="tmplImportSuccessSvgIcon">
	<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path
			d="M9.06582 15.0932L16.1158 8.04316L14.7158 6.64316L9.06582 12.2932L6.21582 9.44316L4.81582 10.8432L9.06582 15.0932ZM10.4658 20.4932C9.08249 20.4932 7.78249 20.2307 6.56582 19.7057C5.34915 19.1807 4.29082 18.4682 3.39082 17.5682C2.49082 16.6682 1.77832 15.6098 1.25332 14.3932C0.72832 13.1765 0.46582 11.8765 0.46582 10.4932C0.46582 9.10983 0.72832 7.80983 1.25332 6.59316C1.77832 5.3765 2.49082 4.31816 3.39082 3.41816C4.29082 2.51816 5.34915 1.80566 6.56582 1.28066C7.78249 0.755664 9.08249 0.493164 10.4658 0.493164C11.8492 0.493164 13.1492 0.755664 14.3658 1.28066C15.5825 1.80566 16.6408 2.51816 17.5408 3.41816C18.4408 4.31816 19.1533 5.3765 19.6783 6.59316C20.2033 7.80983 20.4658 9.10983 20.4658 10.4932C20.4658 11.8765 20.2033 13.1765 19.6783 14.3932C19.1533 15.6098 18.4408 16.6682 17.5408 17.5682C16.6408 18.4682 15.5825 19.1807 14.3658 19.7057C13.1492 20.2307 11.8492 20.4932 10.4658 20.4932ZM10.4658 18.4932C12.6992 18.4932 14.5908 17.7182 16.1408 16.1682C17.6908 14.6182 18.4658 12.7265 18.4658 10.4932C18.4658 8.25983 17.6908 6.36816 16.1408 4.81816C14.5908 3.26816 12.6992 2.49316 10.4658 2.49316C8.23249 2.49316 6.34082 3.26816 4.79082 4.81816C3.24082 6.36816 2.46582 8.25983 2.46582 10.4932C2.46582 12.7265 3.24082 14.6182 4.79082 16.1682C6.34082 17.7182 8.23249 18.4932 10.4658 18.4932Z"
			fill="#2FAD00"
		/>
	</svg>
</script>

<script type="text/html" id="tmplImportInformationSvgIcon">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path
			d="M11 7H13V9H11V7ZM11 11H13V17H11V11ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20Z"
			fill="#0066CC"
		/>
	</svg>
</script>

<script type="text/html" id="tmplImportWarningSvgIcon">
	<svg style="cursor: pointer" width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M11 3.99L18.53 17H3.47L11 3.99ZM11 0L0 19H22L11 0ZM12 14H10V16H12V14ZM12 8H10V12H12V8Z" fill="#FEB705" />
	</svg>
</script>

<script type="text/html" id="tmplImportItemCreateNewSvgIcon">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M12 7L15.44 8.56L17 12L18.56 8.56L22 7L18.56 5.44L17 2L15.44 5.44L12 7Z" fill="#FEB705" />
		<path
			fill-rule="evenodd"
			clip-rule="evenodd"
			d="M18 14.6375V20H6V4H13V4.35051L13.9291 3.92915L14.5531 2.55315L14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V10.2273L18 14.6375ZM18 9.79496L18.56 8.56003L19.936 7.93603L16.064 4.06403L15.44 5.44003L13 6.54655V7.4535L15.44 8.56003L15.6395 9H18V9.79496Z"
			fill="#FEB705"
		/>
	</svg>
</script>

<script type="text/html" id="tmplImportItemAppendToSvgIcon">
	<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path
			d="M13 11H11V14H8V16H11V19H13V16H16V14H13V11ZM14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.89 22 5.99 22H18C19.1 22 20 21.1 20 20V8L14 2ZM18 20H6V4H13V9H18V20Z"
			fill="#0066CC"
		/>
	</svg>
</script>

<script type="text/html" id="tmplSegmentSelectedSvgIcon">
	<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path d="M5.16245 9.50007L0.887451 5.22507L1.9562 4.15632L5.16245 7.36257L12.0437 0.481323L13.1125 1.55007L5.16245 9.50007Z" fill="#0066CC" />
	</svg>
</script>

<script type="text/html" id="tmplFolderImportItemOverview">
	<div class="treeNode">
		<div class="nodePadding">
			<svg
				data-bind="click: toggleExpanded, css: { collapsed: !expanded() }"
				width="24"
				height="24"
				viewBox="0 0 24 24"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
			>
				<path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="black" />
			</svg>
		</div>
		<div class="nodeContent">
			<div class="nodeHeader" style="grid-template-columns: auto 1fr auto;">
				<!-- ko template: {name: "tmplImportFolderSvgIcon"}--><!-- /ko -->
				<span style="cursor: pointer; font-weight: bold" data-bind="text: name, click: toggleExpanded"></span>
			</div>
			<!-- ko if: expanded() -->
			<div>
				<!-- ko foreach: items -->
				<!-- ko template: { name: templateName } --><!-- /ko -->
				<!-- /ko -->
			</div>
			<!-- /ko -->
		</div>
	</div>
</script>

<script type="text/html" id="tmplQuestionnaireImportItem">
	<div class="treeNode">
		<div class="nodePadding"></div>
		<div
			class="nodeContent nodeHeader"
			style="cursor: pointer; grid-template-columns: auto 1fr auto;"
			data-bind="style: { background: selected() ? 'white' : 'transparent'}"
		>
			<!-- ko if: editor.importExportMode === 0 -->
			<input type="checkbox" data-bind="checked: importItem" />
			<!-- /ko -->
			<!-- ko if: editor.importExportMode === 1 -->
			<input
				type="radio"
				name="singleSelectQuestionnaireItem"
				data-bind="checked: editor.selectedVersionName, attr: {value: sourceVersionName}, click: function(){ selectItem(); return true}"
			/>
			<!-- /ko -->
			<span
				style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; word-break: break-all; overflow: hidden;"
				data-bind="text: fileName, click: selectItem"
			></span>
			<span style="color: blue; padding-right: 10px" data-bind="text: versionsSummary, click: selectItem"></span>
		</div>
	</div>
</script>

<script type="text/html" id="tmplSelectQuestionnaireItemImportTarget">
	<div class="importStyleBox">
		<!-- ko template: { name: "tmplImportQuestionnaireSvgIcon" } --><!-- /ko-->
		<div style="width: 100%; font-weight: 600;" data-bind="text: fileName"></div>
		<div></div>
		<div style="display: grid; grid-template-columns: auto 1fr">
			<div class="segmentBox">
				<div class="segment" data-bind="css: {selectedSegment: !createNewVersion()}, click: setPreviousTarget">
					<!-- ko if: !createNewVersion() -->
					<!-- ko template: {name: "tmplSegmentSelectedSvgIcon"}--><!-- /ko -->
					<!-- /ko -->
					Append to existing template
				</div>
				<div class="segment" data-bind="css: {selectedSegment: createNewVersion()}, click: clearTarget">
					<!-- ko if: createNewVersion() -->
					<!-- ko template: {name: "tmplSegmentSelectedSvgIcon"}--><!-- /ko -->
					<!-- /ko -->
					Create new template
				</div>
			</div>
			<!-- ko if: !createNewVersion() -->
			<select
				style="width: 100%"
				data-bind="options: allVersions, optionsValue: 'name', optionsText: 'label', value: targetVersionName, valueAllowUnset: false"
			></select>
			<!-- /ko -->
			<!-- ko if: createNewVersion() -->
			<input type="text" data-bind="value: newVersionName" />
			<!-- ko if: !sourceWasVersionned -->
			<div class="switchContainer" style="margin-top: 12px">
				<span>Convert questionnaire to versioned format</span>
				<label class="namesSwitch">
					<input type="checkbox" data-bind="checked: makeVersionned" />
					<span class="slider round"></span>
				</label>
			</div>
			<div></div>
			<!-- /ko -->
			<!-- /ko -->
		</div>
		<br />
	</div>
</script>

<script type="text/html" id="tmplQuestionnaireImportItemOverview">
	<div class="treeNode">
		<div class="nodePadding"></div>
		<div
			class="nodeContent nodeHeader"
			style="cursor: pointer; grid-template-columns: auto 1fr auto auto"
			data-bind="style: { background: selected() ? 'white' : 'transparent'}"
		>
			<!-- ko template: { name: "tmplImportQuestionnaireSvgIcon" } --><!-- /ko-->
			<span data-bind="text: fileName, click: selectItem"></span>
			<!-- ko if: warningList().length > 0 -->
			<div class="warningDot">&nbsp;</div>
			<!-- /ko -->
			<span style="color: #0066FF; font-weight: bold;" data-bind="text: previewLabel, click: selectItem"></span>
		</div>
	</div>
</script>

<script type="text/html" id="tmplQuestionnaireImportItemResult">
	<div class="treeNode">
		<div class="nodePadding"></div>
		<div
			class="nodeContent nodeHeader"
			style="cursor: pointer; grid-template-columns: auto 1fr auto"
			data-bind="style: { background: selected() ? 'white' : 'transparent'}"
		>
			<!-- ko template: { name: "tmplImportQuestionnaireSvgIcon" } --><!-- /ko-->
			<span data-bind="text: fileName, click: selectItem"></span>
			<!-- ko if: importStatus() === 1 -->
			<!-- ko template: {name: 'tmplImportSuccessSvgIcon'} --><!-- /ko -->
			<!-- /ko -->
			<!-- ko if: importStatus() === 2 -->
			<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
				<title data-bind="text: importResultLabel"></title>
				<path d="M11 3.99L18.53 17H3.47L11 3.99ZM11 0L0 19H22L11 0ZM12 14H10V16H12V14ZM12 8H10V12H12V8Z" fill="#F44F58" />
			</svg>
			<!-- /ko -->
		</div>
	</div>
</script>
<script type="text/html" id="tmplReactPreview">
	<div id="nqpPreview" style="width: 100%; height: 100%;"></div>
</script>
<script type="text/html" id="tmplChoiceInlineProperties">
	<div class="propertyGroup">
		<div class="propertyGroupTitle">Design</div>
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.ChoiceDisplayAs">
			<div class="propertyValue" style="display: flex; flex-direction: column; align-items: baseline;">
				<div class="propertyName">Component</div>
				<div
					data-bind="template: { name: 'tmplSegmentedControl', data: view.displayAsSgmCtrl }"
					data-test="questionnaireEditor-propertiesPanel-displayAsSgmCtrl"
				></div>
			</div>
		</div>
		<!-- ko if: view.model.displayAs() !== 0 -->
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.ChoiceLayout">
			<div class="propertyValue" style="display: flex; flex-direction: column; align-items: baseline;">
				<div class="propertyName">Layout</div>
				<div
					data-bind="template: { name: 'tmplSegmentedControl', data: view.layoutSgmCtrl }"
					data-test="questionnaireEditor-propertiesPanel-choiceLayoutSgmCtrl"
				></div>
			</div>
		</div>
		<!-- /ko -->
	</div>
</script>
<script type="text/html" id="tmplLabelInlineProperties">
	<div class="propertyGroup">
		<div class="propertyGroupTitle">Label</div>
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.UseGlobalStyle">
			<div class="propertyName"></div>
			<div class="propertyValue"><toggle params="value: view.model.useGlobalStyle, enable: enabled"></toggle>Use Global Style</div>
		</div>
		<!-- ko if: !view.model.useGlobalStyle() -->
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.ShowLabel">
			<div class="propertyName"></div>
			<div class="propertyValue"><toggle params="value: view.model.showLabel, enable: enabled"></toggle>Show Label</div>
		</div>
		<!-- ko if: view.model.showLabel() -->
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.LabelPosition">
			<div class="propertyName">Position</div>
			<div class="propertyValue">
				<div
					data-bind="template: { name: 'tmplSegmentedControl', data: view.labelPositionSgmCtrl }"
					data-test="questionnaireEditor-propertiesPanel-labelPositionSgmCtrl"
				></div>
			</div>
		</div>
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.LabelDecoration">
			<div class="propertyName">Decoration</div>
			<div class="propertyValue">
				<div class="chipsset" style="font-size: 1.4em">
					<chips
						class="tooltipsource"
						data-tooltip="QuestionnaireEditor.QuestionProperties.LabelDecorationBold"
						params="label: 'B', value: view.cbDecorationBold, enable: enabled"
						style="font-weight: 700"
					></chips>
					<chips
						class="tooltipsource"
						data-tooltip="QuestionnaireEditor.QuestionProperties.LabelDecorationItalic"
						params="label: 'I', value: view.cbDecorationItalic, enable: enabled"
						style="font-style: italic"
					></chips>
					<chips
						class="tooltipsource"
						data-tooltip="QuestionnaireEditor.QuestionProperties.LabelDecorationUnderline"
						params="label: 'U', value: view.cbDecorationUnderline, enable: enabled"
						style="text-decoration: underline"
					></chips>
				</div>
			</div>
		</div>
		<!-- /ko -->
		<!-- /ko -->
	</div>
</script>
<script type="text/html" id="tmplTwoOptionsInlineProperties">
	<div class="propertyGroup">
		<div class="propertyGroupTitle">Design</div>
		<div class="property tooltipsource" data-tooltip="QuestionnaireEditor.QuestionProperties.TwoOptionsDisplayAs">
			<div class="propertyValue" style="display: flex; flex-direction: column; align-items: baseline;">
				<div class="propertyName">Component</div>
				<div
					data-bind="template: { name: 'tmplSegmentedControl', data: view.displayAsSgmCtrl }"
					data-test="questionnaireEditor-propertiesPanel-displayAsSgmCtrl"
				></div>
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplAutomaticReportPage">
	<div class="qSettingsDialog__page automaticReport">
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-generateAutomaticReportItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Generate automatic report</div>
				<div
					data-bind="template: { name: 'tmplSegmentedControl', data: generateAutomaticReportSgmCtrl }"
					data-test="questionnaireEditor-qSettingsDialog-generateAutomaticReportSgmCtrl"
				></div>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<div class="qSettingsDialog__description">
					<span
						>Enable if you want to generate a mobile report from your questionnaire and you want to set up this report directly in the Questionnaire
						Designer.
					</span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/Mobile_reports_for_Resco_Inspections#Enable_automatic_reports"
						>Learn more</a
					>
				</div>
			</div>
		</div>
		<!-- ko if: generateAutomaticReportSgmCtrl.value() -->
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-includeUnansweredItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Include unanswered</div>
				<div
					data-bind="template: { name: 'tmplSegmentedControl', data: includeUnansweredSgmCtrl }"
					data-test="questionnaireEditor-qSettingsDialog-includeUnansweredSgmCtrl"
				></div>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<div class="qSettingsDialog__description">
					<span>Do you want to include unanswered questions in the report? </span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/Mobile_reports_for_Resco_Inspections#Omit_unanswered_questions"
						>Learn more</a
					>
				</div>
			</div>
		</div>
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-headerStyleItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Header style</div>
				<select
					data-bind="value: reportHeaderStyleName, options: options.reportStyles, optionsText: 'name', optionsValue: 'name', valueAllowUnset: true, optionsCaption: '', enable: !options.isReadOnly"
					data-test="questionnaireEditor-qSettingsDialog-headerStyleSelect"
				></select>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<div class="qSettingsDialog__description">
					<span>Select the style for the header block displayed on the mobile report. </span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/Mobile_reports_for_Resco_Inspections#Style_and_themes">Learn more</a>
				</div>
			</div>
		</div>
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-footerStyleItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Footer style</div>
				<select
					data-bind="value: reportFooterStyleName, options: options.reportStyles, optionsText: 'name', optionsValue: 'name', valueAllowUnset: true, optionsCaption: '', enable: !options.isReadOnly"
					data-test="questionnaireEditor-qSettingsDialog-footerStyleSelect"
				></select>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<div class="qSettingsDialog__description">
					<span>Select the style for the footer block displayed on the mobile report. </span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/Mobile_reports_for_Resco_Inspections#Style_and_themes">Learn more</a>
				</div>
			</div>
		</div>
		<!-- /ko -->
	</div>
</script>
<script type="text/html" id="tmplFeaturesPage">
	<div class="qSettingsDialog__page features">
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-featureVersionItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Player Technology</div>
				<input
					data-bind="value: usesNewDataModel() ? 'Gen 2' : 'Gen 1'"
					readonly
					data-test="questionnaireEditor-qSettingsDialog-featureVersionSelect"
				/>
			</div>
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Feature version</div>
				<select
					data-bind="value: featureVersion, options: featureVersionOptions, optionsText: 'label', optionsValue: 'value', valueAllowUnset: false, enable: !options.isReadOnly"
					data-test="questionnaireEditor-qSettingsDialog-featureVersionSelect"
				></select>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<!-- ko if: !canUpgradeDataModel() && !hasLatestFeatureVersion() -->
				<div class="qSettingsDialog__warning" data-test="questionnaireEditor-qSettingsDialog-featureVersion-warning">
					<div class="qSettingsDialog__warningIcon">
						<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
					</div>
					<div class="qSettingsDialog__warningText">Select the latest version. Otherwise, new features won’t be available.</div>
				</div>
				<!-- /ko -->
				<!-- ko if: canUpgradeDataModel() -->
				<div class="qSettingsDialog__description__alert">
					<div>
						<h6>This template is currently configured for Gen 1 Questionnaire player</h6>
						<br />
						The legacy Gen 1 player uses proprietary technology and lacks the modern features available in Gen 2. Upgrade this template to the new,
						web-based Gen 2 player for a faster, future-ready experience. ⚠️<b>This change is permanent and cannot be undone!</b><br />
						<br />
						<div class="qSettingsDialog__description__alert__buttonrow">
							<button
								onclick="window.open('https://docs.resco.net/wiki/Modernized_Questionnaire_Player', '_blank')"
								data-test="questionnaireEditor-qSettingsDialog-upgradeButton"
							>
								Learn More
							</button>
							<button
								class="upgradeButton"
								data-bind="click: onUpgradeDataModel, disable: options.isReadOnly"
								data-test="questionnaireEditor-qSettingsDialog-upgradeButton"
							>
								Upgrade to Gen 2
							</button>
						</div>
					</div>
				</div>
				<!-- /ko -->
				<!-- ko if: usesNewDataModel() -->
				<div class="qSettingsDialog__description">
					<span
						>This questionnaire template is using the modern web-based player. It supports the latest features, improved performance, and ongoing
						updates. You can no longer switch back to the legacy player.
					</span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/Questionnaire_Designer#Feature_Version">Learn more</a>
				</div>
				<!-- /ko -->
			</div>
		</div>
		<!-- ko if: !options.isSnippet -->
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-scoringItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Scoring</div>
				<div
					data-bind="template: { name: 'tmplSegmentedControl', data: scoringSgmCtrl }"
					data-test="questionnaireEditor-qSettingsDialog-scoringSgmCtrl"
				></div>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<!-- ko if: !scoringSgmCtrl.value() && scoringSgmCtrl.value() !== options.scoringEnabled -->
				<div class="qSettingsDialog__warning" data-test="questionnaireEditor-qSettingsDialog-scoring-warning">
					<div class="qSettingsDialog__warningIcon">
						<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
					</div>
					<div class="qSettingsDialog__warningText">By disabling the scoring feature, all the score values will be reset.</div>
				</div>
				<!-- /ko -->
				<div class="qSettingsDialog__description">
					<span>Assign a score to your questions and answers. </span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/Questionnaire_Designer#Scoring">Learn more</a>
				</div>
			</div>
		</div>
		<!-- /ko-->
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-dataMappingItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Data mapping</div>
				<div
					data-bind="template: { name: 'tmplSegmentedControl', data: dataMappingSgmCtrl }"
					data-test="questionnaireEditor-qSettingsDialog-dataMappingSgmCtrl"
				></div>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<!-- ko if: !dataMappingSgmCtrl.value() && dataMappingSgmCtrl.value() !== options.dataMappingEnabled -->
				<div class="qSettingsDialog__warning" data-test="questionnaireEditor-qSettingsDialog-dataMapping-warning">
					<div class="qSettingsDialog__warningIcon">
						<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
					</div>
					<div class="qSettingsDialog__warningText">By disabling the data mapping feature, all the mappings will be reset.</div>
				</div>
				<!-- /ko -->
				<div class="qSettingsDialog__description">
					<span>Define connections between questions and related entity fields. </span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/Mapping_questions_to_fields">Learn more</a>
				</div>
			</div>
		</div>
		<!-- ko if: !options.isSnippet -->
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-reuseAnswersItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Reuse answers</div>
				<select
					data-bind="value: reuseAnswersFromPrevious, valueAllowUnset: false, enable: !options.isReadOnly"
					data-test="questionnaireEditor-qSettingsDialog-reuseAnswersSelect"
				>
					<option value="473220000">Never</option>
					<option value="473220001">First Match</option>
					<option value="473220002">Ask User</option>
					<option value="473220003">Select by User</option>
				</select>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<div class="qSettingsDialog__description">
					<span
						>Should answers from previously completed questionnaires be pre-filled on new questionnaires? Define the behavior of Reuse answers and
						then select which questions are reused in question properties.
					</span>
					<a
						class="link"
						target="_blank"
						href="https://docs.resco.net/wiki/Questionnaire_Designer_examples#Reuse_questionnaire_answers_from_related_records"
						>Learn more</a
					>
				</div>
			</div>
		</div>
		<!-- ko if: reuseAnswersFromPrevious() !== QuestionnaireBuilder.Data.ReuseStyle.Never.toString() -->
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-reuseFetchItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Reuse fetch</div>
				<button data-bind="click: onReuseFetchEdit" data-test="questionnaireEditor-qSettingsDialog-reuseFetchButton">Edit</button>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<div class="qSettingsDialog__description">
					<span>Use the filter editor to define or modify the list of questionnaires available for reuse. </span>
					<a
						class="link"
						target="_blank"
						href="https://docs.resco.net/wiki/Questionnaire_Designer_examples#Reuse_questionnaire_answers_from_related_records"
						>Learn more</a
					>
				</div>
			</div>
		</div>
		<!-- /ko -->
		<!-- /ko -->
	</div>
</script>
<script type="text/html" id="tmplRulesPage">
	<div class="qSettingsDialog__page rules">
		<!-- ko if: isNqp -->
		<!-- ko template: { name: 'tmplRulesScriptPicker', data: rulesScriptPicker } --><!-- /ko -->
		<!-- /ko -->
		<!-- ko ifnot: isNqp -->
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-scriptPathItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Script path</div>
				<input
					type="text"
					placeholder="Enter text here..."
					data-bind="value: scriptPath, enable: !options.isReadOnly"
					data-test="questionnaireEditor-qSettingsDialog-scriptPathInput"
				/>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<div class="qSettingsDialog__description">
					<span>Path to the offline JavaScript file that offers enhanced logic to the questionnaire. </span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/Resco_JavaScript_Bridge#Questionnaire">Learn more</a>
				</div>
			</div>
		</div>
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-rulesVersionItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Rules version</div>
				<select
					data-bind="value: rulesVersion, options: options.ruleVersions, valueAllowUnset: false, enable: !options.isReadOnly"
					data-test="questionnaireEditor-qSettingsDialog-rulesVersionSelect"
				></select>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<!-- ko if: rulesVersion() !== "Latest" -->
				<div class="qSettingsDialog__warning" data-test="questionnaireEditor-qSettingsDialog-rulesVersion-warning">
					<div class="qSettingsDialog__warningIcon">
						<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
					</div>
					<div class="qSettingsDialog__warningText">Execution of On Change rules will be affected.</div>
				</div>
				<!-- /ko -->
				<div class="qSettingsDialog__description">
					<span>Use the latest version unless instructed otherwise. </span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/Questionnaire_Designer#Rules_version">Learn more</a>
				</div>
			</div>
		</div>
		<!-- /ko -->
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-validateOnItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Validate on</div>
				<div
					data-bind="template: { name: 'tmplSegmentedControl', data: validateOnSgmCtrl }"
					data-test="questionnaireEditor-qSettingsDialog-validateOnSgmCtrl"
				></div>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<div class="qSettingsDialog__description">
					<span>Select when to validate answers (perform On Save checks). </span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/Questionnaire_Designer#Validate">Learn more</a>
				</div>
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplRulesScriptPicker">
	<div class="qSettingsDialog__item" data-test="">
		<div class="qSettingsDialog__optionPart">
			<div class="qSettingsDialog__label">Upload Questionnaire Script (JavaScript)</div>
			<div class="qSettingsDialog__uploadPart" style="position: relative">
				<button
					type="button"
					data-bind="
						enable: !isReadOnly,
						click: onUploadButtonClick,
						event: {
							dragover: onScriptFileDragOver,
							dragleave: onScriptFileDragLeave,
							drop: onScriptFileDrop
						}
						"
				>
					Upload
				</button>
				<input type="file" id="scriptFileInput" accept=".js" data-bind="event: { change: onScriptFileChange }" />
				<!-- ko if: isDragOver -->
				<div class="fileDropOverlay">Drop JS here!</div>
				<!-- /ko -->
				<!-- ko if: scriptPath() && scriptFileName() -->
				<div class="uploadedFileName">
					<!-- ko text: scriptFileName --><!-- /ko -->
					<button type="button" class="downloadFileBtn" data-bind="click: onDownloadScriptFile" style="margin-left: 8px">
						<i class="commonuisprite icon-commonui_Toolbar_Color_DownloadFile"></i>
					</button>
					<button type="button" class="deleteFileBtn" data-bind="enable: !isReadOnly, click: onDeleteScriptFile">
						<i class="questionnairesprite icon-questionnaire_QuestionEditor_remove"></i>
					</button>
				</div>
				<!-- /ko -->
			</div>
		</div>
		<div class="qSettingsDialog__descriptionPart">
			<div class="qSettingsDialog__description">
				<a class="link" target="_blank" href="https://docs.resco.net/wiki/Resco_JavaScript_Bridge#Questionnaire">Learn more</a>
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplStoragePage">
	<div class="qSettingsDialog__page storage">
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-templateDependencyItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Template dependency</div>
				<div
					data-bind="template: { name: 'tmplSegmentedControl', data: templateDependencyLevelSgmCtrl }"
					data-test="questionnaireEditor-qSettingsDialog-templateDependencyLevelSgmCtrl"
				></div>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<!-- ko if: templateDependencyLevelSgmCtrl.value() !== "Full" -->
				<div class="qSettingsDialog__warning" data-test="questionnaireEditor-qSettingsDialog-templateDependency-warning">
					<div class="qSettingsDialog__warningIcon">
						<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
					</div>
					<div class="qSettingsDialog__warningText">
						<div>
							<span>This configuration option is being deprecated and will not be supported in the future. </span>
							<a class="link" target="_blank" href="https://docs.resco.net/wiki/Deprecations#dependency">Learn more</a
							><span> about the upcoming changes.</span>
						</div>
					</div>
				</div>
				<!-- /ko -->
				<div class="qSettingsDialog__description">
					<span>Recommended option: Full. </span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/Best_practices_for_deploying_Inspections#Eliminate_redundant_data"
						>Learn more</a
					>
				</div>
			</div>
		</div>
		<!-- ko if: canCompressJsonTemplate() -->
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-compressionItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Template compression</div>
				<div
					data-bind="template: { name: 'tmplSegmentedControl', data: templateCompressionSgmCtrl }"
					data-test="questionnaireEditor-qSettingsDialog-templateCompressionSgmCtrl"
				></div>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<div class="qSettingsDialog__description">
					<span>Compress Template JSON definition to save more space when the questionnaire is saved. </span>
				</div>
			</div>
		</div>
		<!-- /ko -->
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-storageItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Answer storage</div>
				<div
					data-bind="template: { name: 'tmplSegmentedControl', data: storageSgmCtrl }"
					data-test="questionnaireEditor-qSettingsDialog-storageSgmCtrl"
				></div>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<!-- ko if: storageSgmCtrl.value() === storageJSONLegacyItem.value() -->
				<div class="qSettingsDialog__warning" data-test="questionnaireEditor-qSettingsDialog-storage-warningJSONLegacy">
					<div class="qSettingsDialog__warningIcon">
						<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
					</div>
					<div class="qSettingsDialog__warningText">
						This JSON format is being deprecated and will not be supported in the future. We recommend switching to the new JSON format with higher
						efficiency and configuration possibilities.
					</div>
				</div>
				<!-- /ko -->
				<!-- ko if: storageSgmCtrl.value() === storageRecordsItem.value() -->
				<div class="qSettingsDialog__warning" data-test="questionnaireEditor-qSettingsDialog-storage-warningRecords">
					<div class="qSettingsDialog__warningIcon">
						<i class="questionnairesprite icon-questionnaire_QWizardDialog_alert"></i>
					</div>
					<div class="qSettingsDialog__warningText">
						With Records storage option, each question answer is saved as an individual record. Records synchronization is significantly slower
						compared with the JSON but records allow working with the data directly without processing.
					</div>
				</div>
				<!-- /ko -->
				<div class="qSettingsDialog__description">
					<span>Recommended option: JSON (New). </span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/Deprecations#json">Learn more</a>
				</div>
			</div>
		</div>
		<!-- ko if: isJsonStorage -->
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-compressionItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">JSON compression</div>
				<div
					data-bind="template: { name: 'tmplSegmentedControl', data: compressionSgmCtrl }"
					data-test="questionnaireEditor-qSettingsDialog-compressionSgmCtrl"
				></div>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<div class="qSettingsDialog__description">
					<span>Compress JSON answers to save even more space. </span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/JSON_storage_for_questionnaires">Learn more</a>
				</div>
			</div>
		</div>
		<!-- /ko -->
		<!-- ko if: storageSgmCtrl.value() === storageJSONItem.value() -->
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-configureJSONItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Configure JSON</div>
				<button data-bind="click: onConfigureJSONEdit" data-test="questionnaireEditor-qSettingsDialog-configureJSONButton">Edit</button>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<div class="qSettingsDialog__description">
					<span>When using the new JSON formats, you can either select the minimum variant or the configurable flexible format. </span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/JSON_storage_for_questionnaires#Configuration_in_the_designer"
						>Learn more</a
					>
				</div>
			</div>
		</div>
		<!-- /ko -->
		<!-- ko if: canSaveAnswerToSeparateEntity() -->
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-answerEntityItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Entity for storing answered questionnaires</div>
				<select
					data-bind="value: answerEntity, options: possibleAnswerEntities, valueAllowUnset: false, enable: !options.isReadOnly"
					data-test="questionnaireEditor-qSettingsDialog-answerEntitySelect"
				></select>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<div class="qSettingsDialog__description">
					<span>Select the entity where the answered questionnaires will be stored.</span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/JSON_storage_for_questionnaires#Configuration_in_the_designer"
						>Learn more</a
					>
				</div>
			</div>
		</div>
		<!-- /ko -->
	</div>
</script>
<script type="text/html" id="tmplUserInterfacePage">
	<div class="qSettingsDialog__page userInterface">
		<!-- ko if: !options.isSnippet -->
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-groupExpandingItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Group expanding</div>
				<div
					data-bind="template: { name: 'tmplSegmentedControl', data: groupExpandingSgmCtrl }"
					data-test="questionnaireEditor-qSettingsDialog-groupExpandingSgmCtrl"
				></div>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<div class="qSettingsDialog__description">
					<span
						>Choose Single Group if you want to keep only a single question group expanded when answering questionnaires. All other groups are
						collapsed to better focus your attention.
					</span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/Questionnaire_Designer#Questionnaire_options">Learn more</a>
				</div>
			</div>
		</div>
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-layoutItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Layout</div>
				<div
					data-bind="template: { name: 'tmplSegmentedControl', data: layoutSgmCtrl }"
					data-test="questionnaireEditor-qSettingsDialog-layoutSgmCtrl"
				></div>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<div class="qSettingsDialog__description">
					<span>Use List to display one top-level question per row. Use Grid if you want to organize multiple questions in a row. </span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/Questionnaire_Designer#Grid_layout">Learn more</a>
				</div>
			</div>
		</div>
		<!-- ko if: layoutSgmCtrl.value() -->
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-gridLayoutItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Grid layout</div>
				<button data-bind="click: onGridLayoutEdit" data-test="questionnaireEditor-qSettingsDialog-gridLayoutButton">Edit</button>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<div class="qSettingsDialog__description">
					<span>Set up the grid layout for top-level questions. </span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/Questionnaire_Designer#Grid_layout">Learn more</a>
				</div>
			</div>
		</div>
		<!-- /ko -->
		<!-- /ko -->
		<!-- ko if: !options.isReadOnly && options.iconHasImageB64 -->
		<div class="qSettingsDialog__item" data-test="questionnaireEditor-qSettingsDialog-iconStorageItem">
			<div class="qSettingsDialog__optionPart">
				<div class="qSettingsDialog__label">Storage of questionnaire icon</div>
				<select
					data-bind="value: iconBinaryStorage, options: options.binaryStorages, optionsText: 'value', optionsValue: 'key'"
					data-test="questionnaireEditor-qSettingsDialog-iconStorageSelect"
				></select>
			</div>
			<div class="qSettingsDialog__descriptionPart">
				<div class="qSettingsDialog__description">
					<span>Select where should the questionnaire icon image be stored. </span>
					<a class="link" target="_blank" href="https://docs.resco.net/wiki/Questionnaire_Designer#Properties_pane">Learn more</a>
				</div>
			</div>
		</div>
		<!-- /ko -->
	</div>
</script>
</head><body><!-- ko template: { name: 'tmplAppForm' } --><!-- /ko --><script src="924.bundle.js?data=1bf59de3c457ea41"></script><script src="811.bundle.js?data=5a3b8fc17f36ede0"></script><script src="563.bundle.js?data=0871c4839959ab74"></script><script src="202.bundle.js?data=e9f96de850b939ff"></script><script src="102.bundle.js?data=4499cb2344ab1f90"></script><script src="408.bundle.js?data=53bb88587f00108a"></script><script src="main.bundle.js?data=3382e532c2803de0"></script><script src="polyfills.bundle.js?data=5189459072e2d797"></script></body></html>