<h1 mat-dialog-title>Copiar operación</h1>
<div mat-dialog-content>
  <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 mt-50" *ngIf="!isLoading && hasError">
    <mat-icon class="red_primary_font">error</mat-icon>
    <h2>{{ errorStr }}</h2>
  </div>
  <div class="dialog-content animated fadeIn" *ngIf="!isLoading && !hasError">
    <mat-form-field appearance="outline" class="w-100 mt-8">
      <mat-label>Titulo</mat-label>
      <input type="text" matInput [formControl]="titleControl">
      <mat-error *ngIf="titleControl.hasError('required')">Este campo es requerido</mat-error>
      <mat-error *ngIf="titleControl.hasError('maxlength')">La longitud del título debe ser menor a 75 caracteres</mat-error>
    </mat-form-field>
    <mat-form-field appearance="outline" class="w-100 mt-8">
      <mat-label>Equipamiento</mat-label>
      <mat-select #equipment (valueChange)="updateTable(equipment.value)" [formControl]="equipmentControl">
        <mat-option *ngFor="let equipment of equipments" [value]="equipment.CODIGO" [disabled]="equipment.CODIGO == currentEquipment">
          {{ equipment.FAMILI }} / {{ equipment.SUBFAM }} / {{ equipment.DENOMI }}
        </mat-option>
      </mat-select>
      <mat-error *ngIf="equipmentControl.invalid">Este campo es obligatorio.</mat-error>
    </mat-form-field>
    <table mat-table [dataSource]="dataSource!" class="animated fadeIn" [style.display]="isLoading ? 'none' : 'revert'">
      <ng-container matColumnDef="CODIGO">
        <th mat-header-cell *matHeaderCellDef>Código</th>
        <td mat-cell *matCellDef="let row" style="word-break: break-all;max-lines: 5;">{{ row.CODIGO }}</td>
      </ng-container>
      
      <ng-container matColumnDef="DENOMI">
        <th mat-header-cell *matHeaderCellDef>Denominación</th>
        <td mat-cell *matCellDef="let row">{{ row.DENOMI }}</td>
      </ng-container>
      
      <ng-container matColumnDef="FAMILI">
        <th mat-header-cell *matHeaderCellDef>Familia</th>
        <td mat-cell *matCellDef="let row">{{ row.FAMILI }}</td>
      </ng-container>
      
      <ng-container matColumnDef="SUBFAM">
        <th mat-header-cell *matHeaderCellDef>Subfamilia</th>
        <td mat-cell *matCellDef="let row">{{ row.SUBFAM }}</td>
      </ng-container>
      
      <ng-container matColumnDef="ESTADO">
        <th mat-header-cell *matHeaderCellDef>Estado</th>
        <td mat-cell *matCellDef="let row">{{ row.ESTADO }}</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="indigo_primary_background white_font no-shadow" [matMenuTriggerFor]="menu">
            <mat-icon>settings</mat-icon>
          </button>
          <mat-menu #menu="matMenu">
            <button mat-menu-item>
              <mat-icon>visibility</mat-icon>
              <span>Detalles del equipamiento</span>
            </button>
            <button mat-menu-item>
              <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 mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancelar</button>
  <button mat-button (click)="copyWorkOrder()" [disabled]="titleControl.invalid || equipmentControl.invalid">Confirmar</button>
</div>