@if (loading()) {
  <div class="att-loading">
    <mat-icon class="spin-icon">refresh</mat-icon>
    Loading attendance…
  </div>
} @else if (sessions().length === 0) {
  <div class="empty-state">
    <mat-icon style="font-size:44px;width:44px;height:44px;color:#94a3b8">event_note</mat-icon>
    <p>No sessions found for this instance.</p>
  </div>
} @else {
  <!-- Session selector toolbar -->
  <div class="att-toolbar">
    <div class="att-session-wrap">
      <label class="att-session-lbl">Session</label>
      <select class="att-session-sel" [value]="selectedSessionId()"
        (change)="onSessionChange(+$any($event.target).value)">
        @for (s of sessions(); track s.InstanceSessionId) {
          <option [value]="s.InstanceSessionId">
            {{ s.SessionTitle }}
            @if (s.ScheduledDate) { · {{ s.ScheduledDate | date:'d MMM yyyy' }} }
            @if (s.StartTime) { · {{ s.StartTime.slice(0,5) }} – {{ s.EndTime.slice(0,5) }} }
          </option>
        }
      </select>
    </div>
    <button class="btn-save-att" type="button" [disabled]="saving()" (click)="save()">
      @if (saving()) { Saving… } @else { Save Attendance }
    </button>
  </div>

  <!-- Attendance table -->
  <div class="enroll-table-wrap scrollbar">
    @if (attendanceRows().length === 0) {
      <div class="empty-state">
        <mat-icon style="font-size:44px;width:44px;height:44px;color:#94a3b8">people</mat-icon>
        @if (!selectedSessionId()) {
          <p>Select a session above to view attendance.</p>
        } @else {
          <p>No enrollments found for this session.</p>
        }
      </div>
    } @else {
      <table class="enroll-table att-table">
        <thead>
          <tr>
            <th class="th-num">#</th>
            <th>Employee</th>
            <th>Check-In</th>
            <th>Check-Out</th>
            <th class="th-score">Attendance %</th>
            <th>Status</th>
            <th>Absence Reason</th>
          </tr>
        </thead>
        <tbody>
          @for (row of attendanceRows(); track row.EnrollmentId; let i = $index) {
            <tr class="enroll-row">
              <td class="td-num">{{ i + 1 }}</td>

              <td class="td-employee">
                <div class="emp-cell">
                  <div class="emp-avatar" [ngClass]="getAvatarClass(row.EmployeeId)">
                    {{ getInitials(row.EmployeeName) }}
                  </div>
                  <div class="emp-info">
                    <span class="emp-name">{{ row.EmployeeName }}</span>
                    <span class="emp-code">{{ row.EmployeeCode }}</span>
                  </div>
                </div>
              </td>

              <td>
                <input class="att-time-input" type="time" [value]="toHHmm(row.CheckInTime)"
                  (change)="updateField(i, 'CheckInTime', $any($event.target).value)">
              </td>

              <td>
                <input class="att-time-input" type="time" [value]="toHHmm(row.CheckOutTime)"
                  (change)="updateField(i, 'CheckOutTime', $any($event.target).value)">
              </td>

              <td class="td-score">
                <input class="comp-score-input" type="number" min="0" max="100"
                  [value]="row.AttendancePct"
                  (change)="updateField(i, 'AttendancePct', $any($event.target).value)">
              </td>

              <td>
                <select class="att-status-sel" [value]="row.AttendanceStatus"
                  (change)="updateField(i, 'AttendanceStatus', $any($event.target).value)"
                  [ngClass]="ATT_STATUS_CLASSES[row.AttendanceStatus] ?? 'att-absent'">
                  <option value="0">Present</option>
                  <option value="1">Absent</option>
                  <option value="2">Partial</option>
                  <option value="3">Excused</option>
                </select>
              </td>

              <td>
                <input class="att-remarks-input" type="text" [value]="row.AbsenceReason" placeholder="Notes…"
                  (change)="updateField(i, 'AbsenceReason', $any($event.target).value)">
              </td>
            </tr>
          }
        </tbody>
      </table>
    }
  </div>
}