<form id="form" class="table outline ui-corner-all">
	<div class="row">
		<span class="cell align-right">
			<label from="login" for="login-username">
				Username:
			</label>
		</span>
		<span class="cell">
			<input name="username" id="login-username" type="text"/>
		</span>
	</div>
	<div class="row">
		<span class="cell align-right">
			<label from="login" for="login-password">
				Password:
			</label>
		</span>
		<span class="cell">
			<input id="login-password" name="password" type="password"/>
		</span>
	</div>
	<div class="row">
		<div class="cell align-right">
			<input type="submit" value="login"/>
		</div>
		<div class="cell">
			<input type="button" value="cancel" class="cancel"/>
		</div>
	</div>
</form>
<script>
	{{#if key}}
		History.back();
	{{else}}
		$('form#form').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);
					History.go(-1);
				}else{
					setKey(null);
					$('#loading').hide();
				}
				return false;
			});
			return false;
		}).children('.cancel').click(function(){
			History.back();
			return false;
		});
	{{/if}}
</script>