<!-- Título -->
<div class="centrar fadeIn">
  <div class="fondo" [style.background-color]="color">
    <p class="content" [style.color]="textColor">Bitácoras</p>
  </div>
</div>

<!-- Contenedor principal -->
<div class="container-col fadeIn">

  <!-- Buscador -->
    <div class="flex-row container-search">
        <div class="contenedor-inputCard">
            <mat-form-field class="input">
                <input class="input" (keyup)="applyFilter($event)" matInput placeholder="Buscar" #input>
                <mat-icon matSuffix>search</mat-icon>
            </mat-form-field>
        </div>
    </div>

  <!-- Tabla -->
  <div class="table-container mat-elevation-z8">
    <div class="table-responsive" #TABLE>
      <table mat-table [dataSource]="dataSourceBitacoras" class="mat-elevation-z8" matSort>

        <!-- Materia -->
        <ng-container matColumnDef="materia">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Materia</th>
          <td mat-cell *matCellDef="let bitacora"> {{ bitacora.idMateriaBitacora }} </td>
        </ng-container>

        <!-- Tipo -->
        <ng-container matColumnDef="tipo">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Tipo</th>
          <td mat-cell *matCellDef="let bitacora"> {{ bitacora.idTipoBitacora }} </td>
        </ng-container>

        <!-- Descripción -->
        <ng-container matColumnDef="descripcion">
          <th mat-header-cell *matHeaderCellDef>Descripción</th>
          <td mat-cell *matCellDef="let bitacora"> {{ bitacora.descripcionBitacora }} </td>
        </ng-container>

        <!-- Fecha -->
        <ng-container matColumnDef="fechaPublicacion">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha</th>
          <td mat-cell *matCellDef="let bitacora"> {{ bitacora.fechaPublicacion | date:'mediumDate' }} </td>
        </ng-container>

        <!-- Acciones -->
        <ng-container matColumnDef="acciones">
          <th mat-header-cell *matHeaderCellDef>Ver</th>
          <td mat-cell *matCellDef="let bitacora">
            <button mat-icon-button color="primary" (click)="openDialog(bitacora)" matTooltip="Ver detalles">
              <mat-icon>visibility</mat-icon>
            </button>
          </td>
        </ng-container>

        <!-- Filas -->
        <tr mat-header-row *matHeaderRowDef="columnasBitacoras"></tr>
        <tr mat-row *matRowDef="let row; columns: columnasBitacoras;"></tr>

        <!-- Sin datos -->
        <tr class="mat-row" *matNoDataRow>
          <td class="mat-cell" colspan="5">No hay resultados para "{{input.value}}"</td>
        </tr>
      </table>

      <!-- Loader -->
      <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
    </div>

    <!-- Paginador -->
    <mat-paginator [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons></mat-paginator>
  </div>
</div>
