<h1 *ngIf="data.action == 'Registrar'" mat-dialog-title>{{ 'texto.dialog.registrar' | translate }}
    campo
</h1>
<h1 *ngIf="data.action == 'Modificar'" mat-dialog-title>{{ 'texto.dialog.modificar' | translate }}
    campo
</h1>

<form [formGroup]="formGroup">
    <mat-grid-list cols="12" rowHeight="85px">
        <mat-grid-tile colspan="12">
            <mat-form-field hintLabel="Campos del formulario" appearance="fill">
                <mat-label>{{ 'workflow.detalle.campos.form.campo-formulario' | translate}}</mat-label>
                <mat-select formControlName="field">
                    <mat-option *ngFor="let field of fields" [value]="field">
                        {{ field.name}} -- {{ field.required}}
                    </mat-option>
                </mat-select>
                <mat-icon matSuffix>format_shapes</mat-icon>
            </mat-form-field>
        </mat-grid-tile>

        <mat-grid-tile colspan="12">
            <mat-form-field  hintLabel="Usuarios" class="m-2">
                <mat-label>{{ 'workflow.detalle.pasos.form.validadores.placeholder' | translate }}</mat-label>
                <mat-select [value]='value' multiple formControlName="employeesValidate">
                    <mat-option #allSelected (click)="toggleAllSelection()" [value]="0">
                        {{ 'workflow.detalle.pasos.form.notificacion.select' | translate }}
                    </mat-option>
                    <mat-option [value]="user" *ngFor="let user of users" (click)="valueChange(user)">
                        {{ user.name }}
                    </mat-option>
                </mat-select>
                <mat-icon matSuffix>people</mat-icon>
                <mat-error>
                    {{ 'required' | translate}}
                </mat-error>
            </mat-form-field>
        </mat-grid-tile>

    </mat-grid-list>
</form>

<div class="centre" style="margin-bottom: 10px;" [formGroup]="formGroup">
    <mat-checkbox formControlName="isNotified" labelPosition="before">{{ 'workflow.detalle.campos.form.notificar' |
        translate}}
    </mat-checkbox>
</div>

<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)="sendData(formGroup.value)"
        matTooltip="{{ 'tooltip.boton.dialog.confirmar' | translate }}" [disabled]="formGroup.invalid">
        Confirmar
    </button>
</mat-dialog-actions>