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

  <%- include('partials/head') %>

  <body>

    <%- include('partials/header') %>

    <main>
      <div class="container">
        <h1 class="fw-bold text-center">Sign Up</h1>
        <form
          action="/signup"
          method="POST"
          class="d-flex flex-column justify-content-center align-items-center"
        >
        <div class="d-flex flex-column align-items-end">
            <label for="#username"
            >Username: <input id="username" name="username" type="text" required
          /></label>
          <label class="mt-3" for="#password"
            >Password: <input id="password" name="password" type="password" required
          /></label>
        </div>
          <% if (wrong) { %>
          <div class="bg-danger border rounded p-1 mt-3">
            A user with this username already exists.
          </div>
          <% } %>
          <div class="d-flex align-items-center">
            <input class="mt-3 p-2" type="submit" value="Sign Up" />
            <a class="ms-5 pt-3" href="/login">Log In</a>
          </div>
        </form>
      </div>
    </main>

    <%- include('partials/footer') %>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
