<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
            class="interact"
            (click)="openBulkOperationDetails(operation.bulkOperationId)"
          >
            {{ '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"
            [attr.aria-label]="'Help' | translate"
            popover="{{ 'Delay before sending the operation to the next device.' | translate }}"
            placement="right"
            triggers="focus"
            container="body"
            type="button"
          ></button>
        </label>
        <span
          class="m-l-auto"
          [ngPlural]="operation.creationRamp"
        >
          <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">
          @if (operation.operationPrototype) {
            {{ operation.generalStatus.toString() | translate }}
          } @else if (operation.status) {
            {{ 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
            class="icon-flex m-l-auto m-r-8"
            *ngIf="operation.progress.successful > 0"
          >
            <i
              class="text-success m-r-4"
              c8yIcon="check-circle"
            ></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
              class="text-danger m-r-4"
              c8yIcon="warning"
            ></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
              class="m-r-4 text-info"
              c8yIcon="refresh"
            ></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
              class="m-r-4 text-info"
              c8yIcon="clock-o"
            ></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"
            title="{{ 'Scroll to parent operation.' | translate }}"
            type="button"
            (click)="scrollToRetriedFromOperation(operation.failedParentId)"
          >
            {{ 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
          class="inner-scroll p-l-16 m-b-0 m-l-auto text-truncate-wrap"
          title="{{ operation.note ? operation.note : (operation.description | translate) }}"
        >
          {{ 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>