<div class="page-header" >
	<div class="container" autoscroll="true">
		<div class="row">
			<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
				<h1 id="headerTitle">Edit NSD</h1>
				<h3>by user: {{exprm.owner.username}}</h3>

				<form class="form-horizontal" name="form" role="form" ng-submit="submitUpdateExperiment(true)" id="updateExperiment Form">
					<div class="form-group">
						<label for="exprm.name" class="col-sm-2 control-label">Name</label>
						<div class="col-sm-10">
							<input type="text" class="form-control"  ng-model="exprm.name" value="" placeholder="name..." ng-disabled="true" />
						</div>
					</div>
					<div class="form-group">
						<label for="exprm.version" class="col-sm-2 control-label">Version</label>
						<div class="col-sm-10">
							<input type="text" class="form-control"  ng-model="exprm.version" value="" placeholder="" ng-disabled="true" />
						</div>
					</div>
					<div class="form-group">
						<label for="exprm.shortDescription" class="col-sm-2 control-label">Teaser</label>
						<div class="col-sm-10">
							<input type="text" class="form-control"  ng-model="exprm.shortDescription" value="" placeholder="" />
						</div>
					</div>
					<div class="form-group">
						<label for="exprm.longDescription" class="col-sm-2 control-label">Description</label>
						<div class="col-sm-10">
							<textarea class="form-control"   rows="5"  ng-model="exprm.longDescription" value="" placeholder="" ng-disabled="true" ></textarea>
						</div>
					</div>
					<div class="form-group">
						<label for="exprm.uploadedAppIcon" class="col-sm-2 control-label">Logo</label>
						<div class="col-sm-10">
							<input type="file" class="form-control" name="uploadedAppIcon"  file-model="uploadedAppIcon" placeholder="" />
							<p class="help-block">Select logo image</p>
							
						</div>
					</div>
					
					<!-- 
					<div class="form-group">
						<label for="exprm.uploadedExperimentFile" class="col-sm-2 control-label">Package File (.tar.gz)</label>
						<div class="col-sm-10">
							<input type="file" class="form-control" name="uploadedExperimentFile"  file-model="uploadedExperimentFile" placeholder="" />
							<p class="help-block">Select file (.tar.gz)</p>
							
						</div>
					</div>
					
				
					
					 -->
					
					<div class="form-group">
						<label for="exprm.category" class="col-sm-2 control-label">Category ( <span ng-repeat="appcat in exprm.categories">{{appcat.name}} </span> )</label>
						<div class="col-sm-10">
							<select multiple class="form-control" ng-model="exprm.categories" ng-options="cat.name for cat in categories" >
							</select>
						</div>
					</div>
					
					<div class="form-group">
						<label for="exprm.termsOfUse" class="col-sm-2 control-label">Terms of Use</label>
						<div class="col-sm-10">
							<textarea  rows="5" class="form-control"  ng-model="exprm.termsOfUse" value="" placeholder="" ></textarea>
						</div>
					</div>
					
		
					<div class="form-group">
						<label for="exprm.descriptor" class="col-sm-2 control-label">Descriptor</label>
						<div class="col-sm-10">
							<textarea  rows="5" class="form-control"  ng-model="exprm.descriptor" value="" placeholder="" ng-disabled="true" ></textarea>
						</div>
					</div>
					
					<div class="form-group" ng-show="loggedinportaluser.roles.indexOf('ROLE_ADMIN')>-1">
						<label for="name" class="col-sm-2 control-label">Published</label>
						<div class="col-sm-1">
							<input type="checkbox" class="form-control"  ng-model="exprm.published" value=""  />
							 
						</div>
					</div>
					
					<div class="form-group" ng-show="loggedinportaluser.roles.indexOf('ROLE_ADMIN')>-1">						
						<label for="name" class="col-sm-2 control-label">Valid</label>
						<div class="col-sm-1">
							<input type="checkbox" class="form-control"  ng-model="exprm.valid" value=""  />
							 
						</div>
					</div>

						<div class="form-group">
						<label for="exprm.extensions" class="col-sm-2 control-label">Extension variables</label>
						<div class="col-sm-10">
							<div id="tableExtensions" class="table-editable">
							    <span class="table-add glyphicon glyphicon-plus" ng-click="addExtension(exprm)"></span>
							    <table class="table">
							      <tr>
							        <th>Name</th>
							        <th>Value</th>
							        <th></th>
							      </tr>
							      <tr class="" ng-repeat="ext in exprm.extensions">
							        <td><pre contenteditable="true" ng-model="ext.name"></pre></td>
							        <td><pre contenteditable="true" ng-model="ext.value"></pre></td>
							        <td>
							          <span class="table-remove glyphicon glyphicon-remove" ng-click="removeRow(ext)"></span>
							        </td>
							       
							      </tr>
							      
							    </table>
							  </div>
						</div>
					  </div>					
					  
					  
					                    <div class="form-group" ng-show="loggedinportaluser.roles.indexOf('ROLE_ADMIN')>-1">
						<label for="exprm.containers" class="col-sm-2 control-label">MANO On Boarding</label>
						<div class="col-sm-10">							
							<p class="help-block">Manage NSD on-boarding to target MANO providers</p>
							
								<button type="button" class="btn btn-primary" ng-click="onboardToMANOprovider()">On-board to MANO provider</button>							
								<p></p>
								<div class="col-sm-12" role="tabpanel">
								  <!-- Nav tabs -->
								  <ul class="nav nav-tabs" role="tablist" >
								    <li ng-repeat="vobd in exprm.experimentOnBoardDescriptors" role="presentation" ng-class="{'active': isActive(vobd) }">
								    		<a data-target="{{vobd.deployId}}" aria-controls="{{vobd.deployId}}" role="tab" data-toggle="tab" ng-click="activateVOBD(vobd)" >On board ID:{{vobd.id}}</a></li>
								   </ul>
								
								  <!-- Tab panes -->
								  <div class="col-sm-12 tab-content"  >
								    <div ng-repeat="vobd in exprm.experimentOnBoardDescriptors" role="tabpanel"  ng-class="{'tab-pane':true, 'active': isActive(vobd) }" id="{{vobd.id}}">
								    <p>Select MANO provider to on-board NSD {{exprm.name}}</p>
								    
								    <select ng-disabled="vobd.onBoardingStatus === 'ONBOARDED' || vobd.onBoardingStatus === 'ONBOARDING' " ng-model="vobd.obMANOprovider" ng-options="sm.name for sm in selectedMANOProviders" ></select>								    
								    <button ng-disabled="vobd.onBoardingStatus === 'ONBOARDED' || vobd.onBoardingStatus === 'ONBOARDING' " type="button" class="btn btn-info" ng-click="onBoardExperiment( vobd, vobd.obMANOprovider)">On-Board NSD</button>
									<button ng-disabled="vobd.onBoardingStatus === 'ONBOARDED' || vobd.onBoardingStatus === 'ONBOARDING' " type="button" class="btn btn-warning" ng-click="deleteExperimentOnBoardDescriptor( vobd )">Delete</button>	
									<button ng-show="vobd.onBoardingStatus === 'ONBOARDING'" type="button" class="btn  pull-right" ><i class="fa fa-spinner fa-spin fa-fw " aria-hidden="true"></i></i>Waiting...</button>	
								    
								    
								    <div ng-show="vobd.onBoardingStatus!=''" class="col-sm-12 deployArtifact shadowed" > 
								    	<div class="col-sm-12"> 
								    	<p> <b>Status: {{vobd.onBoardingStatus}} </b>  (target MANO provider: {{vobd.obMANOprovider.name}})
								    	<br/> Deployment ID: {{vobd.deployId}} 
								    	<br/> NSD ID at MANO Provider : {{vobd.vxfMANOProviderID}}
								    	<br/> On-boarded at: {{vobd.lastOnboarding | date:'medium' }}  
								    	<button  ng-disabled="vobd.onBoardingStatus != 'UNKNOWN'  && vobd.onBoardingStatus != 'ONBOARDED'  && vobd.onBoardingStatus != 'ONBOARDING' " type="button" class="btn btn-warning pull-right" ng-click="removeExperimentFromMANO( vobd, exprm)">Off-board NSD from MANO</button>
								    	 </p>
								    	</div>
								    
								    </div>								  
								  </div>								
								</div>							
								

							</div>
						</div>
					</div>
					
					
					
                  
					<div class="form-group">
						<div class="col-sm-offset-2 col-sm-10">
							<input class="btn btn-default" type="submit" value="Save" />
						</div>
					</div>
				</form>

			</div>
		</div>
	</div>
</div>