<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta http-equiv="cache-control" content="max-age=0"/><meta http-equiv="cache-control" content="no-cache"/><meta http-equiv="expires" content="0"/><meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT"/><meta http-equiv="pragma" content="no-cache"/><title>Report Builder</title><script src="../../ClientGlobalContext.js.aspx"></script><script src="libs/sortable.js"></script><base href=""><link href="204.3667cb595ad8ef6f.css" rel="stylesheet"><link href="main.95fa3c29cc1a94f9.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="tmplIFrameDialog">
	<iframe class="iFrameDialog" data-bind="attr: { src: reportBlobUrl }"></iframe>
</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="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="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="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="tmplReportPropertiesDialog">
	<div style="width: 100%; display: flex; flex-direction: column">
		<div style="padding: 3px; width: 100%; display: flex; flex-direction: row">
			<div style="flex: 0 0 150px; font-weight: bold">GUID:</div>
			<div style="flex: 1 1 100%"><input type="text" style="width: 100%; box-sizing: border-box;" data-bind="value: id" disabled /></div>
		</div>
		<div style="padding: 3px; width: 100%; display: flex; flex-direction: row">
			<div style="flex: 0 0 150px; font-weight: bold">Name:</div>
			<div style="flex: 1 1 100%"><input type="text" style="width: 100%; box-sizing: border-box;" data-bind="value: name" /></div>
		</div>
		<div style="padding: 3px; width: 100%; display: flex; flex-direction: row">
			<div style="flex: 0 0 150px; font-weight: bold">Entity:</div>
			<div style="flex: 1 1 100%"><select style="width: 100%" data-bind="enable: !report, value: entityName, options: entities"></select></div>
		</div>
		<!-- ko if: !report && entityName() === "resco_questionnaire" -->
		<div style="padding: 3px; width: 100%; display: flex; flex-direction: row">
			<div style="flex: 0 0 150px; font-weight: bold">Create:</div>
			<div style="flex: 1 1 100%">
				<select style="width: 100%" data-bind="value: createQuestionnaireType">
					<option value="Blank">Blank</option>
					<option value="FromTemplate">From Template</option>
				</select>
			</div>
		</div>
		<!-- ko if: createQuestionnaireType() === "FromTemplate" -->
		<div style="padding: 3px; width: 100%; display: flex; flex-direction: row">
			<div style="flex: 0 0 150px; font-weight: bold"></div>
			<div
				style="flex: 1 1 100%; color: blue; cursor: pointer; text-decoration: underline"
				data-bind="text: questionnaireTemplate() ? questionnaireTemplate().Name : 'Select Questionnaire Template', click: changeQuestionnaireTemplate"
			></div>
		</div>
		<!-- /ko -->
		<!-- /ko  -->
		<div style="padding: 3px; width: 100%; display: flex; flex-direction: row">
			<div style="flex: 0 0 150px; font-weight: bold">Language:</div>
			<div style="flex: 1 1 100%">
				<select style="width: 100%" data-bind="value: language, options: languages, optionsText: 'name', optionsValue: 'LCID'"></select>
			</div>
		</div>
		<div style="padding: 3px; width: 100%; display: flex; flex-direction: row">
			<div style="flex: 0 0 150px; font-weight: bold">Source:</div>
			<div style="flex: 1 1 100%">
				<select style="width: 100%" data-bind="value: source, options: sources, optionsText: 'value', optionsValue: 'key'"></select>
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplReportsEditor">
	<div style="display: flex; flex-direction: column; width: 100%; height: 100%;">
		<div data-bind="grid: gridReports" data-definitiononly="false" data-twowaybinding="false" style="white-space:nowrap; height: calc(100% - 10px)">
			<div data-columnname="Name" data-flex="5 0 200px" data-binding="name" data-sortable="true" data-horalign="left" data-sort="ascending">
				<div style="height:100%; display:flex; align-items:center; padding-left: 5px">
					<i
						data-bind="attr: { class: 'reportsprite icon-report_' + (!data.data.isActive() ? 'Deactivate' : 'Activate') }"
						style="padding:0px 5px;"
					></i>
					<div data-bind="text: data.data.label"></div>
				</div>
			</div>
			<div data-columnname="Source" data-binding="data.sourceLabel" data-flex="1 1 100px" data-horalign="left"></div>
			<div data-columnname="Entity" data-binding="data.entity" data-flex="1 1 100px" data-horalign="left"></div>
			<div data-columnname="Language" data-binding="data.languageLabel" data-flex="1 1 100px" data-horalign="left"></div>
			<div data-columnname="GUID" data-binding="data.id.Value" data-flex="1 1 150px" data-horalign="left" data-command="copyToClipboard"></div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplBindingItem">
	<div
		class="bindingItem"
		data-bind="text: $data.displayName, attr: {'title': $data.binding}, cbBindingDrag: $data, doubleClick: $parent.selected.bind($parent, $data)"
	></div>
</script>
<script type="text/html" id="tmplBindingsList">
	<div class="bindingsList">
		<div class="bindingsList__header">Variables</div>
		<div class="bindingsList__items" data-bind="foreach: variables"><!-- ko template: {name: 'tmplBindingItem' }--><!-- /ko --></div>
		<div class="bindingsList__header">Fields</div>
		<div class="bindingsList__items" data-bind="foreach: fields"><!-- ko template: {name: 'tmplBindingItem' }--><!-- /ko --></div>
	</div>
	<resco-pleasewaitdialog class="bindingsList__loading" data-bind="visible: isLoading"></resco-pleasewaitdialog>
</script>
<script type="text/html" id="tmplReportEditor">
	<div class="reportEditor" data-bind="click: selectReportItem">
		<!-- ko template: { name: 'tmplReportItem', data: reportItem, afterRender: reportItem.appended.bind(reportItem) } --><!-- /ko -->
	</div>
	<!-- ko if: outerArea -->
	<!-- ko template: { name: outerArea().templateName, data: outerArea().data } --><!-- /ko -->
	<!-- /ko -->
</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" />
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Background Color">Background Color</div>
				<div class="propertyValue" style="cursor: pointer">
					<div
						style="width: 35px; height: 100%; border: solid 1px black; display: inline-block"
						data-bind="cbColorPicker: backgroundColor, style: {background: backgroundTransparent() ? 'transparent' : backgroundColor()}"
					></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: backgroundColor, text: backgroundColor"></span>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Transparent">Transparent</div>
				<div class="propertyValue"><input type="checkbox" data-bind="checked: backgroundTransparent" /></div>
			</div>
		</div>
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Border</div>
			<div class="property">
				<div class="propertyName" title="Border Color">Border 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: borderTransparent() ? 'transparent' : borderColor()}"
					></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: borderColor, text: borderColor"></span>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Transparent">Transparent</div>
				<div class="propertyValue"><input type="checkbox" data-bind="checked: borderTransparent" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Left Width">Left Width</div>
				<div class="propertyValue"><input type="number" data-bind="value: borderThickness.Left" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Top Width">Top Width</div>
				<div class="propertyValue"><input type="number" data-bind="value: borderThickness.Top" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Right Width">Right Width</div>
				<div class="propertyValue"><input type="number" data-bind="value: borderThickness.Right" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Bottom Width">Bottom Width</div>
				<div class="propertyValue"><input type="number" data-bind="value: borderThickness.Bottom" /></div>
			</div>
		</div>
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Font</div>
			<div class="property">
				<div class="propertyName" title="Text Color">Text Color</div>
				<div class="propertyValue" style="cursor: pointer">
					<div
						style="width: 35px; height: 100%; border: solid 1px black; display: inline-block"
						data-bind="cbColorPicker: foregroundColor, style: {background: foregroundTransparent() ? 'transparent' : foregroundColor()}"
					></div>
					<span style="margin-left: 5px" data-bind="cbColorPicker: foregroundColor, text: foregroundColor"></span>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Transparent">Transparent</div>
				<div class="propertyValue"><input type="checkbox" data-bind="checked: foregroundTransparent" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Font Name">Font Name</div>
				<div class="propertyValue">
					<input type="text" placeholder="Font Name" data-bind="value: fontName" />
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Font Size">Font Size</div>
				<div class="propertyValue">
					<input type="number" placeholder="Font Size" data-bind="value: fontSize" />
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Font Weight">Font Weight</div>
				<div class="propertyValue">
					<div class="propertyValue">
						<select data-bind="value: fontWeight, valueAllowUnset: false">
							<option value="Normal">Normal</option>
							<option value="Bold">Bold</option>
							<option value="Italic">Italic</option>
							<option value="Underlined">Underlined</option>
						</select>
					</div>
				</div>
			</div>
		</div>
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Cell</div>
			<div class="property">
				<div class="propertyName" title="Horizontal Alignment">Horizontal Alignment</div>
				<div class="propertyValue">
					<div class="propertyValue">
						<select
							data-bind="options: horizontalAlignmentOptions, optionsText: 'label', optionsValue:'value', value: horizontalAlignment, valueAllowUnset: false"
						></select>
					</div>
				</div>
			</div>
			<div class="property">
				<div class="propertyName" title="Vertical Alignment">Vertical Alignment</div>
				<div class="propertyValue">
					<div class="propertyValue">
						<select
							data-bind="options: verticalAlignmentOptions, optionsText: 'label', optionsValue:'value', value: verticalAlignment, valueAllowUnset: false"
						></select>
					</div>
				</div>
			</div>
			<div class="propertyGroupTitle">Padding</div>
			<div class="property">
				<div class="propertyName" title="Left">Left</div>
				<div class="propertyValue"><input type="number" data-bind="value: padding.Left" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Top">Top</div>
				<div class="propertyValue"><input type="number" data-bind="value: padding.Top" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Right">Right</div>
				<div class="propertyValue"><input type="number" data-bind="value: padding.Right" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Bottom">Bottom</div>
				<div class="propertyValue"><input type="number" data-bind="value: padding.Bottom" /></div>
			</div>
			<div class="propertyGroupTitle">Margin</div>
			<div class="property">
				<div class="propertyName" title="Left">Left</div>
				<div class="propertyValue"><input type="number" data-bind="value: margin.Left" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Top">Top</div>
				<div class="propertyValue"><input type="number" data-bind="value: margin.Top" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Right">Right</div>
				<div class="propertyValue"><input type="number" data-bind="value: margin.Right" /></div>
			</div>
			<div class="property">
				<div class="propertyName" title="Bottom">Bottom</div>
				<div class="propertyValue"><input type="number" data-bind="value: margin.Bottom" /></div>
			</div>
		</div>
	</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="width: 320px; height: 100px; border-color: silver; border-style: dotted"
				data-bind="style: {
					borderLeftWidth: (margin.Left() !== 0) ? '1px' : '0px',
					paddingLeft: margin.Left() + 'px',
					borderTopWidth: (margin.Top() !== 0) ? '1px' : '0px',
					paddingTop: margin.Top() + 'px',
					borderRightWidth: (margin.Right() !== 0) ? '1px' : '0px',
					paddingRight: margin.Right() + 'px',
					borderBottomWidth: (margin.Bottom() !== 0) ? '1px' : '0px',
					paddingBottom: margin.Bottom() + 'px' }"
			>
				<div
					style="width: 100%; height: 100%; display: flex;"
					data-bind="style: {
						borderLeft: (borderThickness.Left() && borderThickness.Left() !== '0') ? 'solid ' + borderThickness.Left() + 'px ' + (borderTransparent() ? 'transparent' : borderColor()) : 'dashed 1px silver',
						borderTop: (borderThickness.Top() && borderThickness.Top() !== '0') ? 'solid ' + borderThickness.Top() + 'px ' + (borderTransparent() ? 'transparent' : borderColor()) : 'dashed 1px silver',
						borderRight: (borderThickness.Right() && borderThickness.Right() !== '0') ? 'solid ' + borderThickness.Right() + 'px ' + (borderTransparent() ? 'transparent' : borderColor()) : 'dashed 1px silver',
						borderBottom: (borderThickness.Bottom() && borderThickness.Bottom() !== '0') ? 'solid ' + borderThickness.Bottom() + 'px ' + (borderTransparent() ? 'transparent' : borderColor()) : 'dashed 1px silver',
						paddingLeft: padding.Left() + 'px', paddingTop: padding.Top() + 'px',
						paddingRight: padding.Right() + 'px',
						paddingBottom: padding.Bottom() + 'px', fontSize: fontSize() + 'px',
						background: backgroundTransparent() ? 'transparent' : backgroundColor(),
						color: foregroundTransparent() ? 'transparent' : foregroundColor(),
						fontWeight: fontWeight() === 'Bold' ? 'bold' : 'normal',
						fontStyle: fontWeight() === 'Italic' ? 'italic' : 'normal',
						textDecoration: fontWeight() === 'Underlined' ? 'underline' : '',
						justifyContent: (horizontalAlignment() === 0 ? 'flex-start' : (horizontalAlignment() === 1 ? 'flex-end' : 'center')),
						alignItems:  (verticalAlignment() === 0 ? 'flex-start' : (verticalAlignment() === 1 ? 'flex-end' : 'center'))
					}"
				>
					Content
				</div>
			</div>
			<!-- /ko -->
			<!-- /ko -->
		</div>
	</div>
</script>
<script type="text/html" id="tmplAddVariableDialog">
	<div style="width: 100%; display: flex; flex-direction: column">
		<div style="width: 100%; display: flex; flex-direction: row">
			<div style="flex: 0 0 150px; font-weight: bold">Name:</div>
			<div style="flex: 1 1 100%"><input type="text" style="widht: 100%" data-bind="value: name" /></div>
		</div>
		<div style="width: 100%; display: flex; flex-direction: row">
			<div style="flex: 0 0 150px; font-weight: bold">Type:</div>
			<div style="flex: 1 1 100%">
				<select style="width: 100%" data-bind="value: varType">
					<option value="0">String</option>
					<option value="1">Decimal</option>
					<option value="2">Boolean</option>
					<option value="3">DateTime</option>
					<option value="4">Fetch Result</option>
					<option value="5">Fetch Table</option>
					<option value="6">Fetch Table Lookup</option>
				</select>
			</div>
		</div>
		<!-- ko if: varType() === "4" || varType() === "5" -->
		<div style="width: 100%; display: flex; flex-direction: row">
			<div style="flex: 0 0 150px; font-weight: bold">Entity:</div>
			<div style="flex: 1 1 100%">
				<select style="width: 100%" data-bind="value: entityName, options: entities"></select>
			</div>
		</div>
		<!-- /ko -->
		<!-- ko if: varType() === "5" -->
		<div style="width: 100%; display: flex; flex-direction: row">
			<div style="flex: 0 0 150px; font-weight: bold">Table Key:</div>
			<div style="flex: 1 1 100%"><input type="text" style="widht: 100%" data-bind="value: tableKey" /></div>
		</div>
		<!-- /ko -->
		<!-- ko if: varType() === "6" -->
		<div style="width: 100%; display: flex; flex-direction: row">
			<div style="flex: 0 0 150px; font-weight: bold">Table|Table Key:</div>
			<div style="flex: 1 1 100%"><input type="text" style="widht: 100%" data-bind="value: lookupKey" /></div>
		</div>
		<!-- /ko -->
	</div>
</script>
<script type="text/html" id="tmplAggregatesDialog">
	<div data-bind="grid: gridAggregates" data-definitiononly="false" data-twowaybinding="false" style="width: 100% height: 100%;">
		<div data-columnname="Field" data-binding="attrName" data-flex="1 2 200px" data-sortable="false" data-horalign="left">
			<select style="width: 100%; height: 100%; border: 0px; padding: 3px" data-bind="value: data.attrName, options: data.fields"></select>
		</div>
		<div data-columnname="Method" data-binding="method" data-flex="1 1 150px" data-sortable="false" data-horalign="center">
			<select style="width: 100%; height: 100%; border: 0px; padding: 3px" data-bind="value: data.method">
				<option>sum</option>
				<option>count</option>
				<option>min</option>
				<option>max</option>
				<option>avg</option>
				<option>countcolumn</option>
				<option>groupby</option>
				<option>groupby-year</option>
				<option>groupby-quarter</option>
				<option>groupby-month</option>
				<option>groupby-week</option>
				<option>groupby-day</option>
			</select>
		</div>
		<div data-columnname="Alias" data-binding="alias" data-flex="1 1 150px" data-sortable="false" data-horalign="center">
			<input style="width: 100%; height: 100%; border: 0px; padding: 3px" type="text" style="width: 100%" data-bind="value: data.alias" />
		</div>
	</div>
</script>
<script type="text/html" id="tmplEditVariablesDialog">
	<div data-bind="grid: gridVariables" data-definitiononly="false" data-twowaybinding="false" style="width: 100% height: 100%;">
		<div data-columnname="Name" data-binding="name" data-flex="1 2 300px" data-sortable="false" data-horalign="left"></div>
		<div data-columnname="Type" data-binding="variableTypeLabel" data-flex="1 1 150px" data-sortable="false" data-horalign="center"></div>
		<div data-columnname="Required" data-flex="1 0 100px" data-horalign="center" data-sortable="false">
			<div style="display:flex; height:100%; align-items:center"><input type="checkbox" data-bind="checked: data.required" /></div>
		</div>
		<div data-columnname="Visible" data-flex="1 0 100px" data-horalign="center" data-sortable="false">
			<div style="display:flex; height:100%; align-items:center"><input type="checkbox" data-bind="checked: data.visible" /></div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplOnCreateRuleDialog">
	<div style="display: flex; flex-direction: column; width: 100%; height: 100%;">
		<div
			id="ruleEditorRoot"
			data-bind="ruleEditor: editor.Workflow"
			style="width: 100%; background: #f8f8f8; border: solid 1px black; height: 100%; padding: 5px"
		></div>
	</div>
</script>
<script type="text/html" id="tmplSelectItemDialog">
	<div style="width: 100%; display: flex; flex-direction: column">
		<div style="width: 100%; display: flex; flex-direction: row">
			<!-- ko if: label -->
			<div style="flex: 0 0 75px; font-weight: bold" data-bind="text: label + ':'"></div>
			<!-- /ko -->
			<div style="flex: 1 1 100%">
				<!-- ko if: displayMember && valueMember -->
				<select style="width: 100%" data-bind="value: selectedItem, options: items, optionsText: displayMember, optionsValue: valueMember"></select>
				<!-- /ko -->
				<!-- ko if: displayMember && !valueMember -->
				<select style="width: 100%" data-bind="value: selectedItem, options: items, optionsText: displayMember"></select>
				<!-- /ko -->
				<!-- ko if: !displayMember && valueMember -->
				<select style="width: 100%" data-bind="value: selectedItem, options: items, optionsValue: valueMember"></select>
				<!-- /ko -->
				<!-- ko if: !displayMember && !valueMember -->
				<select style="width: 100%" data-bind="value: selectedItem, options: items"></select>
				<!-- /ko -->
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmpInputVariableDialog">
	<div style="display:flex; flex-direction:column; flex:1 1 100%; height: 100%;">
		<div data-bind="foreach: inputVariables">
			<div>
				<label data-bind="text:name" style="display:  inline-block; width: 35%; margin-top:2%"></label>
				<input data-bind="attr: { type:inputType },value: value, checked:checked" />
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplContainerItem">
	<div
		class="containerItem"
		data-bind="
			click: select,
			clickBubble: false,
			css: {
				'selected': isSelected,
				'hover': hover
			},
			event: {
				mouseover: mouseOver,
				mouseout: mouseOut
			},
			mouseoverBubble: false"
	>
		<div class="containerItem__header">
			<div class="containerItem__header__title" data-bind="text: label"></div>
			<div class="containerItem__header__commands" data-bind="foreach: headerCommands">
				<div class="containerItem__header__command" data-bind="attr: { title: label }, click: onClick, clickBubble: false">
					<!-- ko if: iconName -->
					<i data-bind="class: 'reportsprite icon-report_' + iconName"></i>
					<!-- /ko -->
					<span data-bind="text: label"></span>
				</div>
			</div>
		</div>
		<!-- ko if: containerContentTemplateName -->
		<div class="containerItem__content" data-bind="template: { name: containerContentTemplateName }"></div>
		<!-- /ko -->
	</div>
</script>
<script type="text/html" id="tmplGridItemContent">
	<div class="gridItem" data-bind="css: { 'gridItem__gridEditor__enabled': !gridEditor.isReadOnly() }">
		<resco-grideditor class="gridItem__gridEditor" params="editor: gridEditor"></resco-grideditor>
		<!-- ko if: gridEditor.isReadOnly -->
		<div class="gridItem_gridEditorOutline" data-bind="click: select, doubleClick: enableGridEditor, clickBubble: false"></div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplGridItemOuterArea">
	<div class="gridItem_gridEditorOuter" data-bind="click: enableGridEditor.bind($data, false), clickBubble: false"></div>
</script>

<script type="text/html" id="tmplCellItemDropZone">
	<div class="cellItemDropZone" data-bind="cbGridDropBinding: $data">
		<div class="addCellInline">
			<div class="addCellInline__button" title="Add cell" data-bind="click: parent.createTextCell.bind(parent, row.index() + 1, column.index() + 1)">
				<i class="commonuisprite icon-commonui_Toolbar_Mono_AddCell_32 iconLarge"></i>
			</div>
			<div
				class="addCellInline__button"
				title="Add image"
				data-bind="click: parent.createImageCell.bind(parent, row.index() + 1, column.index() + 1)"
			>
				<i class="commonuisprite icon-commonui_Toolbar_Mono_AddImage_32 iconLarge"></i>
			</div>
			<div
				class="addCellInline__button"
				title="Add QR code"
				data-bind="click: parent.createQrCodeCell.bind(parent, row.index() + 1, column.index() + 1)"
			>
				<i class="commonuisprite icon-commonui_Toolbar_Mono_AddQR_32 iconLarge"></i>
			</div>
			<div
				class="addCellInline__button"
				title="Add signature"
				data-bind="click: parent.createSignatureCell.bind(parent, row.index() + 1, column.index() + 1)"
			>
				<i class="commonuisprite icon-commonui_Toolbar_Mono_AddSignature_32 iconLarge"></i>
			</div>
		</div>
	</div>
</script>

<script type="text/html" id="tmplGridPropertyPanel">
	<div class="propertyBar">
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Grid Properties</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.GridProperties.Style">
				<div class="propertyName">Style</div>
				<div class="propertyValue">
					<select
						data-bind="value: style, options: reportEditor.reportItem.styles, optionsText: 'label', optionsValue: 'label', valueAllowUnset: true, optionsCaption: ''"
					></select>
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.GridProperties.Visibility">
				<div class="propertyName">Visibility</div>
				<div class="propertyValue">
					<input type="text" data-bind="value: visible" />
				</div>
			</div>
		</div>
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Layout</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.GridProperties.PageBreak">
				<div class="propertyName">Page Break</div>
				<div class="propertyValue">
					<input type="checkbox" data-bind="checked: breaks" />
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.GridProperties.KeepTogether">
				<div class="propertyName">Keep Together</div>
				<div class="propertyValue">
					<input type="checkbox" data-bind="checked: smartBreak" />
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.GridProperties.BreakRows">
				<div class="propertyName">Break rows</div>
				<div class="propertyValue">
					<input type="checkbox" data-bind="checked: breakRows" />
				</div>
			</div>
		</div>
	</div>
</script>

<script type="text/html" id="tmplGridColumnPropertyPanel">
	<div class="propertyBar">
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Column</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.ColumnProperties.Width">
				<div class="propertyName">Width</div>
				<div class="propertyValue">
					<input type="number" data-bind="value: data.width" />
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.ColumnProperties.SizeType">
				<div class="propertyName">Size type</div>
				<div class="propertyValue">
					<select data-bind="value: data.sizeType, options: data.sizeTypes, optionsText: 'value', optionsValue: 'key'"></select>
				</div>
			</div>
		</div>
	</div>
</script>

<script type="text/html" id="tmplGridRowPropertyPanel">
	<div class="propertyBar">
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Row</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.RowProperties.AutoHeight">
				<div class="propertyName">Auto height</div>
				<div class="propertyValue">
					<input type="checkbox" data-bind="checked: data.autoHeight" />
				</div>
			</div>
			<!-- ko if: !data.autoHeight() -->
			<div class="property tooltipsource" data-tooltip="ReportEditor.RowProperties.ExactHeight">
				<div class="propertyName">Exact height</div>
				<div class="propertyValue">
					<input type="number" data-bind="value: data.height" />
				</div>
			</div>
			<!-- /ko -->
		</div>
	</div>
</script>
<script type="text/html" id="tmplRepeaterItemContent">
	<div class="repeaterItem" data-bind="template: 'tmplSourceItemContent'"></div>
</script>

<script type="text/html" id="tmplRepeaterPropertyPanel">
	<div class="propertyBar">
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Repeater Properties</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.RepeaterProperties.Break">
				<div class="propertyName">Break</div>
				<div class="propertyValue">
					<input type="checkbox" data-bind="checked: breaks" />
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.RepeaterProperties.Visibility">
				<div class="propertyName">Visibility</div>
				<div class="propertyValue">
					<input type="text" data-bind="value: visible" />
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.RepeaterProperties.InstancesPerRow">
				<div class="propertyName">Instances per row</div>
				<div class="propertyValue">
					<input type="number" data-bind="value: horizontalColumns" />
				</div>
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplReportItem">
	<div class="reportItem" data-bind="css: { 'reportItem__selected': isSelected }">
		<div class="reportItem__header" data-bind="click: select, clickBubble: false">
			<span data-bind="text: label"></span>
			<span data-bind="text: size"></span>
		</div>
		<!-- ko if: containerContentTemplateName -->
		<div class="reportItem__content" data-bind="click: select, clickBubble: false">
			<!-- ko template: {name: containerContentTemplateName } --><!-- /ko -->
		</div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplReportPropertyPanel">
	<div class="propertyBar">
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Document Size</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.ReportProperties.DocumentSize">
				<div class="propertyName">Page size</div>
				<div class="propertyValue">
					<select data-bind="value: size, options: sizeOptions"></select>
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.ReportProperties.Unit">
				<div class="propertyName">Units</div>
				<div class="propertyValue">
					<select data-bind="value: reportUnit, options: reportUnitOptions"></select>
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.ReportProperties.Width">
				<div class="propertyName">Width</div>
				<div class="propertyValue">
					<input type="number" placeholder="Size" data-bind="value: computedReportWidth" />
					<span data-bind="text: reportUnitLabel"></span>
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.ReportProperties.Height">
				<div class="propertyName">Height</div>
				<div class="propertyValue">
					<input type="number" placeholder="Size" data-bind="value: computedReportHeight" />
					<span data-bind="text: reportUnitLabel"></span>
				</div>
			</div>
		</div>
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Report Properties</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.ReportProperties.GUID">
				<div class="propertyName">GUID</div>
				<div class="propertyValue">
					<input class="guid" type="text" data-bind="value: reportEditor.report.id" disabled />
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.ReportProperties.Name">
				<div class="propertyName">Name</div>
				<div class="propertyValue">
					<input type="text" data-bind="value: reportEditor.report.name" disabled />
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.ReportProperties.Entity">
				<div class="propertyName">Entity</div>
				<div class="propertyValue">
					<input type="text" data-bind="value: reportEditor.report.entity" disabled />
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.ReportProperties.Language">
				<div class="propertyName">Language</div>
				<div class="propertyValue">
					<input type="text" data-bind="value: reportEditor.report.languageLabel" disabled />
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.ReportProperties.Source">
				<div class="propertyName">Source</div>
				<div class="propertyValue">
					<input type="text" data-bind="value: reportEditor.report.sourceLabel" disabled />
				</div>
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplSourceItemContent">
	<div class="sourceItem">
		<!-- ko if: header -->
		<!-- ko template: {name: "tmplContainerItem", data: header, afterRender: header.appended.bind(header) } --><!-- /ko -->
		<!-- /ko -->
		<!-- ko foreach: items -->
		<!-- ko template: {name: "tmplContainerItem", afterRender: $data.appended.bind($data) } --><!-- /ko -->
		<!-- /ko -->
		<!-- ko if: footer -->
		<!-- ko template: {name: "tmplContainerItem", data: footer, afterRender: footer.appended.bind(footer) } --><!-- /ko -->
		<!-- /ko -->
	</div>
</script>
<script type="text/html" id="tmplCellItem">
	<div class="cellItem gridEditorCell" data-bind="css: {'cellItem__selected': isSelected(), 'cellItem__error' : errorMessage()}">
		<div class="cellItem__label" data-bind="css: { 'cellItem__label__constant': !isValueBinding() }">
			<!-- ko ifnot: editMode -->
			<span data-bind="text: contentLabel, click: onLabelClicked"></span>
			<!-- /ko -->
			<!-- ko if: editMode -->
			<input type="text" data-bind="value: content, hasFocus: editMode" />
			<!-- /ko -->
		</div>
		<!-- ko ifnot: parent.gridEditor.isReadOnly -->
		<div class="cellItem__deleteButton" title="Delete cell" data-bind="click: onDeleteClicked, clickBubble: false">
			<i class="reportsprite icon-report_delete"></i>
		</div>
		<!-- /ko -->
	</div>
</script>

<script type="text/html" id="tmplCellPropertyPanel">
	<div class="propertyBar">
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Cell properties</div>
			<div class="propertySubgroup">
				<div class="property tooltipsource" data-tooltip="ReportEditor.CellProperties.Column">
					<div class="propertyName">Column</div>
					<div class="propertyValue">
						<input type="number" data-bind="value: column" />
					</div>
				</div>
				<div class="property tooltipsource" data-tooltip="ReportEditor.CellProperties.ColumnSpan">
					<div class="propertyName">Col. span</div>
					<div class="propertyValue">
						<input type="number" data-bind="value: colSpan" />
					</div>
				</div>
			</div>
			<div class="propertySubgroup">
				<div class="property tooltipsource" data-tooltip="ReportEditor.CellProperties.Row">
					<div class="propertyName">Row</div>
					<div class="propertyValue">
						<input type="number" data-bind="value: row" />
					</div>
				</div>
				<div class="property tooltipsource" data-tooltip="ReportEditor.CellProperties.RowSpan">
					<div class="propertyName">Row span</div>
					<div class="propertyValue">
						<input type="number" data-bind="value: rowSpan" />
					</div>
				</div>
			</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.CellProperties.Style">
				<div class="propertyName">Style</div>
				<div class="propertyValue">
					<select data-bind="value: style, options: reportEditor.reportItem.styles, optionsText: 'label', optionsValue: 'label'"></select>
				</div>
			</div>
			<div class="propertyGroupTitle">Data</div>
			<!-- ko template: {name: bindingPropertyTemplateName} --><!-- /ko -->
			<div class="property tooltipsource" data-tooltip="ReportEditor.CellProperties.Visibility">
				<div class="propertyName">Visibility</div>
				<div class="propertyValue">
					<input type="text" data-bind="value: visible" />
				</div>
			</div>
		</div>
		<div class="propertyGroup">
			<div class="propertyGroupTitle">Cell borders</div>
			<div class="property tooltipsource" data-tooltip="ReportEditor.CellProperties.Borders">
				<div class="propertyName">Borders</div>
				<div class="propertyValue">
					<select data-bind="value: customBorder, options: customBorderOptions, optionsText: 'key', optionsValue: 'value'"></select>
				</div>
			</div>
			<!-- ko if: customBorder() -->
			<div class="property tooltipsource" data-tooltip="ReportEditor.CellProperties.Color">
				<div class="propertyName">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="propertySubgroup">
				<div class="property">
					<div class="propertyName">
						<div class="borderThicknessIcon borderThicknessIcon__left">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
					<div class="propertyValue"><input type="number" data-bind="value: borderThickness.Left" /></div>
				</div>
				<div class="property">
					<div class="propertyName">
						<div class="borderThicknessIcon borderThicknessIcon__top">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
					<div class="propertyValue"><input type="number" data-bind="value: borderThickness.Top" /></div>
				</div>
			</div>
			<div class="propertySubgroup">
				<div class="property">
					<div class="propertyName">
						<div class="borderThicknessIcon borderThicknessIcon__right">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
					<div class="propertyValue"><input type="number" data-bind="value: borderThickness.Right" /></div>
				</div>
				<div class="property">
					<div class="propertyName">
						<div class="borderThicknessIcon borderThicknessIcon__bottom">
							<div></div>
							<div></div>
							<div></div>
							<div></div>
						</div>
					</div>
					<div class="propertyValue"><input type="number" data-bind="value: borderThickness.Bottom" /></div>
				</div>
			</div>
			<!-- /ko -->
		</div>
	</div>
</script>
<script type="text/html" id="tmplImagePropertiesBinding">
	<div class="property tooltipsource" data-tooltip="ReportEditor.ImageCellProperties.Binding">
		<div class="propertyName">Binding</div>
		<div class="propertyValue">
			<!-- ko if: binding() === 'Value' -->
			<span
				style="color: blue; text-decoration: underline; cursor: pointer"
				data-bind="text: entityName() ? entityName() : 'Select...', click: onImageFetchClicked"
			></span>
			<!-- /ko -->
			<!-- ko if: binding() === 'Constant' -->
			<input type="text" data-bind="value: content" />
			<!-- /ko -->
		</div>
	</div>
	<div class="property tooltipsource" data-tooltip="ReportEditor.ImageCellProperties.BindingType">
		<div class="propertyName">Binding type</div>
		<div class="propertyValue">
			<select data-bind="value: binding">
				<option value="Value">Value</option>
				<option value="Constant">Constant</option>
			</select>
		</div>
	</div>
	<div class="property tooltipsource" data-tooltip="ReportEditor.ImageCellProperties.Size">
		<div class="propertyName">Size</div>
		<div class="propertyValue">
			<select data-bind="value: size, options: sizeOptions, optionsText: 'value', optionsValue: 'key'"></select>
		</div>
	</div>
	<div class="propertySubgroup" data-bind="visible: customSizeSelected">
		<div class="property tooltipsource" data-tooltip="ReportEditor.ImageCellProperties.Width">
			<div class="propertyName">Width (px)</div>
			<div class="propertyValue">
				<input type="number" step="1" data-bind="value: width" />
			</div>
		</div>
		<div class="property tooltipsource" data-tooltip="ReportEditor.ImageCellProperties.Height">
			<div class="propertyName">Height (px)</div>
			<div class="propertyValue">
				<input type="number" step="1" data-bind="value: height" />
			</div>
		</div>
	</div>
</script>
<script type="text/html" id="tmplQRPropertiesBinding">
	<div class="property tooltipsource" data-tooltip="ReportEditor.QRCellProperties.QRCodeType">
		<div class="propertyName">QR code type</div>
		<div class="propertyValue">
			<select data-bind="value: type">
				<option value="Default">Default</option>
				<option value="PayBySquare">Pay by square</option>
			</select>
		</div>
	</div>
	<!-- ko if: type() === 'PayBySquare' -->
	<div class="property tooltipsource" data-tooltip="ReportEditor.QRCellProperties.IBAN">
		<div class="propertyName">IBAN</div>
		<div class="propertyValue">
			<input type="text" data-bind="value: iban" />
		</div>
	</div>
	<div class="property tooltipsource" data-tooltip="ReportEditor.QRCellProperties.Amount">
		<div class="propertyName">Amount</div>
		<div class="propertyValue">
			<input type="text" data-bind="value: amount" />
		</div>
	</div>
	<div class="property tooltipsource" data-tooltip="ReportEditor.QRCellProperties.CurrencyCode">
		<div class="propertyName">Currency code</div>
		<div class="propertyValue">
			<input type="text" data-bind="value: currencyCode" />
		</div>
	</div>
	<div class="property tooltipsource" data-tooltip="ReportEditor.QRCellProperties.VariableCode">
		<div class="propertyName">Variable code</div>
		<div class="propertyValue">
			<input type="text" data-bind="value: variableCode" />
		</div>
	</div>
	<div class="property tooltipsource" data-tooltip="ReportEditor.QRCellProperties.PaymentNote">
		<div class="propertyName">Payment note</div>
		<div class="propertyValue">
			<input type="text" data-bind="value: paymentNote" />
		</div>
	</div>
	<!-- /ko -->
	<!-- ko if: type() !== 'PayBySquare' -->
	<div class="property tooltipsource" data-tooltip="ReportEditor.QRCellProperties.Binding">
		<div class="propertyName">Binding</div>
		<div class="propertyValue">
			<input type="text" data-bind="value: binding" />
		</div>
	</div>
	<!-- /ko -->
	<div class="property tooltipsource" data-tooltip="ReportEditor.QRCellProperties.ECCLevel">
		<div class="propertyName">ECC level</div>
		<div class="propertyValue">
			<select data-bind="value: eccLevel">
				<option value="L">7%</option>
				<option value="M">15%</option>
				<option value="Q">25%</option>
				<option value="H">30%</option>
			</select>
		</div>
	</div>
	<div class="property tooltipsource" data-tooltip="ReportEditor.QRCellProperties.PixelsPerModule">
		<div class="propertyName">Pixels per module</div>
		<div class="propertyValue">
			<input type="number" data-bind="value: pixelsPerModule" />
		</div>
	</div>
</script>
<script type="text/html" id="tmplSignaturePropertiesBinding">
	<!-- ko template: {name: 'tmplPropertiesBinding'} --><!-- /ko -->
	<div class="property tooltipsource" data-tooltip="ReportEditor.SignatureCellProperties.Height">
		<div class="propertyName">Height</div>
		<div class="propertyValue"><input type="number" data-bind="value: height" /></div>
	</div>
	<div class="property tooltipsource" data-tooltip="ReportEditor.SignatureCellProperties.Label">
		<div class="propertyName">Label</div>
		<div class="propertyValue"><input type="text" data-bind="value: name" /></div>
	</div>
	<div class="property tooltipsource" data-tooltip="ReportEditor.SignatureCellProperties.LabelPosition">
		<div class="propertyName">Label position</div>
		<div class="propertyValue">
			<select data-bind="value: labelPosition">
				<option value="None">None</option>
				<option value="Top">Top</option>
				<option value="Bottom">Bottom</option>
			</select>
		</div>
	</div>
	<div class="property tooltipsource" data-tooltip="ReportEditor.SignatureCellProperties.ShowLine">
		<div class="propertyName">Show line</div>
		<div class="propertyValue"><input type="checkbox" data-bind="checked: showLine" /></div>
	</div>
	<div class="property tooltipsource" data-tooltip="ReportEditor.SignatureCellProperties.EnhancedSignature">
		<div class="propertyName">Enhanced signature</div>
		<div class="propertyValue"><input type="checkbox" data-bind="checked: isAdvancedSignFlow" /></div>
	</div>
	<div class="property tooltipsource" data-tooltip="ReportEditor.SignatureCellProperties.ReportEntity" data-bind="visible: isAdvancedSignFlow">
		<div class="propertyName">Report entity</div>
		<div class="propertyValue">
			<select data-bind="options: MetadataCache.instance.entities, optionsText: 'LogicalName', value: selectedEntity">
				<option data-bind="text: ">Hidden</option>
			</select>
		</div>
	</div>
	<div class="property tooltipsource" data-tooltip="ReportEditor.SignatureCellProperties.CommentField" data-bind="visible: isAdvancedSignFlow">
		<div class="propertyName">Comment field</div>
		<div class="propertyValue">
			<select data-bind="options: entityFields, value: commentField"></select>
		</div>
	</div>
	<div class="property tooltipsource" data-tooltip="ReportEditor.SignatureCellProperties.SignatureStorage" data-bind="visible: isAdvancedSignFlow">
		<div class="propertyName">Signature storage</div>
		<div class="propertyValue">
			<select data-bind="options: entities, value: signatureStorage"></select>
		</div>
	</div>
	<div class="property tooltipsource" data-tooltip="ReportEditor.SignatureCellProperties.DiscardAttachment" data-bind="visible: isAdvancedSignFlow">
		<div class="propertyName">Discard signature after report is saved</div>
		<div class="propertyValue"><input type="checkbox" data-bind="checked: isDiscardAttachment" /></div>
	</div>
</script>
<script type="text/html" id="tmplPropertiesBinding">
	<div class="property tooltipsource" data-tooltip="ReportEditor.TextCellProperties.BindingType">
		<div class="propertyName">Binding type</div>
		<div class="propertyValue">
			<select data-bind="value: binding, options: bindingOptions"></select>
		</div>
	</div>
	<!-- ko if: isValueBinding -->
	<div class="property tooltipsource" data-tooltip="ReportEditor.TextCellProperties.Variable">
		<div class="propertyName">Variable</div>
		<div class="propertyValue">
			<input type="text" data-bind="value: content" />
		</div>
	</div>
	<!-- /ko -->
	<!-- ko ifnot: isValueBinding -->
	<div class="property tooltipsource" data-tooltip="ReportEditor.TextCellProperties.ConstantValue">
		<div class="propertyName">Constant value</div>
		<div class="propertyValue">
			<input type="text" data-bind="value: content" />
		</div>
	</div>
	<!-- /ko -->
</script>
<script type="text/html" id="tmplTextPropertiesBinding">
	<!-- ko template: {name: 'tmplPropertiesBinding'} --><!-- /ko -->
	<!-- ko if: isValueBinding -->
	<div class="property tooltipsource" data-tooltip="ReportEditor.TextCellProperties.StripHtml">
		<div class="propertyName">Strip-HTML</div>
		<div class="propertyValue">
			<select data-bind="value: stripHtml">
				<option value="auto">Auto</option>
				<option value="true">Yes</option>
				<option value="false">No</option>
			</select>
		</div>
	</div>
	<!-- /ko -->
</script>
</head><body><!-- ko template: { name: 'tmplAppForm' } --><!-- /ko --><script src="runtime.bundle.js?data=6c5a0372013f2221"></script><script src="924.bundle.js?data=3f3a4777b4f58513"></script><script src="204.bundle.js?data=7575c2eff65f5444"></script><script src="main.bundle.js?data=63ecf8e5e991ad69"></script><script src="polyfills.bundle.js?data=2f8905a603cc0628"></script></body></html>