<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Login</title>
  <link rel="stylesheet" href="styles.css">
  <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" />
</head>

<body>
  <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="/enterLogin">
        <h2 class="ui dividing header">Sign In</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>
        <!-- Submit button -->
        <input type="submit" value="Continue" class="fluid ui primary button" />
        </br>
        <p class="ui horizontal divider">or</p>
        </br>
        <!-- New account button -->
      </form>
      <form method="post" action="/new-account">
        <input type="submit" value="Create Account" class="ui big blue button" />
      </form>
    </div>
  </div>
</body>

</html>