{{#if this.collection}}
  <div class="values">
    {{#each this.collection as |value index|}}
      <div class="value" data-index={{index}}>
        <DButton
          @action={{action "removeValue"}}
          @actionParam={{value}}
          @icon="times"
          @class="remove-value-btn btn-small"
        />
        <Input
          @value={{value.key}}
          class="value-input"
          {{on "focusout" (fn (action "changeKey") index)}}
        />
        <Input
          @value={{value.secret}}
          class="value-input"
          @type={{if this.isSecret "password" "text"}}
          {{on "focusout" (fn (action "changeSecret") index)}}
        />
      </div>
    {{/each}}
  </div>
{{/if}}

<div class="value">
  <TextField
    @value={{this.newKey}}
    @class="new-value-input key"
    @placeholder={{this.setting.placeholder.key}}
  />
  <Input
    @type="password"
    @value={{this.newSecret}}
    class="new-value-input secret"
    placeholder={{this.setting.placeholder.value}}
  />
  <DButton
    @action={{action "addValue"}}
    @icon="plus"
    @class="add-value-btn btn-small"
  />
</div>

<SettingValidationMessage @message={{this.validationMessage}} />