<c8y-li class="c8y-list__item--double-actions">
  <c8y-li-icon>
    <i
      [c8yIcon]="OPERATION_STATUS_OPTIONS_MAP[operation.status].icon"
      [ngClass]="OPERATION_STATUS_OPTIONS_MAP[operation.status].styleClass"
      [tooltip]="operation.status.toString() | translate"
    ></i>
  </c8y-li-icon>
  <div [ngClass]="{ 'content-flex-80': !readOnly, 'content-flex-50': readOnly }">
    <div class="col-4">
      <span class="m-r-4">
        <device-status [mo]="device"></device-status>
      </span>
      <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 class="col-5">
      <div class="flex-row">
        <span class="text-truncate" #failureReason>
          {{ operation.failureReason | translate }}
        </span>
        <a
          *ngIf="failureReason.offsetWidth < failureReason.scrollWidth"
          class="m-l-8"
          popover="{{ operation.failureReason | translate }}"
          placement="left"
          outsideClick="true"
        >
          <i [c8yIcon]="'info-circle text-primary'"></i>
        </a>
        <div
          class="showOnHover p-l-8 p-r-8 fit-h-20 flex-item-right"
          *ngIf="
            !readOnly &&
            operation.status.toString() == OPERATION_STATUS_OPTIONS_MAP.FAILED.status.toString()
          "
        >
          <a
            class="btn btn-default btn-xs"
            (click)="retrySingleOperation(operation)"
            title="{{ 'Retry operation' | translate }}"
          >
            <i [c8yIcon]="'repeat m-r-4'"></i>
            <span translate>Retry operation</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</c8y-li>