<c8y-li
  class="c8y-list__item--double-actions"
  [ngClass]="{ 'c8y-list__item--no-expand': !collapsed }"
  [collapsed]="collapsed"
  #listItem
  id="single-operation-{{ operation.id }}"
>
  <c8y-li-icon>
    <i [c8yIcon]="statusIcons[operation.status]" [ngClass]="statusClasses[operation.status]"></i>
  </c8y-li-icon>
  <div [ngClass]="{ 'content-flex-80': !readOnly, 'content-flex-50': readOnly }">
    <div class="col-6">
      <span class="text-truncate" title="{{ displayedDescription | translate }}">
        {{ displayedDescription | translate }}
      </span>
    </div>
    <div class="flex-grow"></div>
    <div class="col-3">
      <div class="m-r-16">
        <small class="icon-flex">
          <i c8yIcon="calendar" class="m-r-4"></i>
          <span>
            {{ operation.creationTime | c8yDate }}
          </span>
        </small>
      </div>
    </div>
  </div>
  <div class="c8y-list__item__footer">
    <div class="m-r-16">
      <small class="icon-flex">
        <i c8yIcon="exchange" class="m-r-4"></i>
        <span>
          <a href="#/device/{{ operation.deviceId }}">{{ operation.deviceName }}</a>
        </span>
      </small>
    </div>
  </div>
  <ng-container>
    <c8y-li-action
      label="{{ 'Schedule as bulk operation' | translate }}"
      (click)="scheduleAsBulkOperation()"
      icon="c8y-energy"
    >
    </c8y-li-action>
    <c8y-li-action
      *ngIf="!readOnly && operation.status === OperationStatus.PENDING"
      label="{{ 'Cancel`operation`' | translate }}"
      (click)="cancel()"
      icon="times"
    >
    </c8y-li-action>
  </ng-container>
  <c8y-li-collapse class="m-b-16">
    <div class="tabContainer">
      <ul class="nav nav-tabs nav-tabsc8y">
        <li [ngClass]="{ active: selectedTab === tab }" *ngFor="let tab of tabs">
          <button [title]="tab.label | translate" (click)="selectedTab = tab" class="btn-clean">
            <i [c8yIcon]="tab.icon"></i>
            <span class="txt">{{ tab.label | translate }}</span>
          </button>
        </li>
      </ul>
    </div>

    <ng-container *ngTemplateOutlet="selectedTab.template"></ng-container>

    <ng-template #details>
      <c8y-single-operation-details [operation]="operation" [readOnly]="readOnly">
      </c8y-single-operation-details>
    </ng-template>

    <ng-template #historyOfChanges>
      <c8y-audit-log [source]="operation.id"></c8y-audit-log>
    </ng-template>
  </c8y-li-collapse>
</c8y-li>