<c8y-title> {{ 'Device control' | translate }}</c8y-title>
<c8y-action-bar-item *ngIf="bulkTypes?.length" itemClass="navbar-form" [placement]="'left'">
  <label translate class="hidden-sm">Type</label>
  <c8y-select
    style="width: 180px;"
    [items]="bulkTypes"
    [selected]="selectedTypeFilters"
    [disableApplyOnNoSelection]="true"
    (onChange)="selectedTypeFilters = $event; typeFilter$.next(selectedTypeFilters)"
  >
  </c8y-select>
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'left'" itemClass="navbar-form">
  <c8y-status-filter
    #statusFilter
    [options]="bulkOperationStatusOptions"
    (onFilterChanged)="statusFilter$.next($event)"
  ></c8y-status-filter>
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'left'" itemClass="navbar-form">
  <c8y-date-picker (onDateSelected)="timeFilter$.next($event)"></c8y-date-picker>
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'right'">
  <c8y-realtime-btn [service]="realtime"></c8y-realtime-btn>
</c8y-action-bar-item>
<c8y-action-bar-item [placement]="'right'">
  <button
    *ngIf="bulkTypes?.length"
    class="btn btn-link d-flex a-i-center"
    (click)="addBulkOperation()"
    title="{{ 'New bulk operation' | translate }}"
  >
    <i c8yIcon="plus-circle" class="m-r-4"></i> 
    <span class="text-truncate">
      {{ 'New bulk operation' | translate }}
    </span> 
  </button>
</c8y-action-bar-item>
<c8y-action-bar-item [placement]="'right'">
  <button class="btn btn-link d-flex a-i-center" 
    title="{{ 'Reload' | translate }}" 
    (click)="reload$.next()"
  >
    <i c8yIcon="refresh" [ngClass]="{ 'icon-spin': refreshLoading }" class="m-r-4"></i>
    <span class="text-truncate">
      {{ 'Reload' | translate }}
    </span>
  </button>
</c8y-action-bar-item>
<!-- Empty state  -->
<div
  class="c8y-empty-state text-center"
  *ngIf="(bulkOperations$ | async)?.data.length === 0 && !isFilterApplied()"
>
  <h1 class="c8y-icon c8y-icon-energy c8y-icon-duocolor"></h1>
  <h3 translate>No items to display</h3>
  <p translate>Bulk operations will be displayed here</p>
  <button
    type="button"
    *ngIf="bulkTypes?.length"
    title="{{ 'New bulk operation' | translate }}"
    class="btn btn-primary"
    (click)="addBulkOperation()"
    translate
  >
    New bulk operation
  </button>
</div>

<!-- No results empty state -->
<div
  class="c8y-empty-state text-center"
  *ngIf="(bulkOperations$ | async)?.data.length === 0 && isFilterApplied()"
>
  <h1 c8yIcon="search" class="c8y-icon c8y-icon-duocolor"></h1>
  <h3 translate>No results to display.</h3>
  <p translate>Adjust or reset the filter.</p>
  <button
    type="button"
    title="{{ 'Reset filter' | translate }}"
    class="btn btn-primary"
    (click)="resetFilter()"
    translate
  >
    Reset filter
  </button>
</div>

<!-- Detailed list of operations + load more button -->
<c8y-list-group
  class="m-b-24"
  [ngClass]="{ 'dd-low': (bulkOperations$ | async)?.data.length < 10 }"
>
  <div
    class="page-sticky-header hidden-xs c8y-list__item--double-actions c8y-list__item"
    *ngIf="(bulkOperations$ | async)?.data.length"
  >
    <div class="c8y-list__item__block">
      <div class="c8y-list__item__icon">
        <i class="p-l-24"></i>
      </div>
      <div class="c8y-list__item__body">
        <div class="content-flex-57">
          <div class="col-5">
            {{ 'Operation' | translate }}
          </div>
          <div class="flex-grow">
            {{ 'Progress' | translate }}
          </div>
          <div class="col-4">
            {{ 'Status' | translate }}
          </div>
        </div>
      </div>
      <div class="c8y-list__item__actions"></div>
    </div>
  </div>
  <div
    class="d-contents"
    *c8yFor="
      let bulkOperation of bulkOperations$ | async;
      let i = index;
      realtime: realtime;
      pipe: filterPipe;
      comparator: compareOperations.bind(this);
      loadMore: 'auto';
    "
  >
    <c8y-bulk-operation-list-item
      [bulkOperation]="bulkOperation"
      (reload)="reload$.next()"
      (showFailedOperation)="openFailedOperation($event)"
      class="d-contents"
    >
    </c8y-bulk-operation-list-item>
  </div>
</c8y-list-group>