{% extends "admin/base_site_login.html" %}
{% load i18n admin_static %}

{% block extrastyle %}{{ block.super }}
<link rel="stylesheet" type="text/css" href="/static/suit/bootstrap/css/bootstrap.min.css" media="all"/>
<link rel="stylesheet" type="text/css" href="{% static "planetstack.css" %}" />
<script src="{% static 'suit/js/jquery-1.9.1.min.js' %}"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
{% endblock %}


{% block bodyclass %}login{% endblock %}

{% block nav-global %}{% endblock %}

{% block content_title %}{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block content %}
{% if form.errors and not form.non_field_errors and not form.this_is_the_login_form.errors %}
<p class="errornote">
{% blocktrans count counter=form.errors.items|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktrans %}
</p>
{% endif %}

{% if form.non_field_errors or form.this_is_the_login_form.errors %}
{% for error in form.non_field_errors|add:form.this_is_the_login_form.errors %}
<p class="errornote">
    {{ error }}
</p>
{% endfor %}
{% endif %}
<div id="wrap">
<div id="content-main">
<h1><i class="icon-lock icon-white"></i> OpenCloud</h1>
<form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
  <div class="form-row">
    {% if not form.this_is_the_login_form.errors %}{{ form.username.errors }}{% endif %}
     {{ form.username }}
  </div>
  <div class="form-row">
    {% if not form.this_is_the_login_form.errors %}{{ form.password.errors }}{% endif %}
     {{ form.password }}
    <input type="hidden" name="this_is_the_login_form" value="1" />
    <input type="hidden" name="next" value="{{ next }}" />
  </div>
  <div class="submit-row">
    <input type="submit" class="btn btn-info" value="{% trans 'SIGN IN' %}" />
  </div>
        <div id="requestAccountLink">{% trans 'Request a new Account' %}</div>
</form>

<div id="request-account-form" title="Request an Account" style="display: none;">
	<form>
		<fieldset>
			<div class="request-form-row">
				<label for="request-first-name">First Name</label>
				<input type="text" name="request-first-name" id="request-first-name">
			</div>
			 <div class="request-form-row">
                                <label for="request-last-name">Last Name</label>
                                <input type="text" name="request-last-name" id="request-last-name">
                        </div>
			 <div class="request-form-row">
                                <label for="request-email">Email</label>
                                <input type="text" name="request-email" id="request-email">
                        </div>
			 <div class="request-form-row">
                                <label for="request-site-name">Site</label><br>
				<select id="request-site-name" name="request-site-name">
   					 <option>---------</option>
   					 <option>Stanford</option>
    					 <option>Washington</option>
    					 <option>Princeton</option>
    					 <option>GeorgiaTech</option>
    					 <option>MaxPlanck</option>
    					 <option>I2 Atlanta</option>
    					 <option>I2 Chicago</option>
    					 <option>I2 Houston</option>
   					 <option>I2 Kansas City</option>
    					 <option>I2 Los Angeles</option>
    					 <option>I2 New York</option>
    					 <option>I2 Salt Lake City</option>
    					 <option>I2 Seattle</option>
    					 <option>I2 Washington DC</option>
    					 <option>ON.Lab</option>
    					 <option>I2 Singapore</option>
    					 <option>Arizona</option>
				</select>
                        </div>
			<div class="submit-row">
    				<input id ="request-signup" class="btn btn-info" value="SIGN UP">
  			</div>
		</fieldset>
	</form>
</div>
</div>
</div>


<script type="text/javascript">
$(function() {
	initRequest();
});
function initRequest(){
	$.ajax({
			url: '/tenantview',
			dataType: 'json',
			success: function (data) {
				var sites = data['sitesToBeRequested'];
				console.log(sites);
				for (site in sites){
					$("#request-site-name").append("<option>" + site + "</option>");
				}
			}
		});
}
$("#requestAccountLink").unbind().click(function(){
	$("#request-account-form").dialog({
					autoOpen: false,
					modal: true,
					dialogClass: "requestDialog",
				});
				$("#request-account-form").dialog("open");
})
$("#request-signup").unbind().click(function(){
							$.ajax({
								url: '/requestaccess/',
								dataType: 'json',
								data: {
									email: $("#request-email").val(),
									firstname: $("#request-first-name").val(),
									lastname: $("#request-last-name").val(),
									site: $("#request-site-name").val(),
									csrfmiddlewaretoken: "{{ csrf_token }}", // < here 
									state: "inactive"
								},
								async: false,
								type: 'POST',
								success: function () {
									$("#request-account-form").dialog("close");	
									alert("Your request has been submitted");							
								},
								error:function (xhr, textStatus, thrownError){
         							   alert("Error:", textStatus + " " + xhr.responseText);
        						        }
							});
})
document.getElementById('id_username').focus()
</script>
</div>
</div>
{% endblock %}