<div style="width: 600px; " class=" animated fadeIn fast">
    <h1 mat-dialog-title class="centre">{{ data.action }}</h1>
    <div mat-dialog-content>
        <form [formGroup]="formGroup">

            <mat-grid-list cols="12" rowHeight="120px">
                <mat-grid-tile colspan="12">
                    <mat-form-field hintLabel="{{ 'workflow.nombre.form' | translate }}" appearance="standard">
                        <mat-label>{{ 'workflow.nombre.form' | translate }}</mat-label>
                        <input matInput placeholder="{{ 'workflow.nombre.form.placeholder' | translate }}"
                            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="12">
                    <mat-form-field hintLabel="{{ 'workflow.descripcion.form' | translate }}" appearance="standard">
                        <mat-label>{{ 'workflow.descripcion.form' | translate }}</mat-label>
                        <textarea matInput formControlName="description"
                            placeholder="{{ 'workflow.descripcion.form.placeholder' | translate}}" required></textarea>
                        <mat-icon matSuffix>drive_file_rename_outline</mat-icon>
                        <mat-error *ngIf="description!.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> 
                        Seleccione la manera de funcionar del workflow
                    </mat-label>
                </mat-grid-tile>
                <mat-grid-tile colspan="12" *ngIf="data.action != 'Modificar' ">
                    <mat-radio-group required formControlName="isAutomatic">
                        <mat-radio-button class="m-2" [value]="true">
                            Automático
                        </mat-radio-button>
                        <mat-radio-button [value]="false">
                            Manual
                        </mat-radio-button>
                    </mat-radio-group>
                </mat-grid-tile>
            </mat-grid-list>

            <mat-grid-list cols="12" rowHeight="120px">
                <mat-grid-tile colspan="12">
                    <mat-form-field hintLabel="{{ 'workflow.modulos.form' | translate }}" appearance="standard">
                        <mat-label>{{ 'workflow.modulos.form.placeholder' | translate }}</mat-label>
                        <mat-select formControlName="module">
                            <mat-option *ngFor="let item of modules; let i = index" [value]="item.id">
                                {{ item.name }}
                            </mat-option>
                        </mat-select>
                        <mat-icon matSuffix>view_module</mat-icon>
                        <mat-error *ngIf="module!.invalid">
                            {{ 'required' | translate }}
                        </mat-error>
                    </mat-form-field>
                </mat-grid-tile>
            </mat-grid-list>
        </form>

        <div class="centre" style="padding-top: 20px">
            <button mat-raised-button class="mr-2" color="warn" [mat-dialog-close]="false"
                matTooltip="{{ 'tooltip.boton.dialog.cerrar' | translate }}">
                <mat-icon>close</mat-icon>
            </button>
            <button mat-raised-button class="secondary" [mat-dialog-close]="formGroup.value"
                matTooltip="{{ 'tooltip.boton.dialog.confirmar' | translate }}" [disabled]="formGroup.invalid">
                <mat-icon>done</mat-icon>
            </button>
        </div>
    </div>
</div>