<div class="pdf">
  <div class="btnCerrarPdf">
    <button class="btnPDF" mat-dialog-close><mat-icon>close</mat-icon></button>
  </div>

  <div id="Impresion">
    <div class="ImagenFondoPDF">
      <div class="containerLogoP">
        <div class="containerLogoPDF">
          <img [src]="logo ? logo : 'assets/img/logo-abc.png'" class="ImglogoPdf">
        </div>
      </div>
    </div>

    <div class="TituloPDF">
      <h1>Alumnos</h1>
    </div>
    <div style="width: 100%; display: flex; justify-content: center;">
      <div style="width: 95%;">
        <table mat-table [dataSource]="dataSource" class="borderTable"
          style="border-collapse: collapse; margin-bottom: 2px;">

          <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef class="borderTable" style="height: 20px !important;"> IdUsuario </th>
            <td mat-cell *matCellDef="let element" class="borderTable"> {{element.idUsuario}} </td>
          </ng-container>

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

          <ng-container matColumnDef="padre">
            <th mat-header-cell *matHeaderCellDef class="borderTable"> Padre de Familia</th>
            <td mat-cell *matCellDef="let element" class="borderTable">
              <span *ngFor="let padre of element.nombrePadres; let last = last">
                <span>{{padre.nombrePadre}}{{last ? '' : ', '}}</span>
              </span>
            </td>
          </ng-container>

          <ng-container matColumnDef="grupo">
            <th mat-header-cell *matHeaderCellDef class="borderTable"> Grupos </th>
            <td mat-cell *matCellDef="let element" class="borderTable">
              <span *ngFor="let grupo of element.nombreGrupos; let last = last">
                <span>{{grupo.nombreGrupo}}{{last ? '' : ', '}}</span>
              </span>
            </td>
          </ng-container>

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

  <mat-paginator [pageSizeOptions]="[25]">
  </mat-paginator>
  <div style="display: flex; justify-content: center; width: 100%;">
    <button mat-button style="background-color: red; border: none; color: white; " type="button"
      (click)="downloadPDF()">Descargar PDF</button>
  </div>
  <div style="display: flex; justify-content: center; margin-top: -42px; transform: scale(0.7);">
    <span class="Spinner" id="spinner" style="display: none;"></span>
  </div>
</div>