{{#if this.collection}}
  <div class="values">
    {{#each this.collection as |value index|}}
      <div data-index={{index}} class="value">
        <DButton
          @action={{fn this.removeValue value}}
          @icon="xmark"
          class="remove-value-btn btn-small"
        />

        <Input
          title={{value}}
          @value={{value}}
          class="value-input"
          {{on "focusout" (fn this.changeValue index)}}
        />

        {{#if this.showUpDownButtons}}
          <DButton
            @action={{fn this.shift -1 index}}
            @icon="arrow-up"
            class="shift-up-value-btn btn-small"
          />
          <DButton
            @action={{fn this.shift 1 index}}
            @icon="arrow-down"
            class="shift-down-value-btn btn-small"
          />
        {{/if}}
      </div>
    {{/each}}
  </div>
{{/if}}

<div class="simple-list-input">
  {{#if this.isPredefinedList}}
    {{#if (gt this.validValues.length 0)}}
      <ComboBox
        @content={{this.validValues}}
        @value={{this.newValue}}
        @onChange={{this.addValue}}
        @valueProperty={{this.setting.computedValueProperty}}
        @nameProperty={{this.setting.computedNameProperty}}
        @options={{hash castInteger=true allowAny=false}}
        class="add-value-input"
      />
    {{/if}}
  {{else}}
    <Input
      @type="text"
      @value={{this.newValue}}
      placeholder={{i18n "admin.site_settings.simple_list.add_item"}}
      class="add-value-input"
      autocomplete="off"
      autocorrect="off"
      autocapitalize="off"
    />
    <DButton
      @action={{fn this.addValue this.newValue}}
      @disabled={{this.inputEmpty}}
      @icon="plus"
      class="add-value-btn btn-small"
    />
  {{/if}}
</div>