<div class="dashboard-layout">
  <aside class="sidebar">
    <div class="sidebar-header">
      <span class="logo-icon">📝</span>
      <h2>QuizMaster</h2>
      <span class="role-badge">Admin</span>
    </div>
    <nav class="sidebar-nav">
      <a routerLink="/admin/dashboard" class="nav-item">
        <span class="nav-icon">🏠</span><span>Dashboard</span>
      </a>
      <a routerLink="/admin/users" class="nav-item active">
        <span class="nav-icon">👥</span><span>Users</span>
      </a>
      <a routerLink="/admin/generate-quiz" class="nav-item">
        <span class="nav-icon">➕</span><span>Generate Quiz</span>
      </a>
    </nav>
    <div class="sidebar-footer">
      <div class="user-info">
        <div class="user-avatar">{{ authService.currentUser()?.name?.charAt(0) || 'A' }}</div>
        <div class="user-details">
          <span class="user-name">{{ authService.currentUser()?.name }}</span>
          <span class="user-email">{{ authService.currentUser()?.email }}</span>
        </div>
      </div>
      <button class="logout-btn" (click)="logout()"><span>🚪</span> Logout</button>
    </div>
  </aside>

  <main class="main-content">
    <div class="page-header">
      <h1>Student Users</h1>
      <p>View and manage registered students</p>
    </div>

    <div class="filter-tabs">
      <button class="tab" [class.active]="showAll()" (click)="toggleFilter(true)">All Students</button>
      <button class="tab" [class.active]="!showAll()" (click)="toggleFilter(false)">Currently Online</button>
    </div>

    @if (loading()) {
      <div class="loading-state">
        <div class="loader"></div>
        <p>Loading users...</p>
      </div>
    } @else if (users().length === 0) {
      <div class="empty-state">
        <span class="empty-icon">👤</span>
        <h3>No students found</h3>
        <p>{{ showAll() ? 'No students have registered yet.' : 'No students are currently online.' }}</p>
      </div>
    } @else {
      <div class="users-grid">
        @for (user of users(); track user._id) {
          <a [routerLink]="['/admin/users', user._id, 'history']" class="user-card">
            <div class="user-card-avatar">{{ user.name?.charAt(0) || '?' }}</div>
            <div class="user-card-info">
              <h4>{{ user.name }}</h4>
              <p>{{ user.email }}</p>
              <span class="user-joined">Joined {{ user.createdAt | date:'mediumDate' }}</span>
            </div>
            <div class="status-dot" [class.online]="user.isLoggedIn"></div>
            <span class="view-arrow">→</span>
          </a>
        }
      </div>
    }
  </main>
</div>
