<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="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">
  You must specify at least one {{numberListCntr.getUnitName()}}
</p>

<p ng-show="numberListCntr.undefinedLength()" class="text-primary text-center">
  <!-- be a bit more polite when the form is first init'd -->
  Please specify at least one {{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> Add {{numberListCntr.getUnitName()}}
</button>
