<h2 mat-dialog-title>Contactos del Proveedor</h2>
<mat-dialog-content>

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

    <ng-container matColumnDef="NOMBRE_CONTACTO">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Nombre del Contacto </th>
      <td mat-cell *matCellDef="let element"> {{ element.NOMBRE_CONTACTO }} </td>
    </ng-container>

    <ng-container matColumnDef="TIPO_CONTACTO">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Tipo de Contacto </th>
      <td mat-cell *matCellDef="let element"> {{ element.TIPO_CONTACTO }} </td>
    </ng-container>

    <ng-container matColumnDef="DIRECCION">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Dirección </th>
      <td mat-cell *matCellDef="let element">
        {{ element.CALLE }} {{ element.NUMERO_EXTERIOR }} {{ element.NUMERO_INTERIOR }}, {{ element.MUNICIPIO }}, {{ element.ENTIDAD }}. {{ element.PAIS }}
      </td>
    </ng-container>

    <ng-container matColumnDef="CORREO1">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Teléfono </th>
      <td mat-cell *matCellDef="let element"> {{ element.CORREO1 }} </td>
    </ng-container>

    <ng-container matColumnDef="TELEFONO1">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Correo Electronico </th>
      <td mat-cell *matCellDef="let element"> {{ element.TELEFONO1 }} </td>
    </ng-container>

    <ng-container matColumnDef="ACCIONES">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Acciones </th>
      <td mat-cell *matCellDef="let element">
          <button mat-mini-fab color="primary" class="override-no-shadow" matTooltip="Ver Información" (click)="openDialog(element)">
              <mat-icon>info</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>
