<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reset Password - Authentication System</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <div class="container">
    <div class="card">
      <div class="card-header">
        <h1>Create New Password</h1>
        <p>Set a new password for your account</p>
      </div>

      <% if (message) { %>
        <div class="message <%= message.includes('successfully') ? 'success' : message.includes('error') || message.includes('invalid') || message.includes('expired') ? 'error' : 'info' %>">
          <%= message %>
        </div>
      <% } %>

      <% if (token) { %>
        <form action="/reset-password/<%= token %>" method="POST">
          <div class="form-group">
            <label for="password">New Password</label>
            <input 
              id="password" 
              type="password" 
              name="password" 
              placeholder="••••••••"
              required
            >
            <small style="color: #999; display: block; margin-top: 5px;">
              Password must be at least 8 characters
            </small>
          </div>

          <div class="form-group">
            <label for="passwordConfirm">Confirm Password</label>
            <input 
              id="passwordConfirm" 
              type="password" 
              name="passwordConfirm" 
              placeholder="••••••••"
              required
            >
          </div>

          <button type="submit" class="btn btn-primary">Reset Password</button>
        </form>

        <div class="text-center">
          Remember your password? <a href="/login">Login here</a>
        </div>
      <% } else { %>
        <div class="text-center">
          <p>This password reset link is invalid or has expired.</p>
          <a href="/forgot-password" class="btn btn-secondary" style="display: inline-block; padding: 10px 20px; margin-top: 20px;">
            Request a new reset link
          </a>
        </div>
      <% } %>
    </div>
  </div>
</body>
</html>
