{{define "title"}}Register{{end}}

{{template "base" .}}

{{define "more-head"}}
<script>
function checkPasswordMatchUi() {
    if(checkPasswordMatch())
        $("#divCheckPasswordMatch").html("Passwords match.");
    else
        $("#divCheckPasswordMatch").html("Passwords do not match!");
}

function checkPasswordMatch() {
    var password = $("#password").val();
    var confirmPassword = $("#password_confirm").val();
    return password == confirmPassword;
}

$(document).ready(function () {
    $("#password, #password_confirm").keyup(checkPasswordMatchUi);
    $('#invalidCredentials').hide(); 
    $('#loginForm').ajaxForm({
        beforeSubmit: function(a, b, c) {
            var match = checkPasswordMatch();
            if(!match){
                $("#divCheckPasswordMatch").fadeOut(300).fadeIn(300).fadeOut(300).fadeIn(300);
            }
            return match;
        },
        success: function() {
            window.location.href = "/dashboard";
        },
        error: function() {
            $('#invalidCredentials').show();
        }
    }); 
}); 
</script> 
{{end}}

{{define "main"}}
<form id="loginForm" action="/api/v1/user/register" method="POST" class="center-block">
    <div class="form-group">
        <label for="email">E-Mail</label>
        <input type="text" name="email" class="form-control" placeholder="E-Mail" />
    </div>

    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" name="name" class="form-control" placeholder="Name"  />
    </div>

    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" class="form-control" placeholder="Password" />
        <input type="password" id="password_confirm" class="form-control" placeholder="Verify password" />
    </div>
    
    <div id="divCheckPasswordMatch"></div>

    <div id="invalidCredentials">
        Username already exists
    </div>

    <input type="submit" value="Login" class="form-control" />

	<p>
		Existing user? <a href="/login">Login</a> instead!
	</p>
</form>
{{end}}