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

{% block content %}
	<div class="row">
		<div class="col-md-12">
		<h1><img src="{{ STATIC_URL }}icons/slices-xs.png" alt="Request a Slice" /> Request a new Slice</h1>
		</div>
	</div>

	{% if errors %}
	<ul>
	  {% for error in errors %}
	  <li>{{ error }}</li>
	  {% endfor %}
	</ul>
	{% endif %}
	<div class="row">
		<div class="col-md-4">&nbsp;</div>
	</div>
	<div class="row">
		<div class="col-md-8">
			<form role="form" method="post">
			{% csrf_token %}
			  <div class="form-group">
			    <label for="email">Experimenter</label>
			    <input type="email" class="form-control" id="email" style="width:300px" value="{{ email }}" readonly="readonly">
			  </div>
			  <div class="form-group">
			    <label for="slice_name">Slice Name</label>
			    <input type="text" class="form-control" name="slice_name" id="slice_name" style="width:300px" placeholder="Slice Name" required="required">
			  	<p class="help-block"></p>
			  </div>
			  <div class="form-group">
			    <label for="authority">Authority</label>
				{%if 'is_pi'  in pi %}
				<input type="text" class="form-control" id="authority_hrn" name="authority_hrn" style="width:300px" placeholder="Authority" 
				title="An authority responsible for vetting your slice" required="required">
				{%else%}
			    <input type="text" class="form-control" id="authority_hrn" name="authority_hrn" placeholder="Authority" style="width:300px" 
				title="An authority responsible for vetting your slice" required="required" readonly="readonly">
				{%endif%}
			  </div>
			  <div class="form-group">
			    <label for="number_of_nodes">Number of Nodes</label>
			    <input type="number" class="form-control" name="number_of_nodes" id="number_of_nodes" style="width:300px" placeholder="Number of Nodes"
				title="Number of nodes you expect to request (informative)">
			  </div>
			  <div class="form-group">
			    <label for="purpose">Experiment Purpose</label>
			  	<textarea id="purpose" name="purpose" class="form-control" rows="6" placeholder="Experiment Purpose" style="width:300px" 
				title="Purpose of your experiment (informative)" required="required">{{ purpose }}</textarea>
			  </div>
			  <button type="submit" class="btn btn-primary">Request Slice</button>
			</form>
	
		</div>
	</div>
		
<script>
jQuery(document).ready(function(){
	
	$("#authority_hrn").load("/rest/user/", {"fields" : ["parent_authority"], "filters": {"user_hrn": "{{ user_hrn }}"}}, function(data) {
		var jsonData = JSON.parse(data)
        $(this).attr("value", jsonData[0]['parent_authority']);
    });
    var availableTags = [
     {% if authorities %}
         {% for authority in authorities %}
             {% if authority.name %}
                 {value:"{{ authority.authority_hrn }}",label:"{{authority.name}}"},
             {% else %}
                 {value:"{{ authority.authority_hrn }}",label:"{{authority.authority_hrn}}"},
             {% endif %}
         {% endfor %}    
     {% else %}
         {value:"",label:"No authority found !!!"}
     {% endif %}
    ];
    $( "#authority_hrn" ).autocomplete({
      source: availableTags,
      minLength: 0,
      select: function( event, ui ) {console.log(jQuery(this))}
    });
});
</script>
{% endblock %}