<div ng-show="add.form">
  <label>Select {{ groupName }} type</label>
  <ul class="form-group list-group list-group-menu">
    <li
      tabindex="0"
      id="aggSchemaListItem-{{$index}}"
      ng-hide="schema.deprecate"
      ng-repeat="schema in availableSchema"
      ng-click="add.submit(schema)"
      class="list-group-item list-group-menu-item"
      data-test-subj="{{schema.title}}">
      <i ng-show="schema.icon" ng-class="schema.icon"></i>
      {{schema.title}}
    </li>
  </ul>
</div>

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

<div
  ng-if="stats.max > stats.count"
  ng-init="add.form = stats.count < 1 ? !add.form : add.form"
  ng-click="add.form = !add.form"
  class="eui-textCenter">

  <div ng-if="!add.form">
    <button
      data-test-subj="visualizeEditorAddAggregationButton"
      class="kuiButton kuiButton--secondary kuiButton--small"
      ng-if="groupName !== 'buckets' || !stats.count && !stats.deprecate"
    >
      Add {{ groupName }}
    </button>

    <button
      data-test-subj="visualizeEditorAddAggregationButton"
      class="kuiButton kuiButton--secondary kuiButton--small"
      ng-if="groupName === 'buckets' && stats.count > 0 && !stats.deprecate"
    >
      Add sub-{{ groupName }}
    </button>
  </div>

  <button
    class="kuiButton kuiButton--danger kuiButton--small"
    ng-if="add.form"
  >
    Cancel
  </button>
</div>
