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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/assets/css/reallyGlobal.css?v=1">
  <link rel="stylesheet" href="/assets/css/secondary.css">
  <title>IMPERIAL | Register</title>
  <meta name="description" content="Register for IMPERIAL and gain access to features such as document encryption, instant deletion, custom deletion dates, and more!">
  <link rel="stylesheet" href="https://unpkg.com/tippy.js@6.2.7/animations/shift-away.css" />
  <script src="https://unpkg.com/@popperjs/core@2"></script>
  <script src="https://unpkg.com/tippy.js@6"></script>
</head>

<body>
  <main>
    <a href="/">
      <img src="/assets/img/Logo.png" alt="IMPERIAL Logo" class="logo" draggable="false">
    </a>
    <div class="container">
      <form action="/register" method="POST">
        <h2>Welcome aboard!</h2>
        <i class="error">
          <% if( error ) {%>
          <%= error %>
          <% } %>
        </i>
        <div class="actualStuff">
          <div>
            <div class="tile"><i class="fas fa-user"></i></div>
            <% if (user) { %>
            <input type="text" id="name" name="name" placeholder="Username..." value="<%= user %>" autocomplete="off"
              autofocus required>
            <% } else { %>
            <input type="text" id="name" name="name" placeholder="Username..." autocomplete="off" autofocus required>
            <% } %>
          </div>
          <div>
            <div class="tile"><i class="far fa-envelope"></i></div>
            <% if (email) { %>
            <input type="email" id="email" name="email" placeholder="Email..." value="<%= email %>" autocomplete="off"
              required>
            <% } else { %>
            <input type="email" id="email" name="email" placeholder="Email..." autocomplete="email" required>
            <% } %>
          </div>
          <div>
            <div class="tile"><i class="fas fa-lock"></i></div>
            <input type="password" id="password" name="password" placeholder="Password..." autocomplete="off" required>
          </div>
          <div>
            <div class="tile"><i class="fas fa-lock"></i></div>
            <input type="password" id="confirmPassword" name="confirmPassword" placeholder="Confirm Password..."
              autocomplete="off" required>
          </div>
          <div>
            <div class="tile"><i class="fas fa-qrcode"></i></div>
            <input type="text" id="code" name="code" placeholder="Beta code..." autocomplete="off" required>
          </div>
          You agree to our <a href="/terms">terms</a>
          <br>
          <button type="submit">Register</button>
          <a href="/login">
            <span id="subtext">Have an account?</span>
          </a>
        </div>
      </form>
    </div>
    <div class="waves">
      <img src="/assets/img/wave.svg" alt="IMPERIAL Wave svg" class="wave" draggable="false">
    </div>
  </main>
  <script src="https://kit.fontawesome.com/ec3f0c8487.js" crossorigin="anonymous"></script>
  <script>
    const urlParams = new URLSearchParams(window.location.search);

    if (urlParams.get('inviteCode')) {
      localStorage.setItem('inviteCode', urlParams.get('inviteCode'));
      document.getElementById('code').value = urlParams.get('inviteCode');
    } else if (localStorage.getItem('inviteCode')) {
      document.getElementById('code').value = localStorage.getItem('inviteCode');
    }
  </script>
</body>

</html>