<form appFormSubmit (ngSubmit)="objectController.actionCallback(primaryAction)"
      [formGroup]="pricingRuleForm" *ngIf="createOptions" class="fl-content">
  <app-form-errors #formErrors [formGroup]="pricingRuleForm"></app-form-errors>
  <div layoutDirection="column">
    <mat-form-field appFlex="100">
      <mat-label i18n>Resource type</mat-label>
      <mat-select formControlName="resource" placeholder="Resource type" i18n-placeholder required
                  (selectionChange)="selectedResourceChanged()">
        <mat-option *ngFor="let resource of createOptions.resources" [value]="resource.id">{{resource.name}}
        </mat-option>
      </mat-select>
      <mat-error>{{fieldErrors['resource']}}</mat-error>
    </mat-form-field>
    <span *ngIf="selectedResource && selectedResource.internal_name === 'instance_ip'"
          class="fl-margin-bottom-small" i18n>
      The pricing rule applies for instance IP addresses directly assigned to compute instances in a flat network
      (excluding floating IP addresses). If you do not want to charge private IPs from private networks,
      make sure you filter the rule to only apply to external network(s).
    </span>
  </div>
  <div layoutDirection="row">
    <mat-form-field appFlex="100">
      <mat-label i18n>Name</mat-label>
      <input matInput formControlName="display_name" required type="text">
      <mat-error>{{fieldErrors['display_name']}}</mat-error>
    </mat-form-field>
  </div>

  <div layoutDirection="row" class="fl-margin-bottom"
       *ngIf="selectedResource && selectedResource.type !== 'internal'" i18n>
    Start date and end date are useful when you want to change pricing. If you're not making any pricing change,
    just leave the fields empty. To change pricing, set an end date for the old rule and a start date for the new
    pricing rule. When start date is empty the rule applies "since the beginning of time" and when the end date is
    empty the rule applies "until the end of time". A [start date - end date] time interval includes the full start
    date and the full end date.
  </div>
  <div layoutDirection="row" *ngIf="selectedResource && selectedResource.type !== 'internal'">
    <mat-form-field appFlex="50">
      <mat-label i18n>Start date</mat-label>
      <input matInput [matDatepicker]="startDatePicker" formControlName="start_dt"
             placeholder="Start date" i18n-placeholder>
      <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
      <mat-datepicker #startDatePicker></mat-datepicker>
    </mat-form-field>
    <mat-form-field appFlex="50" class="offset-1">
      <mat-label i18n>End date</mat-label>
      <input matInput [matDatepicker]="endDatePicker" formControlName="end_dt"
             placeholder="End date" i18n-placeholder>
      <mat-datepicker-toggle matSuffix [for]="endDatePicker"></mat-datepicker-toggle>
      <mat-datepicker #endDatePicker></mat-datepicker>
    </mat-form-field>
  </div>

  <div layoutDirection="row" appLayoutGap="15px" *ngIf="selectedResource && selectedResource.internal_name === 'instance_ip'">
    <div class="fl-margin-top"
         i18n="First as in: first x IP addresses of each instance are free on price rule">First</div>
    <mat-form-field class="free-resources-count-input" appFlex="130px">
      <mat-label i18n>Number of IPs</mat-label>
      <input matInput formControlName="free_resources_for_related_resource" type="integer" step="1">
      <mat-error>{{fieldErrors['free_resources_for_related_resource']}}</mat-error>
    </mat-form-field>
    <div class="fl-margin-top" i18n>IP addresses of each instance are free</div>
  </div>

  <p *ngIf="selectedResource && selectedResource.internal_name === 'load_balancer'" i18n>
    Choosing "existence" will define price per load balancer (only load balancers with at least one amphora instance are considered).
    Choosing "amphora_instance_count" means billing is based on how many amphora instances exist for the related
    load balancer at a time.
  </p>

  <div layoutDirection="row">
    <mat-form-field *ngIf="selectedResource && selectedResource.attribute_display && hasPricingAttribute()" appFlex="33">
      <mat-label i18n>Attribute</mat-label>
      <mat-select formControlName="attribute"
                  (selectionChange)="canSelectUnitForAttribute()"
                  placeholder="Attribute" i18n-placeholder>
        <mat-option [value]="' '">existence</mat-option>
        <ng-container *ngFor="let attribute of attributes">
          <mat-option *ngIf="attribute.type === 'integer' &&
                             !(attribute.name === 'ttl' && selectedResource.name === 'DNS Domains')"
                      [value]="attribute.name">{{attribute.name}}</mat-option>
        </ng-container>
      </mat-select>
      <mat-error>{{fieldErrors['attribute']}}</mat-error>
    </mat-form-field>
    <mat-form-field *ngIf="selectedResource && selectedResource.attribute_display && hasPricingAttribute()"
                    class="offset-1" appFlex="33">
      <mat-label i18n>Attribute unit</mat-label>
      <mat-select formControlName="attribute_unit"
                  placeholder="Attribute unit" i18n-placeholder>
        <ng-container *ngFor="let key of objectKeys(createOptions.attribute_units)">
          <mat-option [value]="key">{{createOptions.attribute_units[key]}}</mat-option>
        </ng-container>
      </mat-select>
      <mat-error>{{fieldErrors['attribute_unit']}}</mat-error>
    </mat-form-field>
    <mat-form-field *ngIf="selectedResource && selectedResource.attribute_display"
                    [class.offset-1]="hasPricingAttribute()"
                    appFlex="33">
      <mat-label i18n>Time unit</mat-label>
      <mat-select formControlName="time_unit"
                  placeholder="Time unit" i18n-placeholder required>
        <ng-container *ngFor="let key of objectKeys(createOptions.time_units)">
          <mat-option [value]="key">{{createOptions.time_units[key]}}</mat-option>
        </ng-container>
      </mat-select>
      <mat-error>{{fieldErrors['time_unit']}}</mat-error>
    </mat-form-field>
  </div>

  <div layoutDirection="row" *ngIf="selectedResource && selectedResource.metric_display">
    <mat-form-field appFlex="100">
      <mat-label i18n>Metric</mat-label>
      <mat-select formControlName="attribute"
                  placeholder="Metric" i18n-placeholder required>
        <ng-container *ngFor="let metric of selectedResource.metrics">
          <mat-option [value]="metric.name">{{metric.display_name}}</mat-option>
        </ng-container>
      </mat-select>
      <mat-error>{{fieldErrors['attribute']}}</mat-error>
    </mat-form-field>
  </div>
  <div class="fl-margin-bottom" layoutDirection="row"
       *ngIf="selectedResource && selectedResource.metric_display && getMetricHelpText()">
    {{getMetricHelpText()}}
  </div>
  <div layoutDirection="row" class="fl-margin-bottom" *ngIf="selectedResource && getMetricPerSecondBillingAvailability()">
    <mat-checkbox formControlName="calculate_metrics_pricing_per_time_unit" color="primary"
                  (change)="changedCalculateMetrics($event)" i18n>
      Calculate metrics pricing per time unit
    </mat-checkbox>
  </div>
  <div layoutDirection="row" *ngIf="selectedResource && pricingRuleForm.controls.calculate_metrics_pricing_per_time_unit.value">
    <mat-form-field appFlex="33">
      <mat-label i18n>Time unit</mat-label>
      <mat-select formControlName="time_unit"
                  placeholder="Time unit" i18n-placeholder required>
        <ng-container *ngFor="let key of objectKeys(createOptions.time_units)">
          <mat-option [value]="key">{{createOptions.time_units[key]}}</mat-option>
        </ng-container>
      </mat-select>
      <mat-error>{{fieldErrors['time_unit']}}</mat-error>
    </mat-form-field>
  </div>
  <div layoutDirection="row" *ngIf="selectedResource && selectedResource.metric_display" class="fl-margin-bottom">
    <h2 class="fl-heading-md fl-margin-top-medium" i18n>Pricing:</h2>
    <mat-radio-group
      aria-labelledby="rate_type"
      (change)="resetPrices()"
      [(ngModel)]="rateType"
      [ngModelOptions]="{standalone: true}">
      <mat-radio-button class="rate-type-radio-btns" [color]="'primary'" [value]="'flat'" i18n>
        Flat
      </mat-radio-button>
      <mat-radio-button class="rate-type-radio-btns" [color]="'primary'" [value]="'tiered'" i18n>
        Tiered
      </mat-radio-button>
    </mat-radio-group>
  </div>
  <div formGroupName="pricing" class="fl-margin-bottom">
    <div formArrayName="prices" layoutDirection="row"
      *ngFor="let item of pricingRuleForm.get('pricing').get('prices')['controls']; let i = index;">
        <div [formGroupName]="i" appFlex="{{rateType === 'flat' ? 33 : 100}}">
          <mat-form-field *ngIf="rateType !== 'flat'" appFlex="97">
            <mat-label>From</mat-label>
            <input (change)="reCalculateTiers()" matInput formControlName="f"
                   placeholder="From" i18n-placeholder type="number" required>
            <mat-error>{{'This field is required!'}}</mat-error>
          </mat-form-field>
          <mat-form-field *ngIf="rateType !== 'flat'" appFlex="97" class="offset-3">
            <mat-label i18n>To</mat-label>
            <input matInput formControlName="t" placeholder="To" i18n-placeholder type="text">
          </mat-form-field>
          <mat-form-field appFlex="100" [class.offset-3]="rateType !== 'flat'">
            <mat-label i18n>Price ({{pricingPlan ? pricingPlan.currency : ''}})</mat-label>
            <input matInput formControlName="p" type="number" (wheel)="disableWheel()">
            <mat-hint *ngIf="selectedResource && selectedResource.internal_name === 'instance_traffic'" i18n>
              Price is per GB
            </mat-hint>
            <mat-error>{{pricingRuleForm.get('pricing').get('prices')['controls'][i]['controls'].p.errors | errorFormatter}}</mat-error>
          </mat-form-field>
          <div *ngIf="rateType !== 'flat'">
            <button (click)="removeTier(i)" class="fl-margin-top-small"
                    [attr.fl-tooltip]="removeTierTooltip" mat-icon-button>
              <mat-icon>delete</mat-icon>
            </button>
          </div>
        </div>
    </div>
  </div>
  <div *ngIf="rateType !== 'flat'" class="fl-margin-bottom">
    <button mat-mini-fab class="add-item-button" [attr.fl-tooltip]="addTierTooltip"
            fl-tooltip-direction="right" (click)="addTier($event)">
      <mat-icon>add</mat-icon>
    </button>
  </div>

  <div *ngIf="selectedResource && attributes && attributes.length"
       layoutDirection="column" class="fl-margin-bottom">
    <h2 class="fl-heading-md" i18n>Filters</h2>
    <p i18n>The pricing rule applies only when all conditions defined as filters are true. Leave the filters section empty to always apply the pricing rule.</p>
  </div>

  <ng-container *ngIf="selectedResource && attributes && attributes.length">
    <div formArrayName="conditions" layoutDirection="row" layoutDirection-lt-sm="column"
      *ngFor="let item of pricingRuleForm.controls.conditions['controls']; let i = index;">
        <div [formGroupName]="i" appFlex="100" layoutDirection-lt-sm="column">
          <mat-form-field appFlex="20" ltSmFlex="97">
            <mat-label i18n>Attribute name</mat-label>
            <mat-select formControlName="attribute"
                        (selectionChange)="filterAttributeChanged(i)"
                        placeholder="Attribute name" i18n-placeholder required>
              <mat-option *ngFor="let attribute of attributes" [value]="attribute.name">{{attribute.name}}</mat-option>
            </mat-select>
            <mat-error i18n>This field is required!</mat-error>
          </mat-form-field>
          <mat-form-field appFlex="20" ltSmFlex="97" class="offset-1-gt-sm">
            <mat-label i18n>Operator</mat-label>
            <mat-select formControlName="operator"
                        (selectionChange)="filterOperatorChanged($event, i)"
                        placeholder="Operator" i18n-placeholder required>
              <mat-option
                *ngFor="let key of objectKeys(getOperatorsForAttribute(pricingRuleForm.controls.conditions['controls'][i].value.attribute))"
                [value]="key">
                {{getOperatorsForAttribute(pricingRuleForm.controls.conditions['controls'][i].value.attribute)[key]}}
              </mat-option>
            </mat-select>
            <mat-error i18n>This field is required!</mat-error>
          </mat-form-field>
          <mat-form-field appFlex="97" class="offset-1-gt-sm"
                          *ngIf="getFilterValueInputType(
                            pricingRuleForm.controls.conditions['controls'][i].value.attribute
                          ) === 'choices'">
            <mat-label i18n>Value</mat-label>
            <ng-container *ngIf="isListOperator(
              pricingRuleForm.controls.conditions['controls'][i].value.operator
            ); else exactConditionValue">
                <mat-chip-grid formControlName="value" #chipList>
                  <mat-chip-row
                    *ngFor="let condition of pricingRuleForm.controls.conditions['controls'][i].value.value"
                    (removed)="removeFilterChip(condition, i)">
                    <span [attr.fl-tooltip]="getFilterChipTooltip(condition, i)">{{condition}}</span>
                    <button matChipRemove>
                      <mat-icon>cancel</mat-icon>
                    </button>
                  </mat-chip-row>
                  <input
                    placeholder="Value" i18n-placeholder
                    #conditionValueInput
                    [formControl]="getConditionChipsFormControl(i)"
                    [matAutocomplete]="auto"
                    [matChipInputFor]="chipList"
                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                    (focusout)="addFilterChipOnFocusOut(conditionValueInput, i)"
                    (matChipInputTokenEnd)="addFilterChip($event, i)">
                </mat-chip-grid>
                <mat-autocomplete #auto="matAutocomplete"
                                  (optionSelected)="selectedFilterChip($event, i, conditionValueInput)" autoActiveFirstOption>
                  <mat-option *ngFor="let condition of getConditionChoices(i) | async" [value]="condition">
                    <div layoutDirection="column" class="options-line-height">
                      <span>
                        {{attrByName(conditions['controls'][i].value.attribute).choices_dict ?
                          (attrByName(conditions['controls'][i].value.attribute).choices_dict[condition]?.display || condition.slice(0, 10)) : condition.slice(0, 10)}}
                        <span *ngIf="!attrByName(conditions['controls'][i].value.attribute).choices_dict[condition]?.display && condition.length > 10">...</span>
                      </span>
                      <span *ngIf="attrByName(conditions['controls'][i].value.attribute).choices_dict[condition]?.sub"
                            class="option-sub-text">
                        {{attrByName(conditions['controls'][i].value.attribute).choices_dict[condition]?.sub}}
                      </span>
                    </div>
                  </mat-option>
                </mat-autocomplete>
            </ng-container>
            <ng-template #exactConditionValue>
              <mat-select formControlName="value" class="fleio-select"
                          placeholder="Value" i18n-placeholder required>
                <mat-option [style.line-height]="attrByName(conditions['controls'][i].value.attribute).choices_dict[item]?.sub ? 0.9 : '48px'"
                  *ngFor="let item of getObjKeys(attrByName(conditions['controls'][i].value.attribute).choices_dict)"
                  [value]="item">
                  {{attrByName(conditions['controls'][i].value.attribute).choices_dict[item]?.display ?
                  attrByName(conditions['controls'][i].value.attribute).choices_dict[item]?.display : item}}
                  <span *ngIf="attrByName(conditions['controls'][i].value.attribute).choices_dict[item]?.sub"
                        class="select-main-text">
                    <br>
                    {{attrByName(conditions['controls'][i].value.attribute).choices_dict[item]?.sub}}
                  </span>
                </mat-option>
              </mat-select>
            </ng-template>
            <mat-error i18n>This field is required!</mat-error>
          </mat-form-field>
          <mat-form-field appFlex="97" class="offset-1-gt-sm"
                          *ngIf="getFilterValueInputType(
                            pricingRuleForm.controls.conditions['controls'][i].value.attribute
                          ) === 'textarea'">
            <mat-label i18n>Value</mat-label>
            <input matInput formControlName="value" placeholder="Value" i18n-placeholder>
            <mat-error i18n>This field is required!</mat-error>
          </mat-form-field>
          <mat-form-field appFlex="97" class="offset-1-gt-sm"
                          *ngIf="getFilterValueInputType(
                            pricingRuleForm.controls.conditions['controls'][i].value.attribute
                          ) === 'number'">
            <mat-label i18n>Value</mat-label>
            <ng-container *ngIf="isListOperator(
              pricingRuleForm.controls.conditions['controls'][i].value.operator
            ); else exactConditionValue">
                <mat-chip-grid formControlName="value" #chipList>
                  <mat-chip-row
                    *ngFor="let condition of pricingRuleForm.controls.conditions['controls'][i].value.value"
                    (removed)="removeFilterChip(condition, i)">
                    <div layoutDirection="column" [attr.fl-tooltip]="condition">
                      <span>{{condition}}</span>
                    </div>
                    <button matChipRemove>
                      <mat-icon>cancel</mat-icon>
                    </button>
                  </mat-chip-row>
                  <input
                    placeholder="Value" i18n-placeholder
                    type="number"
                    class="chip-number-input"
                    #conditionValueInput
                    [formControl]="getConditionChipsFormControl(i)"
                    [matChipInputFor]="chipList"
                    [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                    (focusout)="addFilterChipOnFocusOut(conditionValueInput, i)"
                    (matChipInputTokenEnd)="addFilterChip($event, i)">
                </mat-chip-grid>
            </ng-container>
            <ng-template #exactConditionValue>
              <input matInput formControlName="value" placeholder="Value" i18n-placeholder type="number">
            </ng-template>
            <mat-error>
              {{pricingRuleForm.controls.conditions['controls'][i].controls.value.errors | errorFormatter}}
            </mat-error>
          </mat-form-field>
          <mat-form-field appFlex="97" class="offset-1-gt-sm"
                          *ngIf="getFilterValueInputType(
                            pricingRuleForm.controls.conditions['controls'][i].value.attribute
                          ) === 'datetime'">
            <mat-label i18n>Choose a date</mat-label>
            <input matInput [matDatepicker]="picker" formControlName="value"
                   placeholder="Choose a date" i18n-placeholder>
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <mat-datepicker #picker></mat-datepicker>
            <mat-error i18n>This field is required!</mat-error>
          </mat-form-field>
          <mat-form-field appFlex="97" class="offset-1-gt-sm"
                          *ngIf="showAttributeUnitForFiltersModifiers(
                            pricingRuleForm.controls.conditions['controls'][i].value.attribute
                          )">
            <mat-label i18n>Attribute unit</mat-label>
            <mat-select formControlName="attribute_unit"
                        placeholder="Attribute unit" i18n-placeholder required>
              <mat-option
                *ngFor="let key of objectKeys(createOptions.attribute_units)"
                [value]="key">
                {{createOptions.attribute_units[key]}}
              </mat-option>
            </mat-select>
            <mat-error i18n>This field is required!</mat-error>
          </mat-form-field>
          <div>
            <button (click)="removeFilter(i)" class="fl-margin-top-small"
                    [attr.fl-tooltip]="removeFilterTooltip" mat-icon-button>
              <mat-icon>delete</mat-icon>
            </button>
          </div>
        </div>
    </div>
  </ng-container>

  <div layoutDirection="row" *ngIf="selectedResource && attributes && attributes.length">
    <a mat-mini-fab class="add-item-button" [attr.fl-tooltip]="addFilterTooltip" fl-tooltip-direction="right"
       (click)="addFilter()">
      <mat-icon>add</mat-icon>
    </a>
  </div>

  <!-- MODIFIERS -->
  <div *ngIf="selectedResource && selectedResource.attribute_display" layoutDirection="column" class="fl-margin-top fl-margin-bottom">
    <h2 class="fl-heading-md" i18n>Price modifiers</h2>
    <p i18n>A price modifier adds or subtracts cost to the pricing rule above only when the specified condition is true. You can use negative values to subtract a value. If the total price defined in the rule is negative, it will be set to zero.</p>
  </div>

  <ng-container *ngIf="selectedResource && selectedResource.attribute_display">
    <div formArrayName="modifiers"
      *ngFor="let item of pricingRuleForm.controls.modifiers['controls']; let i = index; let last = last;"
      [class.modifier-row]="!last">
        <div [formGroupName]="i" appFlex="100" layoutDirection-lt-sm="column">
          <div layoutDirection="row" layoutDirection-lt-sm="column">
            <mat-form-field appFlex="20" ltSmFlex="100">
              <mat-label i18n>Name</mat-label>
              <input matInput formControlName="name" placeholder="Name" i18n-placeholder type="text">
              <mat-error>
                {{pricingRuleForm.controls.modifiers['controls'][i].controls.name.errors | errorFormatter}}
              </mat-error>
            </mat-form-field>
            <mat-form-field appFlex="20" ltSmFlex="100" class="offset-1-gt-sm">
              <mat-label i18n>Attribute name</mat-label>
              <mat-select formControlName="attribute"
                          (selectionChange)="modifierAttributeChanged(i)"
                          placeholder="Attribute name" i18n-placeholder required>
                <mat-option *ngFor="let attribute of attributes" [value]="attribute.name">{{attribute.name}}</mat-option>
              </mat-select>
              <mat-error>
                {{pricingRuleForm.controls.modifiers['controls'][i].controls.attribute.errors | errorFormatter}}
              </mat-error>
            </mat-form-field>
            <mat-form-field appFlex="20" ltSmFlex="100" class="offset-1-gt-sm">
              <mat-label i18n>Operator</mat-label>
              <mat-select formControlName="operator"
                          (selectionChange)="modifierOperatorChanged($event, i)"
                          placeholder="Operator" i18n-placeholder required>
                <mat-option
                  *ngFor="let key of objectKeys(getOperatorsForAttribute(pricingRuleForm.controls.modifiers['controls'][i].value.attribute))"
                  [value]="key">
                  {{getOperatorsForAttribute(pricingRuleForm.controls.modifiers['controls'][i].value.attribute)[key]}}
                </mat-option>
              </mat-select>
              <mat-error>
                {{pricingRuleForm.controls.modifiers['controls'][i].controls.operator.errors | errorFormatter}}
              </mat-error>
            </mat-form-field>
            <mat-form-field appFlex="100" class="offset-1-gt-sm"
                            *ngIf="getFilterValueInputType(
                              pricingRuleForm.controls.modifiers['controls'][i].value.attribute
                            ) === 'choices'">
              <mat-label i18n>Value</mat-label>
              <ng-container *ngIf="isListOperator(
                pricingRuleForm.controls.modifiers['controls'][i].value.operator
              ); else exactModifierValue">
                  <mat-chip-grid #chipModifiersList>
                    <mat-chip-row
                      *ngFor="let modifier of pricingRuleForm.controls.modifiers['controls'][i].value.value"
                      (removed)="removeModifierChip(modifier, i)">
                      <span class="modifier-chip"
                            [attr.fl-tooltip]="getModifierChipTooltip(modifier, i)">{{modifier}}</span>
                      <button matChipRemove>
                        <mat-icon>cancel</mat-icon>
                      </button>
                    </mat-chip-row>
                    <input
                      placeholder="Value" i18n-placeholder
                      #modifierValueInput
                      [formControl]="getModifierChipsFormControl(i)"
                      [matAutocomplete]="auto"
                      [matChipInputFor]="chipModifiersList"
                      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                      (focusout)="addModifierChipOnFocusOut(modifierValueInput, i)"
                      (matChipInputTokenEnd)="addModifierChip($event, i)">
                  </mat-chip-grid>
                  <mat-autocomplete #auto="matAutocomplete"
                                    (optionSelected)="selectedModifierChip($event, i, modifierValueInput)" autoActiveFirstOption>
                    <mat-option *ngFor="let modifier of getModifierChoices(i) | async" [value]="modifier">
                      <div layoutDirection="column" class="options-line-height">
                        <span>
                          {{attrByName(modifiers['controls'][i].value.attribute).choices_dict ?
                            (attrByName(modifiers['controls'][i].value.attribute).choices_dict[modifier]?.display || modifier.slice(0, 10)) : modifier.slice(0, 10)}}
                          <span *ngIf="!attrByName(modifiers['controls'][i].value.attribute).choices_dict[modifier]?.display && modifier.length > 10">...</span>
                        </span>
                        <span *ngIf="attrByName(modifiers['controls'][i].value.attribute).choices_dict[modifier]?.sub"
                              class="option-sub-text">
                          {{attrByName(modifiers['controls'][i].value.attribute).choices_dict[modifier]?.sub}}
                        </span>
                      </div>
                    </mat-option>
                  </mat-autocomplete>
              </ng-container>
              <ng-template #exactModifierValue>
                <mat-select formControlName="value" class="fleio-select"
                            placeholder="Value" i18n-placeholder required>
                  <mat-option [style.line-height]="attrByName(modifiers['controls'][i].value.attribute).choices_dict[item]?.sub ? 0.9 : '48px'"
                    *ngFor="let item of getObjKeys(attrByName(modifiers['controls'][i].value.attribute).choices_dict)"
                    [value]="item">
                    {{attrByName(modifiers['controls'][i].value.attribute).choices_dict[item]?.display ?
                    attrByName(modifiers['controls'][i].value.attribute).choices_dict[item]?.display : item}}
                    <span *ngIf="attrByName(modifiers['controls'][i].value.attribute).choices_dict[item]?.sub"
                          class="select-main-text">
                      <br>
                      {{attrByName(modifiers['controls'][i].value.attribute).choices_dict[item]?.sub}}
                    </span>
                  </mat-option>
                </mat-select>
              </ng-template>
              <mat-error>
                {{pricingRuleForm.controls.modifiers['controls'][i].controls.value.errors | errorFormatter}}
              </mat-error>
            </mat-form-field>
            <mat-form-field appFlex="100" class="offset-1-gt-sm"
                            *ngIf="getFilterValueInputType(
                              pricingRuleForm.controls.modifiers['controls'][i].value.attribute
                            ) === 'textarea'">
              <mat-label i18n>Value</mat-label>
              <input matInput formControlName="value" placeholder="Value" i18n-placeholder>
              <mat-error>
                {{pricingRuleForm.controls.modifiers['controls'][i].controls.value.errors | errorFormatter}}
              </mat-error>
            </mat-form-field>
            <mat-form-field appFlex="100" class="offset-1-gt-sm"
                            *ngIf="getFilterValueInputType(
                              pricingRuleForm.controls.modifiers['controls'][i].value.attribute
                            ) === 'number'">
              <mat-label i18n>Value</mat-label>
              <ng-container *ngIf="isListOperator(
                pricingRuleForm.controls.modifiers['controls'][i].value.operator
              ); else exactModifierValue">
                  <mat-chip-grid #chipModifiersList>
                    <mat-chip-row
                      *ngFor="let modifier of pricingRuleForm.controls.modifiers['controls'][i].value.value"
                      (removed)="removeModifierChip(modifier, i)">
                      <div layoutDirection="column" [attr.fl-tooltip]="modifier">
                        <span class="chip-main-text">{{modifier}}</span>
                      </div>
                      <button matChipRemove>
                        <mat-icon>cancel</mat-icon>
                      </button>
                    </mat-chip-row>
                    <input
                      placeholder="Value" i18n-placeholder
                      type="number"
                      class="chip-number-input"
                      #modifierValueInput
                      [formControl]="getModifierChipsFormControl(i)"
                      [matChipInputFor]="chipModifiersList"
                      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                      (focusout)="addModifierChipOnFocusOut(modifierValueInput, i)"
                      (matChipInputTokenEnd)="addModifierChip($event, i)">
                  </mat-chip-grid>
              </ng-container>
              <ng-template #exactModifierValue>
                <input matInput formControlName="value" placeholder="Value" i18n-placeholder type="number">
              </ng-template>
              <mat-error>
                {{pricingRuleForm.controls.modifiers['controls'][i].controls.value.errors | errorFormatter}}
              </mat-error>
            </mat-form-field>
            <mat-form-field appFlex="100" class="offset-1-gt-sm"
                            *ngIf="getFilterValueInputType(
                              pricingRuleForm.controls.modifiers['controls'][i].value.attribute
                            ) === 'datetime'">
              <mat-label i18n>Choose a date</mat-label>
              <input matInput [matDatepicker]="picker" formControlName="value"
                     placeholder="Choose a date" i18n-placeholder>
              <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
              <mat-error>
                {{pricingRuleForm.controls.modifiers['controls'][i].controls.value.errors | errorFormatter}}
              </mat-error>
            </mat-form-field>
            <mat-form-field appFlex="15" ltSmFlex="100" class="offset-1-gt-sm"
                            *ngIf="showAttributeUnitForFiltersModifiers(
                              pricingRuleForm.controls.modifiers['controls'][i].value.attribute
                            )">
              <mat-label i18n>Attribute unit</mat-label>
              <mat-select formControlName="attribute_unit"
                          placeholder="Attribute unit" i18n-placeholder required>
                <mat-option
                  *ngFor="let key of objectKeys(createOptions.attribute_units)"
                  [value]="key">
                  {{createOptions.attribute_units[key]}}
                </mat-option>
              </mat-select>
              <mat-error>
                {{pricingRuleForm.controls.modifiers['controls'][i].controls.attribute_unit.errors | errorFormatter}}
              </mat-error>
            </mat-form-field>
            <div class="hide-lt-sm">
              <button (click)="removeModifier(i)" class="fl-margin-top-small"
                      [attr.fl-tooltip]="removeModifierTooltip" mat-icon-button>
                <mat-icon>delete</mat-icon>
              </button>
            </div>
          </div>
          <div layoutDirection="row">
            <mat-checkbox [color]="'primary'" appFlex="100" formControlName="price_is_percent"
                          (change)="changedModifierPricePercent($event, i)" i18n>
              As percentage
            </mat-checkbox>
          </div>
          <div layoutDirection="row" layoutDirection-lt-sm="column" class="fl-margin-top-small">
            <mat-form-field appFlex="35" ltSmFlex="100" *ngIf="pricingPlan">
              <mat-label>{{pricingRuleForm.controls.modifiers['controls'][i].value.price_is_percent ? percentPlaceholder : pricePlaceholder}}</mat-label>
              <input matInput formControlName="price"
                     placeholder="{{pricingRuleForm.controls.modifiers['controls'][i].value.price_is_percent ?
                     percentPlaceholder : pricePlaceholder}}" (wheel)="disableWheel()"
                     type="number">
              <mat-error>
                {{pricingRuleForm.controls.modifiers['controls'][i].controls.price.errors | errorFormatter}}
              </mat-error>
            </mat-form-field>
            <mat-form-field appFlex="20" ltSmFlex="100" class="offset-1-gt-sm"
                            *ngIf="pricingRuleForm.controls.modifiers['controls'][i].contains('time_unit')">
              <mat-label i18n>Time unit</mat-label>
              <mat-select formControlName="time_unit"
                          placeholder="Time unit" i18n-placeholder required>
                <mat-option
                  *ngFor="let key of objectKeys(createOptions.time_units)"
                  [value]="key">
                  {{createOptions.time_units[key]}}
                </mat-option>
              </mat-select>
              <mat-error>
                {{pricingRuleForm.controls.modifiers['controls'][i].controls.time_unit.errors | errorFormatter}}
              </mat-error>
            </mat-form-field>
          </div>
          <div class="hide-gt-sm">
            <button (click)="removeModifier(i)" class="fl-margin-top-small"
                    [attr.fl-tooltip]="removeModifierTooltip" mat-icon-button>
              <mat-icon>delete</mat-icon>
            </button>
          </div>
        </div>
    </div>
  </ng-container>

  <div layoutDirection="row" *ngIf="selectedResource && selectedResource.attribute_display" class="fl-margin-top">
    <a mat-mini-fab class="add-item-button" [attr.fl-tooltip]="addPriceModifierTooltip" fl-tooltip-direction="right"
       (click)="addModifier()">
      <mat-icon>add</mat-icon>
    </a>
  </div>


</form>
