<h2>Gestione Contratti Insegnanti</h2>

<div class="actions-header">
  <button mat-raised-button color="primary" (click)="addContract()">
    <mat-icon>post_add</mat-icon> Aggiungi Contratto
  </button>
  <!-- TODO: Aggiungere filtri per insegnante, anno scolastico, struttura -->
</div>

<div class="spinner-container" *ngIf="isLoading">
  <mat-spinner diameter="50"></mat-spinner>
</div>

<div *ngIf="error" class="error-message">
  {{ error }}
</div>

<div *ngIf="!isLoading && !error">
  <table mat-table [dataSource]="(contracts$ | async) ?? []" class="mat-elevation-z8 contract-table">

    <!-- Colonna ID -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef> ID </th>
      <td mat-cell *matCellDef="let contract"> {{contract.id}} </td>
    </ng-container>

    <!-- Colonna Nome Insegnante (Combinato) -->
    <ng-container matColumnDef="teacher_name">
      <th mat-header-cell *matHeaderCellDef> Insegnante </th>
      <td mat-cell *matCellDef="let contract"> {{contract.teacher_last_name}} {{contract.teacher_first_name}} </td>
    </ng-container>

    <!-- Colonna Anno Scolastico -->
    <ng-container matColumnDef="school_year_name">
      <th mat-header-cell *matHeaderCellDef> Anno Scolastico </th>
      <td mat-cell *matCellDef="let contract"> {{contract.school_year_name}} </td>
    </ng-container>

     <!-- Colonna Struttura -->
     <ng-container matColumnDef="structure_name">
      <th mat-header-cell *matHeaderCellDef> Struttura </th>
      <td mat-cell *matCellDef="let contract"> {{contract.structure_name || '-'}} </td>
    </ng-container>

    <!-- Colonna Tipo Contratto -->
    <ng-container matColumnDef="contract_type">
      <th mat-header-cell *matHeaderCellDef> Tipo </th>
      <td mat-cell *matCellDef="let contract"> {{contract.contract_type || '-'}} </td>
    </ng-container>

    <!-- Colonna Data Inizio -->
    <ng-container matColumnDef="start_date">
      <th mat-header-cell *matHeaderCellDef> Data Inizio </th>
      <td mat-cell *matCellDef="let contract"> {{contract.start_date | date:'dd/MM/yyyy'}} </td>
    </ng-container>

    <!-- Colonna Data Fine -->
    <ng-container matColumnDef="end_date">
      <th mat-header-cell *matHeaderCellDef> Data Fine </th>
      <td mat-cell *matCellDef="let contract"> {{contract.end_date ? (contract.end_date | date:'dd/MM/yyyy') : 'N/D'}} </td>
    </ng-container>

    <!-- Colonna Azioni -->
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef> Azioni </th>
      <td mat-cell *matCellDef="let contract">
        <button mat-icon-button color="primary" aria-label="Modifica contratto" (click)="editContract(contract)">
          <mat-icon>edit</mat-icon>
        </button>
        <button mat-icon-button color="warn" aria-label="Elimina contratto" (click)="deleteContract(contract)">
          <mat-icon>delete</mat-icon>
        </button>
      </td>
    </ng-container>

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

    <!-- Riga da mostrare quando non ci sono dati -->
    <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell" [attr.colspan]="displayedColumns.length">
            Nessun contratto trovato.
        </td>
    </tr>

  </table>
</div>
