<c8y-li class="c8y-list__item--double-actions">
  <c8y-li-icon>
    <i
      [c8yIcon]="OPERATION_STATUS_OPTIONS_MAP[operation.status].icon"
      [tooltip]="operation.status.toString() | translate"
      [ngClass]="OPERATION_STATUS_OPTIONS_MAP[operation.status].styleClass"
    ></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
          class="m-r-4"
          c8yIcon="calendar"
        ></i>
        {{ operation.creationTime | c8yDate }}
      </small>
    </div>
    <div class="col-5">
      <div class="d-flex a-i-center">
        <span
          class="text-truncate"
          #failureReason
        >
          {{ operation.failureReason | translate }}
        </span>
        <button
          class="btn-help btn-help--sm"
          [attr.aria-label]="'Help' | translate"
          popover="{{ operation.failureReason | translate }}"
          placement="left"
          triggers="focus"
          type="button"
          *ngIf="failureReason.offsetWidth < failureReason.scrollWidth"
        >
          <i [c8yIcon]="'info-circle'"></i>
        </button>
        <div
          class="showOnHover p-l-8 p-r-8 fit-h-20 m-l-auto"
          *ngIf="
            !readOnly &&
            operation.status.toString() == OPERATION_STATUS_OPTIONS_MAP.FAILED.status.toString()
          "
        >
          <button
            class="btn btn-default btn-xs"
            title="{{ 'Retry operation' | translate }}"
            type="button"
            (click)="retrySingleOperation(operation)"
            c8yProductExperience
            [actionName]="BULK_OPERATION_EVENT"
            [actionData]="{ action: ACTIONS.RETRY, component: COMPONENTS.SINGLE_OPERATION_ITEM }"
          >
            <i [c8yIcon]="'repeat m-r-4'"></i>
            {{ 'Retry operation' | translate }}
          </button>
        </div>
      </div>
    </div>
  </div>
</c8y-li>