<div ng-controller="MultipleKpiConfigCtrl">

  <label translate>KPI</label>

  <div ng-repeat="measurement in allMeasurements">

    <div ng-click="open=!open" class="interact">
      <span class="text-muted">
        <i c8y-icon="plus-square" ng-show="!open"></i>
        <i c8y-icon="minus-square" ng-show="open"></i>
      </span>
      {{measurement}}
    </div>

    <div ng-show="open" class="p-l-16">

      <div ng-repeat="m in measurementsByFragment[measurement]">
        {{m.fragment}} <span class="text-muted">{{m.series}}</span>
        <c8y-if-allowed any-role="['ROLE_INVENTORY_ADMIN', 'ROLE_MANAGED_OBJECT_ADMIN']">
          <a class="btn btn-link btn-xs" ng-href="/apps/administration/#kpi/new?fragment={{m.fragment}}&series={{m.series}}">
            <i c8y-icon="plus"></i>
            <translate>Create KPI</translate>
          </a>
        </c8y-if-allowed>
      </div>

      <div class="checkbox" ng-repeat="kpi in kpisByFragment[measurement]">
        <label>
          <input type="checkbox" ng-model="kpi.selected">
          {{kpi.c8y_Kpi.label | translate}}
          <small class="text-muted">{{kpi.c8y_Kpi.series}}</small>
          <c8y-if-allowed admin-mos="[kpi.id]">
            <a class="btn btn-link btn-xs" ng-href="/apps/administration/#kpi/{{kpi.id}}">
              <i c8y-icon="pencil"></i>
              <translate>Edit KPI</translate>
            </a>
          </c8y-if-allowed>
          <c8y-if-allowed any-role="['ROLE_INVENTORY_ADMIN', 'ROLE_MANAGED_OBJECT_ADMIN']">
            <a class="btn btn-link btn-xs" ng-href="/apps/administration/#kpi/new?fragment={{kpi.c8y_Kpi.fragment}}&series={{kpi.c8y_Kpi.series}}">
              <i c8y-icon="plus"></i>
              <translate>Create new KPI</translate>
            </a>
          </c8y-if-allowed>
        </label>
      </div>

    </div>
  </div>
  <div class="form-group">
    <label translate>Time interval</label>
    <select class="form-control" ng-options="time.value as time.name for time in timeIntervals" ng-model="config.timeInterval" required></select>
  </div>
  <div class="form-group">
    <label translate>Aggregation type</label>
    <select class="form-control" ng-options="aggregation.value as aggregation.name for aggregation in aggregationTypes" ng-model="config.aggregationType" ng-change="onAggregationTypeChangedManually()"></select>
  </div>
</div>
