<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="color-scheme" content="dark" />
    <title><%= title %></title>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body class="admin-dashboard-page">
    <header class="admin-dashboard-header">
      <a class="admin-brand" href="/admin/dashboard">
        <img src="/restright-logo.svg" alt="" />
        <span>RestRight <small>Admin</small></span>
      </a>
      <div class="admin-header-actions">
        <span>Signed in as <strong><%= adminName %></strong></span>
        <form action="/admin/logout" method="POST">
          <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
          <button type="submit" class="btn btn-secondary">Log out</button>
        </form>
      </div>
    </header>
    <main class="admin-dashboard-main">
      <div class="admin-dashboard-intro">
        <div class="admin-auth-eyebrow">Administration</div>
        <h1>Admin Dashboard</h1>
        <p>Overview of RestRight activity stored in the application database.</p>
      </div>
      <% if (sessionExpired) { %>
        <div class="alert alert-error" role="alert">Your logout form expired. You are still signed in; submit the refreshed logout button to sign out.</div>
      <% } %>
      <section class="admin-stats-grid" aria-label="System totals">
        <article class="admin-stat-card">
          <span>Registered users</span>
          <strong><%= stats.users %></strong>
        </article>
        <article class="admin-stat-card">
          <span>Saved commitments</span>
          <strong><%= stats.commitments %></strong>
        </article>
        <article class="admin-stat-card">
          <span>Sleep recommendations</span>
          <strong><%= stats.recommendations %></strong>
        </article>
      </section>
      <section class="admin-users-section" aria-labelledby="registered-users-heading">
        <div class="admin-users-heading">
          <h2 id="registered-users-heading">Registered Users</h2>
          <span><%= registeredUsers.length %> account<%= registeredUsers.length === 1 ? '' : 's' %></span>
        </div>
        <% if (registeredUsers.length === 0) { %>
          <p class="admin-users-empty">No registered user accounts yet.</p>
        <% } else { %>
          <div class="admin-users-table-wrap">
            <table class="admin-users-table">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Email</th>
                  <th>Registered</th>
                </tr>
              </thead>
              <tbody>
                <% registeredUsers.forEach(function(user) { %>
                  <tr>
                    <td><%= user.name %></td>
                    <td><a href="mailto:<%= user.email %>"><%= user.email %></a></td>
                    <td><%= user.created_at ? new Date(user.created_at + (user.created_at.includes('T') ? '' : 'Z')).toLocaleString() : '-' %></td>
                  </tr>
                <% }); %>
              </tbody>
            </table>
          </div>
        <% } %>
      </section>
      <p class="admin-dashboard-note">Administrator access is protected by a database-verified role. Regular user accounts cannot open this dashboard.</p>
    </main>
  </body>
</html>
