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

{% block content %}

<div class="row">
	<h1><img src="{{ STATIC_URL }}img/icon_slices_small.png" alt="Request a Slice" /> Request a new Slice</h1>
</div>
{% if errors %}
<ul>
  {% for error in errors %}
  <li>{{ error }}</li>
  {% endfor %}
</ul>
{% endif %}

<div class="row">
  <form id="commentForm" class="form-horizontal" method="post">
  {% csrf_token %}
  <fieldset>

   <div class="form-group">
     <label for="email" class="col-xs-2 control-label">Experimenter</label>
     <div class="col-xs-4">
        <label class="col-xs-2 control-label">{{ email }}</label>
     </div>
     <div class="col-xs-6">
     	<p class="form-hint">Experimenter requesting a Slice</p>
     </div>
   </div>

   <div class="form-group">
     <label for="slice_name" class="col-xs-2 control-label">Slice Name</label>
     <div class="col-xs-4">
        <input type="text" name="slice_name" class="form-control" minlength="2" value="{{ slice_name }}" placeholder="Slice Name" required />
     </div>
     <div class="col-xs-6"> <p class="form-hint">The name of the slice you wish to create</p> </div>
   </div>

   <div class="form-group">
     <label for="authority_hrn" class="col-xs-2 control-label">Authority</label>
     <div class="col-xs-4">
       <div class="ui-widget">
           <input id="authority_hrn" name="authority_hrn" class="form-control" value="{{ authority_hrn }}" placeholder="Authority" required />
       </div>
    </div>
     <div class="col-xs-6"><p class="form-hint">An authority responsible for vetting your slice</p></div>
   </div>

   <div class="form-group">
     <label for="number_of_nodes" class="col-xs-2 control-label">Number of nodes</label>
     <div class="col-xs-4">
       <div class="ui-widget">
           <input id="number_of_nodes" name="number_of_nodes" class="form-control" value="{{ number_of_nodes }}" />
       </div>
    </div>
     <div class="col-xs-6"><p class="form-hint">Number of nodes you expect to request (informative)</p></div>
   </div>

   <div class="form-group">
     <label for="purpose" class="col-xs-2 control-label">Experiment purpose</label>
     <div class="col-xs-4">
       <div class="ui-widget">
           <textarea id="purpose" name="purpose" class="form-control" style="height:110px;" placeholder="Experiment Purpose" required>{{ purpose }}</textarea>
       </div>
    </div>
     <div class="col-xs-6">
     	<p class="form-hint">Purpose of your experiment (informative)</p>
     </div>
   </div>

	<div class="col-xs-2">
	</div>
	<div class="col-xs-4">
		<button class="submit btn btn-default" type="submit">Request Slice</button>
	</div>
  </fieldset>
  </form>
</div>
<script>
jQuery(document).ready(function(){
    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 %}