<div ng-controller="kpiSetupCtrl">
  <div class="nav">
    <div class="navbar-right">
      <c8y-if-allowed any-role="['ROLE_INVENTORY_ADMIN', 'ROLE_MANAGED_OBJECT_ADMIN']">
        <button
          title="{{ 'Add KPI' | translate }}"
          ng-if="false"
          type="button"
          class="btn btn-link"
          ng-click="add()"
        >
          <i c8y-icon="plus"></i> {{ 'Add KPI' | translate }}
        </button>
      </c8y-if-allowed>
      <c8y-refresh-btn></c8y-refresh-btn>
    </div>
  </div>

  <table class="table table-condensed table-hover table-kpi-list">
    <thead>
      <tr>
        <th translate>Measurement</th>
        <th class="text-center" translate>Series</th>
        <th class="text-center" translate>KPI?</th>
        <th class="text-center" translate>Unit</th>
        <th translate>Label</th>
        <th class="text-center" translate>Color</th>
        <th class="text-center" translate>Target</th>
        <th class="text-center" translate>Min/Max</th>
        <th class="text-center" translate>Red range</th>
        <th class="text-center" translate>Yellow range</th>
      </tr>
    </thead>
    <tbody ng-repeat="measurement in measurements">
      <tr ng-repeat="series in measurement.series" ng-show="measurement.series.length > 0">
        <td
          ng-if="$first"
          class="interact"
          ng-click="navigateToDetails(measurement, series, series.kpi)"
          rowspan="{{ measurement.series.length }}"
        >
          {{ getHumanizedName(measurement.type) }}
        </td>
        <td
          class="text-center interact"
          ng-click="navigateToDetails(measurement, series, series.kpi)"
        >
          {{ series.name }}
        </td>
        <td class="text-center">
          <input
            type="checkbox"
            ng-model="series.kpi.enabled"
            ng-change="updateKpiEnabled(measurement, series, series.kpi)"
          />
        </td>
        <td
          class="text-center interact"
          ng-click="navigateToDetails(measurement, series, series.kpi)"
        >
          <span ng-if="series.kpi.unit">{{ series.kpi.unit }}</span>
          <span ng-if="!series.kpi.unit">{{ series.unit }}</span>
        </td>
        <td class="interact" ng-click="navigateToDetails(measurement, series, series.kpi)">
          {{ series.kpi.label }}
        </td>
        <td
          class="text-center interact"
          ng-click="navigateToDetails(measurement, series, series.kpi)"
        >
          <i ng-if="series.kpi.color" c8y-icon="circle" ng-style="{color: series.kpi.color}"></i>
        </td>
        <td
          class="text-center interact"
          ng-click="navigateToDetails(measurement, series, series.kpi)"
        >
          <small>{{ series.kpi.target }}</small>
        </td>
        <td
          class="text-center interact"
          ng-click="navigateToDetails(measurement, series, series.kpi)"
        >
          <small>{{ series.kpi.min }}…{{ series.kpi.max }}</small>
        </td>
        <td
          class="text-center interact"
          ng-click="navigateToDetails(measurement, series, series.kpi)"
        >
          <span ng-if="series.kpi.redRangeMin || series.kpi.redRangeMax"
            ><small>{{ series.kpi.redRangeMin }}…{{ series.kpi.redRangeMax }}</small></span
          >
        </td>
        <td
          class="text-center interact"
          ng-click="navigateToDetails(measurement, series, series.kpi)"
        >
          <span ng-if="series.kpi.yellowRangeMin || series.kpi.yellowRangeMax"
            ><small
              >{{ series.kpi.yellowRangeMin }}…{{ series.kpi.yellowRangeMax }}</small
            ></span
          >
        </td>
      </tr>
      <tr ng-show="measurement.series.length === 0">
        <td>{{ getHumanizedName(measurement.type) }}</td>
        <td colspan="9">
          <span class="text-danger" translate>No sample value exists, connect device first.</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>
