<script>
	{{#if key}}
		back();
	{{/if}}
</script>
<form id="form" style="display:none;">
	<div>
		<input name="username" class="fill-width" placeholder="Username" id="login-username" type="text"/>
	</div>
	<div >
		<input id="login-password" class="fill-width" placeholder="Password" name="password" type="password"/>
	</div>
	<div>
		<input type="button" value="cancel" class="cancel"/>
		<input type="submit" value="login"/>
	</div>
</form>
<script>
	{{#unless key}}
		$(document).ready(function(){
			$('form#form').show().submit(function(){
				var data = $(this).serializeObject(),
					State = History.getState();
				for(var i in State.data){
					data[i] = State.data;
				}
				data.type = 'action';
				data.id = 'login';
				apiCall(data,function(d){
					if(!d.error){
						setKey(d.key);
						notify('login','You have logged in successfully');
						back(true);
					}else{
						setKey(null);
						$('#loading').hide();
					}
					return false;
				});
				return false;
			}).find('.cancel').click(function(){
				back(true);
				return false;
			});
		});
	{{/unless}}
</script>