<h2 mat-dialog-title>{{ data.action }} Workflow</h2>
<div mat-dialog-content>
    <form [formGroup]="formGroup">
        <mat-grid-list cols="12" rowHeight="80px">
            <mat-grid-tile colspan="12">
                <mat-form-field appearance="fill">
                    <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-form-field>
            </mat-grid-tile>

            <mat-grid-tile colspan="12">
                <mat-form-field appearance="fill">
                    <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-form-field>
            </mat-grid-tile>

            <mat-grid-tile colspan="12">
                <mat-form-field appearance="fill">
                    <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-form-field>
            </mat-grid-tile>

            <mat-grid-tile colspan="12" *ngIf="data.action != 'Modificar' ">
                <mat-form-field appearance="fill">
                    <mat-label>
                        Seleccione la forma de trabajo del workflow
                    </mat-label>
                    <mat-select formControlName="isAutomatic">
                        <mat-option [value]="true">Automatico</mat-option>
                        <mat-option [value]="false">Manual</mat-option>
                    </mat-select>
                    <mat-icon matSuffix>work</mat-icon>

                </mat-form-field>
            </mat-grid-tile>

            <mat-grid-tile colspan="12" *ngIf="data.action != 'Modificar' ">
                <mat-form-field appearance="fill">
                    <mat-label>
                        Seleccione el tipo de workflow
                    </mat-label>
                    <mat-select formControlName="isForm">
                        <mat-option [value]="false">Solicitud</mat-option>
                        <mat-option [value]="true">Formulario</mat-option>
                    </mat-select>
                    <mat-icon matSuffix>settings</mat-icon>
                </mat-form-field>
            </mat-grid-tile>

            <mat-grid-tile colspan="12" *ngIf="isForm?.value == true">
                <mat-form-field appearance="fill">
                    <mat-label>
                        Seleccione el formulario del workflow
                    </mat-label>
                    <mat-select formControlName="id_form">
                        <mat-option *ngFor="let item of forms" [value]="item.CODIGO_FORM">
                            {{ item.NOMBRE_FORM }}
                        </mat-option>
                    </mat-select>
                    <mat-icon matSuffix><span class="material-symbols-outlined">
                            list_alt
                        </span></mat-icon>
                </mat-form-field>
            </mat-grid-tile>
        </mat-grid-list>
    </form>
</div>

<mat-dialog-actions align="end">
    <button mat-raised-button class="m-2" color="warn" [mat-dialog-close]="false"
        matTooltip="{{ 'tooltip.boton.dialog.cerrar' | translate }}">
        Cancelar
    </button>
    <button mat-raised-button class="secondary" (click)="sendData(formGroup.value)"
        matTooltip="{{ 'tooltip.boton.dialog.confirmar' | translate }}" [disabled]="formGroup.invalid">
        Aceptar
    </button>
</mat-dialog-actions>