<div ng-controller="AssetsCtrl">
  <table class="table table-condensed table-striped" ng-show="devices.length">
    <thead>
      <tr>
        <th ng-show="options.data.availability"></th>
        <th>
          <p class="table-header" translate>Device</p>
          <c8y-sort down-sort-action="orderBy('name')" up-sort-action="orderBy('-name')"></c8y-sort>
        </th>
        <th ng-show="options.data.alarms">
          <p class="table-header" translate>Alarm status</p>
          <c8y-sort down-sort-action="orderAlarms()" up-sort-action="orderAlarms(true)"></c8y-sort>
        </th>
        <th ng-show="options.data.communication">
          <p class="table-header" translate>Last communication</p>
          <c8y-sort
            down-sort-action="orderBy('c8y_Availability.lastMessage')"
            up-sort-action="orderBy('-c8y_Availability.lastMessage')"
          ></c8y-sort>
        </th>
        <th ng-show="options.data.location">
          <p class="table-header" translate>Location</p>
          <c8y-sort
            down-sort-action="orderBy('c8y_Position')"
            up-sort-action="orderBy('-c8y_Position')"
          ></c8y-sort>
        </th>
        <th ng-show="options.data.lastValidMessage">
          <p class="table-header" translate>Last valid message</p>
          <c8y-sort
            down-sort-action="orderLastValidMessage()"
            up-sort-action="orderLastValidMessage(true)"
          ></c8y-sort>
        </th>
        <th ng-show="options.data.maintenance">
          <p class="table-header" translate>Maintenance</p>
        </th>
        <th ng-repeat="column in options.customColumns track by $index">
          <p class="table-header">{{ column.label }}</p>
        </th>
        <th ng-show="options.deviceShellOperationButtons.length">
          <p class="table-header" translate>Device shell operations</p>
        </th>
        <th ng-repeat="column in counterColumns" ng-show="options.data[column.name]">
          <p class="table-header">{{ column.label }}</p>
          <c8y-sort
            down-sort-action="orderByCount(column.name)"
            up-sort-action="orderByCount(column.name, true)"
          ></c8y-sort>
        </th>
      </tr>
    </thead>

    <tbody>
      <tr ng-class="{ 'realtime-animation-list': realtimeAnimation }" ng-repeat="dev in devices">
        <td ng-show="options.data.availability" class="text-center">
          <button
            class="btn-clean"
            type="button"
            aria-label="{{ tooltip(dev) | translate }}"
            uib-tooltip="{{ tooltip(dev) | translate }}"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <i c8y-icon="{{ statusIcon(dev) }}" ng-class="statusClass(dev)"></i>
          </button>
        </td>

        <td>{{ dev.name }}</td>

        <td ng-show="options.data.alarms" class="text-left interact">
          <a ng-href="#{{ deviceAlarmLink(dev) }}" class="listLink">
            <small class="status critical" ng-if="dev.c8y_ActiveAlarmsStatus.critical">
              {{ dev.c8y_ActiveAlarmsStatus.critical }}
              <i c8y-icon="warning"></i>
            </small>
            <small class="status major" ng-if="dev.c8y_ActiveAlarmsStatus.major">
              {{ dev.c8y_ActiveAlarmsStatus.major }}
              <i c8y-icon="exclamation-circle"></i>
            </small>
            <small class="status minor" ng-if="dev.c8y_ActiveAlarmsStatus.minor">
              {{ dev.c8y_ActiveAlarmsStatus.minor }}
              <i c8y-icon="exclamation-circle"></i>
            </small>
            <small class="status warning" ng-if="dev.c8y_ActiveAlarmsStatus.warning">
              {{ dev.c8y_ActiveAlarmsStatus.warning }}
              <i c8y-icon="circle"></i>
            </small>
          </a>
        </td>

        <td ng-show="options.data.communication">
          {{ dev.c8y_Availability.lastMessage | absoluteDate }}
        </td>

        <td ng-show="options.data.location">
          <a
            ng-show="dev.c8y_Position"
            ng-href="#/device/{{ dev.id }}/location"
            uib-tooltip="{{ 'Go to location' | translate }}"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <i c8y-icon="location-arrow"></i>
          </a>
          <span
            ng-show="!dev.c8y_Position"
            uib-tooltip="{{ 'No location available' | translate }}"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <i c8y-icon="ban" class="text-danger"></i>
          </span>
        </td>

        <td ng-show="options.data.lastValidMessage">
          <button
            class="btn-clean"
            type="button"
            aria-label="{{ lastValidMessageTooltip(dev) | translate }}"
            uib-tooltip="{{ lastValidMessageTooltip(dev) | translate }}"
            tooltip-popup-delay="500"
            tooltip-append-to-body="true"
          >
            <i
              c8y-icon="{{ lastValidMessageIcon(dev) }}"
              ng-style="{ color: lastValidMessageColor(dev) }"
            ></i>
          </button>
        </td>

        <td ng-show="options.data.maintenance">
          <button
            class="btn btn-xs btn-primary text-center"
            type="button"
            ng-if="dev.c8y_RequiredAvailability"
            ng-click="switchMaintenance(dev)"
          >
            <span ng-if="0 >= dev.c8y_RequiredAvailability.responseInterval" translate>
              Turn off
            </span>
            <span ng-if="0 < dev.c8y_RequiredAvailability.responseInterval" translate>Turn on</span>
          </button>
        </td>
        <td ng-repeat="column in options.customColumns track by $index">
          <i
            ng-style="{ color: getIcon(column.iconMap, column.fragment, dev).color || 'red' }"
            c8y-icon="{{
              getIcon(column.iconMap, column.fragment, dev).icon || 'question-circle-o'
            }}"
          ></i>
        </td>
        <td ng-show="options.deviceShellOperationButtons.length">
          <div class="btn-group">
            <button
              class="btn btn-primary btn-xs text-center"
              ng-class="{ 'btn-pending': button.operation.isPending[dev.id] }"
              type="button"
              title="{{ button.label }}"
              ng-if="
                !button.operation.chosen.deviceType ||
                (button.operation.chosen.deviceType &&
                  button.operation.chosen.deviceType === dev.type)
              "
              ng-repeat="button in options.deviceShellOperationButtons"
              ng-click="executeOperation(button.operation, dev.id)"
              ng-disabled="!button.operation || button.operation.isPending[dev.id]"
            >
              <span ng-hide="button.operation.isPending[dev.id]">
                {{ button.label }}
              </span>
              <span ng-show="button.operation.isPending[dev.id]">{{ 'Pending' | translate }}…</span>
            </button>
          </div>
        </td>
        <td ng-repeat="column in counterColumns" ng-show="options.data[column.name]">
          {{ counters[dev.id][column.name].count }}
        </td>
      </tr>
    </tbody>
  </table>
</div>
