<h1 mat-dialog-title class="prevent-select">Historial de mediciones del contador #{{ idCounter }}</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 pt-64" *ngIf="!isLoading && hasError">
    <mat-icon class="red_primary_font">error</mat-icon>
    <h2>{{ errorStr }}</h2>
  </div>
  <div class="animated fadeIn" [ngClass]="{ table_dialog_details_column: !isLoading && !hasError, hidden: isLoading }">
    <table mat-table [dataSource]="dataSource" matSort class="animated fadeIn">
      <ng-container matColumnDef="ID_MEDIDA">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
        <td mat-cell *matCellDef="let element">{{ element.ID_MEDIDA }}</td>
      </ng-container>
      <ng-container matColumnDef="VALOR">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Valor</th>
        <td mat-cell *matCellDef="let element">{{ element.VALOR }}</td>
      </ng-container>
      <ng-container matColumnDef="WEB_SERVICE">
        <th mat-header-cell *matHeaderCellDef>Servicio web</th>
        <td mat-cell *matCellDef="let element">{{ element.URL_SERVICIO_WEB }}</td>
      </ng-container>
      <ng-container matColumnDef="FECREG">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha y hora de registro</th>
        <td mat-cell *matCellDef="let element">{{ element.HORA_REGISTRO }}</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="300"></object>
          <h2>Sin datos</h2>
        </td>
      </tr>
    </table>
    <mat-paginator [length]="dataLength" [pageSizeOptions]="[10]" class="override-paginator" [ngClass]="{ hidden: isLoading }"></mat-paginator>
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cerrar</button>
</div>