<div class="row d-flex-md fit-h">
  <div class="col-md-4 flex-item-top">
    <div class="legend form-block" translate>Details</div>
    <ul class="list-unstyled small">
      <li class="p-t-4 p-b-4 flex-row separator-bottom" *ngIf="operation.startDate">
        <label class="small m-0" translate>Start date</label>
        <span class="flex-item-right">{{ operation.startDate | c8yDate }}</span>
      </li>
      <li class="p-t-4 p-b-4 flex-row separator-bottom" *ngIf="operation.bulkOperationId">
        <label class="small flex-item-top" translate>Bulk operation</label>
        <div class="flex-item-right text-right text-truncate">
          <a (click)="openBulkOperationDetails(operation.bulkOperationId)" class="interact">
            {{ 'See details' | translate }}
          </a>
        </div>
      </li>
      <li class="p-t-4 p-b-4 flex-row separator-bottom" *ngIf="operation.creationRamp">
        <label class="small m-0">
          {{ 'Delay' | translate }}
          <a
            class="text-primary"
            tooltip="{{ 'Delay before sending the operation to the next device.' | translate }}"
            container="body"
          >
            <i [c8yIcon]="'info-circle'"></i>
          </a>
        </label>
        <span [ngPlural]="operation.creationRamp" class="flex-item-right">
          <ng-template ngPluralCase="=1">
            {{ operation.creationRamp }} <span translate>second</span>
          </ng-template>
          <ng-template ngPluralCase="other">
            {{ operation.creationRamp }} <span translate>seconds</span>
          </ng-template>
        </span>
      </li>
      <li class="p-t-4 p-b-4 flex-row separator-bottom">
        <label class="small m-0" translate>Status</label>
        <span class="flex-item-right text-uppercase">
          {{
            operation.operationPrototype
              ? (operation.generalStatus.toString() | translate)
              : (operation.status.toString() | translate)
          }}
        </span>
      </li>
      <li class="p-t-4 p-b-4 flex-row separator-bottom" *ngIf="operation.failureReason">
        <label class="small m-0" translate>Failure reason</label>
        <span
          class="inner-scroll p-l-16 m-b-0 flex-item-right text-truncate-wrap"
          title="{{ operation.failureReason | translate }}"
          >{{ operation.failureReason | translate }}</span
        >
      </li>
      <li
        class="p-t-4 p-b-4 flex-row separator-bottom"
        *ngIf="operation.result || operation.progress"
      >
        <label class="small flex-item-top" translate>Result</label>
        <div
          class="flex-row flex-grow flex-item-right flex-end"
          *ngIf="operation.progress; else singleOpResult"
        >
          <div *ngIf="operation.progress.successful > 0" class="icon-flex flex-item-left m-r-8">
            <i c8yIcon="check-circle" class="text-success m-r-4"></i>
            <span
              ngNonBindable
              translate
              [translateParams]="{
                bulkOperationsCountSuccessful: operation.progress.successful
              }"
            >
              {{ bulkOperationsCountSuccessful }} successful
            </span>
          </div>
          <div class="icon-flex flex-item-left m-r-8" *ngIf="operation.progress.failed > 0">
            <i c8yIcon="warning" class="text-danger m-r-4"></i>
            <span
              ngNonBindable
              translate
              [translateParams]="{ bulkOperationsCountFailed: operation.progress.failed }"
            >
              {{ bulkOperationsCountFailed }} failed
            </span>
          </div>
          <div class="icon-flex flex-item-left m-r-8" *ngIf="operation.progress.executing > 0">
            <i c8yIcon="refresh" class="m-r-4 text-info"></i>
            <span
              ngNonBindable
              translate
              [translateParams]="{ bulkOperationsCountExecuting: operation.progress.executing }"
            >
              {{ bulkOperationsCountExecuting }} executing
            </span>
          </div>
          <div class="icon-flex flex-item-left m-r-8" *ngIf="operation.progress.pending > 0">
            <i c8yIcon="clock-o" class="m-r-4 text-info"></i>
            <span
              ngNonBindable
              translate
              [translateParams]="{ bulkOperationsCountPending: operation.progress.pending }"
            >
              {{ bulkOperationsCountPending }} pending
            </span>
          </div>
        </div>
        <ng-template #singleOpResult>
          <span
            class="inner-scroll p-l-16 m-b-0 flex-item-right text-truncate-wrap"
            title="{{ operation.result }}"
            >{{ operation.result }}</span
          >
        </ng-template>
      </li>
      <li class="p-t-4 p-b-4 flex-row separator-bottom" *ngIf="operation.failedParentId">
        <label class="small m-0" translate>Retried from</label>
        <span class="flex-item-right">
          <button
            class="btn btn-default btn-xs"
            (click)="scrollToRetriedFromOperation(operation.failedParentId)"
            title="{{ 'Scroll to parent operation.' | translate }}"
          >
            {{ operation.failedParentId }}
          </button>
        </span>
      </li>
      <li
        class="p-t-4 p-b-4 flex-row separator-bottom"
        *ngIf="operation.note || operation.description"
      >
        <label class="small flex-item-top" translate>Description</label>
        <span
          title="{{ operation.note ? operation.note : (operation.description | translate) }}"
          class="inner-scroll p-l-16 m-b-0 flex-item-right text-truncate-wrap"
        >
          {{ operation.note ? operation.note : (operation.description | translate) }}
        </span>
      </li>
    </ul>
  </div>
  <div class="col-md-8 fit-h d-flex d-col">
    <div class="legend form-block" translate>Operation</div>
    <pre class="inner-scroll p-16 m-b-0 text-pre-wrap">{{
      operation.operationPrototype || operation | json
    }}</pre>
  </div>
</div>