<h2 mat-dialog-title> Proveedores Asociados </h2>
<mat-dialog-content>
  <!-- ALERTA - CARGANDO DATOS... -->
  <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
    <mat-spinner align="center"></mat-spinner>
    <h3>Cargando datos ...</h3>
  </div>

  <!-- TABLA -->
  <table mat-table matSort [dataSource]="dataSource" class="animated fadeIn" [style.display]="isLoading ? 'none' : 'revert'">

    <ng-container matColumnDef="NO">
      <th mat-header-cell *matHeaderCellDef> No </th>
      <td mat-cell *matCellDef="let element; let i = index;"> {{ i + 1 }} </td>
    </ng-container>

    <ng-container matColumnDef="RAZON_SOCIAL">
      <th mat-header-cell *matHeaderCellDef> Razón Social </th>
      <td mat-cell *matCellDef="let element"> {{ resourcesService.resizeText(element.RAZON_SOCIAL, 27) }} </td>
    </ng-container>

    <ng-container matColumnDef="USUARIO_PROVEEDOR">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Representante </th>
      <td mat-cell *matCellDef="let element"> {{ element.NOMBRE }} {{ element.PRIMER_APELLIDO }} {{ element.SEGUNDO_APELLIDO }} </td>
    </ng-container>

    <ng-container matColumnDef="CORREO">
      <th mat-header-cell *matHeaderCellDef> Correo Electrónico </th>
      <td mat-cell *matCellDef="let element"> {{ element.CORREO }} </td>
    </ng-container>

    <ng-container matColumnDef="TELEFONO">
      <th mat-header-cell *matHeaderCellDef> Teléfono </th>
      <td mat-cell *matCellDef="let element"> ({{ element.LADA1 }}){{ element.TELEFONO1 }} </td>
    </ng-container>

    <ng-container matColumnDef="ACCIONES">
      <th mat-header-cell *matHeaderCellDef> Acciones </th>
      <td mat-cell *matCellDef="let element">
        <button mat-mini-fab class="blue_dark_background override-no-shadow ml-4" matTooltip="Ver Artículo" (click)="openDialog('INFO_ARTI', element)">
          <mat-icon>info</mat-icon>
        </button>
        <button mat-mini-fab class="cyan_dark_background override-no-shadow ml-4" matTooltip="Ver Proveedor" (click)="openDialog('INFO_PROV', element)">
          <mat-icon>person</mat-icon>
        </button>
        <!-- <button mat-mini-fab color="warn" class="override-no-shadow ml-4" matTooltip="Desasociar Proveedor">
          <mat-icon>close</mat-icon>
        </button> -->
      </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-40 centre" colspan="12">
        <object data="assets/img/empty_data.svg" width="300"></object>
        <h2>Sin datos</h2>
      </td>
    </tr>
  </table>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button color="warn" mat-dialog-close cdkFocusInitial>Cancelar</button>
</mat-dialog-actions>
