<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-test">
  	<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 class="form-group" ng-controller="WbAngularSedCtrl">
					<div met_repeat="recursive.attributes">
						<div met_if="isChoice && !isEndEvent && choiceIndex == 0">
						<hr/><div class="col-xs-12">
						<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><br/>
		               	</div><br/>
		               	</div><hr/> 
		                </div>
						<div 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 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 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 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 met_start_tag met_if = "isSection && !isEndEvent && !isRepetition" class="met_lazy" ng-if="::shouldLoadSection"></div>
							<div met_if="isSection && !isChoice && !isEndEvent && level == 1" class="SECTION_ROW"    id="section_{{getNextUUID(metaSection)}}">
								<label class="control-label SECTION_ROW"> <dynheadingno headno="{{metaSection.$$headingIndexed}}" headname="{{metaSection.$$name}}"> </dynheadingno> [[label]] <i met_if = 'isMandatory'>*</i>
									<div 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 met_if="isSection && !isChoice && !isEndEvent && level > 1 " class="SUBSECTION_ROW" id="section_{{getNextUUID(metaSection)}}">
								<label class="subsection-control-label"> <dynheadingno headno="{{metaSection.$$headingIndexed}}" headname="{{metaSection.$$name}}"> </dynheadingno> [[label]] <i met_if = 'isMandatory'>*</i>
									<div 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 container-fluid-reset-padding" met_if_cond='ng-hide=isHidden?"false":"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 container-fluid-reset-padding" 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="subsection-control-label col-xs-3"> <dynheadingno headno="{{metaSection.[[name]].$$headingIndexed}}" headname="{{metaSection.[[name]].$$name}}"> </dynheadingno> [[label]] <!-- Total: {{metaModel.[[sedName]].$$elementsNo}} Index: {{metaSection.[[name]].$$elemNo}} --> <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?"false":"false"' institution="section" name="[[name]]" value="" id="field_{{getNextUUID(metaSection.[[name]])}}" style="width:100%" />
									<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?"false":"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?"false":"false"' class="form-control" type="text" 	value="" id="field_{{getNextUUID(metaSection.[[name]])}}" /><br/></div>
								<!--
								<div met_if="htmlType=='boolean'" class="col-xs-7"><input ng-model="section.[[name]]" class="checkbox" 	type="checkbox" value="false" id="field_{{getNextUUID(metaSection.[[name]])}}" /><br/></div>
								-->
								<!--
								<div met_if="htmlType=='boolean'" class="col-xs-7"><checkbox-met class="checkbox-met" type="checkbox-met" ng-model="section.[[name]]" met_if_cond='disabled=hasReadOnly?"true":"false"' 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?"false":"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?"false":"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?"false":"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]]" ng-click="radioClearSelection($parent.section,'[[name]]',$event)" met_if_cond='ng-disabled=hasReadOnly?"false":"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" theme="bootstrap" ng-model="section.[[name]]" met_if_cond='ng-disabled=hasReadOnly?"false":"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="{{locale['Noneselected']}}"> {{$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 translation="localLang" input-model="input.[[typeName]]" output-model="section.[[name]]" met_if_cond='is-disabled=hasReadOnly?"false":"false"' theme="bootstrap" tick-property="ticked" button-label="icon name" item-label="icon name value" 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">
										<!--  
										<input type="checkbox" checklist-model="section.[[name]]" checklist-value="option" output-properties="value" id="field_{{getNextUUID(metaSection.[[name]])}}"> {{option.name}}</input>
										-->
										<!--  
										<span>
											<checkbox-met type="checkbox-met" class="checkbox-met" ng-model-options="{ updateOn: 'default', debounce: 0 }" checklist-model="section.[[name]]" met_if_cond='disabled=hasReadOnly?"true":"false"' checklist-value="option" output-properties="value" id="field_{{getNextUUID(metaSection.[[name]])}}">
											</checkbox-met>
										</span>
										<span>{{option.name}}</span>
										-->
										<span>
											<input type="checkbox" class="checkbox-met" checklist-model="section.[[name]]" met_if_cond='ng-disabled=hasReadOnly?"false":"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'>
							<div met_if = "isRepetition" style="background-color:#f9f9f9;width:100%;text-align:right" class="repetitive-section-footer">
								<span class="arrow_r"></span> <dynheadingno headno="{{metaSection.$$headingIndexed}}" headname="{{metaSection.$$name}}"> </dynheadingno> [[label]]
								<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>
						    <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>
				</div>
			</div>
		</div>
		<!--
		<footer class = "south-back" ng-controller="FooterController" ng-cloak>
		-->
		</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">
				<!--  
				<thead>
				<tr>
					<th colspan="2" style="color:red;font-weight: bold;">ERROR LIST (click on each entry to scroll to the offending element)</th>
				</tr>
				<tr>
					<th colspan="2"><input st-search="" class="form-control" placeholder="Search ..." type="text"/></th>
				</tr>
				<tr>
					<th>Error message</th>
					<th>Error ID</th>
				</tr>
				</thead>
				-->
				<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.severityMessage }} :
						{{ row.message }}
					</td>
    				<!--  
    				<td width="5%" style="color:red">{{ row.id }}</td>
    				-->
  				</tr>
  				</tbody>
  				<!-- Pagination  
  				<tfoot>
					<tr>
						<td colspan="2" class="text-center">
							<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="5"></div>
						</td>
					</tr>
				</tfoot>
				-->
			</table>
    <!--  
		</footer>
	</ui-layout>
	-->
		</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();

		// isteven widget translations
		$scope.localLang = {
			selectAll       : LOCALE['Selectall'],
			selectNone      : LOCALE['Selectnone'],
			reset           : LOCALE['Reset'],
			search          : LOCALE['Search'],
			nothingSelected : LOCALE['Noneselected']
		};
	
		$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]]",
							"$$headingIndex": "0",
							"$$headingIndexed": "[[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>
			}
		};
	}
	
	
	/* With 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">
					{icon:"<img src='_forms/angular/img/flags/[[code]].png' />", name: "[[label]]", value: "[[code]]", ticked: false}, 
				</div>
				<div met_if ="isLastSibling">
					{icon:"<img src='_forms/angular/img/flags/[[code]].png' />", name: "[[label]]", value: "[[code]]", ticked: false}
				</div>
			</div>
		 ],
				</div>
			</div>
		</div>
		"structureEnd": {}
	};
	*/
	
	/* 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')]]",
		"error": "[[translate('Error')]]",
		"warning": "[[translate('Warning')]]",
		"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')]]",
		"Noneselected": "[[translate('None selected')]]",
		"Reset": "[[translate('Reset')]]",
		"Search": "[[translate('Search')]]",
		"Selectnone": "[[translate('Select None')]]",
		"Selectall": "[[translate('Select All')]]",
	};
	
	</script>	
</div>
