<div class="containerPagina">
  <div class="centrar1">
    <div class="fondo" [style.background-color]="color">
      <p class="content" [style.color]="textColor">Filtro de Materias</p>
    </div>
  </div>
  <div class="mx-auto mat-elevation-z8 seguimientoRes py-30 px-15"
    style="background-color: white; width: 98%; min-height: 400px; height: auto; margin-top: 40px;">


    <mat-spinner class="mx-auto" *ngIf="isLoading" [diameter]="60"></mat-spinner>
    <form class="form " *ngIf="!isLoading">
      <div class="input-label">
        <mat-form-field style="width: 40%;" class="input-tipo">
          <mat-label> Grado o Grupo </mat-label>
          <mat-select (selectionChange)="onGradoGrupo($event.value)">
            <mat-option *ngFor="let item of todos" [value]="item.idGrado ? item.nombreGrado : item.idGrupo">
              {{item.nombreGrado ? item.nombreGrado : item.nombreGrupo}}</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
    </form>

    <div class="alerta mx-auto mt-30 fadeInDown" *ngIf="!isLoading && filtrados.length == 0 ">
      <mat-icon style="color: #7c620c;" class="mr-15">info</mat-icon>
      <p style="font-family: sans-serif;">{{seleccionado && filtrados.length == 0 ? 'Este grado o grupo no tiene materias relacionadas':'Selecciona un grado o grupo para mostrar el listado de materias.'}}</p>
    </div>

    <div class="opciones">
      <div class="mx-5 justify-center mat-elevation-z2 flex-col cardMateria items-center cursor-pointer" (click)="ver(materia.idMateria)"
        *ngFor="let materia of filtrados;let i = index" [class.mat-elevation-z8]="isHover === i"
        (mouseover)="isHover=i " (mouseout)="isHover=false">
        <img [src]="'assets/img/rela.png'" alt="" style="height: 70px;">
        <span class="mt-10">
          {{materia.nombreMateria}}
        </span>
      </div>
    </div>

  </div>
</div>
