<h1 mat-dialog-title class="prevent-select">Seleccionar operarios</h1>
<div mat-dialog-content class="prevent-select">
  <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
    <mat-spinner align="center"></mat-spinner>
    <h3>Cargando datos ...</h3>
  </div>
  <div class="has-error animated fadeIn pt-64" *ngIf="!isLoading && hasError">
    <mat-icon class="red_primary_font">error</mat-icon>
    <h2>{{ errorStr }}</h2>
  </div>
  <div class="dialog_details_column animated fadeIn" *ngIf="!isLoading && !hasError" [formGroup]="formGroup">
    @for (specialtyKey of staffSpecialtiesMap.keys(); track $index) {
      <p><b>{{ specialtyKey }} - {{ staffSpecialtiesMap.get(specialtyKey) }}</b></p>
      @for (specialtyOperaryID of staffOperariesMap.get(specialtyKey); track $index) {
        <mat-form-field appearance="outline" class="w-100 animated fadeIn mt-8">
          <mat-label>Seleccionar empleado o subcontratista</mat-label>
          <mat-select [formControlName]="specialtyOperaryID">
            @for (employee of employees; track $index) {
              @if (employee.SPECIALITY_ARR != undefined && employee.SPECIALITY_ARR.includes(specialtyKey)) {
                <mat-option [value]="employee.ID_EMPLOYEE + '|E'" [disabled]="isSelected(employee.ID_EMPLOYEE + '|E')">
                  {{ employee.NAME }} - Empleado
                </mat-option>
              }
            }
            @for (employee of subcontratists; track $index) {
              @if (employee.SPECIALITY_ARR != undefined && employee.SPECIALITY_ARR.includes(specialtyKey)) {
                <mat-option [value]="employee.ID_EMPLOYEE + '|S'">
                  {{ employee.NAME }} - Subcontratista
                </mat-option>
              }
            }
          </mat-select>
        </mat-form-field>
      }
    }
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancelar</button>
  <button mat-button [disabled]="formGroup.invalid || isLoading || hasError" (click)="saveConfig()">Continuar</button>
</div>