@if (
  bulkOperation.progress.failed ||
  bulkOperation.progress.executing ||
  bulkOperation.progress.pending ||
  bulkOperation.progress.successful
) {
  <div
    class="legend form-block p-t-16 m-b-0"
    translate
  >
    Operations
  </div>
  <div class="d-flex a-i-center">
    <div class="d-flex a-i-center p-b-8">
      <span
        class="m-r-4 text-medium"
        translate
      >
        Filter by status
      </span>
      <c8y-status-filter
        small
        [options]="OPERATION_STATUS_OPTIONS_MAP"
        (onFilterChanged)="reload($event)"
      ></c8y-status-filter>
    </div>
    @if (!readOnly && bulkOperation.progress.failed > 0) {
      <div class="m-l-auto p-b-8">
        <button
          class="btn btn-navbar"
          title="{{ 'Retry failed operations' | translate }}"
          (click)="retryBulkOperation()"
        >
          <i
            class="m-r-4"
            c8yIcon="repeat"
          ></i>
          <span translate>Retry failed operations</span>
        </button>
      </div>
    }
  </div>
  <c8y-data-grid
    [actionControls]="actions"
    [columns]="columns"
    [displayOptions]="displayOptions"
    [serverSideDataCallback]="serverSideDataCallback"
    [pagination]="pagination"
  >
    <c8y-ui-empty-state
      icon="search"
      [title]="'No single operations of the selected status to display.' | translate"
      [subtitle]="'Single operations will be displayed here' | translate"
      horizontal
    ></c8y-ui-empty-state>
  </c8y-data-grid>
}