<div class="datatable">
  <div class="toolBar">
    <div class="toolBarTitle">{{ $ctrl.title }}</div>
    <div class="searchBar vertical-center">
      <pr-icon icon="'search'" feather="true" class-name="'searchIcon'"></pr-icon>
      <input
        type="text"
        class="searchInput"
        ng-model="$ctrl.paginationState.filter"
        ng-change="$ctrl.onTextFilterChange()"
        ng-model-options="{ debounce: 300 }"
        placeholder="Search..."
      />
    </div>
  </div>
  <table class="table table-hover" data-cy="{{ $ctrl.cyValue }}">
    <thead>
      <tr>
        <th> Name </th>
        <th ng-if="$ctrl.showGroups"> Group </th>
        <th ng-if="$ctrl.showTags"> Tags </th>
      </tr>
    </thead>
    <tbody>
      <tr
        ng-if="!$ctrl.hasBackendPagination"
        ng-click="$ctrl.entryClick(item)"
        class="interactive"
        dir-paginate="item in $ctrl.dataset | filter:$ctrl.paginationState.filter | itemsPerPage: $ctrl.paginationState.limit"
        pagination-id="$ctrl.tableType"
      >
        <td>
          {{ item.Name | truncate: 64 }}
        </td>
        <td ng-if="$ctrl.showGroups">
          {{ $ctrl.groupIdToGroupName(item.GroupId) | truncate: 64 }}
        </td>
        <td ng-if="$ctrl.showTags">
          {{ $ctrl.tagIdsToTagNames(item.TagIds) | arraytostr | truncate: 64 }}
        </td>
      </tr>
      <tr
        ng-if="$ctrl.hasBackendPagination"
        ng-click="$ctrl.entryClick(item)"
        class="interactive"
        dir-paginate="item in $ctrl.dataset | itemsPerPage: $ctrl.paginationState.limit"
        pagination-id="$ctrl.tableType"
        total-items="$ctrl.paginationState.totalCount"
      >
        <td>
          {{ item.Name | truncate: 64 }}
        </td>
        <td ng-if="$ctrl.showGroups">
          {{ $ctrl.groupIdToGroupName(item.GroupId) | truncate: 64 }}
        </td>
        <td ng-if="$ctrl.showTags">
          {{ $ctrl.tagIdsToTagNames(item.TagIds) | truncate: 64 }}
        </td>
      </tr>

      <tr ng-if="!$ctrl.dataset">
        <td colspan="3" class="text-center text-muted">Loading...</td>
      </tr>
      <tr ng-if="$ctrl.dataset.length === 0">
        <td colspan="3" class="text-center text-muted">{{ $ctrl.emptyDatasetMessage }}</td>
      </tr>
    </tbody>
  </table>
  <div class="footer" ng-if="$ctrl.dataset">
    <div class="paginationControls">
      <form class="form-inline">
        <span class="limitSelector">
          <span class="space-right"> Items per page </span>
          <select ng-model="$ctrl.paginationState.limit" ng-change="$ctrl.onPaginationLimitChanged()">
            <option value="10">10</option>
            <option value="25">25</option>
            <option value="50">50</option>
            <option value="100">100</option>
          </select>
        </span>
        <dir-pagination-controls pagination-id="$ctrl.tableType" max-size="5" on-page-change="$ctrl.onPageChanged(newPageNumber, oldPageNumber)"></dir-pagination-controls>
      </form>
    </div>
  </div>
</div>
