<!-- Chips will be displayed inside the input field-->
<ng-container *ngIf="inlineStyle; else chipsBelowInput">
  <mat-chip-grid
    #chipList
    [class.inline-style]="inlineStyle"
    [class.readonlyUserInput]="readonlyUserInput"
    matAutocompleteOrigin
    #chipListOrigin="matAutocompleteOrigin"
  >
    <div class="chip-input-container">
      <mat-chip-row
        *ngFor="
          let option of maxChipsVisible && maxChipsVisible < maxChipsVisibleLimit
            ? value.slice(0, maxChipsVisible)
            : value
        "
        (removed)="onSelectedOptionRemoved(option.id)"
        [disabled]="disabled"
        [removable]="!(readonlyUserInput || disabled)"
        #tooltip="matTooltip"
        [matTooltipHideDelay]="0"
        [matTooltipShowDelay]="100"
        [matTooltip]="message.innerText"
        matTooltipClass="tooltip-width"
        [class.readonlyUserInput]="readonlyUserInput"
        [matTooltipDisabled]="!isTextOverflow(message)"
      >
        <span
          #message
          [ngClass]="!(readonlyUserInput || disabled) ? 'text-wdith-removable' : 'text-wdith'"
          class="text-overflow"
          >{{ !!option ? option.name : '' }}</span
        >
        <button *ngIf="!(readonlyUserInput || disabled)" matChipRemove>
          <mat-icon fontSet="bosch" fontIcon="bosch-ic-close-small"></mat-icon>
        </button>
      </mat-chip-row>
      <mat-chip-row
        *ngIf="maxChipsVisible && maxChipsVisible < maxChipsVisibleLimit && value.length > maxChipsVisible"
        (removed)="onHiddenChipsRemoved()"
        [disabled]="disabled"
        [class.readonlyUserInput]="readonlyUserInput"
        [removable]="!(readonlyUserInput || disabled)"
      >
        <span
          >{{ value.length - maxChipsVisible }}
          {{ value.length - maxChipsVisible === 1 ? intl.oneMoreItem : intl.moreItems }}</span
        >
        <button *ngIf="!(readonlyUserInput || disabled)" matChipRemove>
          <mat-icon fontSet="bosch" fontIcon="bosch-ic-close-small"></mat-icon>
        </button>
      </mat-chip-row>
    </div>
    <input
      matInput
      #userInput
      placeholder="{{ placeholder }}"
      [hidden]="isChipLimitReached()"
      [formControl]="userInputControl"
      [matAutocomplete]="autoComplete"
      [matAutocompleteDisabled]="disabled"
      [matAutocompleteConnectedTo]="chipListOrigin"
      [matChipInputFor]="chipList"
      [matChipInputAddOnBlur]="false"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [readonly]="readonlyUserInput"
      (matChipInputTokenEnd)="addFreeTextChip($event)"
      (click)="!readonlyUserInput && onClick($event)"
      (blur)="addChipOnBlur($event)"
    />
  </mat-chip-grid>
  <mat-autocomplete #autoComplete="matAutocomplete" (optionSelected)="onAutocompleteOptionSelected($event)">
    <mat-option
      *ngFor="let proposedOption of userFilteredOptions | async"
      [value]="proposedOption.name"
      [id]="proposedOption.id"
    >
      {{ proposedOption.name }}
    </mat-option>
  </mat-autocomplete>
</ng-container>

<!-- Chips will be displayed under the input field -->
<ng-template #chipsBelowInput>
  <input
    matInput
    #userInput
    placeholder="{{ placeholder }}"
    [hidden]="isChipLimitReached()"
    [formControl]="userInputControl"
    [matAutocomplete]="autoComplete"
    [matAutocompleteDisabled]="disabled"
    [matChipInputFor]="chipList"
    [matChipInputAddOnBlur]="false"
    [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
    [readonly]="readonlyUserInput"
    (matChipInputTokenEnd)="addFreeTextChip($event)"
    [class.inline-style]="inlineStyle"
    (click)="!readonlyUserInput && onClick($event)"
    (blur)="addChipOnBlur($event)"
  />
  <div class="notification"><ng-content select="bci-form-field-notification"></ng-content></div>
  <mat-chip-grid
    #chipList
    [class.inline-style]="inlineStyle"
    [hidden]="!hasChips"
    [class.readonlyUserInput]="readonlyUserInput"
  >
    <mat-chip-row
      *ngFor="let option of value"
      (removed)="onSelectedOptionRemoved(option.id)"
      [disabled]="disabled"
      [removable]="!(readonlyUserInput || disabled)"
      #tooltip="matTooltip"
      [matTooltipHideDelay]="0"
      [class.readonlyUserInput]="readonlyUserInput"
      [matTooltipShowDelay]="100"
      [matTooltip]="message1.innerText"
      matTooltipClass="tooltip-width"
      [matTooltipDisabled]="!isTextOverflow(message1)"
    >
      <span
        #message1
        [ngClass]="!(readonlyUserInput || disabled) ? 'text-wdith-removable' : 'text-wdith'"
        class="text-overflow"
        >{{ !!option ? option.name : '' }}</span
      >
      <button *ngIf="!(readonlyUserInput || disabled)" matChipRemove>
        <mat-icon fontSet="bosch" fontIcon="bosch-ic-close-small"></mat-icon>
      </button>
    </mat-chip-row>
  </mat-chip-grid>
  <mat-autocomplete #autoComplete="matAutocomplete" (optionSelected)="onAutocompleteOptionSelected($event)">
    <mat-option
      *ngFor="let proposedOption of userFilteredOptions | async"
      [value]="proposedOption.name"
      [id]="proposedOption.id"
    >
      {{ proposedOption.name }}
    </mat-option>
  </mat-autocomplete>
</ng-template>
