{% extends "layout.html" %}

{% block content %}    


<div class="row">
	<div class="col-md-12">
	<h1><img src="{{ STATIC_URL }}icons/testbed-xs.png" alt="Join Federation" /> Request to add organization</h1>
	</div>
</div>
<div class="row">
	<div class="col-md-12">
  		<h3>Questions? <a href="/portal/contact" >Contact us</a></h3>
	</div>
</div>

<div class="row">
	<div class="col-md-12">
	<h3>
	Please provide information about your organization and designate a manager (you or another person) from your organization. <br>
	</h3>
	<p>
	OneLab is open to enterprise, to scientific researchers, and to educators. We grant manager access to people in positions of responsibility (e.g., executives, professors, senior researchers), and delegate to these managers the right to grant standard user access to other people in their organizations.
	</p>
	</div>
</div>

{% if errors %}
<div class="row">
    <ul class="error">
     {% for error in errors %}
     <li>{{ error }}</li>
     {% endfor %}
    </ul>
</div>
{% endif %}
<form id="joinForm" method="post">
<div class="row">
  
  {% csrf_token %}
  <div class="col-md-4">
  	<h3>Organization</h3>
  	
  	<div class="form-group">
    	<input type="text" id="site_name" name="site_name" value="{{ site_name }}"  style="width:200px" placeholder="Name of organization"maxlength="40" class="form-control" required>
    </div>
	<!--<div class="form-group">
    	<label for="root_authority_hrn">Root authority:</label>
	    <select id="root_authority_hrn" name="root_authority_hrn" class="form-control" required>
		   {% if root_authorities %}
		        {% for root_auth in root_authorities %}
		   <option>{{ root_auth.authority_hrn }}</option>
		        {% endfor %}
		   {% endif %}
		</select> 
               <div class="ui-widget">
                   <input id="root_authority_hrn" name="root_authority_hrn" class="form-control" value="{{ root_authority_hrn }}" required>
               </div>

	</div> -->
	<div class="form-group">
    	<input type="text" id="address_city" name="address_city" value="{{ address_city }}" style="width:200px" placeholder="City" maxlength="20" class="form-control">
  	</div>
	<div class="form-group">   
    	<input type="text" id="address_country" name="address_country" value="{{ address_country }}" style="width:200px" placeholder="Country" maxlength="20" class="form-control">
	</div>

	<div class="form-group">  
        <input type="text" id="site_abbreviated_name" name="site_abbreviated_name" value="{{ site_abbreviated_name }}" style="width:200px" 
		title="Maximum eight characters, joined, all lower case. Example: 'upmc' for Université Pierre et Marie Curie. This will be used by the system as an identifier for the organization." placeholder="Short name" maxlength="8" class="form-control" required>
    </div>
	<div class="form-group">  
        <input type="text" id="site_url" name="site_url" value="{{ site_url }}" style="width:200px" placeholder="http://" maxlength="128" class="form-control" required>
    </div>
  </div>
  
  <div class="col-md-4">
  	<h3>Manager</h3>

	<div class="form-group">
    	<input type="text" id="pi_first_name" name="pi_first_name" value="{{ pi_first_name }}" style="width:200px" placeholder="First name" maxlength="20" class="form-control" required>
    </div>
	<div class="form-group">    
		<input type="text" id="pi_last_name" name="pi_last_name" value="{{ pi_last_name }}" style="width:200px" placeholder="Last name" maxlength="20" class="form-control" required>
<!--
        <tr>
          <th><label class="" for="pi_title">PI Title: </label></th>
          <td><input type="text" id="pi_title" name="pi_title" value="{{ pi_title }}" size="6" maxlength="6" class="form-control "> </td>
        </tr>
-->
	</div>
	<div class="form-group">
    	<input type="email" id="pi_email" name="pi_email" value="{{ pi_email }}" style="width:200px" 
		title="We may e-mail the manager as part of the validation process, and in case any issues arise with the use of the system."
		placeholder="Email" maxlength="40" class="form-control" required>
	</div>
	<div class="form-group">
    	<input type="tel" id="pi_phone" name="pi_phone" value="{{ pi_phone }}" 
		title="We may phone the manager as part of the validation process, and in case any issues arise with the use of the system."
		style="width:200px" placeholder="Phone number"  maxlength="20" class="form-control">
    </div>
	<div class="form-group">
  		<input type="password"  id="password" name="pi_password"   class="form-control" style="width:200px" minlength="8" value="{{ password }}" placeholder="Password" required/>
	</div>
	<div class="form-group">
    	<input type="password"  id="confirmpassword" name="confirmpassword" style="width:200px"  minlength="8" class="form-control" value="" placeholder="Confirm Password" required/>
	</div>

	</div>
</div>
	<div class="form-group" >
		<input type="checkbox" name="agreement" value="agreement" required />&nbsp;&nbsp; I agree to the
<a href="/terms" target="_blank">terms and conditions.</a>

		<br><br>
		<button type="submit" class="btn btn-onelab">Submit</button>
	</div>
</form>
<script>

/*
jQuery(document).ready(function(){
  var availableTags = [
  {% if root_authorities %}
    {% for authority in root_authorities %}
    {value:"{{ authority.authority_hrn }}",label:"{{authority.authority_hrn}}"},
    {% endfor %}  
  {% else %}
    {value:"",label:"No authority found !!!"}
  {% endif %}
  ];
  jQuery( "#root_authority_hrn" ).autocomplete({
   source: availableTags,
   minLength: 0,
   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
       jQuery("#root_authority_hrn").val("");
     }
   }
   //select: function( event, ui ) {console.log(jQuery(this))}
  });
});
*/
</script>
{% endblock %}