<h2 mat-dialog-title>{{ titleForm }}</h2>
<mat-dialog-content>

  <app-loading-card [isLoading]="isLoading" [txtLoading]="interService.get('cargando_informacion_formulario')" />

  @if (!isLoading) {
    <form class="override_content_flex" [formGroup]="formGroup">
      <div class="col-flex-12">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label>{{ interService.get('nombre_flujo_trabajo') }}</mat-label>
          <input matInput 
            type="text"
            formControlName="NOMBRE_WORKFLOW" 
            [placeholder]="interService.get('placeholder_nombre_flujo_trabajo')"
            maxlength="50" />
          @if (formGroup.controls['NOMBRE_WORKFLOW'].hasError('required')) {
            <mat-error [title]="interService.get('el_campo')+' '+interService.get('nombre_flujo_trabajo')+' '+interService.get('es_requerido')">
              {{ interService.get('el_campo') }} <b>{{ interService.get('nombre_flujo_trabajo') }}</b> {{ interService.get('es_requerido') }}
            </mat-error>
          }
        </mat-form-field>
      </div>
      <div class="col-flex-12">
        <mat-form-field appearance="outline" class="w-100">
          <mat-label>{{ interService.get('descripcion') }}</mat-label>
          <textarea matInput formControlName="DESCRIPCION" maxlength="65535" [placeholder]="interService.get('placeholder_descripcion')"></textarea>
          @if (formGroup.controls['DESCRIPCION'].hasError('required')) {
            <mat-error [title]="interService.get('el_campo')+' '+interService.get('descripcion')+' '+interService.get('es_requerido')">
              {{ interService.get('el_campo') }} <b>{{ interService.get('descripcion') }}</b> {{ interService.get('es_requerido') }}
            </mat-error>
          }
        </mat-form-field>
      </div>
      @if (isEditMode) {
        <div class="col-flex-12">
          <mat-form-field appearance="outline" class="w-100">
            <mat-label>{{ interService.get('comentario_cambio') }}</mat-label>
            <textarea matInput formControlName="COMENTARIO_CAMBIO" maxlength="500" [placeholder]="interService.get('explique_motivo_cambio')"></textarea>
            @if (formGroup.controls['COMENTARIO_CAMBIO'].hasError('required')) {
              <mat-error>
                {{ interService.get('el_campo') }} <b>{{ interService.get('comentario_cambio') }}</b> {{ interService.get('es_requerido') }}
              </mat-error>
            }
          </mat-form-field>
        </div>
      }
    </form>
  }
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="false">{{ interService.get('cerrar') }}</button>
  <button mat-button [disabled]="formGroup.invalid || isLoading" (click)="save()">{{ interService.get('guardar') }}</button>
</mat-dialog-actions>
