<div class="page-container animate-fade-in">
  <div class="content-wrapper">
    <div class="breadcrumb">
      <a routerLink="/admin/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-avatar">{{ user().name?.charAt(0) }}</div>
          <div>
            <h1>{{ user().name }}</h1>
            <p>{{ user().email }}</p>
          </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]="['/admin/submissions', sub._id]" class="view-btn">View Details</a>
                  </td>
                </tr>
              }
            </tbody>
          </table>
        </div>
      }
    }
  </div>
</div>