<div class="asset-table" ng-controller="AssetsCtrl">
  <div ng-show="devices.length === 0" class="c8y-empty-state text-left">
    <div class="h1 c8y-icon c8y-icon-device c8y-icon-duocolor"></div>
    <p>
      <strong translate>No items to display.</strong>
      <span translate>You must add a target asset or device.</span>
    </p>
  </div>

  <table class="table table-condensed table-striped" ng-show="devices.length">
    <thead class="headers">
      <tr c8y-sort-group>
        <th>&nbsp;</th>
        <th
          ng-repeat="property in properties track by $index"
          style="min-width: 50px"
          class="header-cell"
        >
          <c8y-sort
            class="widget-sort"
            up-action="orderDownBy(property.keyPath)"
            down-action="orderBy(property.keyPath)"
          ></c8y-sort>
          <div
            class="column-name"
            tooltip-enable="{{ !renderedAllDevices() }}"
            uib-tooltip="{{
              'Note: Sorting might not work properly until all rows are loaded.' | translate
            }}"
            tooltip-placement="top"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            {{ property.label }}
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr
        ng-repeat="device in devices"
        ng-class="{ 'realtime-animation-list': realtimeAnimation }"
        c8y-scroll-load
        c8y-scroll-load-container="div.card-inner-scroll"
        c8y-scroll-load-on-appear="renderDevice(device)"
      >
        <td class="text-center">
          <c8y-device-status-display device="device"></c8y-device-status-display>
        </td>
        <td ng-repeat="property in properties track by $index">
          <div
            ng-if="renderedDevices[device.id]"
            c8y-renderer="property.renderType"
            c8y-renderer-root="device"
            c8y-renderer-property="property"
            c8y-renderer-model="buildFields(device, property.keyPath)"
            c8y-renderer-link="getAssetLinkIfNeeded(device, $index)"
          ></div>
        </td>
      </tr>
    </tbody>
  </table>
  <c8y-load-more></c8y-load-more>
</div>
