<div ng-controller = "Controller[[sedNumber]]Read" class="met-root-read">
	<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>
	<div class= "layout">
		<div ng-controller="SedController" ng-cloak ng-init = "section = model.[[sedName]]; metaSection = metaModel.[[sedName]]">
			<div id = "content-angular_[[sedNumber]]" class="content-angular container-fluid"  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 class="col-xs-12">
						<div met_repeat="choices" ng-hide="false" ng-disabled="true">
			               	<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><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?"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 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]] <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]]" style="resize:vertical;" class="form-control" type="text" value="" rows="5" cols="30" sedName="[[sedName]] - [[sedTitleGlobal]]" elName="[[headingNumberForHidden]]. [[labelNoQuotes]]" id="field_{{getNextUUID(metaSection.[[name]])}}" disabled="true"><br/></trwidget>
									<input    met_if = "!isLargeText" ng-model="section.[[name]]" class="form-control" type="text" 	value="" id="field_{{getNextUUID(metaSection.[[name]])}}" ng-disabled="true"/><div met_if = "!isLargeText"><br/></div>
								</div>
								<div met_if="htmlType=='string' && isSpecialField && isIRField" class="col-xs-7">
									<irwidget ng-model="section.[[name]]" institution="section" name="[[name]]" value="" id="field_{{getNextUUID(metaSection.[[name]])}}" disabled="true" /><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]])}}" ng-disabled="true" /><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]])}}" ng-disabled="true" /><br/></div>
								<div met_if="htmlType=='boolean'" class="col-xs-7">
									<span>
										<input type="checkbox" class="checkbox-met" ng-model="section.[[name]]" ng-disabled="true" 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">
				              			<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" met_if_cond='time-arrow=rinaUIDateDirection=="forwardLooking"?"forward":"backward"' datepicker-mode="year" placeholder="" id="field_{{getNextUUID(metaSection.[[name]])}}" ng-disabled="true"/>
				            		<br/>
						        </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)" value="{{option.value}}" id="field_{{getNextUUID(metaSection.[[name]])}}" ng-disabled="true"> <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]]" reset-search-input="false" lazy-load="true" id="field_{{getNextUUID(metaSection.[[name]])}}" ng-disabled="true">
					                   	<ui-select-match allow-clear="false" 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>

									<!--  new variant -->					                
					                <input met_if = '!isRepetition && enumSize > 5 && 1==0' type="enum" ng-model="section.[[name]]" class="form-control" type="text" lazy-load="true" value="" id="field_{{getNextUUID(metaSection.[[name]])}}" ng-disabled="true"/>
		
					                <!-- 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" output-properties="value" on-reset="fReset()" lazy-load="true" id="field_{{getNextUUID(metaSection.[[name]])}}" is-disabled="true">
									</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]]" ng-disabled="true" 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>
						</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:auto;text-align:right;margin-right:10px" class="repetitive-section-footer">
						        <span class="arrow_r"></span> <dynheadingno headno="{{metaSection.$$headingIndexed}}" headname="{{metaSection.$$name}}"> </dynheadingno> [[label]]
						    </div>
						</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>
	</div>
	<script>
	
	angular.module("sedAngularApp").lazy.controller("Controller[[sedNumber]]Read",["$scope", Controller[[sedNumber]]Read]);
	
	function Controller[[sedNumber]]Read($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]], 
		  					"$$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>
