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

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

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

<div class="simple-list-input">
  <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={{action "addValue"}}
    @actionParam={{this.newValue}}
    @disabled={{this.inputEmpty}}
    @icon="plus"
    @class="add-value-btn btn-small"
  />
</div>