<div ng-controller = "Controller[[sedNumber]]" class="met-root">
	<div>
		<h3 class="sedHeading">[[sedNumber]] - [[sedTitle]]</h3>
		<div style="position:absolute;top:0;right:0;font-size:70%">SED API version: [[sedApiVersion]]<br/>Model version: [[sedModelVersion]]</div>
	</div>
	<!--  
	<ui-layout class= "layout" options = "{sizes:['99%', '1%']}" >
	-->
	<div class="layout">
	<bg-splitter orientation="vertical" position="VM.splitterPosition" class="met-splitter">
    <bg-pane min-size="100" scroll-to-id="viewModel.scrollToId">
		<div ng-controller="SedController" ng-cloak ng-init = "section = model.[[sedName]]; metaSection = metaModel.[[sedName]]" class="wb-stretch">
			<div id = "content-angular_[[sedNumber]]" class="content-angular container-fluid" ng-model-options="{ debounce: 250 }" ng-form="[[sedName]]" sedName="[[name]]" sedPackage="[[packageName]]" sedGVer="[[major]]" sedVer="[[minor]]" sedPatch="[[patch]]">
				<div class="tab-content met-content" ng-init="sedForm = [[sedName]]">
					<div met_start_tag met_if="!isChildSed" class="form-group" ng-controller="WbAngularSedCtrl"></div>
					<div met_start_tag met_if="isChildSed" class="form-group" ng-controller="WbAngularSedChildCtrl"></div>
					<div met_repeat="recursive.attributes">
						<div met_if="isChoice && !isEndEvent && choiceIndex == 0">
						<hr/><div>
						<div met_repeat="choices">
			               	<input type="radio" ng-model="metaSection.$$choice_[[choice]]" value = "[[choiceIndex]]" ng-change='validateFromChoice()' />
			               	<span met_label>[[choiceLabel]]</span><i met_if = 'isMandatory'>*</i>  <span style="vertical-align:bottom" met_if='hasXnote' class="tooltip-handler" tooltip="[[xnote]]" tooltip-enable="true" tooltip-placement="right" tooltip-trigger="click"></span>  <br/>
		               	</div>
		               	</div><hr/> 
		                </div>
						<div style="vertical-align:bottom" met_start_tag met_if = "isSection && !isEndEvent && !isChoice && isRepetition" ng-repeat="section in section.[[name]]" ng-init = "metaSection = metaSection.[[name]][$index]" ng-hide = "metaSection.$$isHidden" ng-class="'color' + ($index % 2)" id="section_{{getNextUUID(metaSection)}}"></div>
						<div style="vertical-align:bottom" met_start_tag met_if = "isSection && !isEndEvent &&  isChoice && isRepetition" ng-repeat="section in section.[[name]]" ng-init = "metaSection = metaSection.[[name]][$index]" ng-hide="$parent.metaSection.$$choice_[[choice]] != [[choiceIndex]]" id="section_{{getNextUUID(metaSection)}}"></div>
						<div style="vertical-align:bottom" met_start_tag met_if = "isSection && !isEndEvent && !isChoice && !isRepetition"  ng-controller = "SectionController" ng-init = "section = $parent.section.[[name]]; metaSection = $parent.metaSection.[[name]]" ng-hide = "metaSection.$$isHidden" id="section_{{getNextUUID(metaSection)}}"></div>
						<div style="vertical-align:bottom" met_start_tag met_if = "isSection && !isEndEvent &&  isChoice && !isRepetition" ng-controller = "SectionController" ng-init = "section = $parent.section.[[name]]; metaSection = $parent.metaSection.[[name]]" ng-hide = "$parent.metaSection.$$choice_[[choice]] != [[choiceIndex]]" id="section_{{getNextUUID(metaSection)}}"></div>
							<div style="vertical-align:bottom" met_start_tag met_if = "isSection && !isEndEvent && !isRepetition" class="met_lazy" ng-if="::shouldLoadSection"></div>
							<div style="vertical-align:bottom" met_if="isSection && !isChoice && !isEndEvent && level == 1" class="SECTION_ROW"    id="section_{{getNextUUID(metaSection)}}">
								<label style="vertical-align:bottom" class="control-label SECTION_ROW">[[headingNumberForHidden]]. [[label]] <i met_if = 'isMandatory'>*</i>
									<div style="vertical-align:bottom" met_if='hasXnote' class="tooltip-handler" tooltip="[[xnote]]" tooltip-enable="true" tooltip-placement="right" tooltip-trigger="click"></div>
								</label>
								<div class="SECTION_ROW_WHITESPACE"></div>
							</div>
							<div style="vertical-align:bottom" met_if="isSection && !isChoice && !isEndEvent && level > 1 " class="SUBSECTION_ROW" id="section_{{getNextUUID(metaSection)}}">
								<label style="vertical-align:bottom" class="control-label">[[headingNumberForHidden]]. [[label]] <i met_if = 'isMandatory'>*</i>
									<div style="vertical-align:bottom" met_if='hasXnote' class="tooltip-handler" tooltip="[[xnote]]" tooltip-enable="true" tooltip-placement="right" tooltip-trigger="click"></div>
								</label>
							</div>
				        <div met_if="isField">
							<!-- div met_start_tag met_if = "!isChoice" class="container-fluid row"></div-->
							<div met_start_tag met_if = "!isChoice" class="container-fluid" met_if_cond='ng-hide=isHidden?"true":"false"'></div>
							<!--  div met_start_tag met_if=  "isChoice" class="container-fluid row" ng-hide="metaSection.$$choice_[[choice]] != [[choiceIndex]]" id="section_{{getNextUUID(metaSection.[[name]])}}"></div-->
							<div met_start_tag met_if=  "isChoice" class="container-fluid" ng-hide="metaSection.$$choice_[[choice]] != [[choiceIndex]]" id="section_{{getNextUUID(metaSection.[[name]])}}"></div>
							<div ng-class="{'has-error': validateForm && metaSection.[[name]].$$error,'has-warning': validateForm && metaSection.[[name]].$$warning && !metaSection.[[name]].$$error}">
								<label class="control-label col-xs-3">[[headingNumberForHidden]]. [[label]] <i met_if = 'isMandatory'>*</i></label>
   							    <div met_if='hasXnote' class="tooltip-handler" tooltip="[[xnote]]" tooltip-enable="true" tooltip-placement="left" tooltip-trigger="click"></div>
								<div met_if="htmlType=='string' && !isSpecialField" class="col-xs-7">
									<trwidget met_if = "isLargeText"  ng-model="section.[[name]]" met_if_cond='disabled=hasReadOnly?"true":"false"' style="resize:vertical;" class="form-control" type="text" value="" rows="5" cols="30" sedName="[[sedName]] - [[sedTitleGlobal]]" elName="[[headingNumberForHidden]]. [[labelNoQuotes]]" id="field_{{getNextUUID(metaSection.[[name]])}}"><br/></trwidget>
									<input    met_if = "!isLargeText" ng-model="section.[[name]]" met_if_cond='ng-disabled=hasReadOnly?"true":"false"' class="form-control" type="text" 	value="" id="field_{{getNextUUID(metaSection.[[name]])}}" /><div met_if = "!isLargeText"><br/></div>
								</div>
								<div met_if="htmlType=='string' && isSpecialField && isIRField" class="col-xs-7">
									<irwidget ng-model="section.[[name]]" met_if_cond='disabled=hasReadOnly?"true":"false"' institution="section" name="[[name]]" value="" id="field_{{getNextUUID(metaSection.[[name]])}}" style="width:97%"/>
									<institution-advanced-search met_if="name == 'institutionName'" institution="section" institution-name-field="section.institutionName" institution-id-field= "section.institutionID" dropdown-menu-right="true"/> 
								</div>
								<div met_if="htmlType=='double' " class="col-xs-7"><input ng-model="section.[[name]]" met_if_cond='ng-disabled=hasReadOnly?"true":"false"' class="form-control" type="text" 	value="" id="field_{{getNextUUID(metaSection.[[name]])}}" /><br/></div>
								<div met_if="htmlType=='int'    " class="col-xs-7"><input ng-model="section.[[name]]" met_if_cond='ng-disabled=hasReadOnly?"true":"false"' class="form-control" type="text" 	value="" id="field_{{getNextUUID(metaSection.[[name]])}}" /><br/></div>
								<div met_if="htmlType=='boolean'" class="col-xs-7">
									<span>
										<input type="checkbox" class="checkbox-met" ng-model="section.[[name]]" met_if_cond='ng-disabled=hasReadOnly?"true":"false"' id="field_{{getNextUUID(metaSection.[[name]])}}" />
										<label> <span></span> </label>
									</span>
								</div>
								<div met_if="htmlType=='date' || htmlType=='dateTime'   " class="col-xs-7" ng-controller="DatePicker1">
				            		<p class="input-group">
				            			<span ng-class="{'met-datepicker-up': metaSection.[[name]].$$elemNo >= metaModel.[[sedName]].$$elementsNo - 4}">
				              				<input type="text" class="form-control" datepicker-popup-met ng-model="section.[[name]]" met_if_cond='ng-disabled=hasReadOnly?"true":"false"' is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" close-text="Close" show-weeks="false" year-rows="9" year-columns="9" met_if_cond='time-arrow=rinaUIDateDirection=="forwardLooking"?"forward":"backward"' datepicker-mode="year" placeholder="dd-MM-yyyy" id="field_{{getNextUUID(metaSection.[[name]])}}" />
				              			</span>
				              			<span class="input-group-btn">
				                			<button ng-class="{'has-error-date-button': validateForm && metaSection.[[name]].$$error, 'has-warning-date-button': validateForm && !metaSection.[[name]].$$error && metaSection.[[name]].$$warning}" met_if_cond='ng-disabled=hasReadOnly?"true":"false"' type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
				              			</span>
				            		</p>
						        </div>
			                	<div met_if="htmlType=='enum'" 		class="col-xs-7">
			                		<!--  single enum: multiplicity 1 and size lower than 5 entries -->
				                	<div class="radio radio-met radio-met-primary" met_if = '!isRepetition && enumSize <= 5' ng-model="section.[[name]]" ng-repeat="option in input.[[typeName]] track by $index" type="enumCodesSingle" id="field_{{getNextUUID(metaSection.[[name]])}}">
					                   <input id="[[headingNumberForHidden]].{{getNextUUID(metaSection.[[name]])}}{{option.value}}" type="radio" ng-model="section.[[name]]" met_if_cond='ng-disabled=hasReadOnly?"true":"false"' value="{{option.value}}"> <label for="[[headingNumberForHidden]].{{getNextUUID(metaSection.[[name]])}}{{option.value}}">{{option.name}}</label><br/></input>
					                </div>
			                		
			                		<!--  single enum: multiplicity 1 and size greater that 5 entries -->
				                	<ui-select met_if = '!isRepetition && enumSize > 5' type="enum" ng-model="section.[[name]]" met_if_cond='ng-disabled=hasReadOnly?"true":"false"' reset-search-input="false" lazy-load="true" id="field_{{getNextUUID(metaSection.[[name]])}}">
					                   	<ui-select-match met_if_cond='allow-clear=hasReadOnly?"false":"true"' placeholder="None selected"> {{$select.selected[ 'name']}} </ui-select-match>
					                   	<ui-select-choices repeat="option[\'value\'] as option in input.[[typeName]] | filter: $select.search">
					                   		<div ng-bind-html="option[\'name\'] | highlight: $select.search"></div>
					                   	</ui-select-choices>
					                </ui-select>
		
					                <!-- multiple enum version with select -->
									<div met_if = 'isRepetition && enumSize > 5' type="enumCodesMultiple" isteven-multi-select input-model="input.[[typeName]]" output-model="section.[[name]]" met_if_cond='is-disabled=hasReadOnly?"true":"false"' theme="bootstrap" tick-property="ticked" button-label="icon name" item-label="icon name" output-properties="value" on-reset="fReset()" lazy-load="true" max-height="400px" id="field_{{getNextUUID(metaSection.[[name]])}}">
									</div>
									
									<!-- multiple enum version with checkboxes -->
									<div met_if = 'isRepetition && enumSize <= 5' type="enumCodesMultiple" ng-model="section.[[name]]" ng-repeat="option in input.[[typeName]] track by $index">
										<span>
											<input type="checkbox" class="checkbox-met" checklist-model="section.[[name]]" met_if_cond='ng-disabled=hasReadOnly?"true":"false"' checklist-value="option" output-properties="value" id="field_{{getNextUUID(metaSection.[[name]])}}" />
											<label> <span></span> {{option.name}}</label>
										</span>
									</div>
									<br/>
				                </div>
				                
				                <label class="control-label col-xs-2 error-msg warning-msg" ng-show="validateForm && metaSection.[[name]].$$error">{{metaSection.[[name]].$$error}}</label>
				                <label class="control-label col-xs-2 warning-msg" ng-show="validateForm && metaSection.[[name]].$$warning && !metaSection.[[name]].$$error">{{metaSection.[[name]].$$warning}}</label>
				                <div met_if="htmlType=='string' && isSpecialField && isIRField" class="col-xs-7"><br/></div>
				               </div>
				            <div met_end_tag met_if="isField"></div>
							<hr met_if = "isChoice" ng-hide="metaSection.$$choice_[[choice]] != [[choiceIndex]]"/>
						</div>
						<!-- SECTION SUFFIX - included in the content it will be hidden or duplicated -->
						<div met_if = 'isEndEvent'>
						    <table met_if = "isRepetition" style="width:100%" class="repetitive-section-footer">
						        <tr style="background-color:#f9f9f9">
						            <td style="text-align:left;width:auto">
						            <span class="arrow_r"></span> [[headingNumberForHidden]].[[label]] </td>
						            <td><div style="float:right">
						                <button type="button" data-section-count="1" class="btn-link section-btn-link" ng-click="addSection($parent.section.[[name]], $parent.metaSection.[[name]], $index)">
						                	<span>{{locale['Add']}}</span>
						                </button>
              							<button type="button" data-section-count="1" class="close section-btn-close" ng-click="removeSection($parent.section.[[name]], $parent.metaSection.[[name]], $index)">
						                	<span>×</span>
						                </button>
												                
						            </div></td>
						        </tr>
						    </table>
						    <hr met_if = 'isChoice' />
						</div>
						<div met_end_tag met_if="isSection && isEndEvent && !isRepetition" class="met_lazy"></div>
						<div met_end_tag met_if = "isSection && isEndEvent" ></div>
					</div>
					<div met_end_tag met_if="isChildSed"></div>
					<div met_end_tag met_if="!isChildSed"></div>
				</div>
			</div>
		</div>
		</bg-pane>
		<bg-pane min-size="1">
 		<div class = "footer-content" ng-controller="FooterController" ng-cloak>
				<table ng-show="errors.length > 0" st-table="errorListDisplay" st-safe-src="errors" class="table table-condensed table-striped table-hover">
				<tbody>
 		 		<tr ng-repeat="row in errorListDisplay | orderBy:'level'">
    				<td width="95%" ng-click="showError(row)" class="wb-link" 
						ng-style="{'color':row.severity == 'Error'?'red':'orange'}">
						{{ row.severity }} :
						{{ row.message }}
					</td>
  				</tr>
  				</tbody>
			</table>
		</div>
 	 </bg-pane>
	 </bg-splitter>
	</div>
	<script>
	
	/*
	angular.module("sedAngularApp").run( function() {
		angular.module("sedAngularApp").lazy.controller("Controller[[sedNumber]]",["$scope", Controller[[sedNumber]]]);	
	});
	*/
	
	angular.module("sedAngularApp").lazy.controller("Controller[[sedNumber]]",["$scope", Controller[[sedNumber]]]);
	
	function Controller[[sedNumber]]($scope){
		
		$scope.VM = { splitterPosition:1 };
		
		$scope.contentDiv = "content-angular_[[sedNumber]]";
		
		$scope.errors = new Array();
	
		$scope.MODEL = [[sedFullJson]];
	
		$scope.META_MODEL = {
				"[[sedName]]":{
						"$$name" : "[[sedName]]",
						"$$heading":"[[headingNumberForHidden]]",
						"$$mandatory":true, 
						"$$repetition":false, 
						"$$type":"sed",
						"$$uuid":"[[sedName]]",
						"$$hasData":false,
		  		<div met_repeat="recursive.attributes">
		  			<div met_if = "!isEndEvent || isField">
		  				"[[name]]":<div met_if = "isRepetition && !isEnum">[</div>{
		  					"$$name":"[[name]]",
		  					"$$heading":"[[headingNumberForHidden]]",
		  					"$$mandatory":[[isMandatory]],
		  					"$$draftCritical":<div met_if="draftCritical">true</div><div met_if="!draftCritical">false</div>,
		  					"$$repetition":[[isRepetition && !isEnum]],
		  					<div met_if = "isSection">
		  					"$$isHidden": <div met_if="isHidden">true</div><div met_if="!isHidden">false</div>,
		  					</div>
		  					<div met_if = "isField">
		  					"$$isHidden": <div met_if="isHidden">true</div><div met_if="!isHidden">false</div>,
		  					</div>
		  					<div met_if = "hasRestrictions">
		  					"$$hasRestrictions":true,
		  					"$$restrictions": { [[restrictions]] },
		  					</div>
		  					<div met_if = "isChoice"> 
		  					"$$choice":[[choice]],
		  					"$$choiceIndex":[[choiceIndex]],
							</div>
							<div met_if = "hasFixedValue">
							"$$fixedValue":"[[fixedValue]]$",
		  					</div>
		  					"$$type":"[[htmlType]]",
		  					"$$uuid":0,
		  					"$$hasData":false<div met_if = "isSection">,</div>
		  			</div>
		  			<div met_if = "(isEndEvent || isField) && !isLastSibling">
						}<div met_if = "isRepetition && !isEnum">]</div>,
					</div>
		  			<div met_if = "(isEndEvent || isField) && isLastSibling">
						}<div met_if = "isRepetition && !isEnum">]</div>
					</div>
				</div>
			}
		};
	}
	
	/* Without flags */
	var INPUT = 
	{
		<div met_repeat = "recursive.attributes">
			<div met_if="htmlType=='enum'">
				<div met_if = 'enumFirstOccurence == 1'>
		"[[typeName]]":
		 [
			<div met_repeat="enumCodes">
				<div met_if ="!isLastSibling">
					{name: "["+"[[code]]"+"] [[labelEscaped]]", value: "[[code]]$", ticked: false},
				</div>
				<div met_if ="isLastSibling">
					{name: "["+"[[code]]"+"] [[labelEscaped]]", value: "[[code]]$", ticked: false}
				</div>
			</div>
		 ],
				</div>
			</div>
		</div>
		"structureEnd": {}
	};
	
	var ERROR_MESSAGES =
	{
		"section": "[[translate('section')]]",
		"field": "[[translate('field')]]",	
		"requiresdata": "[[translate('requires data')]]",
		"invalidformat": "[[translate('has invalid formatted data')]]",
		"norestriction": "[[translate('does not comply with restriction')]]"
	};
	
	var LOCALE =
	{
		"Add": "[[translate('Add')]]",
		"Translate": "[[translate('Translate')]]"
	};
	
	</script>	
</div>
