<div ng-controller="kpiListCtrl">
  <table class="table table-condensed">
    <thead>
      <tr>
        <th></th>
        <th
          ng-if="columnVisible(child.config.options.kpi)"
          translate
        >
          Label
        </th>
        <th
          class="text-right text-nowrap"
          ng-if="columnVisible(child.config.options.target)"
          translate
        >
          Target
        </th>
        <th
          class="text-right text-nowrap"
          ng-if="columnVisible(child.config.options.current)"
          translate
        >
          Current
        </th>
        <th
          class="text-right text-nowrap"
          ng-if="columnVisible(child.config.options.diff)"
          translate
        >
          Diff
        </th>
        <th
          class="text-right text-nowrap"
          ng-if="columnVisible(child.config.options.diffPercentage)"
          translate
        >
          Diff %
        </th>
        <th
          class="text-right text-nowrap"
          ng-if="columnVisible(child.config.options.asset)"
          translate
        >
          Asset
        </th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="dp in dataPoints">
        <td style="width: 20px">
          <i
            c8y-icon="circle"
            ng-style="{ color: dp.color }"
          ></i>
        </td>

        <td
          ng-if="columnVisible(child.config.options.kpi)"
          data-cy="datapointlist-kpi"
        >
          {{ dp.label | translate }}
          <small class="text-muted">{{ dp.unit }}</small>
        </td>

        <td
          class="text-right"
          ng-if="columnVisible(child.config.options.target)"
          data-cy="datapointlist-target"
        >
          <span>{{ dp.target }}</span>
        </td>

        <td
          class="text-right"
          ng-if="columnVisible(child.config.options.current)"
          data-cy="datapointlist-current"
        >
          <span
            uib-tooltip="{{ times[dp.id] | absoluteDate }}"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            {{ measurements[dp.id].value }}
          </span>
        </td>

        <td
          class="text-right"
          ng-if="columnVisible(child.config.options.diff)"
          data-cy="datapointlist-diff"
        >
          <span>{{ diff(dp) | number: 2 }}</span>
        </td>

        <td
          class="text-right"
          ng-if="columnVisible(child.config.options.diffPercentage)"
          data-cy="datapointlist-diffPercentage"
        >
          <span>{{ diffPercent(dp) | number: 2 }}</span>
        </td>

        <td
          class="text-right word-break"
          ng-if="columnVisible(child.config.options.asset)"
          data-cy="datapointlist-asset"
        >
          <button
            class="btn-clean text-muted"

            ng-click="redirectToAsset(dp.__target.id)"
          >
            <small>
              {{ dp.__target.name }}
            </small>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>
