<div class="modal-header customCalculationsEditor-notSelection">
	<button type="button" id="btnX" ng-click="cancel()" class="close" aria-label="Close">
		<span aria-hidden="true">&times;</span>
	</button>
	<h4 class="modal-title">{{ 'CalcMemberEditor_DialogCaption' | translate }}</h4>
</div>
<div class="modal-body customCalculationsEditor-body customCalculationsEditor-notSelection">
	<div class="customCalculationsEditor-toolBar">
		<button type="button" class="btn btn-default customCalculationsEditor-imageButton" title="{{ 'CalcMemberEditor_AddMember' | translate }}" ng-click="addNewCustomMember()">
			<div class="customCalculationsEditor-imageButtonContent customCalculationsEditor-imageLibary-addCustomMeasure"></div>
		</button>
		<button type="button" class="btn btn-default customCalculationsEditor-imageButton" title="{{ 'CalcMemberEditor_AddSet' | translate }}" ng-click="addNewCustomSet()">
			<div class="customCalculationsEditor-imageButtonContent customCalculationsEditor-imageLibary-addCustomSet"></div>
		</button>
		<button type="button" class="btn btn-default customCalculationsEditor-imageButton" title="{{ 'CalcMemberEditor_DeleteMember' | translate }}"
				ng-click="deleteSelectedItem()"
				ng-disabled="disableDeleteButton">
			<div class="customCalculationsEditor-imageButtonContent customCalculationsEditor-imageLibary-remove"></div>
		</button>
		<button type="button" class="btn btn-default customCalculationsEditor-imageButton" title="{{ 'CalcMemberEditor_Clear' | translate }}" ng-click="deleteAll()">
			<div class="customCalculationsEditor-imageButtonContent customCalculationsEditor-imageLibary-removeAll"></div>
		</button>
	</div>
	<div class="customCalculationsEditor-body-editorContent clearfix">
		<div class="customCalculationsEditor-body-editorContent-leftPanel">
			<div class="customCalculationsEditor-panel-listCustomCalculations">
				<div data-tree-view data-datasource="{{datasource}}" data-onselectedchanged="onSelectedItemChanged(e)"
					 class="customCalculationsEditor-listCustomCalculations"></div>
			</div>

			<div style="height: 299px; margin-top: 5px;"
				 data-cube-explorer
				
				 data-connectionstring="connectionString"
				 data-cubename="cubeName"
				 data-datasource="cubeMetaData">
			</div>

			<!--data-onupdatetree="onUpdateTree(e)"-->
			<!--<div style="height: 250px; margin-top: 2px;" data-tree-view data-datasource="{{treeMetadata}}"></div>-->
			
		</div>
		<div class="customCalculationsEditor-panel-editorTabs">
			<tabset ng-show="showEditorCustomMemberPanel===true"
					ng-class="disableEditorCustomMemberPanel ? 'customCalculationsEditor-editorPanel-state_disabled':'' ">
				<tab heading="{{ 'CalcMemberEditor_MemberTab' | translate }}">
					<div class="customCalculationsEditor-panel-editorContent">
						<div>
							<span class="customCalculationsEditor-labelProperty">{{ 'CalcMemberEditor_NameLabel' | translate }} </span>
							<input type="text"
								   data-drag-and-drop-tree-metadata-to-text
								   data-disable-drag-and-drop="{{disableEditorCustomMemberPanel}}"
								   ng-model-options="{updateOn: 'blur'}"
								   delete-prev-value="true"
								   ng-model="dataCustomMemberEditor.customCalculatedMemberPropName"
								   class="form-control customCalculationsEditor-textEditor"
								   ng-change="onCustomCalculatedMemberCaptionChanged()" />
						</div>
						<div>
							<span class="customCalculationsEditor-labelProperty">{{ 'CalcMemberEditor_ExpressionLabel' | translate }} </span>
							<textarea data-drag-and-drop-tree-metadata-to-text
									  data-disable-drag-and-drop="{{disableEditorCustomMemberPanel}}"
								
									  class="form-control customCalculationsEditor-textEditor"
									  style="height: 250px;"
									  ng-change="onCustomCalculatedMemberExpressionChanged()"
									  ng-model="dataCustomMemberEditor.customCalculatedMemberPropExpression"></textarea>
						</div>
						<div style="width: 100%;">
							<div class="customCalculationsEditor-advancedPropertiesEditor-part">
								<div class="customCalculationsEditor-advancedPropertiesEditor-part-childPanel">
									<div class="customCalculationsEditor-advancedPropertiesEditor-part-childPanel-right">
                    <div class="customCalculationsEditor-advancedPropertiesEditor-part-childPanel-left ">{{ 'CalcMemberEditor_NonEmpty' | translate }}</div>
										<div class="dropdown btn-group customCalculationsEditor-advancedPropertiesEditor-dropdown default-dropdown">
                      <button class="btn btn-default
													dropdown-toggle disabled
													customCalculationsEditor-advancedPropertiesEditor-dropdownContentButton btn-toggle-withcarret" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        {{ 'Measures' | translate }} ({{dataCustomMemberEditor.customCalculatedMemberPropNonEmptyBehaviors.length}})
                      </button>
                      <button type="button"
                              class="btn btn-default
													 dropdown-toggle disabled
													 customCalculationsEditor-advancedPropertiesEditor-dropdownCaretButton caret-btn"
                              data-toggle="dropdown"
                              aria-expanded="false">
                        <span class="caret"></span>
                      </button>
										</div>
									</div>
								</div>
								<div class="customCalculationsEditor-advancedPropertiesEditor-part-childPanel">
									<div class="customCalculationsEditor-advancedPropertiesEditor-part-childPanel-right">
                    <div class="customCalculationsEditor-advancedPropertiesEditor-part-childPanel-left ">{{ 'BackColor_Label' | translate }}</div>
										<div class="dropdown btn-group customCalculationsEditor-advancedPropertiesEditor-dropdown default-dropdown">
                      <button class="btn btn-default
													dropdown-toggle
													customCalculationsEditor-advancedPropertiesEditor-dropdownContentButton  btn-toggle-withcarret" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        <div class="customCalculationsEditor-colorSquare"
                             ng-style="getBackgroundColorCustomMemberEditor()"></div>
                        <span class="customCalculationsEditor-dropDownEditor-header">{{dataCustomMemberEditor.customCalculatedMemberPropBackgroundColor.caption }}</span>
                      </button>
                      <button type="button" class="btn
													btn-default customCalculationsEditor-advancedPropertiesEditor-dropdownCaretButton dropdown-toggle caret-btn" data-toggle="dropdown" aria-expanded="false">
                        <span class="caret"></span>
                      </button>
											<ul class="dropdown-menu customCalculationsEditor-editorPanel-colorPicker-dropDownMenu_lastLine" aria-labelledby="dropdownMenu1">
												<li ng-repeat="descriptionColor in setColors" ng-class="dataCustomMemberEditor.customCalculatedMemberPropBackgroundColor.color===descriptionColor.argbText?'active':''" ng-click="customcalculatedmemberbackgroundselected(descriptionColor)">
													<a>
														<div class="customCalculationsEditor-colorSquare" ng-style="{'background': '{{descriptionColor.argbText}}'}"></div>
														<span class="customCalculationsEditor-dropDownEditor-header">{{descriptionColor.caption}}</span>
													</a>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
							<div class="customCalculationsEditor-advancedPropertiesEditor-part">
								<div class="customCalculationsEditor-advancedPropertiesEditor-part-childPanel">
									<div class="customCalculationsEditor-advancedPropertiesEditor-part-childPanel-right">
                    <div class="customCalculationsEditor-advancedPropertiesEditor-part-childPanel-left">{{ 'CalcMemberEditor_FormatStringLabel' | translate }}</div>
										<div class="dropdown btn-group customCalculationsEditor-advancedPropertiesEditor-dropdown default-dropdown">
                      <button class="btn btn-default dropdown-toggle customCalculationsEditor-advancedPropertiesEditor-dropdownContentButton btn-toggle-withcarret" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        {{dataCustomMemberEditor.customCalculatedMemberPropFormatString}}
                      </button>
                      <button type="button" class="btn btn-default dropdown-toggle customCalculationsEditor-advancedPropertiesEditor-dropdownCaretButton caret-btn" data-toggle="dropdown" aria-expanded="false">
                        <span class="caret"></span>
                      </button>
											<ul class="dropdown-menu customCalculationsEditor-editorPanel-colorPicker-dropDownMenu_firstLine" aria-labelledby="dropdownMenu1">
												<li ng-repeat="formatString in formatStrings" ng-class="dataCustomMemberEditor.customCalculatedMemberPropFormatString===formatString?'active':''" ng-click="customcalculatedmemberformatstringselected(formatString)">
													<a>{{formatString}}</a>
												</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="customCalculationsEditor-advancedPropertiesEditor-part-childPanel">
									<div class="customCalculationsEditor-advancedPropertiesEditor-part-childPanel-right">
                    <div class="customCalculationsEditor-advancedPropertiesEditor-part-childPanel-left ">{{ 'ForeColor_Label' | translate }}</div>
										<div class="dropdown btn-group customCalculationsEditor-advancedPropertiesEditor-dropdown default-dropdown">
											<button class="btn btn-default dropdown-toggle btn-toggle-withcarret
													customCalculationsEditor-advancedPropertiesEditor-dropdownContentButton" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
												<div class="customCalculationsEditor-colorSquare"
													 ng-style="getForegroundCustomMemberEditor()"></div>
												<span class="customCalculationsEditor-dropDownEditor-header">{{dataCustomMemberEditor.customCalculatedMemberPropForeground.caption}}</span>
											</button>
                      <button type="button" class="btn btn-default dropdown-toggle
													customCalculationsEditor-advancedPropertiesEditor-dropdownCaretButton caret-btn" data-toggle="dropdown" aria-expanded="false">
                        <span class="caret"></span>
                      </button>
											<ul class="dropdown-menu customCalculationsEditor-editorPanel-colorPicker-dropDownMenu_lastLine" aria-labelledby="dropdownMenu1">
												<li ng-repeat="descriptionColor in setColors" ng-class="dataCustomMemberEditor.customCalculatedMemberPropForeground.color===descriptionColor.argbText?'active':''" ng-click="customcalculatedmemberforegroundselected(descriptionColor)">
													<a>
														<div class="customCalculationsEditor-colorSquare" ng-style="{'background': '{{descriptionColor.argbText}}'}"></div>
														<span class="customCalculationsEditor-dropDownEditor-header">{{descriptionColor.caption}}</span>
													</a>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
						</div>

					</div>
				</tab>
				<tab heading="{{ 'CalcMemberEditor_ScriptTab' | translate }}">
					<div class="customCalculationsEditor-panel-editorContent">
						<div>
							<span class="customCalculationsEditor-labelProperty">{{ 'CalcMemberEditor_NameLabel' | translate }} </span>
							<input type="text" readonly value="{{dataCustomMemberEditor.customCalculatedMemberPropName}}" class="form-control"  />
						</div>
						<div>
							<span class="customCalculationsEditor-labelProperty">{{ 'CalcMemberEditor_ScriptLabel' | translate }}</span>
              <textarea class="form-control customCalculationsEditor-textEditor customCalculationsEditor-textEditor-height"
                        ng-bind="getScriptForCustomMember()"
                        readonly></textarea>
						</div>
					</div>
				</tab>
			</tabset>
			<tabset ng-show="showEditorCustomSetPanel===true"
					ng-class="disableEditorCustomSetPanel ? 'customCalculationsEditor-editorPanel-state_disabled':'' ">
				<tab heading="{{ 'CalcMemberEditor_ScriptTab' | translate }}">
					<div class="customCalculationsEditor-panel-editorContent">
						<div>
							<span class="customCalculationsEditor-labelProperty">{{ 'CalcMemberEditor_NameLabel' | translate }} </span>
							<input type="text"
								   data-disable-drag-and-drop="{{disableEditorCustomSetPanel}}"
								   data-drag-and-drop-tree-metadata-to-text
								   ng-model="dataCustomSetEditor.customCalculatedSetPropName"
								   ng-change="onCustomCalculatedSetCaptionChanged()"
								   ng-model-options="{updateOn: 'blur'}"
								   delete-prev-value="true"
								   class="form-control customCalculationsEditor-textEditor" />

						</div>
						<div>
							<span class="customCalculationsEditor-labelProperty">{{ 'CalcMemberEditor_ScriptLabel' | translate }}</span>
              <textarea class="form-control customCalculationsEditor-textEditor customCalculationsEditor-textEditor-height"
                        data-disable-drag-and-drop="{{disableEditorCustomSetPanel}}"
                        data-drag-and-drop-tree-metadata-to-text
                      
                        ng-change="onCustomCalculatedSetExpressionChanged()"
                        ng-model="dataCustomSetEditor.customCalculatedSetPropScript"></textarea>
						</div>
					</div>
				</tab>
			</tabset>
		</div>
	</div>
</div>
<div class="modal-footer customCalculationsEditor-notSelection">
	<button class="btn btn-default" ng-click="ok()">
		<span>{{ 'DialogButton_Ok' | translate }}</span>
	</button>
	<button class="btn btn-default" ng-click="cancel()">
		<span>{{ 'DialogButton_Cancel' | translate }}</span>
	</button>
</div>