<form [formGroup]="form" name="form" autocomplete="off" novalidate (ngSubmit)="submit()">
    <div class="mail-box-header detail-header" [ngClass]="{'title-border-bottom': mode !='new'}">
      <xdf-form-header [icon]="icon" title_="scheduler-task.title" [recordIdentifier]="record?.id"
        titleDesc="scheduler-task.title.desc" [mode]="mode" [resourceAuth]="resourceAuth" (optionEvent)="optionEvent($event)"
        [editing]="mode === 'edit'" [displaying]="mode === 'view'">
      </xdf-form-header>
    </div>
  
    <div class="mail-box-content">
      <div class="row">
        <div class="col-12">
          <div class="form-content">
            <div class="group-content">
              <div class="row">
                <div class="form-group col-xl-11">
                  <xdf-input name="description" label="scheduler-task_form_description" type="text" [required]="true"
                    placeholder="scheduler-task_form_description" [formGroup]="form"
                    [options]="{maxLength: 1000, showLength: true}">
                  </xdf-input>
                </div>
                <div class="form-group col-xl-1 spaceToCheckBoxScheduler">
                  <xdf-checkbox name="internals" label="scheduler-task_form_internals"
                    suggest="scheduler-task_form_internals_suggest" [options]="{showSuggest: false}" [formGroup]="form">
                    {{ 'scheduler-task_form_internals' | translate}}
                  </xdf-checkbox>
                </div>
              </div>
              <div class="row">
                <div class="form-group col-xl-6">
                  <xdf-select name="calendar" label="scheduler-task_form_calendar" [values]="listaCalendario"
                    [required]="true" placeholder="scheduler-task_form_calendar" [formGroup]="form"
                    [options]="{sourceValue: 'id', sourceLabel: 'name'}">
                  </xdf-select>
                </div>
                <div class="form-group col-xl-6">
                  <xdf-select name="businessFlow" label="scheduler-task_form_businessFlow"
                    [values]="listaETL" [required]="true" placeholder="scheduler-task_form_businessFlow"
                    [formGroup]="form" [options]="{sourceValue: 'id', sourceLabel: 'description'}">
                  </xdf-select>
                </div>
              </div>
             
            </div>
  
            <div class="hr-line-dashed"></div>
  
            <!-- Configuración -->
            <div class="legend">
              <span class="group-title">{{ 'scheduler-task.config.title' | translate}}</span>
            </div>
  
            <div class="input-together">
              <div class="group-content">
                <div class="row">
                  <div class="form-group col-xl-12 it">
                    <xdf-input name="cronExpression" label="scheduler-task_form_cronExpression" type="text" [required]="true"
                      placeholder="scheduler-task_form_cronExpression" [formGroup]="form"
                      [options]="{maxLength: 100, showLength: true}">
                    </xdf-input>
                  </div>
                  <div class="form-group col-xl-6 it">
                    <span>{{ 'scheduler-task.additional.parameters.help.crontab.title' | translate }}</span>&nbsp;
                    <span class="fa fa-info-circle" (click)="onCronExpressionClicked()"></span>
                  </div>
                </div>
              </div>
            </div>
  
            <div class="hr-line-dashed"></div>
  
            <!-- Parámetros adicionales -->
            <div class="legend">
              <span class="group-title">{{ 'scheduler-task.additional.parameters.title' | translate}}</span>
            </div>
            <!-- <ng-container *ngIf="mode === 'view' && additionalData.data.length <= 0; else additionalParametersButton">
              <div class="group-content text-center">
                <div class="row">
                  <div class="form-group col-xl-12">
                    <i class="fa fa-times-circle fa-5x"></i>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-xl-12">
                    <i class="suggest"> {{ 'scheduler-task.additional.parameters.information.title' | translate}}</i>
                  </div>
                </div>
              </div>
            </ng-container>
            <ng-template #additionalParametersButton>
              <ng-container
                *ngIf="(mode !== 'view' && additionalData.data.length <= 0) || mode === 'new'; else additionalParametersTable">
                <div class="addParameter">
                  <button type="button" class="btn btn-success" *ngIf="resourceAuth && resourceAuth['new']"
                    (click)="onNewRecord(false)">{{ 'scheduler-task_form_add' | translate}}
                  </button>
                </div>
              </ng-container>
            </ng-template>
            <ng-template #additionalParametersTable>
              <div class="content">
                <div class="grid-container mat-elevation-z8">
                  <div class="mail-box-content grid">
                    <div mat-dialog-content class="dialog-content">
                      <table class="crud-table table" mat-table [dataSource]="additionalData">
                        <ng-container matColumnDef="additional_parameter">
                          <th mat-header-cell *matHeaderCellDef>{{ 'scheduler-task_additional_parameter' | translate
                            }}
                          </th>
                          <td mat-cell *matCellDef="let item" (click)="onRowClicked(item)">{{ item?.additional_parameter
                            }}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="additional_parameter_value">
                          <th mat-header-cell *matHeaderCellDef>{{ 'scheduler-task_additional_parameter_value' | translate
                            }}
                          </th>
                          <td mat-cell *matCellDef="let item" (click)="onRowClicked(item)">{{
                            item?.additional_parameter_value }}
                          </td>
                        </ng-container>
                        <ng-container matColumnDef="actions">
                          <th mat-header-cell *matHeaderCellDef></th>
                          <td mat-cell *matCellDef="let item" class="text-center">
                            <div class="btn-group btn-actions">
                              <button type="button" class="btn btn-default btn-sm" (click)="onRowEdited(item)"
                                [disabled]="resourceAuth && !resourceAuth['edit']">
                                <i class="fa fa-edit d-xl-none"></i>
                                <span class="d-none d-xl-block">
                                  <i class="fa fa-edit"></i>&nbsp;{{'btn.edit' | translate}}
                                </span>
                              </button>
                              <button type="button" class="btn btn-default btn-sm" (click)="onDeleteRecord(item)"
                                [disabled]="resourceAuth && !resourceAuth['delete']">
                                <i class="fa fa-trash d-xl-none"></i>
                                <span class="d-none d-xl-block">
                                  <i class="fa fa-trash"></i>&nbsp;{{'btn.delete' | translate}}
                                </span>
                              </button>
                            </div>
                          </td>
                        </ng-container>
                        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
                      </table>
                    </div>
                  </div>
                </div>
                <div class="content-vertical-bar" *ngIf="mode !== 'view'">
                  <button type="button" mat-mini-fab *ngIf="resourceAuth && resourceAuth['new']" color="default"
                    (click)="onNewRecord(true)" matTooltip="{{ 'btn.new' | translate }}">
                    <i class="fa fa-file-o"></i>
                  </button>
                </div>
              </div>
            </ng-template> -->
            <ng-container *ngIf="mode === 'view' && (this.form.controls['stringParameters'].value == null || this.form.controls['stringParameters'].value == ''); else additionalParametersInput">
              <div class="group-content text-center">
                <div class="row">
                  <div class="form-group col-xl-12">
                    <i class="fa fa-times-circle fa-5x"></i>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-xl-12">
                    <i class="suggest"> {{ 'scheduler-task.additional.parameters.information.title' | translate}}</i>
                  </div>
                </div>
              </div>
            </ng-container>
            <ng-template #additionalParametersInput>
              <div class="group-content">
                <div class="row">
                  <div class="form-group col-xl-12">
                    <xdf-textarea name="stringParameters" label="scheduler-task_form_stringParameters"
                      placeholder="scheduler-task_form_stringParameters" [formGroup]="form" [options]="{rows: 1}">
                    </xdf-textarea>
                  </div>
                </div>
              </div>
            </ng-template>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12" *ngIf="mode !== 'view'">
          <div class="form-status-bar border-top">
            <button type="submit" mat-stroked-button class="btn btn-primary" [disabled]="form?.invalid 
              || processing ">
              <i class="fa fa-save" aria-hidden="true"></i>{{'btn.save' | translate}}
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>