<div ng-if="ctrl.areItemsAndFiltersLoaded()">
  <div class="c8y-empty-state text-center m-t-40" ng-show="ctrl.areNoItemsAvailable()">
    <h1 c8y-icon="exchange"></h1>
    <h3>{{ ctrl.emptyListLabel | translate }}</h3>
    <span ng-bind="ctrl.getNoItemsMessage() | translate"></span>
  </div>

  <div class="card table-responsive full-page" ng-show="!ctrl.areNoItemsAvailable()">
    <table class="table table-striped table-hover table-filtered-sorted">
      <colgroup>
        <col
          ng-repeat="column in ctrl.columns"
          width="{{ column.style.width || column.style['min-width'] || '0%' }}"
        />
      </colgroup>
      <thead>
        <tr>
          <th ng-repeat="column in ctrl.columns" class="text-nowrap">
            <span ng-if="!column.header.text" ng-bind="column.header | translate"></span>
            <span ng-if="column.header.text" ng-bind="column.header.text | translate"></span>
            <i
              ng-if="column.header.tooltip"
              c8y-icon="{{ column.header.tooltip.icon }}"
              uib-tooltip="{{ column.header.tooltip.text | translate }}"
              tooltip-popup-delay="500"
              tooltip-append-to-body="true"
            ></i>
            <button
              class="btn btn-dot p-l-0 p-r-0"
              type="button"
              title="{{ 'Filter' | translate }}"
              ng-if="ctrl.isConfigurable(column)"
              ng-click="ctrl.configureColumn(column)"
            >
              <i c8y-icon="filter" ng-class="{ 'text-muted': !ctrl.isFiltered(column) }"></i>
              <i
                c8y-icon="sort-alpha-asc"
                ng-show="ctrl.isSortedAscending(column, ctrl.columnsConfig[column.name])"
                ng-class="{
                  'text-muted': !ctrl.isSortedAscending(column, ctrl.columnsConfig[column.name])
                }"
              ></i>
              <i
                c8y-icon="sort-alpha-desc"
                ng-show="ctrl.isSortedDescending(column, ctrl.columnsConfig[column.name])"
                ng-class="{
                  'text-muted': !ctrl.isSortedDescending(column, ctrl.columnsConfig[column.name])
                }"
              ></i>
            </button>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr
          ng-class="{ interact: onItemClick, 'no-cursor': !onItemClick }"
          ng-repeat="item in ctrl.items"
          ng-click="ctrl.onItemClick(item)"
          ng-include="ctrl.ROW_TEMPLATE_KEY"
        ></tr>
        <tr ng-show="ctrl.isFilteredItemsListEmpty()">
          <td colspan="{{ ctrl.columns.length }}">
            <div class="c8y-empty-state text-left">
              <h1 class="c8y-icon c8y-icon-device c8y-icon-duocolor"></h1>
              <h3>{{ ctrl.emptyListLabel | translate }}</h3>
              <span ng-bind="ctrl.getNoItemsMessage() | translate"></span>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <c8y-load-more change-page-size></c8y-load-more>
</div>
