<c8y-li
  class="c8y-list__item--double-actions"
  [ngClass]="{ 'c8y-list__item--no-expand': noExpandToggle }"
  [collapsed]="collapsed"
  #listItem
  id="{{ operation.id }}"
>
  <c8y-li-icon>
    <i
      [c8yIcon]="OPERATION_STATUS_OPTIONS_MAP[operation.status].icon"
      [ngClass]="OPERATION_STATUS_OPTIONS_MAP[operation.status].styleClass"
      [tooltip]="OPERATION_STATUS_OPTIONS_MAP[operation.status].label | translate"
    ></i>
  </c8y-li-icon>
  <div
    [ngClass]="{ 'content-flex-58': !readOnly, 'content-flex-50': readOnly }"
    [style.cursor]="!noExpandToggle ? 'pointer' : ''"
    (click)="!noExpandToggle && listItem.toggleCollapsed()"
  >
    <div class="col-5">
      <span class="text-truncate" title="{{ operationTitle | translate }}">
        {{ operationTitle | translate }}
      </span>
    </div>
    <div class="col-3" *ngIf="!deviceId">
      <a [routerLink]="['/device', operation.deviceId, 'device-info']" routerLinkActive="active">
        {{ operation.deviceName }}
      </a>
    </div>
    <div class="col-3">
      <small class="icon-flex text-muted">
        <i c8yIcon="calendar" class="m-r-4"></i>
        {{ operation.creationTime | c8yDate }}
      </small>
    </div>
  </div>
  <ng-container *ngIf="!readOnly">
    <c8y-li-action
      label="{{ 'Schedule as bulk operation' | translate }}"
      (click)="createCustomizedBulkOperation($event)"
      icon="c8y-icon c8y-icon-energy"
    >
    </c8y-li-action>
    <ng-container *c8yIfAllowed="inventoryPermissions; allowAny: true">
      <ng-container *c8yIfAllowed="smartRuleAdminPermissions; allowAny: true">
        <c8y-li-action
          *ngIf="isSmartRulesMicroserviceAvailable"
          label="{{ 'Create smart rule' | translate }}"
          (click)="operationsListService.createSmartRule(operation)"
          icon="sliders"
        >
        </c8y-li-action>
      </ng-container>
    </ng-container>
    <c8y-li-action
      *ngIf="operation.status === OPERATION_STATUS.PENDING"
      label="{{ 'Cancel operation' | translate }}"
      (click)="$event.stopPropagation(); sharedService.cancel(operation)"
      icon="times"
    >
    </c8y-li-action>
  </ng-container>
  <c8y-li-collapse class="m-b-16">
    <c8y-operation-details-tabs
      *ngIf="!listItem.collapsed"
      [operation]="operation"
      [bulkOperationModalDetailsService]="bulkOperationListItemService"
    ></c8y-operation-details-tabs>
  </c8y-li-collapse>
</c8y-li>