<template>

	<section class="au-animate">
		<h4>Login form</h4>
		<form submit.delegate="save()">

			<div class="form-group">
				<label class="control-label" for="login">Username:</label>
				<input type="text" id="login" class="form-control" name="login" placeholder="username"
                       value.bind="user.login & validate"  />
			</div>

			<div class="form-group">
				<label class="control-label" for="pwd">password:</label>
				<input type="password" id="pwd" class="form-control" name="password" placeholder="password"
                       value.bind="user.password & validate" />
			</div>

			<div class="form-group">
				<label class="control-label" for="pwd2">password2:</label>
				<input type="password" id="pwd2" class="form-control" name="password2" placeholder="retype password"
                       value.bind="user.password2 & validate" />
			</div>

			<hr/>

			<div class="form-group">
				<label class="control-label" for="TitleTxt">Title:</label>
				<input type="text" id="TitleTxt" class="form-control" name="title" placeholder="Title"
                       value.bind="book.title & validate"  />
			</div>

			<div class="form-group">
				<label class="control-label" for="AuthorTxt">Author:</label>
				<input type="text" id="AuthorTxt" class="form-control" name="author" placeholder="author name"
                       value.bind="book.author & validate"  />
			</div>

			<button type="submit" class="btn btn-primary">Submit</button>

			<h3>Latest validation result: ${message}</h3>

			<ul>
				<li repeat.for="error of validationCtrl.errors">
					${error.message}
				</li>
			</ul>

		</form>



	</section>
</template>