<mat-card class="card-normal mat-elevation-z8 animated fadeIn fast">
  <mat-grid-list cols="12" rowHeight="55px" class="card-title">
    <mat-grid-tile colspan="12">
      <mat-card-title>Bitácora de Acceso</mat-card-title>
    </mat-grid-tile>
    <mat-grid-tile
      colspan="12"
      class="card-title"
      *ngIf="dataSource.data.length != 0"
    >
      <mat-form-field appearance="legacy" class="searcher">
        <mat-label>Buscador</mat-label>
        <input
          matInput
          placeholder="Ingrese lo que necesite buscar"
          (keyup)="applyFilter($event)"
        />
        <mat-icon matSuffix>search</mat-icon>
      </mat-form-field>
    </mat-grid-tile>
  </mat-grid-list>

  <div *ngIf="data_empty" class="data-empty">No hay datos registrados</div>

  <mat-progress-bar *ngIf="loading" mode="indeterminate"></mat-progress-bar>

  <table
    *ngIf="dataSource.data.length != 0"
    mat-table
    [dataSource]="dataSource"
    class="animated fadeIn"
  >

  
    <ng-container matColumnDef="IDBITACORA">
      <th mat-header-cell *matHeaderCellDef>ID de Bitacora</th>
      <td mat-cell *matCellDef="let element">
        {{ element.IDBITACORA }}
      </td>
    </ng-container>

    <ng-container matColumnDef="IDUSUARIO">
      <th mat-header-cell *matHeaderCellDef>Número del Empleado</th>
      <td mat-cell *matCellDef="let element">
        {{ element.IDUSUARIO }}
      </td>
    </ng-container>

    <ng-container matColumnDef="NOMBRE">
      <th mat-header-cell *matHeaderCellDef>Nombre Completo</th>
      <td mat-cell *matCellDef="let element">
        {{ element.NOMBRE }}
      </td>
    </ng-container>

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

    <ng-container matColumnDef="FECHAACCESO">
      <th mat-header-cell *matHeaderCellDef>Fecha de Acceso</th>
      <td mat-cell *matCellDef="let element">
        {{ element.FECHAACCESO }}
      </td>
    </ng-container>

    <ng-container matColumnDef="IPACCESO">
      <th mat-header-cell *matHeaderCellDef>IP de Acceso</th>
      <td mat-cell *matCellDef="let element">
        {{ element.IPACCESO }}
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>

  <div role="group" class="mat-paginator">
    <mat-grid-list cols="12" rowHeight="70px">
      <mat-grid-tile colspan="7"> </mat-grid-tile>
      <mat-grid-tile colspan="2">
        <div class="mat-paginator-page-size-label">Datos por página</div>
        <mat-form-field appearance="legacy">
          <mat-select [(ngModel)]="selectValue" (ngModelChange)="onSelectionChange()" >
            <mat-option 
              [value]="item" *ngFor="let item of selectFilter">
              {{ item }}</mat-option
            >
          </mat-select>
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="1">
        <div>{{ pagina1 }} - {{ pagina2 }} de {{ obtenerNumeroRegistroBitacora }}</div>
      </mat-grid-tile>

      <mat-grid-tile colspan="2">
        <div>
          <button
            [disabled]="pagAnterior"
            (click)="primeraPagina()"
            mat-icon-button
            type="button"
            aria-label="Primera Página"
          >
            <span class="mat-button-wrapper">
              <svg
                viewBox="0 0 24 24"
                focusable="false"
                class="mat-paginator-icon"
              >
                <path
                  d="M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z"
                ></path>
              </svg>
            </span>
            <span
              matripple=""
              class="mat-ripple mat-button-ripple mat-button-ripple-round"
              ng-reflect-disabled="true"
              ng-reflect-centered="true"
              ng-reflect-trigger="[object HTMLButtonElement]"
            ></span
            ><span class="mat-button-focus-overlay"></span>
          </button>
          <button
            [disabled]="pagAnterior"
            (click)="paginaAnterior()"
            mat-icon-button
            type="button"
            aria-label="Anterior Página"
          >
            <span class="mat-button-wrapper"
              ><svg
                viewBox="0 0 24 24"
                focusable="false"
                class="mat-paginator-icon"
              >
                <path
                  d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
                ></path></svg></span
            ><span
              matripple=""
              class="mat-ripple mat-button-ripple mat-button-ripple-round"
              ng-reflect-disabled="true"
              ng-reflect-centered="true"
              ng-reflect-trigger="[object HTMLButtonElement]"
            ></span
            ><span class="mat-button-focus-overlay"></span>
          </button>
          <button
            [disabled]="pagSiguiente"
            (click)="paginaSiguiente()"
            mat-icon-button
            type="button"
            aria-label="Siguiente Página"
          >
            <span class="mat-button-wrapper"
              ><svg
                viewBox="0 0 24 24"
                focusable="false"
                class="mat-paginator-icon"
              >
                <path
                  d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
                ></path></svg></span
            ><span
              matripple=""
              class="mat-ripple mat-button-ripple mat-button-ripple-round"
              ng-reflect-disabled="true"
              ng-reflect-centered="true"
              ng-reflect-trigger="[object HTMLButtonElement]"
            ></span
            ><span class="mat-button-focus-overlay"></span>
          </button>
          <button
            [disabled]="pagSiguiente"
            (click)="ultimaPagina()"
            mat-icon-button
            type="button"
            aria-label="Ultima Página"
          >
            <span class="mat-button-wrapper"
              ><svg
                viewBox="0 0 24 24"
                focusable="false"
                class="mat-paginator-icon"
              >
                <path
                  d="M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6zM16 6h2v12h-2z"
                ></path></svg></span
            ><span
              matripple=""
              class="mat-ripple mat-button-ripple mat-button-ripple-round"
              ng-reflect-disabled="true"
              ng-reflect-centered="true"
              ng-reflect-trigger="[object HTMLButtonElement]"
            ></span
            ><span class="mat-button-focus-overlay"></span>
          </button>
        </div>
      </mat-grid-tile>
    </mat-grid-list>
  </div>
</mat-card>
