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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>User Details - ASLSteamHub</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body class="bg-light d-flex flex-column min-vh-100">
  <!--Navbar-->
  <%- include('partials/header') %>

  <div class="content-wrapper list-content-container">
    <div class="container-fluid mt-5">
      <h1>User Details</h1>
      <hr>
      <form action="/user/edit-user/<%= user.id %>" method="POST">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <div class="mb-3">
          <label for="username" class="form-label">Username</label>
          <input type="text" class="form-control" id="username" name="username" value="<%= user.username %>" required>
        </div>
        <div class="mb-3">
          <label for="firstname" class="form-label">First Name</label>
          <input type="firstname" class="form-control" id="firstname" name="firstname" value="<%= user.firstname %>" required>
        </div>
        <div class="mb-3">
          <label for="lastname" class="form-label">Last Name</label>
          <input type="lastname" class="form-control" id="lastname" name="lastname" value="<%= user.lastname %>" required>
        </div>
        <div class="mb-3">
          <label for="email" class="form-label">Email</label>
          <input type="email" class="form-control" id="email" name="email" value="<%= user.email %>" readonly>
        </div>
        <div class="form-group">
          <label for="currentPassword">Current Password</label>
          <input type="password" class="form-control" id="currentPassword" placeholder="Enter current password" name="currentPassword">
        </div>
        <div class="form-group">
          <label for="newPassword">New Password</label>
          <input type="password" class="form-control" id="newPassword" placeholder="Enter new password" name="newPassword">
        </div>
        <div class="form-group">
          <label for="confirmPassword">Confirm New Password</label>
          <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm new password" name="confirmedPassword">
        </div>
        <button type="submit" class="btn btn-primary">Save Changes</button>
      </form>
    </div>
    <script>
      // Check if there's a message passed from the server
      const message = "<%= message || '' %>";
      if (message) {
          alert(message); // Display the message as an alert
      }
    </script>
  </div>

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

</html>