<h1 mat-dialog-title class="prevent-select">Orden #{{ idOrder }}</h1>
<div mat-dialog-content class="prevent-select">
  @if (isLoading) {
    <div class="is-loading animated fadeIn fast">
      <mat-spinner align="center"></mat-spinner>
      <h3>Cargando datos ...</h3>
    </div>
  } @else if (!isLoading && hasError) {
    <div class="has-error animated fadeIn">
      <mat-icon class="red_primary_font">error</mat-icon>
      <h2>{{ errorStr }}</h2>
    </div>
  } @else if (!isLoading && !hasError) {
    <p class="mb-20">Ejecución programada para el día {{ execDate }}</p>
    @for (item of staffArr; track $index) {
      <p class="mb-8"><span style="font-weight: 500;">{{ item.ID }} - {{ item.NAME }}</span>: {{ item.CANT }} operario(s) requerido(s), 
        {{ selectedStaffC.value == undefined ? '0' : selectedStaffC.value.length }} operario(s) seleccionado(s).</p>
      <mat-form-field appearance="outline" class="w-100">
        <mat-label>Personal registrado</mat-label>
        <mat-select #selectedStaffC multiple (valueChange)="staffChange(item.ID, selectedStaffC.value)">
          <mat-optgroup label="Empleados">
            @for (employee of employees; track $index) {
              <mat-option [disabled]="selectedStaffC.value != undefined && selectedStaffC.value.length >= item.CANT && !selectedStaffC.value.includes(employee.ID_EMPLOYEE) 
              || (excludedStaff.includes(employee.ID_EMPLOYEE) && !selectedStaff.get(item.ID)!.includes(employee.ID_EMPLOYEE))" [value]="employee.ID_EMPLOYEE">
                {{ employee.NAME }} - <span>
                  @for (specialty of employee.SPECIALITY_ARR; track specialty; let specialtyInd = $index) {
                    {{ specialty }}<span *ngIf="specialtyInd < employee.SPECIALITY_ARR!.length - 1">, </span>
                  }
                </span>
              </mat-option>
            }
          </mat-optgroup>
          <mat-optgroup label="Subcontratistas">
            @for (subcontratist of subcontratists; track $index) {
              <mat-option [disabled]="(selectedStaffC.value != undefined && selectedStaffC.value.length >= item.CANT && !selectedStaffC.value.includes(subcontratist.ID_EMPLOYEE)) 
              || (excludedStaff.includes(subcontratist.ID_EMPLOYEE) && !selectedStaff.get(item.ID)!.includes(subcontratist.ID_EMPLOYEE))" [value]="subcontratist.ID_EMPLOYEE">
                {{ subcontratist.NAME }} - <span>
                  @for (specialty of subcontratist.SPECIALITY_ARR; track specialty; let specialtyInd = $index) {
                    {{ specialty }}<span *ngIf="specialtyInd < subcontratist.SPECIALITY_ARR!.length - 1">, </span>
                  }
                </span>
              </mat-option>
            }
          </mat-optgroup>
        </mat-select>
      </mat-form-field>
    }
  }
</div>
<div mat-dialog-actions>
  <button mat-button mat-dialog-close>Cancelar</button>
  <button mat-button [disabled]="!enableStart" (click)="startExec()">Iniciar ejecución</button>
</div>