<div>
  <app-header [current_page]="'staff-pt'" height="200px" background_image="/public/img/backgrounds/staff.png"
              [overlay_gradient]="0.5">

  </app-header>
  <section class="darkmodeSection full-height">
    <div class="staff-pt-container centered">
      <div class="week-header">
        <button mat-icon-button (click)="prevWeek()" matTooltip="Previous week" aria-label="Previous week">
          <mat-icon>chevron_left</mat-icon>
        </button>

        <div class="week-title"><span>{{ weekLabel() }}</span></div>

        <button mat-icon-button (click)="nextWeek()" [disabled]="!canGoNextWeek()"
                matTooltip="Next week" aria-label="Next week">
          <mat-icon>chevron_right</mat-icon>
        </button>
      </div>

      <table mat-table [dataSource]="staffPt()" class="mat-elevation-z2 full-width">
        <ng-container matColumnDef="staff_member">
          <th mat-header-cell *matHeaderCellDef> Staff Member</th>
          <td mat-cell *matCellDef="let row"> {{ row.staff_member }}</td>
        </ng-container>

        <ng-container matColumnDef="playtime">
          <th mat-header-cell *matHeaderCellDef> Playtime (h:mm)</th>
          <td mat-cell *matCellDef="let row"> {{ minutesToHm(row.playtime) }}</td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

        @if (!staffPt()?.length) {
          <tr class="no-data">
            <td colspan="3">No data for this week.</td>
          </tr>
        }
      </table>
    </div>
  </section>
</div>
