{% extends "layout.html" %}
{% load i18n %}

{% block content %}
	<div class="row">
		<div class="col-md-12">
			 <div class="breadcrumbs" style="line-height: 3;">
			 	 Experiment &nbsp;>&nbsp; Request a new Slice
			 </div>
		</div>
	</div>
	
	{% if errors %}
	<div class="row">
		<div class="col-md-12">
		<ul class="error">
		  {% for error in errors %}
		  <li>{{ error }}</li>
		  {% endfor %}
		</ul>
		</div>
	</div>
	{% endif %}
	
	<div class="row">
		<div class="col-md-5 col-md-offset-3">
			<form role="form" method="post">
			{% csrf_token %}
			  <div class="form-group">
			     <input type="hidden" id="email" value="{{ email }}" readonly="readonly">
			     <label>
			         Please enter a name for your slice <br />
			         <span class="sublabel">
			             The slice name should only contain letters, numbers and the underscore "_" (19 max length) <br />
			         </span>
			     </label>
			     <input type="text" class="form-control" name="slice_name" id="slice_name" maxlength="19" style="width:100%" placeholder="Slice name" value="{{slice_name}}" required="required">
			  </div>
			  <div class="form-group">
			      <label>
			          Select a project under which you want your slice to be created <br />
			          If your are not part of any projects you can <a href="/portal/project_request/">join or create one</a>
			      </label>
				<input type="text" class="form-control" id="authority_hrn" name="org_name" style="width:100%" placeholder="Project" 
				        title="Select a project under which you want to create your slice" required="required">
			  </div>
			  <div class="form-group">
			      <label>
			          Provide an URL for your experiment (not required)
			      </label>
			      <!-- <input type="text" class="form-control" name="url" id="url" style="width:100%" placeholder="Experiment URL (if one exists)"
				        title="Please provide the url of your experiment" value="{{url}}">
			  </div>
			  <div class="form-group">
			      <label>
                        Please provide a description of the purpose for your experiment
                   </label>
			  	  <textarea id="purpose" name="purpose" class="form-control" rows="6" placeholder="Experiment description" style="width:100%" 
				        title="Description of your experiment" required="required">{{ purpose }}</textarea>
			  </div> -->
			  <button type="submit" id=submit_pi class="btn btn-onelab"><span class="glyphicon glyphicon-plus"></span> Create slice</button>
			</form>
	
		</div>
	</div>
		
<script>
jQuery(document).ready(function(){
    var myprojects = JSON.parse(localStorage.getItem('projects'));
    $( "#authority_hrn" ).autocomplete({
        minLength: 0,
        source: myprojects,
        change: function (event, ui) {
                if(!ui.item){
                    //http://api.jqueryui.com/autocomplete/#event-change -
                    // The item selected from the menu, if any. Otherwise the property is null
                    //so clear the item for force selection
                    $("#authority_hrn").val("");
                }
        }
    }).bind('focus', function(){ $(this).autocomplete("search"); } );
    $('input[name=slice_name]').keyup(function(){
        this.value = this.value.toLowerCase();
    });
});
</script>
{% endblock %}