<!doctype html>
<html lang="en" data-bs-theme="auto">
  <head>
    <script src="/js/color-modes.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.122.0">
    <title>Signup</title>
    <link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/sign-in/">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">
    <link href="/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <style>
      body {
        background-color: #f8f9fa;
        font-family: Arial, sans-serif;
      }

      .form-signin {
        max-width: 400px;
        width: 100%;
        margin: 0 auto;
        padding: 2rem;
        background: white;
        border-radius: 0.5rem;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      }

      .form-signin input {
        margin-bottom: 1rem;
        padding: 0.75rem;
        font-size: 1rem;
        width: 100%;
        border-radius: 0.25rem;
        border: 1px solid #ccc;
      }

      .form-signin button {
        width: 100%;
        padding: 0.75rem;
        background-color: #712cf9;
        border: none;
        color: white;
        font-size: 1.1rem;
        font-weight: 600;
        border-radius: 0.25rem;
        cursor: pointer;
      }

      .form-signin button:hover {
        background-color: #6528e0;
      }

      .form-signin label {
        margin-bottom: 0.5rem;
        font-weight: 600;
      }

      .form-signin .form-group {
        margin-bottom: 1rem;
      }

      .form-signin h1 {
        text-align: center;
        font-size: 2rem;
        margin-bottom: 2rem;
        color: #333;
      }

      .form-signin .form-text {
        font-size: 0.875rem;
        color: #6c757d;
      }

      .alert {
        margin-bottom: 1rem;
      }
    </style>
  </head>
  <body class="d-flex align-items-center py-4 bg-body-tertiary">
    <main class="form-signin">
      <h1>Signup</h1>
      
      <!-- Flash Message Section -->
      <% if (message) { %>
        <div class="alert alert-danger" role="alert">
          <%= message %>
        </div>
      <% } %>

      <form action="/user/register" method="POST">
        <div class="form-group">
          <label for="email">Email</label>
          <input type="email" name="email" required>
        </div>
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" name="username" required>
        </div>
        <div class="form-group">
          <label for="fname">First Name</label>
          <input type="text" name="fname" required>
        </div>
        <div class="form-group">
          <label for="lname">Last Name</label>
          <input type="text" name="lname" required>
        </div>
        <div class="form-group">
          <label for="rpassword">Password</label>
          <input type="password" name="rpassword" required>
        </div>
        <div class="form-group">
          <label for="confirm_password">Confirm Password</label>
          <input type="password" name="confirm_password" required>
        </div>
        <button type="submit">Register</button>
      </form>
    </main>
    <script src="/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  </body>
</html>
