<h1 *ngIf="data.action == 'Registrar'" mat-dialog-title class="">{{ 'texto.dialog.registrar' | translate }}
    tarea
</h1>
<h1 *ngIf="data.action == 'Modificar'" mat-dialog-title class="">{{ '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" >
                <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" >
                <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 >
                <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 >
                <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"  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  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-tile colspan="6">
            <mat-form-field  class="m-2">
                <mat-label>
                    ¿La tarea es de tipo?
                </mat-label>
                <mat-select formControlName="isConditional">
                    <mat-option [value]="true">
                        Condicional
                    </mat-option>
                    <mat-option [value]="false">
                        Secuencial
                    </mat-option>
                </mat-select>
                <mat-icon matSuffix>notifications</mat-icon>
            </mat-form-field>
        </mat-grid-tile>
    </mat-grid-list>
</form>

<mat-dialog-actions align="end">
    <button mat-raised-button class="button-accion" color="warn" [mat-dialog-close]="false"
        matTooltip="{{ 'tooltip.boton.dialog.cerrar' | translate }}">
        Cancelar
    </button>

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