<h1 mat-dialog-title class="prevent-select">Taspasar orden #{{ idOrder }}</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>
  <mat-form-field *ngIf="!isLoading && !hasError" appearance="outline" class="w-100 animated fadeIn mt-8">
    <mat-label>Seleccionar usuario o subcontratista</mat-label>
    <mat-select [formControl]="formControl">
      <mat-optgroup label="Usuario">
        <mat-option *ngFor="let user of responsibleUsers" [value]="user.ID + '|user'">
          {{ user.NOMBRE }}
        </mat-option>
      </mat-optgroup>
      <mat-optgroup label="Subcontratista">
        <mat-option *ngFor="let subcontratist of subcontratists" [value]="subcontratist.ID_SUBCONTRATIST + '|subcontratist'">
          {{ subcontratist.NAME }}
        </mat-option>
      </mat-optgroup>
    </mat-select>
  </mat-form-field>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancelar</button>
  <button mat-button (click)="confirmTransfer()" [disabled]="formControl.invalid">Continuar</button>
</div>