<h2>Gestione Bambini</h2>

<div class="actions-header">
      <!-- TODO: Aggiungere filtri per struttura, stato attivo -->
  <button mat-raised-button color="primary" (click)="addChild()">
    <mat-icon>child_care</mat-icon> Aggiungi Bambino
  </button>

  <mat-form-field appearance="fill">
    <mat-label>Struttura</mat-label>
    <mat-select [(ngModel)]="structureIdFilter" (ngModelChange)="loadChildren()">
      <mat-option [value]="null">Tutte</mat-option>
      <mat-option *ngFor="let structure of structures" [value]="structure.id">
        {{structure.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>

  <mat-slide-toggle
    [(ngModel)]="isActiveFilter"
    (change)="loadChildren()"
    labelPosition="before">
    Mostra solo attivi
  </mat-slide-toggle>
</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]="(children$ | async) ?? []" class="mat-elevation-z8 child-table">

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

    <!-- Colonna Cognome -->
    <ng-container matColumnDef="last_name">
      <th mat-header-cell *matHeaderCellDef> Cognome </th>
      <td mat-cell *matCellDef="let child"> {{child.last_name}} </td>
    </ng-container>

    <!-- Colonna Nome -->
    <ng-container matColumnDef="first_name">
      <th mat-header-cell *matHeaderCellDef> Nome </th>
      <td mat-cell *matCellDef="let child"> {{child.first_name}} </td>
    </ng-container>

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

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

    <!-- Colonna Attivo -->
    <ng-container matColumnDef="is_active">
      <th mat-header-cell *matHeaderCellDef> Attivo </th>
      <td mat-cell *matCellDef="let child">
         <mat-slide-toggle
            [checked]="!!child.is_active"
            (change)="toggleActive(child, $event)"
            aria-label="Stato attivo bambino">
         </mat-slide-toggle> <!-- Tag chiuso correttamente -->
      </td>
    </ng-container>

    <!-- Colonna Azioni -->
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef> Azioni </th>
      <td mat-cell *matCellDef="let child">
        <button mat-icon-button color="primary" aria-label="Modifica bambino" (click)="editChild(child)">
          <mat-icon>edit</mat-icon>
        </button>
        <button mat-icon-button color="warn" aria-label="Elimina bambino" (click)="deleteChild(child)">
          <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 bambino trovato.
        </td>
    </tr>

  </table>
</div>
