<%- include ../partials/header.ejs %>

<main class="container">
    <!-- Message Area -->
    <% if(messages.length > 0) {%>
        <div class="alert alert-danger">
            <%= messages %>
        </div>
    <% } %>

    <div class="row">
        <div class="offset-md-4 col-md-4">
            <h1>Please Register</h1>
            <form method="POST" autocomplete="off">
                <fieldset class="form-group">
                    <label for="username">Username: </label>
                    <input type="text" class="form-control"
                    name="username" placeholder="Enter username"
                    id="username" required autofocus>
                </fieldset>

                <fieldset class="form-group">
                    <label for="password">Password: </label>
                    <input type="password" class="form-control"
                    name="password" placeholder="Enter password"
                    id="password" required>
                </fieldset>

                <fieldset class="form-group">
                    <label for="email">Email: </label>
                    <input type="email" class="form-control"
                    name="email" placeholder="Enter Email Address"
                    id="email" required>
                </fieldset>

                <fieldset class="form-group">
                    <label for="displayName">Display Name: </label>
                    <input type="text" class="form-control"
                    name="displayName" placeholder="Enter Display Name"
                    id="displayName" required>
                </fieldset>

                <fieldset class="form-group text-right">
                    <input type="submit" class="btn btn-success" value="Register">
                    <a href="/">
                        <input type="button" class="btn btn-warning" value="Cancel">
                    </a>
                </fieldset>

            </form>
        </div>
    </div>


</main>

<%- include ../partials/footer.ejs %>