{{#if label}}
  <label class="title is-5" data-test-string-list-label="true">
    {{label}}
    {{#if helpText}}
      {{#info-tooltip}}
        {{helpText}}
      {{/info-tooltip}}
    {{/if}}
  </label>
{{/if}}
{{#if warning}}
  <AlertBanner
    @type="warning"
    @message="{{warning}}"
  />
{{/if}}
{{#each inputList as |data index|}}
  <div class="field is-grouped" data-test-string-list-row="{{index}}">
    <div class="control is-expanded">
      {{input
        data-test-string-list-input=index
        type="text"
        class="input"
        value=data.value
        name=(concat elementId "-" index)
        id=(concat elementId "-" index)
        key-up=(action "inputChanged" index)
        change=(action (action "inputChanged" index) value="target.value")
      }}
    </div>
    <div class="control">
      {{#if (eq (inc index) inputList.length)}}
        <button type="button" class="button is-outlined is-primary" {{action "addInput"}} data-test-string-list-button="add">
          Add
        </button>
      {{else}}
        <button type="button" class="button is-expanded is-icon" {{action "removeInput" index}} data-test-string-list-button="delete" >
          {{i-con size=22 glyph='trash-a' excludeIconClass=true class="is-large has-text-grey-light"}}
        </button>
      {{/if}}
    </div>
  </div>
{{/each}}