<div
  class="schema-form-array {{ form.htmlClass }}"
  sf-array="form"
  ng-model="$$value$$"
  ng-model-options="form.ngModelOptions"
  ng-init="visibleItems = 10"
>
  <label
    class="control-label"
    ng-show="showTitle()"
  >
    {{ form.title | translate }}
  </label>
  <ol
    class="list-unstyled"
    ng-model="modelArray"
  >
    <!--
    Removed ui-sortable, i suppose we don't use this 
    anywhere and it only brings confusion to the UI

    ui-sortable="form.uiSortable || ''" 
  -->
    <li
      class="{{ form.fieldHtmlClass }}"
      ng-repeat="item in modelArray.slice(0, visibleItems) track by $index"
      data-cy="array--item-in-modelArray"
    >
      <div class="d-flex a-i-start">
        <sf-decorator
          class="flex-grow"
          ng-init="arrayIndex = $index"
          form="copyWithIndex($index)"
        ></sf-decorator>
        <div class="a-s-start">
          <button
            class="btn btn-link"
            title="{{ 'Delete' | translate }}"
            type="button"
            ng-hide="form.readonly || form.remove === null"
            ng-click="deleteFromArray($index)"
          >
            <span
              class="text-danger"
              c8y-icon="minus-circle"
              aria-hidden="true"
            ></span>
          </button>
        </div>
      </div>
    </li>
  </ol>

  <div
    class="p-t-8 p-b-8"
    ng-show="visibleItems < modelArray.length"
  >
    <button
      class="btn-default btn btn-block m-b-16 d-block"
      style="border: 1px solid"
      type="button"
      ng-click="visibleItems = visibleItems + 10"
      data-cy="array--Load-more-button"
    >
      <i c8y-icon="repeat"></i>
      <span>{{ 'Load more' | translate }}</span>
    </button>
  </div>
  <div class="p-t-8 p-b-8">
    <button
      class="btn btn-xs {{ form.style.add || 'btn-default' }}"
      title="{{ form.add || 'Add' | translate }}"
      type="button"
      ng-hide="form.readonly || form.add === null"
      ng-click="appendToArray()"
    >
      <i
        class="m-r-4"
        c8y-icon="plus"
      ></i>
      {{ form.add || 'Add' | translate }}
    </button>
  </div>
  <div
    class="help-block"
    ng-show="(hasError() && errorMessage(schemaError())) || form.description"
    ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description | translate"
  ></div>
</div>