<%@ include file="/component/header.html"%>

<div class="container">
    <div id="signup-box" class="form-box">
        <div id="signup-heading" class="form-box-heading">
            <div class="form-box-heading-wrapper">
                <hr>
                <h1 class="txt-center">SIGN UP</h1>
                <hr>
            </div>
        </div>
        <div class="form-box-body" id="signup-box-body">
            <span class="color-red">${errorMessage}</span>
            <% if (request.getParameter("status") != null) {
               out.println("<span class='color-red'>SignUp Gagal</span>");
            }
            %>
            <form action="register" method="post" onsubmit="return validateForm(this)">
                <div class="form-box-body-wrapper">
                    <table border="0" class="form-box-table">
                        <tr>
                            <td class="table-label">

                                <label for="name" class="txt-right">Your Name</label>
                            <td>
                                <input type="text" name="name" id="name" placeholder="Name" class="form-input">                            </td>
                            </td>
                            <span class="error-text">

                            </span>

                        </tr>
                        <tr>
                            <td class="table-label">
                                <label for="username-form" class="txt-right">Username</label>

                            </td>
                            <td>
                                <input type="text" name="username" id="username-form"  class="form-input width-90" placeholder="Username" onblur="usernameAJAX()">
                                <div id="username-check-status" class="ajax-status">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="table-label">
                                <label for="email-form" class="txt-right">E-mail</label>
                            </td>
                            <td>
                                <input type="text" name="email" class="form-input width-90" placeholder="E-Mail" id="email-form" onblur="emailAJAX()">
                                <div id="email-check-status" class="ajax-status">
                                    <span></span>
                                </div>
                            </td>
                        </tr>

                        <tr>
                            <td class="table-label">
                                <label for="password-register" class="txt-right">Password</label>
                            </td>
                            <td>
                                <input type="password" name="password" class="form-input" id="password-register" placeholder="Password">
                            </td>
                        </tr>
                        <tr>
                            <td class="table-label">
                                <label for="confirm-password" class="txt-right">Confirm Password</label>
                            </td>
                            <td>
                                <input type="password" name="confirm-password" id="confirm-password" placeholder="Re-type Password" class="form-input">
                            </td>
                        </tr>
                        <tr>
                            <td class="table-label">
                                <label for="phone-number" class="txt-right">Phone Number</label>
                            </td>
                            <td>
                                <input type="text" name="phoneNumber" id="phone-number" placeholder="Phone Number" class="form-input">
                            </td>
                        </tr>
                    </table>
                    <div class="form-box-body-footer">
                        <div class="row">
                            <input type="checkbox" name="isDriver" id="is-driver" value="1">
                            <label for="is-driver"><small>Also sign me up as a driver!</small></label>
                        </div>
                        <div>
                            <a href="login"><small>Already have an account?</small></a>
                        </div>
                        <div class="txt-right button-container">
                            <button type="submit" class="form-input submit-button" id="register-submit-button">Register</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

</div>