<div class="items-container animated fadeIn prevent-select" (window:resize)="onResize()">
  <div class="row-tools-bar no-padding">
    <button mat-raised-button class="raised-button-background mb-8" (click)="goBack(1)">
      Órdenes de trabajo preventivo<mat-icon>arrow_back</mat-icon>
    </button>
  </div>
  <mat-card class="override-elevation-z8" style="width: 100%; height: 100%;">
    <mat-card-title style="text-align: center; margin: 15px 0;">{{ action }} orden de trabajo preventivo</mat-card-title>
    <mat-card-content>
      <div class="form-order-container" *ngIf="!isLoading && !hasError">
        <div class="form-column" [formGroup]="orderFormGroup">
          <div class="section-divider">Configuración de activación</div>
          <div class="form-row">
            <div class="form-cell" [ngClass]="{ C06: activCols == 2, C12: activCols == 1 }">
              <mat-form-field class="w-100" appearance="outline"> 
                <mat-label>Tipo de activador</mat-label>
                <mat-select (valueChange)="getActivatorsByType(activatorType.value, null)" #activatorType formControlName="activatorTypeControl">
                  <mat-option value="CA">Calendario</mat-option>
                  <mat-option value="SI">Síntoma</mat-option>
                  <mat-option value="ME">Medida</mat-option>
                  <mat-option value="VA">Valor</mat-option>
                </mat-select>
                <mat-error *ngIf="orderFormGroup.controls['activatorTypeControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ C06: activCols == 2, C12: activCols == 1 }">
              <mat-progress-bar mode="indeterminate" *ngIf="loadingActivators"></mat-progress-bar>
              <mat-form-field class="w-100" appearance="outline" *ngIf="!loadingActivators">
                <mat-label>Activador</mat-label>
                <mat-select #activator (valueChange)="activatorChange(activator.value, activatorType.value)" formControlName="activatorControl">
                  <mat-option *ngFor="let item of activators" [value]="item.IDACTIVADOR">
                    Activador #{{ item.IDACTIVADOR }} - <span style="font-weight: 500;" [style.color]="item.PRIORIDAD_OBJ!.color">
                      {{ item.PRIORIDAD_OBJ!.label }}
                    </span> - {{ item.TIPOACTIVACION }}
                  </mat-option>
                  <mat-option value="CAN">Configurar activador nuevo</mat-option>
                </mat-select>
                <mat-error *ngIf="orderFormGroup.controls['activatorControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
          </div>
          <div class="form-row">
            <div class="form-cell" [ngClass]="{ C03: datesCols == 4, C06: datesCols == 2, C12: datesCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Fecha de inicio</mat-label>
                <input matInput [matDatepicker]="startDate" formControlName="startDateControl" [max]="orderFormGroup.controls['endDateControl'].value">
                <mat-datepicker-toggle matIconSuffix [for]="startDate">
                  <mat-icon matDatepickerToggleIcon>arrow_drop_down</mat-icon>
                </mat-datepicker-toggle>
                <mat-datepicker #startDate></mat-datepicker>
                <mat-error *ngIf="orderFormGroup.controls['startDateControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ C03: datesCols == 4, C06: datesCols == 2, C12: datesCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Hora de inicio</mat-label>
                <input matInput formControlName="startHourControl">
                <button mat-icon-button matSuffix [disabled]="disabledStartHour" (click)="openTimePicker('start')">
                  <mat-icon>schedule</mat-icon>
                </button>
                <mat-error *ngIf="orderFormGroup.controls['startHourControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ C03: datesCols == 4, C06: datesCols == 2, C12: datesCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Fecha de término</mat-label>
                <input matInput [matDatepicker]="endDate" formControlName="endDateControl" [min]="orderFormGroup.controls['startDateControl'].value">
                <mat-datepicker-toggle matIconSuffix [for]="endDate">
                  <mat-icon matDatepickerToggleIcon>arrow_drop_down</mat-icon>
                </mat-datepicker-toggle>
                <mat-datepicker #endDate></mat-datepicker>
                <mat-error *ngIf="orderFormGroup.controls['endDateControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ C03: datesCols == 4, C06: datesCols == 2, C12: datesCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Hora de término</mat-label>
                <input matInput formControlName="endHourControl">
                <button mat-icon-button matSuffix [disabled]="disabledEndHour" (click)="openTimePicker('end')">
                  <mat-icon>schedule</mat-icon>
                </button>
                <!--<mat-select formControlName="endHourControl">
                  <mat-option *ngFor="let hour of hoursArr" [value]="hour.value">
                    {{ hour.label }}
                  </mat-option>
                </mat-select>-->
                <mat-error *ngIf="orderFormGroup.controls['endHourControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
          </div>
          <div class="form-row">
            <div class="w-100 activation-config">
              <span *ngIf="activatorType.value == '' && orderFormGroup.controls['activatorControl'].value == ''" class="not-configured">
                Aún no se ha seleccionado un tipo de activador.
              </span>
              <span *ngIf="activatorType.value != '' && orderFormGroup.controls['activatorControl'].value == ''" class="not-configured">
                Aún no se ha seleccionado ningún activador.
              </span>
              <span *ngIf="activatorType.value != '' && orderFormGroup.controls['activatorControl'].value != ''">
                {{ activatorConfigStr }}
              </span>
            </div>
          </div>
          <div class="section-divider mt-16">Configuración del plan de mantenimiento</div>
          <div class="form-row">
            <div class="form-cell C12">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Equipamiento relacionado</mat-label>
                <input type="text" matInput formControlName="equipmentControl" [matAutocomplete]="equipmentComplete" 
                #equipmentInp (blur)="changeEquipmentTable(equipmentInp.value)">
                <mat-autocomplete #equipmentComplete>
                  @if(searchingEquipments){
                    <mat-option><p class="m-0 search-text">Buscando resultados...</p></mat-option>
                  }
                  @if(autoCompleteEquipments.length == 0 && !searchingEquipments){
                    <mat-option><p class="m-0" style="font-weight: 500;">No se encontraron resultados.</p></mat-option>
                  }
                  @for(equipment of autoCompleteEquipments; track equipment){
                    <mat-option [value]="equipment">{{ equipment }}</mat-option>
                  }
                </mat-autocomplete>
                <mat-hint align="end">
                  <a class="hint-button blue_send_font" (click)="openArborescenceSearch()">Búsqueda gráfica</a>
                </mat-hint>
                <mat-error *ngIf="orderFormGroup.controls['equipmentControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
          </div>
          <div class="form-row">
            <div class="form-cell w-100">
              <table mat-table [dataSource]="dataSource!" class="animated fadeIn" style="background: #f8f4f4 !important;">
                <ng-container matColumnDef="EQUIPO">
                  <th mat-header-cell *matHeaderCellDef>Equipamiento</th>
                  <td mat-cell *matCellDef="let row" style="word-break: break-all;max-lines: 5;">
                    {{ row.TIPO_EQUIPAMIENTO }} - {{ row.MODELO }}
                  </td>
                </ng-container>
                
                <ng-container matColumnDef="ACCIONES">
                  <th mat-header-cell *matHeaderCellDef>Acciones</th>
                  <td mat-cell *matCellDef="let row">
                    <button mat-mini-fab class="transparent_background gray_dark_font override_no_shadow" [matMenuTriggerFor]="menu">
                      <mat-icon>more_vert</mat-icon>
                    </button>
                    <mat-menu #menu="matMenu">
                      <button mat-menu-item (click)="openEquipmentDetails(row.CODIGO)">
                        <mat-icon>visibility</mat-icon>
                        <span>Detalles del equipamiento</span>
                      </button>
                      <button mat-menu-item class="" (click)="openEquipmentArborescence(row.CODIGO)">
                        <mat-icon>description</mat-icon>
                        <span>Ficha de detalles</span>
                      </button>
                      <button mat-menu-item class="pink_primary_background white_font" (click)="openEquipmentDocuments(row.CODIGO)">
                        <mat-icon>description</mat-icon>
                        <span>Ver documentación</span>
                      </button>
                    </mat-menu>
                  </td>
                </ng-container>
                
                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        
                <tr class="mat-row" *matNoDataRow>
                  <td class="mat-cell centre" colspan="100%">
                    No se encontró información del equipamiento.
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div class="form-row mt-8">
            <div class="form-cell w-100">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Descripción</mat-label>
                <textarea matInput style="resize: none;" rows="5" formControlName="descriptionControl" (input)="orderFormGroup.controls['descriptionControl'].markAsTouched()"></textarea>
                <mat-icon matSuffix matTooltip="Debe describirse claramente lo que hay que hacer en la orden de trabajo, cuáles son las áreas prioritarias y la secuencia de las actividades">info</mat-icon>
                <mat-error *ngIf="orderFormGroup.controls['descriptionControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
                <mat-error *ngIf="orderFormGroup.controls['descriptionControl'].hasError('minlength')">
                  La descripción debe contener al menos 15 caracteres.
                </mat-error>
              </mat-form-field>
            </div>
          </div>
          <div class="steps-container">
            <div class="steps-margin">
              <button mat-button (click)="addStep('new', null)" [disabled]="orderFormGroup.controls['activatorControl'].invalid || 
              orderFormGroup.controls['activatorTypeControl'].invalid">Añadir instrucción</button>
              <div class="no-steps" *ngIf="instructions.length == 0">Aún no se han añadido instrucciones</div>
              <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)" *ngIf="instructions.length > 0">
                <div class="example-box animated fadeIn" *ngFor="let item of instructions;let i = index" cdkDrag>
                  <div class="instruction-title" [matTooltip]="item.INSTRUCCION">{{ i + 1 }}.- {{ item.INSTRUCCION }}</div>
                  <div class="instruction-duration">{{ getRange(item.INICIO, item.FIN) }} &bull; {{ item.DURACION }} h</div>
                  <div class="instruction-actions">
                    <button mat-mini-fab class="override_no_shadow mr-8 orange_primary_background white_font" color="primary" matTooltip="Editar" (click)="addStep('edit', item.ID)">
                      <mat-icon>edit</mat-icon>
                    </button>
                    <button mat-mini-fab class="override_no_shadow red_primary_background white_font" color="warn" matTooltip="Eliminar" (click)="deleteStep(item.ID, i + 1)">
                      <mat-icon>delete</mat-icon>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="steps-label">Instrucciones*</div>
          </div>
          <div class="form-row mt-20">
            <div class="form-cell w-100">
              <mat-form-field appearance="outline" class="w-100">
                <mat-label>Especialidades y/o oficios</mat-label>
                <mat-select multiple formControlName="staffControl" (valueChange)="updateSpecialty(staff.value)" #staff>
                  <mat-option *ngFor="let specialty of specialties" [value]="specialty.CODIGO_ESPECIALIDAD">
                    {{ specialty.NOMBRE_ESPECIALIDAD }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
          </div>
          <div class="form-row">
            <div class="form-cell w-100">
              <table mat-table [dataSource]="specialtiesDataSource!" class="animated fadeIn" style="background: #f8f4f4 !important;">
                <ng-container matColumnDef="ITEM">
                  <th mat-header-cell *matHeaderCellDef>Especialidad u oficio</th>
                  <td mat-cell *matCellDef="let row">{{ row.NOMBRE_ESPECIALIDAD }}</td>
                </ng-container>
                
                <ng-container matColumnDef="CANTREQ">
                  <th mat-header-cell *matHeaderCellDef>Cantidad de operarios requerida</th>
                  <td mat-cell *matCellDef="let row">
                    <mat-form-field appearance="outline" style="width: 192px;">
                      <button mat-mini-fab color="primary" class="override_no_shadow ml-8" matPrefix [disabled]="cantReq.value == '1'" 
                      (click)="changeReq('rem', row.CODIGO_ESPECIALIDAD)">
                        <mat-icon>remove</mat-icon>
                      </button>
                      <input matInput style="text-align: center;" value="1" [id]="'cant-req-' + row.CODIGO_ESPECIALIDAD" 
                      (input)="validateCant(cantReq.value, row.CODIGO_ESPECIALIDAD)" #cantReq>
                      <button mat-mini-fab color="primary" class="override_no_shadow mr-8" matSuffix (click)="changeReq('add', row.CODIGO_ESPECIALIDAD)">
                        <mat-icon>add</mat-icon>
                      </button>
                    </mat-form-field>
                  </td>
                </ng-container>
                  
                <tr mat-header-row *matHeaderRowDef="specialtiesDisplayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: specialtiesDisplayedColumns;"></tr>
        
                <tr class="mat-row" *matNoDataRow>
                  <td class="mat-cell centre" colspan="100%">
                    No se ha seleccionado ninguna especialidad u oficio.
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div class="form-row mt-8">
            <div class="form-cell" [ngClass]="{ C04: timesCols == 3, C06: timesCols == 2, C12: timesCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Tiempo total estimado de la intervención</mat-label>
                <input matInput (input)="orderFormGroup.controls['totalTimeControl'].markAsTouched()" formControlName="totalTimeControl">
                <mat-hint>Tiempo expresado en horas</mat-hint>
                <mat-error *ngIf="orderFormGroup.controls['totalTimeControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
                <mat-error *ngIf="orderFormGroup.controls['totalTimeControl'].hasError('pattern')">
                  La cadena ingresada tiene un formato inválido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ C04: timesCols == 3, C06: timesCols == 2, C12: timesCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Tiempo estimado de inmovilización</mat-label>
                <input matInput (input)="verifyInmTime(inmTime.value)" formControlName="inmTimeControl" #inmTime>
                <mat-hint>Tiempo expresado en horas</mat-hint>
                <mat-error *ngIf="orderFormGroup.controls['inmTimeControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
                <mat-error *ngIf="orderFormGroup.controls['inmTimeControl'].hasError('pattern')">
                  La cadena ingresada tiene un formato inválido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ C04: timesCols == 3, C06: timesCols == 2, C12: timesCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Clasificación</mat-label>
                <input matInput #clasification (input)="verifyLength(clasification.value, 100)" formControlName="clasificationControl">
                <mat-hint align="end">{{ clasification.value.length }} / 100</mat-hint>
                <mat-error *ngIf="orderFormGroup.controls['clasificationControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
                <mat-error *ngIf="orderFormGroup.controls['clasificationControl'].hasError('maxlength')">
                  La longitud máxima de este campo es de 100 caracteres.
                </mat-error>
              </mat-form-field>
            </div>
          </div>
          <div class="form-row">
            <div class="form-cell" [ngClass]="{ C06: toolsCols == 2, C12: toolsCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Herramientas requeridas</mat-label>
                <mat-select #toolsSel (valueChange)="toolsChange(toolsSel.value, partsSel.value)" multiple formControlName="toolsControl">
                  <mat-option value="SH">
                    Ninguna
                  </mat-option>
                  <mat-option *ngFor="let tool of tools" [value]="tool.ID" [disabled]="toolsSel.value.includes('SH')">
                    <span style="font-weight: 500;">
                      {{ tool.NOMB }}
                    </span> - {{ tool.MODE }} <span style="font-weight: 100;">
                      ({{ tool.CANTDISP }} disponibles)
                    </span>
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="orderFormGroup.controls['toolsControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ C06: toolsCols == 2, C12: toolsCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Refacciones requeridas</mat-label>
                <mat-select #partsSel (valueChange)="toolsChange(toolsSel.value, partsSel.value)" multiple formControlName="sparePartsControl">
                  <mat-option value="SH">
                    Ninguna
                  </mat-option>
                  <mat-option *ngFor="let item of spareParts" [value]="item.ID" [disabled]="partsSel.value.includes('SH')">
                    <span style="font-weight: 500;">
                      {{ item.NOMB }}
                    </span> - {{ item.MODE }} <span style="font-weight: 100;">
                      ({{ item.CANTDISP }} disponibles)
                    </span>
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="orderFormGroup.controls['sparePartsControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
          </div>
          <div class="form-row">
            <div class="form-cell w-100">
              <table mat-table [dataSource]="toolsDataSource!" class="animated fadeIn" style="background: #f8f4f4 !important;">
                <ng-container matColumnDef="ITEM">
                  <th mat-header-cell *matHeaderCellDef>Herramienta / Refacción</th>
                  <td mat-cell *matCellDef="let row">{{ row.NOMB }} - {{ row.MODE }}</td>
                </ng-container>

                <ng-container matColumnDef="TIPO">
                  <th mat-header-cell *matHeaderCellDef>Tipo</th>
                  <td mat-cell *matCellDef="let row">{{ row.TYPE }}</td>
                </ng-container>

                <ng-container matColumnDef="CANTDISP">
                  <th mat-header-cell *matHeaderCellDef>Cantidad disponible</th>
                  <td mat-cell *matCellDef="let row">{{ row.CANTDISP }} {{ row.UNIT }}(s)</td>
                </ng-container>

                <ng-container matColumnDef="CANTNEC">
                  <th mat-header-cell *matHeaderCellDef>Cantidad requerida</th>
                  <td mat-cell *matCellDef="let row">
                    <mat-form-field appearance="outline" style="width: 192px;">
                      <button mat-mini-fab color="primary" class="override_no_shadow ml-8" matPrefix [disabled]="cantReq.value == '1'" 
                      (click)="changeReq('rem', row.ID)">
                        <mat-icon>remove</mat-icon>
                      </button>
                      <input matInput style="text-align: center;" value="1" [id]="'cant-req-' + row.ID" (input)="validateCant(cantReq.value, row.ID)" #cantReq>
                      <button mat-mini-fab color="primary" class="override_no_shadow mr-8" matSuffix (click)="changeReq('add', row.ID)">
                        <mat-icon>add</mat-icon>
                      </button>
                    </mat-form-field>
                  </td>
                </ng-container>

                <ng-container matColumnDef="CANTRES">
                  <th mat-header-cell *matHeaderCellDef>Cantidad restante</th>
                  <td mat-cell *matCellDef="let row" [ngClass]="{ green_primary_font: isPositive(row.CANTDISP, row.ID), red_primary_font: !isPositive(row.CANTDISP, row.ID) }">
                    {{ calcRest(row.CANTDISP, row.ID) }} {{ row.UNIT }}(s)
                  </td>
                </ng-container>
                  
                <tr mat-header-row *matHeaderRowDef="toolsDisplayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: toolsDisplayedColumns;"></tr>
        
                <tr class="mat-row" *matNoDataRow>
                  <td class="mat-cell centre" colspan="100%">
                    No se ha seleccionado ninguna herramienta o refacción.
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div class="form-row mt -8">
            <div class="form-cell w-100" [ngClass]="{ attached_horizontal: screenSize > 960, attached_vertical: screenSize <= 960 }">
              <div class="attached-container" [ngClass]="{ ac_horizontal: screenSize > 960, ac_vertical: screenSize <= 960 }">
                <div class="buttons-container" [ngClass]="{ bc_horizontal: screenSize > 960, bc_vertical: screenSize <= 960 }">
                  <div class="attach-button raised-button-background" (click)="openFileUploader()" matRipple [ngClass]="{
                  ab_horizontal: screenSize > 960, ab_vertical: screenSize <= 960  }">
                    <mat-icon style="transform: scale(1);">attach_file_add</mat-icon>
                    <p style="margin-top: 0px;margin-bottom:0;font-size: 16px;">Añadir nuevo archivo</p>
                  </div>
                  <div class="attach-button raised-button-background" (click)="searchExistingFile()" matRipple [ngClass]="{
                  ab_horizontal: screenSize > 960, ab_vertical: screenSize <= 960  }">
                    <mat-icon style="transform: scale(1);">link</mat-icon>
                    <p style="margin-top: 0px;margin-bottom:0;font-size: 16px;">Añadir archivo existente</p>
                  </div>
                </div>
                <div class="attached-files" [ngClass]="{ af_horizontal: screenSize > 960, af_vertical: screenSize <= 960 }">
                  <div *ngIf="attached.length == 0" class="no-files-attached">
                    Aún no se ha adjuntado ningún archivo
                  </div>
                  <div *ngIf="attached.length > 0" class="files-container">
                    <div *ngFor="let item of attached" class="file">
                      <div class="file-name">{{ item.name }}</div>
                      <div class="file-size">{{ item.size }}</div>
                      <div class="file-type"><span class="white_font" [ngClass]="{ blue_primary_background: item.type == 'Nuevo', 
                      teal_primary_background: item.type == 'Existente' }">
                        {{ item.type }}
                      </span></div>
                      <div class="file-actions " [ngClass]="{ file_actions_enabled: !deleteFilesDisabled, file_actions_disabled: deleteFilesDisabled }">
                        <a [ngClass]="{  red_primary_font: !deleteFilesDisabled, gray_primary_font: deleteFilesDisabled }" 
                        (click)="deleteFile(item.id, item.type!)">Eliminar</a>
                      </div>
                    </div>
                  </div>
                </div>
                <input type="file" name="file" id="file" #file class="hidden" (change)="checkFile($event)">
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="form-cell w-100">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Análisis presupuestario</mat-label>
                <textarea matInput style="resize: none;" rows="5" formControlName="analisisControl"></textarea>
              </mat-form-field>
            </div>
          </div>
        </div>
      </div>

      <div class="form-order-container" *ngIf="isLoading">
        <div class="is-loading animated fadeIn fast">
          <mat-spinner align="center"></mat-spinner>
          <h3>Cargando datos ...</h3>
        </div>
      </div>

      <div class="form-order-container" *ngIf="!isLoading && hasError">
        <div class="has-error animated fadeIn fast">
          <mat-icon class="red_primary_font mb-40" >error</mat-icon>
          <h3>{{ errorStr }}</h3>
        </div>
      </div>
    </mat-card-content>
    <mat-card-actions align="end">
      <button mat-button [disabled]="isLoading || hasError || !registerOrderEnabled" 
      (click)="openUploadMaintenancePlanDialog()">Cargar plan desde MS Project</button>
      <button mat-button [disabled]="isLoading || hasError || !registerOrderEnabled" 
      (click)="saveChanges()">Guardar borrador</button>
      <button mat-button [disabled]="isLoading || hasError || !registerOrderEnabled" 
      (click)="registerWorkOrder()">Registrar orden</button>
    </mat-card-actions>
  </mat-card>
</div>