<div class="page-container animate-fade-in">
  <div class="content-wrapper">
    <div class="breadcrumb">
      <a routerLink="/hr/users">← Back to Users</a>
    </div>

    @if (loading()) {
      <div class="loading-state">
        <div class="loader"></div>
        <p>Loading history...</p>
      </div>
    } @else {
      @if (user()) {
        <div class="student-header">
          <div class="student-profile">
            <div class="student-avatar">{{ user().name?.charAt(0) }}</div>
            <div class="student-info">
              <h1>{{ user().name }}</h1>
              <p>{{ user().email }}</p>
            </div>
          </div>

          <div class="student-level-control">
            <span class="level-label">Candidate Level</span>
            <div class="level-pills">
              @for (lvl of levels; track lvl.value) {
                <button class="level-pill"
                        [class.active]="currentLevel() === lvl.value"
                        [attr.data-level]="lvl.value"
                        (click)="changeLevel(lvl.value)">
                  {{ lvl.label }}
                </button>
              }
            </div>
          </div>
        </div>
      }

      <h2 class="section-title">Test History</h2>

      @if (submissions().length === 0) {
        <div class="empty-state">
          <span class="empty-icon">📋</span>
          <h3>No tests taken yet</h3>
          <p>This student hasn't taken any quizzes.</p>
        </div>
      } @else {
        <div class="history-table-wrap">
          <table class="history-table">
            <thead>
              <tr>
                <th>Quiz</th>
                <th>Score</th>
                <th>Percentage</th>
                <th>Time Taken</th>
                <th>Date</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              @for (sub of submissions(); track sub._id) {
                <tr>
                  <td class="quiz-name">{{ sub.quizId?.title || 'Deleted Quiz' }}</td>
                  <td><span class="score-badge">{{ sub.score }}/{{ sub.totalMarks }}</span></td>
                  <td>
                    <div class="percent-bar">
                      <div class="percent-fill" [style.width.%]="sub.percentage"
                           [class.good]="sub.percentage >= 70"
                           [class.avg]="sub.percentage >= 40 && sub.percentage < 70"
                           [class.poor]="sub.percentage < 40"></div>
                    </div>
                    <span class="percent-text">{{ sub.percentage }}%</span>
                  </td>
                  <td>{{ formatTime(sub.timeTaken) }}</td>
                  <td>{{ sub.submittedAt | date:'medium' }}</td>
                  <td>
                    <a [routerLink]="['/hr/submissions', sub._id]" class="view-btn">View Details</a>
                  </td>
                </tr>
              }
            </tbody>
          </table>
        </div>
      }
    }
  </div>
</div>

<!-- Toast Notification -->
@if (toast()) {
  <div class="toast animate-fade-in" [class.toast-success]="toast()?.type === 'success'" [class.toast-error]="toast()?.type === 'error'">
    <span class="material-symbols-rounded">{{ toast()?.type === 'success' ? 'check_circle' : 'error' }}</span>
    {{ toast()?.message }}
  </div>
}