<mat-dialog-content class="dialog">
  <div class="cerrar">
    <button mat-dialog-close class="borderNone" style="background-color: white;"><mat-icon>close</mat-icon></button>
  </div>

  <div class="card">
    <div>
      <span class="tituloEditar">{{strTitulo1}}</span>
    </div>
    <form class="form" [formGroup]="form" (ngSubmit)="onSave()">
      <div class="input-label">

        <div class="DatosProfesor">
          <div class="DatosProfesorTitulo">
            <span>ID Profesor:</span>
            <span style="color: black; margin-left: 5px;">{{this.data.id}}</span>
          </div>
          <div class="DatosProfesorTitulo2">
            <span> Nombre:</span>
            <span style="color: black; margin-left: 5px;">{{this.data.nombre}}</span>
          </div>
        </div>
        <mat-form-field class="input">
          <mat-label class="label">Materia:</mat-label>
          <mat-select formControlName="materia" (selectionChange)="Opciones($event.value)">
            <mat-option [value]="materia" *ngFor="let materia of materias" (SelectionChange)="setMateria(materia)">
              {{ materia.name }}
            </mat-option>
          </mat-select>
          <mat-hint *ngIf="isValidField('materia')" style="color: red;">El campo es obligatorio</mat-hint>
        </mat-form-field>

        <mat-form-field class="input">
          <mat-label class="label">Grado o Grupo:</mat-label>
          <mat-select formControlName="grupo">
            <mat-option [value]="grupo" *ngFor="let grupo of grupos" (onSelectionChange)="setGrupo(grupo)">
              {{ grupo.gradoGrupo }}
            </mat-option>
          </mat-select>
          <mat-hint *ngIf="isValidField('grupo')" style="color: red;">Seleccione una Materia</mat-hint>
        </mat-form-field>
        <div class="agregarRelacion">
          <button class="agregar borderNone" type="button" (click)="Agregar()"
            [ngClass]="{BotonAgregar: this.form.value.materia == '' || this.form.value.grupo == ''}">Agregar<mat-icon>add</mat-icon></button>
          <button class="btn1 borderNone" type="button" (click)="limpiar()"
            style="background-color: #db6228; margin-left: 8%;"
            [ngClass]="{BotonLimpiar: this.form.value.materia == '' && this.form.value.grupo == ''}">Limpiar<mat-icon>delete_forever</mat-icon></button>
        </div>
      </div>

      <div class="table2">
        <div class="tabla2">
          <table mat-table [dataSource]="dataSource" style="width: 100%;">
            <ng-container matColumnDef="Materia">
              <th mat-header-cell *matHeaderCellDef>Materia</th>
              <td mat-cell *matCellDef="let Materia">{{Materia.materia}}</td>
            </ng-container>

            <ng-container matColumnDef="Grupo">
              <th mat-header-cell *matHeaderCellDef>Grado o Grupo</th>
              <td mat-cell *matCellDef="let Grupo">{{Grupo.grupo}}</td>
            </ng-container>

            <ng-container matColumnDef="Acciones">
              <th mat-header-cell *matHeaderCellDef>Acciones</th>
              <td mat-cell *matCellDef="let Acciones">
                <button type="button" class="btnIcon borderNone btnEditarP">
                  <mat-icon class="acciones" (click)="eliminarRelacion(Acciones)">close</mat-icon>
                </button>
              </td>
            </ng-container>

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

          </table>
        </div>
      </div>

      <div class="botones">
        <button class="btn1 borderNone" *ngIf="this.data.materia.length == 0"
          [ngClass]="{BotonAgregar1: this.relacionar.length === 0}" type="submit"
          style="margin-right: 2%;">Guardar<mat-icon>description</mat-icon></button>
        <button class="btn1 borderNone" *ngIf="this.data.materia.length > 0" type="submit"
          style="margin-right: 2%;">Guardar<mat-icon>description</mat-icon></button>
        <button class="btn1 borderNone" type="button" mat-dialog-close
          style="background-color: rgb(177, 22, 22); margin-left: 2%;">Cerrar<mat-icon>cancel</mat-icon></button>
      </div>
    </form>
  </div>
</mat-dialog-content>