<div style="width: 300px">
    <h1 mat-dialog-title class="centre">{{ data.accion }} Perfil</h1>
    <div mat-dialog-content>
        <form [formGroup]="formGroup">
            <mat-grid-list cols="12" rowHeight="70px">
                <mat-grid-tile colspan="12" *ngIf="data.accion == 'Modificar'">
                    <mat-form-field appearance="legacy">
                        <mat-label>Número del Perfil</mat-label>
                        <input matInput formControlName="id" />
                        <mat-icon matSuffix>tag</mat-icon>
                    </mat-form-field>
                </mat-grid-tile>
                <mat-grid-tile colspan="12">
                    <mat-form-field appearance="legacy">
                        <mat-label>Perfil</mat-label>
                        <input matInput placeholder="Ingrese el nombre del perfil" formControlName="perfil" required />
                        <mat-icon matSuffix>perm_contact_calendar</mat-icon>
                        <mat-error *ngIf="perfil!.invalid">{{ perfil!.hasError("required") ? "Debe ingresar este campo" : "" }}
                        </mat-error>
                    </mat-form-field>
                </mat-grid-tile>
            </mat-grid-list>
        </form>
         
        <div class="centre">
            <button mat-raised-button [mat-dialog-close]="false" color="warn" class="mr-2">
        Cancelar
      </button>
            <button mat-raised-button class="success" [mat-dialog-close]="formGroup!.value">
        Confirmar
      </button>
        </div>
    </div>
</div>