<div class="animated fadeIn prevent-select" (window:resize)="onResize()" [ngClass]="{ items_container: screenSize > 640, 
items_container_full_width: screenSize <= 640 }">
  <div id="navigation" class="mb-8">
    <div class="prev-page prevent-select raised-button-background mat-elevation-z8" (click)="goBack(1)" matRipple>
      <mat-icon style="color: white;">arrow_back</mat-icon>
      <div class="page-name ml-4">Órdenes de trabajo correctivo</div>
    </div>
  </div>
  <mat-card style="width: 100%; height: 100%;" [ngClass]="{ override_elevation_z8: screenSize > 640, override_elevation_z0: screenSize <= 640 }">
    <mat-card-title style="text-align: center; margin: 15px 0;">{{ action }} orden de trabajo correctivo</mat-card-title>
    <mat-card-content>
      <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>

      <div class="form-order-container animated fadeIn pt-2" *ngIf="!isLoading && !hasError">
        <div class="form-column" [formGroup]="orderFormGroup">
          <div class="form-row">
            <div class="form-cell mt-8" [ngClass]="{ C03: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }" 
            *ngIf="action == 'Editar'">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>ID orden de trabajo</mat-label>
                <input matInput formControlName="idOrderControl">
              </mat-form-field>
            </div>
            <div class="form-cell mt-8" [ngClass]="{ C03: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Responsable de atender la solicitud</mat-label>
                <mat-select formControlName="responsibleUserControl">
                  <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-error *ngIf="orderFormGroup.controls['responsibleUserControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell mt-8" [ngClass]="{ C03: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Gerencia de seguridad</mat-label>
                <mat-select formControlName="securityManagementControl">
                  <mat-option *ngFor="let management of securityManagements" [value]="management.ID_GERENCIA_SEGURIDAD">
                    Gerencia de seguridad #{{ management.ID_GERENCIA_SEGURIDAD }}
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="orderFormGroup.controls['securityManagementControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell mt-8 C12">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Descripción de la intervención</mat-label>
                <textarea matInput rows="4" style="resize: none;" formControlName="interventionDescriptionControl"
                (input)="orderFormGroup.controls['interventionDescriptionControl'].markAsTouched()"></textarea>
                <mat-error *ngIf="orderFormGroup.controls['interventionDescriptionControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
                <mat-error *ngIf="orderFormGroup.controls['interventionDescriptionControl'].hasError('minlength')">
                  La longitud mínima de este campo es de 15 caracteres.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell mt-8 C12">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Equipamiento relacionado</mat-label>
                <!--<mat-select formControlName="equipmentControl" (valueChange)="equipmentChange(equipmentSel.value)" #equipmentSel>
                  <mat-option *ngFor="let equipment of equipments" [value]="equipment.CODIGO">
                    {{ equipment.TIPO }} - {{ equipment.MODELO }}
                  </mat-option>
                </mat-select>-->
                <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 class="form-cell mt-8 C12">
              <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 (click)="openEquipmentArborescence(row.CODIGO)">
                        <mat-icon>description</mat-icon>
                        <span>Ficha de detalles</span>
                      </button>
                      <button mat-menu-item (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 class="form-cell mt-8" [ngClass]="{ C03: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Fecha de inicio de la falla</mat-label>
                <input matInput formControlName="failStartDateControl" [matDatepicker]="failStartDatePicker">
                <mat-datepicker-toggle matIconSuffix [for]="failStartDatePicker"></mat-datepicker-toggle>
                <mat-datepicker #failStartDatePicker></mat-datepicker>
              </mat-form-field>
            </div>
            <div class="form-cell mt-8" [ngClass]="{ C03: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Tiempo estimado de la solución</mat-label>
                <input matInput formControlName="solutionTimeControl" (input)="validateTime(solutionTime.value, 'input')" 
                (blur)="validateTime(solutionTime.value, 'blur')" #solutionTime>
                <mat-hint>*Tiempo expresado en horas.</mat-hint>
                <mat-error *ngIf="orderFormGroup.controls['solutionTimeControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell mt-8" [ngClass]="{ C03: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Prioridad</mat-label>
                <mat-select formControlName="priorityControl">
                  <mat-option *ngFor="let priority of orderPriorities" [value]="priority.value">
                    <span style="font-weight: 500;" [style.color]="priority.color">
                      {{ priority.label }}
                    </span>
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <div class="form-cell mt-8" [ngClass]="{ C03: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }">
              <mat-form-field class="w-100" appearance="outline" *ngIf="!loadingCounters">
                <mat-label>Contador relacionado</mat-label>
                <mat-select formControlName="counterControl" #counterSelect (valueChange)="counterChange(counterSelect.value)">
                  <mat-option *ngFor="let counter of equipmentCounters" [value]="counter.ID_CONTADOR">
                    Contador #{{ counter.ID_CONTADOR }}
                  </mat-option>
                </mat-select>
                <mat-hint align="end">
                  <a style="color: rgb(35, 95, 172);" [ngClass]="{ hint_button_disabled: orderFormGroup.controls['counterControl'].invalid,  
                  hint_button: orderFormGroup.controls['counterControl'].valid}" (click)="counterDetails(counterSelect.value)">
                    Ver detalles
                  </a>
                </mat-hint>
                <mat-error *ngIf="orderFormGroup.controls['counterControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
              <mat-progress-bar mode="indeterminate" *ngIf="loadingCounters" class="mb-20"></mat-progress-bar>
            </div>
            <div class="form-cell mt-8 C12 mb-20">
              <table mat-table [dataSource]="symptomsDataSource" *ngIf="!loadingMeasures" class="animated fadeIn" style="background: #f8f4f4 !important;">
                <ng-container matColumnDef="ID">
                  <th mat-header-cell *matHeaderCellDef>#</th>
                  <td mat-cell *matCellDef="let row">{{ row.ID_MEDIDA }}</td>
                </ng-container>
                
                <ng-container matColumnDef="VALOR">
                  <th mat-header-cell *matHeaderCellDef>Valor registrado</th>
                  <td mat-cell *matCellDef="let row">{{ row.VALOR }}</td>
                </ng-container>
                
                <ng-container matColumnDef="WEBSERVICE">
                  <th mat-header-cell *matHeaderCellDef>Servicio web de recepción</th>
                  <td mat-cell *matCellDef="let row">{{ row.URL_SERVICIO_WEB }}</td>
                </ng-container>
                
                <ng-container matColumnDef="FECREG">
                  <th mat-header-cell *matHeaderCellDef>Fecha y hora de registro</th>
                  <td mat-cell *matCellDef="let row">{{ row.HORA_REGISTRO }}</td>
                </ng-container>
                
                <ng-container matColumnDef="ACCIONES">
                  <th mat-header-cell *matHeaderCellDef>Acciones</th>
                  <td mat-cell *matCellDef="let row">
                    <button mat-mini-fab color="primary" class="override_no_shadow transparent_background gray_dark_font" matTooltip="Ver acciones" [matMenuTriggerFor]="menu">
                      <mat-icon>more_vert</mat-icon>
                    </button>
                    <mat-menu #menu>
                      <button mat-menu-item (click)="openMeasuresDialog('history')">
                        <mat-icon>history</mat-icon>
                        <span>Historial de medidas</span>
                      </button>
                      <button mat-menu-item (click)="openMeasuresDialog('graph')">
                        <mat-icon>monitoring</mat-icon>
                        <span>Gráfica de medidas</span>
                      </button>
                    </mat-menu>
                  </td>
                </ng-container>
                  
                <tr mat-header-row *matHeaderRowDef="symptomsDisplayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: symptomsDisplayedColumns;"></tr>
        
                <tr class="mat-row" *matNoDataRow>
                  <td class="mat-cell centre" colspan="100%" *ngIf="orderFormGroup.controls['counterControl'].invalid">
                    No se ha seleccionado ningún contador.
                  </td>
                  <td class="mat-cell centre" colspan="100%" *ngIf="orderFormGroup.controls['counterControl'].valid">
                    El contador seleccionado no tiene medidas registradas.
                  </td>
                </tr>
              </table>
              <mat-progress-bar mode="indeterminate" *ngIf="loadingMeasures" class="animated fadeIn w-100"></mat-progress-bar>
            </div>
            <div class="form-cell mt-8 C12">
              <mat-form-field appearance="outline" class="w-100">
                <mat-label>Especialidades y/o oficios</mat-label>
                <mat-select multiple formControlName="personalControl" (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 class="form-cell mt-8 C12">
              <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 class="form-cell mt-8" [ngClass]="{ C03: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Clasificación</mat-label>
                <input matInput formControlName="clasificationControl" (input)="orderFormGroup.controls['clasificationControl'].markAsTouched()" 
                [matAutocomplete]="classificationAutoComplete">
                <mat-autocomplete autoActiveFirstOption #classificationAutoComplete>
                  <mat-option *ngFor="let option of filteredClassifications | async" [value]="option">
                    {{ option }}
                  </mat-option>
                </mat-autocomplete>
                <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 es de 50 caracteres.
                </mat-error>
              </mat-form-field>
            </div>
            <!--<div class="form-cell" [ngClass]="{ C03: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Personal involucrado</mat-label>
                <mat-select multiple formControlName="personalControl">
                  <mat-optgroup label="Equipos de trabajo">
                    <mat-option *ngFor="let team of workTeams" [value]="team.WORKTEAM_ID + '-EQ'">
                      {{ team.NAME }} - {{ team.SPECIALITY }}
                    </mat-option>
                  </mat-optgroup>
                  <mat-optgroup label="Subcontratistas">
                    <mat-option *ngFor="let subcontratist of subcontratists" [value]="subcontratist.ID_SUBCONTRATIST + '-SU'">
                      {{ subcontratist.NAME }} - {{ subcontratist.SPECIALTY }}
                    </mat-option>
                  </mat-optgroup>
                  <mat-optgroup label="Empleados">
                    <mat-option *ngFor="let employee of employees" [value]="employee.ID_EMPLOYEE + '-EM'">
                      {{ employee.NAME }} - {{ employee.SPECIALITY }} - {{ employee.CONTRACT_TYPE }}
                    </mat-option>
                  </mat-optgroup>
                </mat-select>
                <mat-error *ngIf="orderFormGroup.controls['personalControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>-->
            <div class="form-cell mt-8" [ngClass]="{ C03: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Tipo de activación</mat-label>
                <input matInput formControlName="activationType">
              </mat-form-field>
            </div>
            <div class="form-cell mt-8" [ngClass]="{ C03: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }">
              <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 mt-8" [ngClass]="{ C03: screenSize > 1460, C06: screenSize <= 1460 && screenSize > 840, C12: screenSize <= 840 }">
              <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 class="form-cell mt-8 C12 mb-20">
              <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 class="form-cell mt-8 C12" [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>
      </div>
    </mat-card-content>
    <mat-card-actions align="end">
      <button mat-button [disabled]="orderFormGroup.invalid || savingWorkOrder" (click)="processCorrectiveOrder()">
        {{ isNew ? 'Generar' : 'Actualizar' }} orden de trabajo
      </button>
    </mat-card-actions>
  </mat-card>
</div>