<div class="dashboard-layout">
  <aside class="sidebar">
    <div class="sidebar-header">
      <span class="logo-icon">📝</span><h2>QuizMaster</h2><span class="role-badge student">Student</span>
    </div>
    <nav class="sidebar-nav">
      <a routerLink="/student/dashboard" class="nav-item"><span class="nav-icon">🏠</span><span>Dashboard</span></a>
      <a routerLink="/student/profile" class="nav-item active"><span class="nav-icon">👤</span><span>Profile</span></a>
    </nav>
    <div class="sidebar-footer">
      <div class="user-info">
        <div class="user-avatar">{{ authService.currentUser()?.name?.charAt(0) || 'S' }}</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">
    @if (loading()) {
      <div class="loading-state"><div class="loader"></div><p>Loading profile...</p></div>
    } @else {
      <!-- Profile Header -->
      <div class="profile-header">
        <div class="profile-avatar">{{ user()?.name?.charAt(0) || 'S' }}</div>
        <div class="profile-info">
          <h1>{{ user()?.name }}</h1>
          <p class="profile-email">{{ user()?.email }}</p>
          <p class="profile-joined">Member since {{ user()?.createdAt | date:'mediumDate' }}</p>
        </div>
      </div>


      <!-- Test History -->
      <h2 class="section-title">Test History</h2>
      @if (submissions().length === 0) {
        <div class="empty-state">
          <span class="empty-icon">📋</span>
          <h3>No test history yet</h3>
          <p>Complete a quiz to see your test history here</p>
        </div>
      } @else {
        <div class="results-list">
          @for (sub of submissions(); track sub._id) {
            <div class="result-card">
              <div class="result-icon-wrap">
                <span class="result-icon">📝</span>
              </div>
              <div class="result-info">
                <h4>{{ sub.quizId?.title || 'Deleted Quiz' }}</h4>
                <p>{{ sub.submittedAt | date:'medium' }} · {{ formatTime(sub.timeTaken) }}</p>
              </div>
              <div class="result-status-wrap">
                <span class="status-badge">Submitted</span>
              </div>
            </div>
          }
        </div>
      }
    }
  </main>
</div>
