<div
  ng-repeat="value in numberListCntr.getList() track by $index"
  class="form-group kuiFieldGroup"
>
  <div class="kuiFieldGroupSection kuiFieldGroupSection--wide">
    <input
      ng-model="numberListCntr.getList()[$index]"
      kbn-number-list-input
      input-focus
      aria-labelledby="{{numberListCntr.labelledbyId}}"
      class="form-control"
    >
  </div>

  <div class="kuiFieldGroupSection">
    <button
      aria-label="{{ ::'common.ui.numberList.removeUnitButtonAriaLabel' | i18n: {defaultMessage: 'Remove this rank value'} }}"
      ng-click="numberListCntr.remove($index, 1)"
      class="kuiButton kuiButton--danger kuiButton--small"
      type="button"
    >
      <span class="kuiIcon fa-times"></span>
    </button>
  </div>
</div>

<p ng-show="numberListCntr.invalidLength()"
  class="text-danger text-center"
  i18n-id="common.ui.numberList.selectUnitDescription"
  i18n-default-message="You must specify at least one {unitName}"
  i18n-values="{unitName: numberListCntr.getUnitName()}"
></p>

<p ng-show="numberListCntr.undefinedLength()"
  class="text-primary text-center"
  i18n-id="common.ui.numberList.noUnitSelectedDescription"
  i18n-default-message="Please specify at least one {unitName}"
  i18n-values="{unitName: numberListCntr.getUnitName()}"
></p>

<div class="euiSpacer euiSpacer--s"></div>

<button
  ng-click="numberListCntr.add()"
  type="button"
  class="kuiButton kuiButton--primary kuiButton--fullWidth"
>
  <i class="fa fa-plus"></i>
  <span
    i18n-id="common.ui.numberList.addUnitButtonLabel"
    i18n-default-message="Add {unitName}"
    i18n-values="{unitName: numberListCntr.getUnitName()}"
  ></span>
</button>
