<div ng-controller = "Controller[[sedNumber]]ReadThumbnail" class="met-root-thumb">
	<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 = "!uiHintThumbnail" met_skip_children/> 
						<div met_if = "uiHintThumbnail">
							<div met_if="isChoice && !isEndEvent && choiceIndex == 0">
							<div>
							<div met_repeat="choices" ng-hide="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>
			               	</div>
			                </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">[[headingNumberForHidden]]. [[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">[[headingNumberForHidden]]. [[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">[[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">
										<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]])}}" ng-disabled="true"><br/></textarea>
										<input    met_if = "!isLargeText" ng-model="section.[[name]]" class="form-control" type="text" 	value="" id="field_{{getNextUUID(metaSection.[[name]])}}" ng-disabled="true"/><br/>
									</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}}" 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>
			
						                <!-- 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> [[headingNumberForHidden]].[[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>
					<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]]ReadThumbnail",["$scope", Controller[[sedNumber]]ReadThumbnail]);
	
	function Controller[[sedNumber]]ReadThumbnail($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]], 
		  					"$$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>
		  					"$$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>
