<div class="main-container animated fadeIn" (window:resize)="onResize($event)">
    <div [class]="card_size">
        <h1 *ngIf="action == 'Registrar'" mat-dialog-title class="title-card">
            {{ 'texto.dialog.registrar' | translate }}
        </h1>
        <h1 *ngIf="action == 'Modificar'" mat-dialog-title class="title-card">
            {{ 'texto.dialog.modificar' | translate }}
        </h1>

        <form [formGroup]="formGroup">
            <mat-grid-list cols="12" rowHeight="85px">
                <mat-grid-tile colspan="12">
                    <mat-form-field appearance="fill">
                        <mat-label>{{ 'workflow.detalle.tabla.tareas' | translate }}</mat-label>
                        <mat-select formControlName="tasks" (selectionChange)="verificar($event.value, 'A')">
                            <mat-option *ngFor="let item of tasksData" [value]="item">{{ item.name }} - A
                            </mat-option>
                        </mat-select>
                        <mat-icon matSuffix>assignment</mat-icon>
                        <mat-error *ngIf="tasks!.invalid">
                            {{ 'required' | translate }}
                        </mat-error>
                    </mat-form-field>
                </mat-grid-tile>
            </mat-grid-list>

            <div formArrayName="conditionals">
                <div *ngFor="let task of conditionals.controls; let i = index;" [formGroupName]="i">

                    <mat-label class="labelBox">
                        Seleccione los procesos para un caso positivo y negativo de la tarea
                        {{ task.get('taskCurrent')?.value.name }} - - {{
                        task.get('indexPosition')?.value }}
                    </mat-label>

                    <div class="row boxForm">
                        <mat-form-field  class="flexA">
                            <mat-label>{{ 'workflow.detalle.pasos.form.condicional.si' | translate}}</mat-label>
                            <mat-select formControlName="conditionalYes" required
                                (selectionChange)="verificar($event.value, task.get('indexYes')?.value )">
                                <mat-option *ngFor="let item of tasksData" [value]="item">
                                    {{ item.name }} - {{ task.get('indexYes')?.value }}
                                </mat-option>
                            </mat-select>
                            <mat-icon matSuffix>assignment</mat-icon>
                        </mat-form-field>

                        <mat-form-field  class="flexA">
                            <mat-label>{{ 'workflow.detalle.pasos.form.condicional.no' | translate}}</mat-label>
                            <mat-select formControlName="conditionalNo" required
                                (selectionChange)="verificar($event.value,  task.get('indexNo')?.value )">
                                <mat-option *ngFor="let item of tasksData" [value]="item">
                                    {{ item.name }} - {{ task.get('indexNo')?.value }}
                                </mat-option>
                            </mat-select>
                            <mat-icon matSuffix>assignment</mat-icon>
                        </mat-form-field>
                    </div>
                </div>
            </div>

            <mat-grid-list cols="12" rowHeight="78px" class="gridListTask">
                <mat-grid-tile colspan="12" *ngIf="action != 'Modificar'">
                    <mat-label>{{ 'workflow.detalle.pasos.form.posicion.label' | translate }}</mat-label>
                </mat-grid-tile>

                <mat-grid-tile colspan="12" *ngIf="action != 'Modificar'">
                    <mat-radio-group required (change)="verificarPosicion($event.value)"
                        formControlName="positionRequired">
                        <mat-radio-button class="m-2" value="1">
                            {{ 'workflow.detalle.pasos.form.radio.antes' | translate }}
                        </mat-radio-button>
                        <mat-radio-button value="2">
                            {{ 'workflow.detalle.pasos.form.radio.despues' | translate }}
                        </mat-radio-button>
                    </mat-radio-group>
                </mat-grid-tile>

                <mat-grid-tile class="gridTilePosition" *ngIf="positionRequired?.value <= 0 && action != 'Modificar'"
                    colspan="12">
                    <div>
                        {{ 'required' | translate }}
                    </div>
                </mat-grid-tile>

                <mat-grid-tile colspan="12" *ngIf="position > 0">
                    <mat-form-field appearance="fill">
                        <mat-label>{{ 'workflow.detalle.pasos.form.posicion.paso' | translate }}</mat-label>

                        <mat-select formControlName="positionSteps">
                            <mat-option *ngFor="let item of workflowTasks" [value]="item">
                                {{ item.sequence }} - {{ item.name}}
                            </mat-option>
                        </mat-select>
                        <mat-icon matSuffix>assignment</mat-icon>
                        <mat-error *ngIf="positionSteps?.invalid">
                            {{ 'required' | translate }}
                        </mat-error>
                    </mat-form-field>
                </mat-grid-tile>
            </mat-grid-list>
        </form>

        <div class="centre" style="padding: 8px;">
            <button mat-raised-button style="margin-right: 10px;" class="btnMarginRight " color="warn"
                (click)="backToWorkflows()" matTooltip="{{ 'tooltip.boton.dialog.cerrar' | translate }}">
                Cancelar
            </button>
            <button mat-raised-button class="secondary" (click)="transformData(formGroup.value)"
                matTooltip="{{ 'tooltip.boton.dialog.confirmar' | translate }}" [disabled]="formGroup.invalid">
                Confirmar
            </button>
        </div>
    </div>
</div>