
<div class="modal-header">
	<h3 class="modal-title">Add a new node</h3>
</div>
<div class="modal-body">
	<form id="form-add-node" name="formAddNode">
		<div class="newNodeSelect form-group">
			<label>Select template</label>
			<ui-select http://195.122.9.25/#/lab ng-model="selected.brname" on-select="viewTemplate($item, $model)">
				<ui-select-match placeholder="Select a template">
					<span ng-bind="$select.selected.fullname"></span>
				</ui-select-match>
				<ui-select-choices repeat="item in (tempList | filter: $select.search) track by item.brname">
					<span ng-bind="item.fullname"></span>
				</ui-select-choices>
			</ui-select>

			<!--<select class="form-control" ng-init="selectTemplate = ''" data-ng-model="selectTemplate" ng-change="viewTemplate()">
			<option value="">- Please Select -</option>
			<option ng-repeat="(x,y) in tempList" value="{{x}}">{{y}}</option>
			</select> -->
		</div>
		<div ng-init="viewTemplateSwitch=false" ng-show="viewTemplateSwitch" class="hideMe {{(viewTemplateSwitch) ? 'showMe': ''}}">
			<div class="row">
				<div class="col-md-6">
					<div class="form-group {{errorClass}}">
						<label>Node name</label>
						<input type="text" class="form-control" name="name" data-ng-model="templateData.options.name.value" placeholder="Enter node name" autofocus="autofocus" data-ng-pattern="restrictSpace"/>
						<span class="chars" ng-class="{'chars--active': formAddNode.name.$valid == false, 'chars': formAddNode.name.$valid == true}">Use only [A-Za-z0-9_- ]chars</span>
						<!-- <span class="help-block" data-ng-show="errorClass != ''" data-ng-bind="errorMessage"></span> -->
					</div>
				</div>
				<div class="col-md-6">
					<div class="form-group">
						<label>Number of nodes to add</label>
						<input class="form-control" data-ng-model="numberNodes"/>
					</div>
				</div>
			</div>
			
			<div class="form-group" ng-show="templateData.options.image.type != undefined">
				<label>Select image</label>
				<select class="form-control" data-ng-model="selectImage">
				<option value="">- Please Select -</option>
				<option ng-repeat="x in templateData.options.image.list" value="{{x}}">{{x}}</option>
				</select>
			</div>

			<div class="form-group" ng-show="templateData.options.uuid.type != undefined">
				<label>UUID</label>
				<input class="form-control" data-ng-model="templateData.options.uuid.value"/>
			</div>

			<div class="row parent-form">
				<div class="col-md-6">
					<label>Select icon to change it by click on </label>
					<div class="row form-group-selection" ng-click="show = !show">
						<div class="col-md-4">
							<img ng-src="/images/icons/{{selectIcon}}" ng-class="iconTempObj.replace('.png','').replace(' ','')+'_sm img-responsive'" style="margin: left;"/>
						</div>
						<div class="col-md-8">
							<label>{{selectIcon}}</label>
							<i class="fa fa-caret-down"></i>
							<input type="hidden" data-ng-model="selectIcon" value="{{selectIcon}}" />
						</div>
					</div>
				</div>
				<div class="col-md-2" ng-show="templateData.options.cpu.type != undefined">
					<div class="form-group" ng-show="templateData.options.cpu.type != undefined">
						<label>CPU</label>
						<input class="form-control" data-ng-model="templateData.options.cpu.value"/>
					</div>
				</div>
				<div class="col-md-2" ng-show="templateData.options.nvram.type != undefined">
					<div class="form-group" ng-show="templateData.options.nvram.type != undefined">
						<label>NVRAM</label>
						<input class="form-control" data-ng-model="templateData.options.nvram.value"/>
					</div>
				</div>
				<div class="col-md-2" ng-show="templateData.options.ram.type != undefined">
					<div class="form-group" ng-show="templateData.options.ram.type != undefined">
						<label>RAM</label>
						<input class="form-control" data-ng-model="templateData.options.ram.value"/>
					</div>
				</div>
				<div class="col-md-2">
					<div class="form-group" ng-show="templateData.options.delay.type != undefined">
						<label>Delay</label>
						<input class="form-control" data-ng-model="templateData.options.delay.value"/>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-md-6" ng-show="templateData.options.idlepc.type != undefined">
					<div class="form-group" ng-show="templateData.options.idlepc.type != undefined">
						<label>Idle PC</label>
						<input class="form-control" data-ng-model="templateData.options.idlepc.value"/>
					</div>
				</div>
				<div class="col-md-6">
					<div class="form-group" ng-show="templateData.options.slot1.type != undefined">
						<label>Slot 1</label>
						<select class="form-control" data-ng-model="selectSlot1">
						<option ng-repeat="(x,y) in templateData.options.slot1.list" value="{{x}}">{{y}}</option>
						</select>
					</div>
				</div>
			</div>
			<div class="row row-icon">
				<div class="col-md-12">
					<div class="container-img" ng-show="show">
						<div ng-repeat="(x,y) in templateData.options.icon.list" ng-click="select_image(x)" class="imageBlock">
							<div class="container__img">
								<img ng-src="/images/icons/{{x}}" />
							</div>
							<div class="container__text">{{y}}</div>
						</div>
					
					</div>
				</div>
			</div>
			

			<div class="row">
				<div class="col-md-3">
					<div class="form-group">
						<label>Axis X</label>
						<input class="form-control" data-ng-model="tempObject.pageX" placeholder="Enter the x coordinate"/>
					</div>
				</div>
				<div class="col-md-3">
					<div class="form-group">
						<label>Axis Y</label>
						<input class="form-control" data-ng-model="tempObject.pageY" placeholder="Enter the y coordinate"/>
					</div>
				</div>
				<div class="col-md-6">
					<div class="form-group" ng-show="templateData.options.ethernet.type != undefined">
						<label>{{templateData.options.ethernet.name}}</label>
						<input class="form-control" data-ng-model="templateData.options.ethernet.value"/>
					</div>
				</div>  
				<div class="col-md-6">
					<div class="form-group" ng-show="templateData.options.slot2.type != undefined">
						<label>Slot 2</label>
						<select class="form-control" data-ng-model="selectSlot2">
						<option ng-repeat="(x,y) in templateData.options.slot2.list" value="{{x}}">{{y}}</option>
						</select>
					</div>
				</div>
			</div>

			<div class="row">
				<div class="col-md-6">
					<div class="form-group" ng-show="templateData.options.config.type != undefined">
						<label>Startup configuration</label>
						<select class="form-control" data-ng-model="selectConfig">
							<option ng-repeat="(x,y) in templateData.options.config.list" value="{{x}}">{{y}}</option>
						</select>
					</div>
				</div>
				<div class="col-md-6">
					<div class="form-group" ng-show="templateData.options.console.type != undefined">
						<label>{{templateData.options.console.name}}</label>
						<select class="form-control" data-ng-model="selectConsole">
							<option ng-repeat="(x,y) in templateData.options.console.list" value="{{x}}">{{y}}</option>
						</select>
					</div>
				</div>
				<div class="col-md-6">
					<div class="form-group" ng-show="templateData.options.serial.type != undefined">
						<label>{{templateData.options.serial.name}}</label>
						<input class="form-control" data-ng-model="templateData.options.serial.value"/>
					</div>
				</div>
			</div>		
		</div>
	</form>
</div>

<div class="modal-footer">
	<button class="btn btn-success btn-flat" type="button" data-ng-click="addNode()" >Add</button>
	<button class="btn btn-dander btn-flat" type="button" data-ng-click="closeModal()">Close</button>
</div>
