<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_="business-parameters_info" titleDesc="business-parameters_group_info"
        [recordIdentifier]="record?.id" [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-6">
                  <xdf-input name="key" label="business-parameters_form_key_placeholder" type="text" [required]="true"
                    placeholder="business-parameters_form_key_placeholder" [formGroup]="form"
                    [options]="{maxLength: 160, showLength: true}">
                  </xdf-input>
                </div>
                <div class="form-group col-xl-6">
                  <xdf-input name="description" label="business-parameters_form_description_placeholder" type="text"
                    [required]="true" placeholder="business-parameters_form_description_placeholder" [formGroup]="form"
                    [options]="{maxLength: 1000, showLength: true}">
                  </xdf-input>
                </div>
              </div>
              <div class="row">
                <div class="form-group col-xl-6">
                  <xdf-checkbox name="required" label="business-parameters_form_required_label"
                    suggest="business-parameters_form_required_label" [options]="{showSuggest: false}" [formGroup]="form"
                    (onChange)="updateControls($event)">
                  </xdf-checkbox>
                </div>
                <div class="form-group col-xl-6" *ngIf="isRequiredValueActivated && form?.controls['required']">
                  <xdf-input name="defaultValue" label="business-parameters_form_defaultValue_placeholder" type="text"
                    [required]="true" placeholder="business-parameters_form_defaultValue_placeholder" [formGroup]="form"
                    [options]="{maxLength: 3000, showLength: true}">
                  </xdf-input>
                </div>
              </div>
              <div class="row" *ngIf="this.record['currentValue'] || mode !== 'view'">
                <div class="form-group col-xl-6">
                  <xdf-input name="currentValue" label="business-parameters_form_currentValue_placeholder" type="text"
                    placeholder="business-parameters_form_currentValue_placeholder" [formGroup]="form"
                    [options]="{maxLength: 3000, showLength: true}" (keyup)="validatorProgrammed($event.target.value)">
                  </xdf-input>
                </div>
                <div class="form-group col-xl-6">
                  <xdf-datepicker name="dateFrom" label="business-parameters_form_dateFrom_placeholder"
                    placeholder="business-parameters_form_dateFrom_placeholder" [formGroup]="form" [minDate]="getDate()"
                    [maxDate]="form?.value?.dateApplyFrom">
                  </xdf-datepicker>
                </div>
              </div>
              <div class="row" *ngIf="(this.form.controls['programmedValue'] && mode !== 'view') || (mode === 'view' && this.record['programmedValue'])">
                <div class="legend">
                  <span class="group-title">{{ 'business-parameters_info_programmedValue' | translate}}</span>
                </div>
              </div>
              <div class="row" *ngIf="(this.form.controls['programmedValue'] && mode !== 'view') || (mode === 'view' && this.record['programmedValue'])">
                <div class="form-group col-xl-6">
                  <xdf-input name="programmedValue" label="business-parameters_form_programmedValue_placeholder"
                    type="text" placeholder="business-parameters_form_programmedValue_placeholder" [formGroup]="form"
                    [options]="{maxLength: 3000, showLength: true}">
                  </xdf-input>
                </div>
                <div class="form-group col-xl-6">
                  <xdf-datepicker name="dateApplyFrom" label="business-parameters_form_dateApplyFrom_placeholder"
                    placeholder="business-parameters_form_dateApplyFrom_placeholder" [formGroup]="form"
                    [minDate]="toDate()">
                  </xdf-datepicker>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <div class="form-status-bar border-top">
            <button *ngIf="mode !== 'new' && (resourceAuth && resourceAuth['showHistory'])" mat-stroked-button
              class="btn btn-default btn-show-history" type="button" (click)="openModal()">{{ 'btn.show.history' |
              translate }}</button>
            <button *ngIf="mode !== 'view'" type="submit" mat-stroked-button class="btn btn-primary"
              [disabled]="form?.invalid">
              <i class="fa fa-save" aria-hidden="true"></i>{{'btn.save' | translate}}
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
