<div class="row d-flex-md fit-h">
  <div class="col-md-4 m-b-auto">
    <div class="legend form-block" translate>Details</div>
    <ul class="list-unstyled small">
      <li class="p-t-4 p-b-4 d-flex separator-bottom" *ngIf="operation.startDate">
        <label class="small m-0" translate>Start date</label>
        <span class="m-l-auto">{{ operation.startDate | c8yDate }}</span>
      </li>
      <li class="p-t-4 p-b-4 d-flex separator-bottom" *ngIf="operation.bulkOperationId">
        <label class="small m-b-auto" translate>Bulk operation</label>
        <div class="m-l-auto 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 d-flex separator-bottom" *ngIf="operation.creationRamp">
        <label class="small m-0">
          {{ 'Delay' | translate }}
          <button
            class="btn-help btn-help--sm"
            type="button"
            popover="{{ 'Delay before sending the operation to the next device.' | translate }}"
            container="body"
            [attr.aria-label]="'Help' | translate"
            triggers="focus"
          ></button>
        </label>
        <span [ngPlural]="operation.creationRamp" class="m-l-auto">
          <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 d-flex separator-bottom">
        <label class="small m-0" translate>Status</label>
        <span class="m-l-auto text-uppercase">
          {{
            operation.operationPrototype
              ? (operation.generalStatus.toString() | translate)
              : (operation.status.toString() | translate)
          }}
        </span>
      </li>
      <li class="p-t-4 p-b-4 d-flex separator-bottom" *ngIf="operation.failureReason">
        <label class="small m-0" translate>Failure reason</label>
        <span
          class="inner-scroll p-l-16 m-b-0 m-l-auto text-truncate-wrap"
          title="{{ operation.failureReason | translate }}"
        >
          {{ operation.failureReason | translate }}
        </span>
      </li>
      <li
        class="p-t-4 p-b-4 d-flex separator-bottom"
        *ngIf="operation.result || operation.progress"
      >
        <label class="small m-b-auto" translate>Result</label>
        <div
          class="d-flex flex-grow m-l-auto j-c-end"
          *ngIf="operation.progress; else singleOpResult"
        >
          <div *ngIf="operation.progress.successful > 0" class="icon-flex m-l-auto 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 m-l-auto 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 m-l-auto 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 m-l-auto 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 m-l-auto text-truncate-wrap"
            title="{{ operation.result }}"
          >
            {{ operation.result }}
          </span>
        </ng-template>
      </li>
      <li class="p-t-4 p-b-4 d-flex separator-bottom" *ngIf="operation.failedParentId">
        <label class="small m-0" translate>Retried from</label>
        <span class="m-l-auto">
          <button
            class="btn btn-default btn-xs"
            type="button"
            (click)="scrollToRetriedFromOperation(operation.failedParentId)"
            title="{{ 'Scroll to parent operation.' | translate }}"
          >
            {{ operation.failedParentId }}
          </button>
        </span>
      </li>
      <li
        class="p-t-4 p-b-4 d-flex separator-bottom"
        *ngIf="operation.note || operation.description"
      >
        <label class="small m-b-auto" translate>Description</label>
        <span
          title="{{ operation.note ? operation.note : (operation.description | translate) }}"
          class="inner-scroll p-l-16 m-b-0 m-l-auto 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-8 m-b-0 text-pre-normal">
      <code>{{ operation.operationPrototype || operation | json }}</code>
    </pre>
  </div>
</div>