<div class="containerPagina">
    <div class="centrar1">
      <div class="fondo" [style.background-color]="color">
        <p class="content" [style.color]="textColor">Consulta de Registro Académico / Administrativo</p>
      </div>
    </div>
     <div class="buscador">
        <div class="contenedorInputs" style="display: flex; align-items: center;">
          <mat-form-field class="input" style="width: 45%;">
            <mat-label>Buscar</mat-label>
            <input type="text" matInput (keyup)="applyFilter($event)" #input>
            <mat-icon matSuffix>search</mat-icon>
          </mat-form-field>
        </div>
        <div class="exportar">
          <button mat-button type="button" class="boton-export" (click)="exportarTodo()">Exportar a Excel<mat-icon
              svgIcon="excel" class="icono-blanco"></mat-icon></button>

        </div>
      </div>

        <div class="table mat-elevation-z8">
            <div class="tabla1 " #TABLE>
                <table mat-table [dataSource]="dataSource" #table >

                    <ng-container matColumnDef="IDAlumno">
                        <th mat-header-cell *matHeaderCellDef> ID Alumno </th>
                        <td mat-cell *matCellDef="let Registro">{{Registro.idUsuario}}</td>
                    </ng-container>

                    <ng-container matColumnDef="nombre">
                        <th mat-header-cell *matHeaderCellDef> Nombre Alumno</th>
                        <td mat-cell *matCellDef="let Registro">{{Registro.nombreCompleto}}</td>
                    </ng-container>

                    <ng-container matColumnDef="usuarioRegistro">
                        <th mat-header-cell *matHeaderCellDef> Usuario que Registro</th>
                        <td mat-cell *matCellDef="let Registro">
                            {{Registro.quienRegistra}}
                        </td>

                    </ng-container>

                    <ng-container matColumnDef="academico">
                        <th mat-header-cell *matHeaderCellDef> Académico</th>
                        <td mat-cell *matCellDef="let Registro">
                            {{Registro.registroAcCompleto}}
                        </td>
                    </ng-container>

                    <ng-container matColumnDef="administrativo">
                        <th mat-header-cell *matHeaderCellDef> Administrativo </th>
                        <td mat-cell *matCellDef="let Registro">
                           {{Registro.registroAdCompleto}}
                        </td>
                    </ng-container>

                    <ng-container matColumnDef="ultActuaizacion">
                        <th mat-header-cell *matHeaderCellDef> Última Actualización</th>
                        <td mat-cell *matCellDef="let Registro">
                            {{Registro.ultActualizacion}}
                        </td>
                    </ng-container>

                    <ng-container matColumnDef="acciones">
                        <th mat-header-cell *matHeaderCellDef> Acciones</th>
                        <td mat-cell *matCellDef="let Registro">
                            <span *ngIf="Registro.registroAcCompleto == 'No' && Registro.registroAdCompleto == 'No'">
                                No Aplica
                            </span>
                            <button mat-button class="btnPDF" *ngIf="Registro.registroAcCompleto == 'Sí' && Registro.registroAdCompleto == 'Sí' " (click)="descargarPDF(Registro.idUsuario)">
                               <mat-icon matSuffix>picture_as_pdf</mat-icon>  Ver PDF
                            </button>
                        </td>
                    </ng-container>

                    <tr mat-header-row *matHeaderRowDef="columnas"></tr>
                    <tr mat-row *matRowDef="let row; columns: columnas;"></tr>
                </table>
                <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
            </div>
            <mat-paginator [pageSizeOptions]="[5, 10, 15]" showFirstLastButtons class="mat-elevation-z8"></mat-paginator>
        </div>
</div>
