{{#if label}}
  <label class="title {{if small-label 'is-5' 'is-4'}}" data-test-kv-label="true">
    {{label}}
    {{#if helpText}}
      <InfoTooltip>
       {{helpText}}
      </InfoTooltip>
    {{/if}}
  </label>
  {{#if subText}}
    <p class="has-padding-bottom">
      {{subText}}
    </p> 
  {{/if}}
{{/if}}
{{#if (get validationMessages name)}}
  <div>
    <AlertInline 
      @type="danger" 
      @message={{get validationMessages name}} 
      @paddingTop=true
    />
  </div>
{{/if}}
{{#each kvData as |row index|}}
  <div class="columns is-variable" data-test-kv-row>
    <div class="column is-one-quarter">
      <Input data-test-kv-key={{true}} @value={{row.name}} placeholder="key" @change={{action "updateRow" row index}} class="input" />
    </div>
    <div class="column">
      <Textarea 
        data-test-kv-value={{true}}
        @name={{row.name}}
        class="input {{if (get validationMessages name) "has-error-border"}}"
        @change={{action "updateRow" row index}}
        @value={{row.value}}
        @wrap="off"
        class="input"
        placeholder="value"
        @rows={{1}}
        onkeyup={{action
          (action "handleKeyUp" name)
          value="target.value"
        }}
      />
    </div>
    <div class="column is-narrow">
      {{#if (eq kvData.length (inc index))}}
        <button type="button" {{action "addRow"}} class="button is-outlined is-primary" data-test-kv-add-row=true>
          Add
        </button>
      {{else}}
        <button
          class="button has-text-grey is-expanded is-icon"
          type="button"
          {{action "deleteRow" row index}}
          aria-label="Delete row"
          data-test-kv-delete-row
        >
        <Icon @glyph="trash" @size="l" />
        </button>
      {{/if}}
    </div>
  </div>
{{/each}}
{{#if kvHasDuplicateKeys}}
  <AlertBanner
    @type="warning"
    @message="More than one key shares the same name. Please be sure to have unique key names or some data may be lost when saving."
    @class="is-marginless"
    data-test-duplicate-error-warnings
  />
{{/if}}