{{extend 'layout.html'}}

{{block head}}
<link rel="stylesheet" type="text/css" href="{{=URL('static/css', 'client.css')}}">
{{end}}

<div id="current_content">
    <form id="form_login">
        <input type="text" id="room_code" placeholder="Room Code" maxlength="4"><br><br>
        <input type="text" id="user_name" placeholder="User Name" maxlength="15"><br><br>
        <span id="form_login_error" class="error"></span><br>
        <input type="submit" value="Enter">
    </form>
</div>

{{block page_js}}
<script type="text/javascript">
    $("#form_login").on("submit", function(){
        $("#form_login_error").html();
        var payload = {"room_code": $("#room_code").val(), "user_name": $("#user_name").val()}
        AJAX_JSON("{{=URL('player', 'create')}}", payload, function(_code, _data){

            switch(_code){
                case 200:
                    break;
                case 404:
                    $("#form_login_error").html("Room could not be found.");
                    break;
                case 409:
                    $("#form_login_error").html("Please choose a different user name.");
                    break;
                case 422:
                    $("#form_login_error").html("Please provide valid values.");
                    break;
                default:
                    $("#form_login_error").html("Error");
            }

        });
        return false;
    });
</script>
{{end}}