<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard - Authentication System</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <div class="dashboard-container">
    <div class="dashboard-header">
      <h1>Dashboard</h1>
      <div class="user-info">
        <div class="user-name">
          Welcome, <strong><%= userName %></strong>
        </div>
        <a href="/logout" class="btn-logout">Logout</a>
      </div>
    </div>

    <h2 style="color: #333; margin-bottom: 20px;">Registered Users</h2>

    <% if (users && users.length > 0) { %>
      <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Date Registered</th>
          </tr>
        </thead>
        <tbody>
          <% users.forEach(user => { %>
            <tr>
              <td><%= user.id %></td>
              <td><%= user.name %></td>
              <td><%= user.email %></td>
              <td>
                <%= new Date(user.created_at).toLocaleDateString('en-US', { 
                  year: 'numeric', 
                  month: 'long', 
                  day: 'numeric',
                  hour: '2-digit',
                  minute: '2-digit'
                }) %>
              </td>
            </tr>
          <% }); %>
        </tbody>
      </table>
    <% } else { %>
      <div class="no-users">
        <p>No users found</p>
      </div>
    <% } %>
  </div>
</body>
</html>
