{% extends "layout.html" %}

{% block title %}
    Register
{% endblock %}

{% block main %}
    <form action="/register" method="post" id="form">
        <div class="form-group">
            <input autocomplete="off" autofocus class="form-control" name="username" placeholder="Username" id="username" type="text">
        </div>
        <div class="form-group">
            <input class="form-control" name="password" placeholder="Password" type="password">
        </div>
        <span id="availability"></span>
        <div class="form-group">
            <input class="form-control" name="confirmation" placeholder="confirm" type="password">
        </div>
        <button class="btn btn-primary" type="submit" id="btn">Register</button>
    </form>
    <script type="text/javascript">
        var username = document.getElementById("username");
        $(document).ready(function(){
            $('#btn').click(function (evt) {
                evt.preventDefault();
                $.get("/check", {username:username.value}, function(data){
                    if (data == false){
                        alert("Username is Taken")
                    }
                    else {
                        $('#form').submit();
                    }
                })
            })
        })
    </script>
{% endblock %}