<!DOCTYPE html>
<html lang = "en">
    <body>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.0/semantic.min.css" integrity="sha512-PwhgdrueUt7iVICnZMjYcbiLalCztrVfzUIYXekIK8hZu4DQP141GrKh6fUHmNERWi4bGdBXIZqtBZnsSzHEMg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
      <link rel="stylesheet" href="styles.css">
        <div class="ui center aligned grid container">
          <div class="six wide column">
            <img class="ui centered big image" src="/images/logo.png" alt="logo"/>
            <% if (typeof(message) != 'undefined') { %>
              <div class="ui error message">
                <p><%=message%></p>
              </div>          
            <% } %>
            <form class="ui form" method="post" action="/createAccount">
              <h2 class="ui dividing header">Create Account</h2>
              <!-- Username input -->
              <div class="field">
                <input type="text" name="username" id="username" placeholder="Username" />
              </div>
              <!-- Password input -->
              <div class="field">
                <input type="password" name="password" id="password" placeholder="Password" />
              </div>
              <!-- Password input -->
              <div class="field">
                <input type="password" name="passwordConfirm" id="passwordConfirm" placeholder="Confirm Password" />
              </div>
              <!--Submit button-->
              <input type="submit" value="Create account" class="fluid ui primary button"/>
            </br>
              <p class="ui horizontal divider">or</p>
          </br>
          <!--Back to login-->
            </form>
            <form method="post" action="/login">
              <input type="submit" value="Sign in" class="ui big blue button"/>
            </form>
          </div>
        </div>
    </body>
</html>
