<div ng-controller="kpiConfigCtrl">
  <div
    ng-controller="listConfigCtrl"
    class="no-card-context"
  >
    <fieldset class="c8y-fieldset">
      <legend>{{ 'Column visibility' | translate }}</legend>
      <div class="form-group d-flex flex-wrap gap-16">
        <label class="c8y-checkbox m-t-8">
          <input
            type="checkbox"
            ng-model="config.options.kpi"
          />
          <span></span>
          <span>{{ 'Label' | translate }}</span>
        </label>
        <label class="c8y-checkbox">
          <input
            type="checkbox"
            ng-model="config.options.target"
          />
          <span></span>
          <span>{{ 'Target' | translate }}</span>
        </label>
        <label class="c8y-checkbox">
          <input
            type="checkbox"
            ng-model="config.options.current"
          />
          <span></span>
          <span>{{ 'Current' | translate }}</span>
        </label>
        <label class="c8y-checkbox">
          <input
            type="checkbox"
            ng-model="config.options.diff"
          />
          <span></span>
          <span>{{ 'Diff' | translate }}</span>
        </label>
        <label class="c8y-checkbox">
          <input
            type="checkbox"
            ng-model="config.options.diffPercentage"
          />
          <span></span>
          <span>{{ 'Diff %' | translate }}</span>
        </label>
        <label class="c8y-checkbox">
          <input
            type="checkbox"
            ng-model="config.options.asset"
          />
          <span></span>
          <span>{{ 'Asset' | translate }}</span>
        </label>
      </div>
    </fieldset>
    
    <c8y-data-point-list
      ng-model="config"
      datapoints="config.options.dataPoints"
      no-chart
      class="bg-inherit"
      allow-adding-data-points-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
    ></c8y-data-point-list>
  </div>
</div>
