<h1 mat-dialog-title class="prevent-select">Asociar archivo a órdenes de trabajo</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 fast" *ngIf="!isLoading && hasError">
    <mat-icon  class="red_primary_font">error</mat-icon>
    <h3>{{ errorStr }}</h3>
  </div>
  <div [ngClass]="{ hidden: !(!hasError && !isLoading) }" class="animated fadeIn fast association-container">
    <h3 style="margin: 8px 0;">{{ idFile }}</h3>
    <table mat-table [dataSource]="dataSource!" class="animated fadeIn">
      <ng-container matColumnDef="ID">
        <th mat-header-cell *matHeaderCellDef>#</th>
        <td mat-cell *matCellDef="let row">Orden #{{ row.IDORDEN }}</td>
      </ng-container>
      
      <ng-container matColumnDef="EQUIPAMIENTO">
        <th mat-header-cell *matHeaderCellDef>Equipamiento</th>
        <td mat-cell *matCellDef="let row">
          <div style="width: 280px !important;overflow-wrap: break-word;">
            {{ row.EQUIPAMIENTO }}
          </div>
        </td>
      </ng-container>
      
      <ng-container matColumnDef="ACTIVADOR">
        <th mat-header-cell *matHeaderCellDef>Activador</th>
        <td mat-cell *matCellDef="let row">Activador #{{ row.ACTIVADOR }}</td>
      </ng-container>
      
      <ng-container matColumnDef="CLASIFICACION">
        <th mat-header-cell *matHeaderCellDef>Clasificación</th>
        <td mat-cell *matCellDef="let row">{{ row.CLASIFICACION }}</td>
      </ng-container>
      
      <ng-container matColumnDef="PRIORIDAD">
        <th mat-header-cell *matHeaderCellDef>Prioridad</th>
        <td mat-cell *matCellDef="let row">
          <span style="font-weight: 500;" [style.color]="getFontColor(row.PRIORIDAD)">
            {{ getPriorityStr(row.PRIORIDAD) }}
          </span>
        </td>
      </ng-container>
      
      <ng-container matColumnDef="ACCIONES">
        <th mat-header-cell *matHeaderCellDef>Acciones</th>
        <td mat-cell *matCellDef="let row">
          <button mat-icon-button [matMenuTriggerFor]="menuAssociated">
            <mat-icon>more_vert</mat-icon>
          </button>
          <mat-menu #menuAssociated>
            <button mat-menu-item (click)="changeAssociationStatus('disassociate', row.IDORDEN)">
              <mat-icon>close</mat-icon>
              <span>Deshacer asociació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" colspan="100%" style="font-weight: 500;">
          Este archivo no está asociado a ninguna orden de trabajo
        </td>
      </tr>
    </table>
    <h3 style="margin: 8px 0;">Asociar a otra orden de trabajo</h3>
    <table mat-table [dataSource]="dataSourceOrders!" class="animated fadeIn">
      <ng-container matColumnDef="ID">
        <th mat-header-cell *matHeaderCellDef>#</th>
        <td mat-cell *matCellDef="let row">Orden #{{ row.IDORDEN }}</td>
      </ng-container>
      
      <ng-container matColumnDef="EQUIPAMIENTO">
        <th mat-header-cell *matHeaderCellDef>Equipamiento</th>
        <td mat-cell *matCellDef="let row">
          <div style="width: 280px !important;overflow-wrap: break-word;">
            {{ row.EQUIPAMIENTO }}
          </div>
        </td>
      </ng-container>
      
      <ng-container matColumnDef="ACTIVADOR">
        <th mat-header-cell *matHeaderCellDef>Activador</th>
        <td mat-cell *matCellDef="let row">Activador #{{ row.ACTIVADOR }}</td>
      </ng-container>
      
      <ng-container matColumnDef="CLASIFICACION">
        <th mat-header-cell *matHeaderCellDef>Clasificación</th>
        <td mat-cell *matCellDef="let row">{{ row.CLASIFICACION }}</td>
      </ng-container>
      
      <ng-container matColumnDef="PRIORIDAD">
        <th mat-header-cell *matHeaderCellDef>Prioridad</th>
        <td mat-cell *matCellDef="let row">
          <span style="font-weight: 500;" [style.color]="getFontColor(row.PRIORIDAD)">
            {{ getPriorityStr(row.PRIORIDAD) }}
          </span>
        </td>
      </ng-container>
      
      <ng-container matColumnDef="ACCIONES">
        <th mat-header-cell *matHeaderCellDef>Acciones</th>
        <td mat-cell *matCellDef="let row">
          <button mat-icon-button [matMenuTriggerFor]="menuDisassociated">
            <mat-icon>more_vert</mat-icon>
          </button>
          <mat-menu #menuDisassociated>
            <button mat-menu-item (click)="changeAssociationStatus('associate', row.IDORDEN)">
              <mat-icon>done</mat-icon>
              <span>Asociaciar archivo</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" colspan="100%" style="font-weight: 500;">
          No se encontraron más órdenes de trabajo.
        </td>
      </tr>
    </table>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>