<div class="page-container animate-fade-in">
    <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">
              <div class="name-row">
                <h4>{{ user.name }}</h4>
                <span class="level-badge" [attr.data-level]="user.level || 'beginner'">
                  {{ (user.level || 'beginner') | titlecase }}
                </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>
