<style type="text/css">
.notice { display: none; }
</style>

<p>{"Choose a password for your new account."}</p>

<form method="POST" action="/user/login/newuser" id="signup-form">
<input type="hidden" name="redirect" value="{{ redirect }}" />
<input type="hidden" name="token" value="{{ token }}" />
<p>Your name:<br /><input type="text" name="name" size="40" value="{{ name }}" />
<span class="notice" id="name-notice">You must enter your name.</span></p>
<p>Email address:<br /><input type="text" name="email" size="40" value="{{ email }}" />
<span class="notice" id="email-notice">You must enter a valid email, or your email may already be registered.</span></p>
<p>Choose a password:<br /><input type="password" name="password" size="20" value="{{ password }}" />
<span class="notice" id="password-notice">Your password must be at least 6 characters.</span></p>
<p>Verify password:<br /><input type="password" name="verify" size="20" value="{{ verify }}" />
<span class="notice" id="verify-notice">Your password doesn't match.</span></p>
<p><input type="submit" value="Sign Up" /></p>
</form>

<script type="text/javascript" src="/js/jquery.verify_values.js"></script>
<script type="text/javascript">
$(function () {
	$('#signup-form').verify_values ({
		handler: 'user/login/newuser',
		callback: function (failed) {
			// highlight the failed elements
			for (var i = 0; i < failed.length; i++) {
				$('#' + failed[i] + '-notice').show ();
			}
		},
		reset: function (fields) {
			for (var i = 0; i < fields.length; i++) {
				$('#' + fields[i] + '-notice').hide ();
			}
		}
	});
	{% foreach failed %}
	$('#{{ loop_value }}-notice').show ();
	{% end %}
});
</script>
