<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>[[sedTitle]]</title>
<meta charset="utf-8" />
<!-- the next meta info is used for some compatibility issue in IE11 -->
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta sedName="[[name]]" sedPackage="[[packageName]]" sedGVer="[[major]]" sedVer="[[minor]]" sedPatch="[[patch]]"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<link href="_forms/angular/css/bootstrap.min.css" rel="stylesheet" />
<!-- http://isteven.github.io/angular-multi-select CSS -->
<link href="_forms/angular/css/isteven-multi-select.css" rel="stylesheet" />
<link href="_forms/angular/css/select.css" rel="stylesheet" />
<link href="_forms/angular/css/sed_angular_common_MET.css" rel="stylesheet" />
<link href="_forms/angular/css/sed_angular_common.css" rel="stylesheet" />
<link href="_forms/angular/css/splitter.css" rel="stylesheet" />
<link href="_forms/angular/css/style.css" rel="stylesheet" />

<script src="_forms/angular/js/lib/angular.js"></script>
<script src="_forms/angular/js/lib/angular-animate.js"></script>
<script src="_forms/angular/js/lib/angular-sanitize.js"></script>
<script src="_forms/angular/js/lib/ui-bootstrap-tpls.js"></script>

<script src="_forms/angular/js/src/datePicker1.js"></script>
<!-- http://isteven.github.io/angular-multi-select JS -->
<script src="_forms/angular/js/src/isteven-multi-select.js"></script>
<!-- https://vitalets.github.io/checklist-model JS -->
<script src="_forms/angular/js/src/checklist-model.js"></script>
<!-- ui-select files -->
<script src="_forms/angular/js/src/select.js"></script>
<!-- http://lorenzofox3.github.io/smart-table-website/ -->
<script src="_forms/angular/js/src/smart-table.js"></script>
<!-- RINA style checkbox -->
<script src="_forms/angular/js/src/angular-bootstrap-checkbox-met.js"></script>
<!-- IR widget -->
<script src="_forms/angular/js/src/angular-bootstrap-IR.js"></script>
<!-- TR widget -->
<script src="_forms/angular/js/src/angular-bootstrap-TR.js"></script>
<!-- DH widget -->
<script src="_forms/angular/js/src/angular-bootstrap-DH.js"></script>

<!-- <script src="_forms/angular/js/src/sed_angular.js"></script> -->
<script src="_forms/angular/js/src/sed_angular_common.js"></script>
<script src="_forms/angular/js/src/sed_angular_common_MET.js"></script>
<script src="_forms/angular/js/src/sed_angular_common_RINA.js"></script>

</head>
<body ng-app="sedAngularApp">
	<div ng-controller = "Controller[[sedNumber]]" class="met-root">
		<div>
			<h3 class="sedHeadingAC">[[sedNumber]] - [[sedTitle]] <br/> [[article]]</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="layoutAC">
		<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]])}}" /><br/>
									</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]]" ng-click="radioClearSelection($parent.section,'[[name]]',$event)" 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="{{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?"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'>
								<div met_if = "isRepetition" style="background-color:#f9f9f9;width:100%;text-align:right" class="repetitive-section-footer">
									<span class="arrow_r"></span> [[headingNumberForHidden]].[[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 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.severityMessage }} :
							{{ 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();

			// 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]]",
								"$$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')]]",
			"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>

</body>
</html>
