<%- include('partials/header') %>

<main class="app-shell">
  <div class="container" style="max-width: 560px;">
    <div class="content-panel">
      <div class="eyebrow">Create account</div>
      <h2>Start optimizing your sleep</h2>

      <% if (error) { %>
        <div class="alert alert-error"><%= error %></div>
      <% } %>
      <% if (success) { %>
        <div class="alert alert-success"><%= success %></div>
      <% } %>

      <form action="/register" method="POST" class="form-grid">
        <div class="form-group">
          <label for="name">Full name</label>
          <input id="name" name="name" type="text" placeholder="Your name" required />
        </div>

        <div class="form-group">
          <label for="email">Email address</label>
          <input id="email" name="email" type="email" placeholder="you@example.com" required />
        </div>

        <div class="form-group">
          <label for="password">Password</label>
          <input id="password" name="password" type="password" placeholder="Minimum 6 characters" required />
        </div>

        <div class="form-group">
          <label for="confirmPassword">Confirm password</label>
          <input id="confirmPassword" name="confirmPassword" type="password" placeholder="Repeat your password" required />
        </div>

        <button class="btn btn-primary" type="submit">Create Account</button>
      </form>

      <p style="margin-top: 18px; color: var(--muted); text-align: center;">
        Already have an account? <a href="/login" style="color: var(--primary);">Log in</a>
      </p>
    </div>
  </div>
</main>

<%- include('partials/footer') %>
