<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" style="height: auto !important;">
    <div>
      <span class="tituloEditar">{{strTitulo}}</span>
    </div>
    <form class="form" [formGroup]="form" (ngSubmit)="onSave()">
      <div class="input-label" style="margin-top: 12px;">
        <div class="containerDatos">
          <div class="titulocontenedorNombre" style="width: 28%;">
            <span class="TituloDta"> ID Usuario: </span>
            <span class="tituloNombre">{{this.data.id}}</span>
          </div>

          <div class="titulocontenedorNombre" style="width: 28%;">
            <span class="TituloDta"> Grado:</span>
            <span class="tituloNombre">{{this.data.grado}} </span>
          </div>
          <div class="titulocontenedorNombre" style="width: 28%;">
            <span class="TituloDta"> Nombre: </span>
            <span class="tituloNombre">{{this.data.nombre}}</span>
          </div>
        </div>
        <mat-form-field class="input" style="width: 300px;">
          <mat-label>Padre de Familia</mat-label>
          <input matInput type="text" [matAutocomplete]="auto" [formControl]="myControl">
          <mat-icon matSuffix style="transform: rotateY(180deg);">person_add</mat-icon>
          <mat-autocomplete #auto="matAutocomplete">
            <mat-option [value]="padre" (onSelectionChange)="setPadre(padre)"
              *ngFor="let padre of filteredPadres | async" style="font-size: 14px;">
              {{ padre }}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>

        <mat-form-field class="input">
          <mat-label class="label"> Grupo:</mat-label>
          <mat-select formControlName="grupo">
            <mat-option [value]="grupo" (onSelectionChange)="setGrupo(grupo)" *ngFor="let grupo of grupos">
              {{ grupo.name}}
            </mat-option>
          </mat-select>
        </mat-form-field>

        <div class="agregarRelacion">
          <button class="agregar borderNone" type="button" (click)="Agregar()"
            [ngClass]="{BotonAgregar: this.form.getRawValue().padre == '' && this.form.getRawValue().grupo == '' || this.form.getRawValue().padre != '' && this.form.getRawValue().grupo != ''}">Agregar<mat-icon>add</mat-icon></button>
          <button class="btn1 borderNone" type="button" (click)="limpiar()"
            style="background-color: #db6228; margin-left: 8%; margin-top: -6px;"
            [ngClass]="{BotonLimpiar: this.form.getRawValue().padre == '' && this.form.getRawValue().grupo == ''}">Limpiar<mat-icon>delete_forever</mat-icon></button>
        </div>
      </div>
      <div class="table2">
        <div class="tabla2">
          <table mat-table [dataSource]="dataSource">

            <ng-container matColumnDef="Padre">
              <th mat-header-cell *matHeaderCellDef>Padre de familia</th>
              <td mat-cell *matCellDef="let Padre">{{Padre.padre}}</td>
            </ng-container>

            <ng-container matColumnDef="Grupo">
              <th mat-header-cell *matHeaderCellDef>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 " style="background-color: red; margin-left: 70px; ">
                  <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" type="submit" *ngIf="this.data.padre.length == 0 && this.data.grupo.length == 0"
          [ngClass]="{BotonAgregar1: this.relacionar.length === 0}">Guardar<mat-icon>description</mat-icon></button>
        <button class="btn1 borderNone" type="submit" *ngIf="this.data.padre.length > 0 || this.data.grupo.length >0"
          mat-dialog-close>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>