<h1 mat-dialog-title class="prevent-select">Contratos del subcontratista {{ subcontratist.EMPLEADO }}</h1>
<div mat-dialog-content class="prevent-select">
  
  <app-loading-card [isLoading]="isLoading" txtLoading="Cargando información..." />

  @if (!isLoading && hasError) {
    <div class="has-error animated fadeIn pt-64">
      <mat-icon class="red_primary_font">error</mat-icon>
      <h2>{{ errorStr }}</h2>
    </div>
  }

  @if (!isLoading) {
    <app-search-card
      [dataSource]="dataSource"
      [disabled]="isLoading || isLoadingForm"
      (dataValue)="dataSource = $event"
    />
  }
  

  <div class="animated fadeIn" [ngClass]="{ table_dialog_details_column: !isLoading && !hasError, hidden: isLoading }">
    <table mat-table [dataSource]="dataSource" matSort class="animated fadeIn" [style.display]="isLoading || hasError ? 'none' : 'revert'">
      <ng-container matColumnDef="CONTRACT_NAME">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Nombre de Contrato</th>
        <td mat-cell *matCellDef="let element">{{ element.CONTRACT_NAME }}</td>
      </ng-container>
      <ng-container matColumnDef="START_DATE">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha de Inicio</th>
        <td mat-cell *matCellDef="let element">{{ element.START_DATE }}</td>
      </ng-container>
      <ng-container matColumnDef="END_DATE">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha de Término</th>
        <td mat-cell *matCellDef="let element">{{ element.END_DATE }}</td>
      </ng-container>
      <ng-container matColumnDef="COST">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Valor del Contrato</th>
        <td mat-cell *matCellDef="let element">${{ element.COST }}</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 p-20 align-center" colspan="12">
          <object data="assets/img/empty_data.svg" width="150"></object>
          <h2>Sin datos</h2>
        </td>
      </tr>
    </table>
  </div>
  <a target="_blank" class="hidden" id="download"></a>
  <mat-paginator [pageSizeOptions]="[10, 50, 100]" class="override-paginator" [ngClass]="{ hidden: isLoading || hasError }"></mat-paginator>
</div>
<div mat-dialog-actions align="end">
  <button mat-button (click)="downloadExcelHistory()">Reporte en Excel</button>
  <button mat-button (click)="downloadPDFHistory()">Reporte en PDF</button>
  <button mat-button mat-dialog-close>Cerrar</button>
</div>