<c8y-li
  class="c8y-list__item--double-actions"
  [ngClass]="{ 'c8y-list__item--no-expand': noExpandToggle }"
  [collapsed]="collapsed"
  #listItem
  id="{{ operation.id }}"
>
  <c8y-li-icon>
    <button
      class="btn-clean"
      type="button"
      [attr.aria-label]="OPERATION_STATUS_OPTIONS_MAP[operation.status].label | translate"
      [tooltip]="OPERATION_STATUS_OPTIONS_MAP[operation.status].label | translate"
      placement="right"
      container="body"
      [delay]="500"
    >
      <i
        [c8yIcon]="OPERATION_STATUS_OPTIONS_MAP[operation.status].icon"
        [ngClass]="OPERATION_STATUS_OPTIONS_MAP[operation.status].styleClass"
      ></i>
    </button>
  </c8y-li-icon>
  <div [ngClass]="{ 'content-flex-58': !readOnly, 'content-flex-50': readOnly }">
    <div class="col-5">
      <span title="{{ operationTitle | translate }}" class="text-truncate">
        {{ operationTitle | translate }}
      </span>
    </div>
    <div class="col-3" *ngIf="!deviceId">
      <a
        title="{{ operation.deviceName }}"
        [routerLink]="['/device', operation.deviceId, 'device-info']"
        routerLinkActive="active"
        class="text-truncate"
      >
        {{ 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"
      c8yProductExperience
      inherit
    ></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"
          c8yProductExperience
          inherit
        ></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-circle"
      c8yProductExperience
      inherit
    ></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>