<div style="width: 1000px">
    <h1 *ngIf="data.action == 'Registrar'" mat-dialog-title class="centre">{{ 'texto.dialog.registrar' | translate }}
        tarea
    </h1>
    <h1 *ngIf="data.action == 'Modificar'" mat-dialog-title class="centre">{{ 'texto.dialog.modificar' | translate }}
        tarea
    </h1>

    <form [formGroup]="formGroup">
        <mat-grid-list cols="12" rowHeight="85px" style="height: 100px;">
            <mat-grid-tile colspan="6">
                <mat-form-field hintLabel="Nombre de la tarea" appearance="standard">
                    <mat-label>Nombre de la tarea</mat-label>
                    <input matInput placeholder="Ingrese el nombre de la tarea" formControlName="name" required />
                    <mat-icon matSuffix>drive_file_rename_outline</mat-icon>
                    <mat-error *ngIf="name!.invalid">
                        {{ 'required' | translate}}
                    </mat-error>
                </mat-form-field>
            </mat-grid-tile>

            <mat-grid-tile colspan="6">
                <mat-form-field hintLabel="Descripción de la tarea" appearance="standard">
                    <mat-label>Descripción de la tarea</mat-label>
                    <input matInput placeholder="Ingrese una descripción" formControlName="description" required />
                    <mat-icon matSuffix>description</mat-icon>
                    <mat-error *ngIf="description!.invalid">
                        {{ 'required' | translate}}
                    </mat-error>
                </mat-form-field>
            </mat-grid-tile>

            <mat-grid-tile colspan="6">
                <mat-form-field appearance="standard">
                    <mat-label>¿La tarea pertenece a un workflow? </mat-label>
                    <mat-select formControlName="id_workflow">
                        <mat-option value="Sin workflow">
                            Sin workflow
                        </mat-option>
                        <mat-option *ngFor=" let workflow of workflowsBD " [value]="workflow.id">{{ workflow.name }}
                        </mat-option>
                    </mat-select>
                    <mat-icon matSuffix>account_tree</mat-icon>
                    <mat-hint align="start">Campo opcional</mat-hint>
                </mat-form-field>
            </mat-grid-tile>

            <mat-grid-tile colspan="6">
                <mat-form-field appearance="standard">
                    <mat-label>¿La tarea pertenece a un modulo?</mat-label>
                    <mat-select formControlName="id_module">
                        <mat-option value="Sin modulo">
                            Sin modulo
                        </mat-option>
                        <mat-option *ngFor=" let module of modules" [value]="module.id">
                            {{ module.name }}
                        </mat-option>
                    </mat-select>
                    <mat-icon matSuffix>view_module</mat-icon>
                    <mat-hint align="start">Campo opcional</mat-hint>
                </mat-form-field>
            </mat-grid-tile>

            <mat-grid-tile colspan="6">
                <mat-form-field hintLabel="Campo opcional" appearance="legacy" class="m-2">
                    <mat-label>
                        {{ 'workflow.detalle.pasos.form.validadores.placeholder' | translate }}
                    </mat-label>
                    <mat-select [value]='notificationValue' class="user-control" multiple
                        formControlName="employeesValidate">
                        <mat-option #allSelected (click)="toggleNotificationSelection()" [value]="0">
                            {{ 'workflow.detalle.pasos.form.notificacion.select' | translate }}</mat-option>
                        <mat-option [value]="store" *ngFor="let store of storesValidate"
                            (click)="changeNotification(store)">
                            {{ store.name }}
                        </mat-option>
                    </mat-select>
                    <mat-icon matSuffix>verified_user</mat-icon>
                </mat-form-field>
            </mat-grid-tile>

            <mat-grid-tile colspan="6">
                <mat-form-field appearance="legacy" class="m-2">
                    <mat-label>
                        {{ 'workflow.detalle.pasos.form.notificacion.placeholder' | translate }}
                    </mat-label>
                    <mat-select [value]='value' class="user-control" multiple formControlName="employeesNotify">
                        <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">
                            {{ 'workflow.detalle.pasos.form.notificacion.select' | translate }}
                        </mat-option>
                        <mat-option [value]="store" *ngFor="let store of storesNotify" (click)="valueChange(store)">
                            {{ store.name }}
                        </mat-option>
                    </mat-select>
                    <mat-icon matSuffix>notifications</mat-icon>
                    <mat-error *ngIf="employeesNotify!.invalid">
                        {{ 'required' | translate}}
                    </mat-error>
                </mat-form-field>
            </mat-grid-tile>

        </mat-grid-list>

        <mat-grid-list cols="12" rowHeight="60px" *ngIf="data.action != 'Modificar' ">
            <mat-grid-tile colspan="12" *ngIf="data.action != 'Modificar' ">
                <mat-label>
                    ¿La tarea es de tipo?
                </mat-label>
            </mat-grid-tile>

            <mat-grid-tile colspan="12">
                <mat-radio-group formControlName="isConditional">
                    <mat-radio-button class="m-2" [value]="true">
                        Condicional
                    </mat-radio-button>
                    <mat-radio-button [value]="false">
                        Secuencial
                    </mat-radio-button>
                </mat-radio-group>
            </mat-grid-tile>

            <mat-grid-tile class="gridTilePosition" *ngIf="isConditional?.value == null " colspan="12">
                <div>
                    {{ 'required' | translate }}
                </div>
            </mat-grid-tile>
        </mat-grid-list>
    </form>
    <div class="centre m-2">
        <button mat-raised-button class="mr-2" color="warn" [mat-dialog-close]="false"
            matTooltip="{{ 'tooltip.boton.dialog.cerrar' | translate }}">
            Cancelar
        </button>

        <button mat-raised-button class="secondary" (click)="enviar(formGroup.value)"
            matTooltip="{{ 'tooltip.boton.dialog.confirmar' | translate }}" [disabled]="formGroup.invalid">
            Confirmar
        </button>
    </div>
</div>