<h2 mat-dialog-title>Relaciones </h2>
<mat-dialog-content>
    <form [formGroup]="formGroup">
        <mat-grid-list cols="1" rowHeight="60px">

            <mat-grid-tile colspan="1">
                <mat-form-field appearance="fill">
                    <mat-label>Tablas</mat-label>
                    <mat-select formControlName="table_principal" (selectionChange)="dataColumnsPrimary()">
                        <mat-option *ngFor="let column of arr_relationship" [value]="column.TABLA_RELACION">
                            {{ column.TABLA_RELACION }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </mat-grid-tile>

            <mat-grid-tile colspan="1">
                <mat-form-field appearance="fill">
                    <mat-label>Columnas</mat-label>
                    <mat-select formControlName="column_relation">
                        <mat-option *ngFor="let column of colums_table" [value]="column">
                            {{ column }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </mat-grid-tile>

            <mat-grid-tile colspan="1">
                <mat-form-field appearance="fill">
                    <mat-label>Operador</mat-label>
                    <mat-select formControlName="operator">
                        <mat-option value="="> = </mat-option>
                        <mat-option value="!="> != </mat-option>
                        <mat-option value=">="> >= </mat-option>
                        <mat-option value="<=">
                            <= </mat-option>
                    </mat-select>
                </mat-form-field>
            </mat-grid-tile>

            <mat-grid-tile colspan="1">
                <mat-form-field appearance="fill">
                    <mat-label>Seleccione el tipo de inner</mat-label>
                    <mat-select formControlName="join_type">
                        <mat-option value="inner join"> Inner join</mat-option>
                        <mat-option value="left join"> Left join </mat-option>
                        <mat-option value="right join"> Right join </mat-option>
                        <mat-option value="cross join"> Cross join </mat-option>
                    </mat-select>
                </mat-form-field>
            </mat-grid-tile>

            <mat-grid-tile colspan="1">
                <mat-form-field appearance="fill">
                    <mat-label>Tablas</mat-label>
                    <mat-select formControlName="table_secondary" (selectionChange)="dataColumnsSecondary()">
                        <mat-option *ngFor="let column of arr_relationship" [value]="column.TABLA_RELACION">
                            {{ column.TABLA_RELACION }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </mat-grid-tile>

            <mat-grid-tile colspan="1">
                <mat-form-field appearance="fill">
                    <mat-label>Columnas</mat-label>
                    <mat-select formControlName="column_compare">
                        <mat-option *ngFor="let column of colums_inner" [value]="column">
                            {{ column }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </mat-grid-tile>
        </mat-grid-list>
    </form>
</mat-dialog-content>

<mat-dialog-actions align="end">
    <button mat-button color="warn" mat-dialog-close>Cancelar</button>
    <button mat-button color="primary" (click)="sendData(formGroup.value)"
        [disabled]="!formGroup.valid">Aceptar</button>
</mat-dialog-actions>