<div class="page-container animate-fade-in">
  <div class="page-header" style="display: flex; align-items: center; gap: 16px;">
    <button class="icon-btn" (click)="goBack()" style="background: var(--bg-card); border: 1px solid var(--border-color); padding: 8px; border-radius: 12px; cursor: pointer; color: var(--text-primary); transition: all 0.2s; display: flex; align-items: center; justify-content: center;" onmouseover="this.style.background='var(--bg-hover)'" onmouseout="this.style.background='var(--bg-card)'">
      <span class="material-symbols-rounded">arrow_back</span>
    </button>
    <div>
      <h1 style="margin: 0; font-size: 24px;">Student Users</h1>
      <p style="margin: 4px 0 0;" class="page-subtitle">View and manage registered students</p>
    </div>
  </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">
              <div class="name-row">
                <h4>{{ user.name }}</h4>
                <span class="level-badge" [attr.data-level]="(user.level || 'beginner').toLowerCase()">
                  {{ getLevelLabel(user.level || 'beginner') }}
                </span>
              </div>
              <p>{{ user.email }}</p>
              <span class="user-joined">Joined {{ user.createdAt | date:'mediumDate' }}</span>
            </div>
            
            <div class="status-dot" [class.online]="user.isLoggedIn" title="Online Status"></div>
            
            <button class="action-btn text-danger ml-auto" (click)="$event.preventDefault(); $event.stopPropagation(); deleteUser(user._id)" title="Delete Student">
              <span class="material-symbols-rounded">delete</span>
            </button>
            
            <span class="view-arrow">→</span>
          </a>
        }
      </div>
    }
</div>
