<!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.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>

<!-- <script src="_forms/angular/js/src/sed_angular.js"></script> -->
<script src="_forms/angular/js/src/sed_angular_test.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" ng-controller = "Controller[[sedNumber]]" class="met-root">
	<h3 class="sedHeading-test">[[sedNumber]] - [[sedTitle]]</h3><br/>
	<div style="position:absolute;top:0;right:0;font-size:70%">SED API version: [[sedApiVersion]]</div>
	<!--
	<ui-layout class= "layout" options = "{sizes:['70%', '30%']}" >
	-->
	<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_[[sedNumber]]" class="content container-fluid"  ng-form="[[sedName]]" sedName="[[name]]" sedPackage="[[packageName]]" sedGVer="[[major]]" sedVer="[[minor]]" sedPatch="[[patch]]">
				<div class="tab-content met-content">
					<div class="form-group" ng-init="sedForm = [[sedName]]">
					form pristine: {{sedForm.$pristine}}
					form valid: {{sedForm.$valid}}
					form invalid: {{sedForm.$invalid}}
					form dirty: {{sedForm.$dirty}}
					
					<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='validate()' />
			               	<span met_label>[[choiceLabel]]</span><i met_if = 'isMandatory'>*</i><br/>
		               	</div>
		               	</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-class="'color' + ($index % 3)" 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]]" 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_if="isSection && !isChoice && !isEndEvent && level == 1" class="SECTION_ROW"    id="section_{{getNextUUID(metaSection)}}"><p>[[headingNumber]]. [[label]] <i met_if = 'isMandatory'>*</i><img met_if='hasXnote' height='24' width='24' src='_forms/angular/img/info.png' tooltip="[[xnote]]" tooltip-enable="true" tooltip-placement="right" tooltip-trigger="click"/></p></div>
							<div met_if="isSection && !isChoice && !isEndEvent && level > 1 " class="SUBSECTION_ROW" id="section_{{getNextUUID(metaSection)}}"><p>[[headingNumber]]. [[label]] <i met_if = 'isMandatory'>*</i><img met_if='hasXnote' height='24' width='24' src='_forms/angular/img/info.png' tooltip="[[xnote]]" tooltip-enable="true" tooltip-placement="right" tooltip-trigger="click"/></p></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 row" 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">[[headingNumber]]. [[label]] <i met_if = 'isMandatory'>*</i></label>
								<div met_if='hasXnote'> <img height='24' width='24' src='_forms/angular/img/info.png' tooltip="[[xnote]]" tooltip-enable="true" tooltip-placement="left" tooltip-trigger="click"/></div>
								<div met_if="htmlType=='string' " class="col-xs-7">
									<textarea met_if = "isLargeText"  ng-model="section.[[name]]" style="resize:vertical;" class="form-control" type="text" value="" rows="5" cols="30" id="field_{{getNextUUID(metaSection.[[name]])}}"><br/></textarea>
									<input    met_if = "!isLargeText" ng-model="section.[[name]]" class="form-control" type="text" 	value="" id="field_{{getNextUUID(metaSection.[[name]])}}" /><br/>
								</div>
								<div met_if="htmlType=='double' " class="col-xs-7"><input ng-model="section.[[name]]" 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]]" 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" 	ng-class="{'has-error-checkbox': validateForm && metaSection.[[name]].$$error}" type="checkbox" value="false" id="field_{{getNextUUID(metaSection.[[name]])}}" /><br/></div>
								-->
								<div met_if="htmlType=='boolean'" class="col-xs-7"><checkbox-met type="checkbox-met" class="checkbox-met" ng-model="section.[[name]]" ng-class="{'has-error-checkbox': validateForm && metaSection.[[name]].$$error}" id="field_{{getNextUUID(metaSection.[[name]])}}" /><br/></div>
								<div met_if="htmlType=='date'" class="col-xs-7" ng-controller="DatePicker1">
				            		<p class="input-group">
				              			<input type="text" class="form-control" datepicker-popup-met ng-model="section.[[name]]" 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="5" year-columns="5" time-arrow="forward" datepicker-mode="year" placeholder="dd-MM-yyyy" id="field_{{getNextUUID(metaSection.[[name]])}}" />
				              			<span class="input-group-btn">
				                			<button ng-class="{'has-error-date-button': validateForm && metaSection.[[name]].$$error}" 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 met_if = '!isRepetition && enumSize <= 5' ng-model="section.[[name]]" ng-repeat="option in input.[[typeName]] track by $index" type="enumCodesSingle">
					                   <input type="radio" ng-class="{'has-error-radio': validateForm && metaSection.[[name]].$$error}" ng-model="section.[[name]]" value="{{option.value}}" id="field_{{getNextUUID(metaSection.[[name]])}}"> {{option.name}}<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]]" reset-search-input="false" lazy-load="true" id="field_{{getNextUUID(metaSection.[[name]])}}">
					                   	<ui-select-match 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 translation="localLang" input-model="input.[[typeName]]" output-model="section.[[name]]" theme="bootstrap" tick-property="ticked" button-label="icon name" item-label="icon name value" output-properties="value" on-reset="fReset()" lazy-load="true" 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" ng-class="{'has-error-checkbox': validateForm && metaSection.[[name]].$$error}" checklist-model="section.[[name]]" checklist-value="option" output-properties="value" id="field_{{getNextUUID(metaSection.[[name]])}}"> {{option.name}}</input>
									</div>
									<br/>
				                </div>
				                
				                <label class="control-label col-xs-2" style="font-size:80%" ng-show="validateForm && metaSection.[[name]].$$error">{{metaSection.[[name]].$$error}}</label>
				                <label class="control-label col-xs-2" style="font-size:80%" ng-show="validateForm && metaSection.[[name]].$$warning && !metaSection.[[name]].$$error">{{metaSection.[[name]].$$warning}}</label>
				               </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="float:auto;width:100%" class="repetitive-section-footer">
						        <tr style="background-color:#EAEAFF">
						            <td style="text-align:left;width:auto">
						             <span style="color: red; font-weight: bold; font-size: 13.0pt; font-family: 'Wingdings 3'">P</span> [[headingNumber]].[[label]] </td>
						            <td><div style="float:right">
						                <button type="button" data-section-count="1" ng-click="addSection($parent.section.[[name]], $parent.metaSection.[[name]], $index)">+</button>
						                <button type="button" data-section-count="1" ng-click="removeSection($parent.section.[[name]], $parent.metaSection.[[name]], $index)">-</button>
						            </div></td>
						        </tr>
						    </table>
						    <hr met_if = 'isChoice' />
						</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 = "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.severity }} :
						{{ row.message }}
					</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>
</body>
<script>

angular.module("sedAngularApp").lazy.controller("Controller[[sedNumber]]",["$scope", Controller[[sedNumber]]]);

function Controller[[sedNumber]]($scope){
	
	$scope.VM = { splitterPosition:1 };
	
	$scope.contentDiv = "content_[[sedNumber]]";
	
	$scope.errors = new Array();

	// isteven widget translations
	$scope.localLang = {
		selectAll       : "Select All",
		selectNone      : "Select None",
		reset           : "Reset",
		search          : "Search",
		nothingSelected : LOCALE['Noneselected']
	};

	$scope.MODEL = [[sedFullJson]];

	$scope.META_MODEL = {
			"[[sedName]]":{
					"$$name" : "[[sedName]]",
					"$$heading":"[[headingNumber]]",
					"$$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":"[[headingNumber]]",
	  					"$$mandatory":[[isMandatory]], 
	  					"$$repetition":[[isRepetition && !isEnum]], 
	  					<div met_if = "isChoice"> 
	  					"$$choice":[[choice]],
	  					"$$choiceIndex":[[choiceIndex]],
	  					</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')]]",
		"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')]]"
	};
	
</script>

</html>