<div class="containerPagina">
    <div class="centrar1">
        <div class="fondo" [style.background-color]="color">
          <p class="content" [style.color]="textColor">Registro de Alumnos</p>
        </div>
      </div>

      <div class="table" style="margin-top: 60px;">
        <div class="tabla1">
          <table mat-table [dataSource]="dataSource"  multiTemplateDataRows class="mat-elevation-z8">
            <ng-container matColumnDef="id">
              <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="text-align:center;">ID Alumno</th>
              <td mat-cell *matCellDef="let registro" style="text-align:center;"> {{registro.idUsuario}} </td>
            </ng-container>
    
            <ng-container matColumnDef="nombre">
              <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="text-align:center;"> Nombre Completo</th>
              <td mat-cell *matCellDef="let registro" style="text-align:center;"> {{registro.nombreAlumno}} </td>
            </ng-container>
    
            <ng-container matColumnDef="grado">
              <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="text-align:center;">Grado</th>
              <td mat-cell *matCellDef="let registro" style="text-align:center;">{{registro.grado}} </td>
            </ng-container>
    
            <ng-container matColumnDef="SiguientePaso">
              <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="text-align:center;"> Siguiente Paso</th>
              <td mat-cell *matCellDef="let padre" style="text-align:center;"> Registro Academico</td>
            </ng-container>
    
            <ng-container matColumnDef="RegistroAcademico">
              <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="text-align:center;">Registro Academico</th>
              <td mat-cell *matCellDef="let registro" style="text-align:center;"> <a href="homePadres/registro" (click)="nombre(registro)">{{srtLink}}</a></td>
            </ng-container>

            <ng-container matColumnDef="RegistroAdministrativo">
              <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="text-align:center;">Registro Administrativo</th>
              <td mat-cell *matCellDef="let registro" style="text-align:center;"><a href="homePadres/registroAd" (click)="nombre(registro)">Ir a el registro</a></td>
            </ng-container>
    
            <ng-container matColumnDef="VersionImpresa">
              <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="text-align:center;"> Versión Impresa </th>
              <td mat-cell *matCellDef="let registro" style="text-align:center;">
                <div class="items-center justify-center cursor-pointer" (click)="descargarPDF(registro.idUsuario)">
                  <img [src]="'assets/img/pdf.png'" height="20px" width="20px" class="mr-10"> 
                  Descargar
                </div>
              </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" colspan="4">
                <span style="display: flex; justify-content: center; width: 190%;">
                  No se encontraron resultados
                </span>
              </td>
            </tr>
          </table>
          <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
        </div>
        <mat-paginator [pageSizeOptions]="[5, 10, 15]"></mat-paginator>
      </div>
</div>