<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 mat-elevation-z8" style="margin-top: 60px; " >
    <div class="tabla1" >
      <table mat-table [dataSource]="dataSource" multiTemplateDataRows s>
        <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 registro" style="text-align:center;">

            {{getRegistroStatus(registro.idUsuario)==='Completa'? getRegistroAdStatus(registro.idUsuario) ==='Completa'
            ? 'Imprimir Registro y entregarlo al Colegio' : 'Registro Administrativo' :'Registro Académico'}}
          </td>
        </ng-container>

     <ng-container matColumnDef="RegistroAcademico">
  <th mat-header-cell *matHeaderCellDef class="titulo-tabla" style="text-align:center;">
    Registro Académico
  </th>
  <td mat-cell *matCellDef="let registro" style="text-align:center;">
    <a class="a-none" (click)="nombre(registro.idUsuario, 'ac')">

      <mat-icon
        style="color: green; vertical-align: middle; transform: scale(0.9);"
        *ngIf="isCompleted(registro.idUsuario)">
        check
      </mat-icon>

      <mat-icon
        style="color: orange; vertical-align: middle; transform: scale(0.7);"
        *ngIf="!isCompleted(registro.idUsuario)">
        edit
      </mat-icon>

      {{ getStatus(registro.idUsuario) }}

    </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 class="a-none" *ngIf="getRegistroStatus(registro.idUsuario)==='Completa' else NoCompleta1"
              (click)="nombre(registro.idUsuario, 'ad')">
              <mat-icon style="color: green; vertical-align: middle; transform: scale(0.9);"
                *ngIf="getRegistroAdStatus(registro.idUsuario)  ==='Completa'">check</mat-icon>
              <mat-icon style="color: orange; vertical-align: middle; transform: scale(0.7);"
                *ngIf="getRegistroAdStatus(registro.idUsuario)  !=='Completa'">edit</mat-icon>
              {{getRegistroStatus(registro.idUsuario)==='Completa'? getRegistroAdStatus(registro.idUsuario)
              ==='Completa' ? 'Completa' : 'Ir al registro' :'-'}}
            </a>
            <ng-template #NoCompleta1>-</ng-template>

          </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
              *ngIf="getRegistroStatus(registro.idUsuario)==='Completa' && getRegistroAdStatus(registro.idUsuario)  ==='Completa' else NoCompleta"
              class="items-center justify-center" (click)="descargarPDF(registro.idUsuario)">
              <button mat-button class="btnPDF">
                <mat-icon matSuffix>picture_as_pdf</mat-icon> Ver PDF
              </button>
            </div>
            <ng-template #NoCompleta>-</ng-template>

          </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>
