<h2 mat-dialog-title>{{ title }}</h2>

<mat-dialog-content [formGroup]="shiftForm">
   <!-- Messaggio errore validatore custom -->
   <mat-error *ngIf="shiftForm.hasError('timeRange') && (shiftForm.get('start_time')?.touched || shiftForm.get('end_time')?.touched)">
      L'orario di fine deve essere successivo all'orario di inizio.
   </mat-error>

  <div class="form-grid">

    <mat-form-field appearance="fill" class="full-width-field">
      <mat-label>Nome Definizione Turno</mat-label>
      <input matInput formControlName="name" required>
      <mat-error *ngIf="shiftForm.get('name')?.hasError('required')">
        Il nome è obbligatorio.
      </mat-error>
    </mat-form-field>

    <mat-form-field appearance="fill">
      <mat-label>Orario Inizio</mat-label>
      <input matInput type="time" formControlName="start_time" required placeholder="HH:MM">
       <mat-error *ngIf="shiftForm.get('start_time')?.hasError('required')">Orario inizio obbligatorio.</mat-error>
       <mat-error *ngIf="shiftForm.get('start_time')?.hasError('pattern')">Formato ora non valido (HH:MM).</mat-error>
    </mat-form-field>

    <mat-form-field appearance="fill">
      <mat-label>Orario Fine</mat-label>
      <input matInput type="time" formControlName="end_time" required placeholder="HH:MM">
       <mat-error *ngIf="shiftForm.get('end_time')?.hasError('required')">Orario fine obbligatorio.</mat-error>
       <mat-error *ngIf="shiftForm.get('end_time')?.hasError('pattern')">Formato ora non valido (HH:MM).</mat-error>
    </mat-form-field>

    <mat-form-field appearance="fill" class="full-width-field">
      <mat-label>Note</mat-label>
      <textarea matInput formControlName="notes" rows="3"></textarea>
    </mat-form-field>

  </div>
</mat-dialog-content>

<mat-dialog-actions align="end">
  <button mat-button (click)="onCancel()">Annulla</button>
  <button mat-raised-button color="primary" (click)="onSave()" [disabled]="!shiftForm.valid">
    {{ isEditMode ? 'Salva Modifiche' : 'Aggiungi' }}
  </button>
</mat-dialog-actions>
