<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">
        <label class="small m-0" translate>Start date</label>
        <span class="flex-item-right">{{ bulkOperation.startDate | c8yDate }}</span>
      </li>
      <li class="p-t-4 p-b-4 flex-row separator-bottom">
        <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]="bulkOperation.creationRamp" class="flex-item-right">
          <ng-template ngPluralCase="=1">
            {{ bulkOperation.creationRamp }} <span translate>second</span>
          </ng-template>
          <ng-template ngPluralCase="other">
            {{ bulkOperation.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">
          {{ bulkOperation.generalStatus.toString() | translate }}
        </span>
      </li>
      <li class="p-t-4 p-b-4 flex-row separator-bottom">
        <label class="small flex-item-top" translate>Result</label>
        <div class="flex-row flex-grow flex-item-right flex-end">
          <div>
            <div *ngIf="bulkOperation.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: bulkOperation.progress.successful
                }"
              >
                {{ bulkOperationsCountSuccessful }} successful
              </span>
            </div>
            <div class="icon-flex flex-item-left m-r-8" *ngIf="bulkOperation.progress.failed > 0">
              <i c8yIcon="warning" class="text-danger m-r-4"></i>
              <span
                ngNonBindable
                translate
                [translateParams]="{ bulkOperationsCountFailed: bulkOperation.progress.failed }"
              >
                {{ bulkOperationsCountFailed }} failed
              </span>
            </div>
            <div class="icon-flex flex-item-left" *ngIf="bulkOperation.progress.pending > 0">
              <i c8yIcon="clock-o" class="m-r-4 text-info"></i>
              <span
                ngNonBindable
                translate
                [translateParams]="{ bulkOperationsCountPending: bulkOperation.progress.pending }"
              >
                {{ bulkOperationsCountPending }} pending
              </span>
            </div>
          </div>
        </div>
      </li>
      <li class="p-t-4 p-b-4 flex-row separator-bottom" *ngIf="bulkOperation.failedParentId">
        <label class="small m-0" translate>Retried from</label>
        <span class="flex-item-right">
          <button
            class="btn btn-default btn-xs"
            (click)="scrollToRetriedFromOperation(bulkOperation.failedParentId)"
          >
            {{ bulkOperation.failedParentId }}
          </button>
        </span>
      </li>
      <li class="p-t-4 p-b-4 flex-row separator-bottom" *ngIf="bulkOperation.note">
        <label class="small flex-item-top" translate>Description</label>
        <div
          title="{{ bulkOperation.note }}"
          class="flex-item-right text-right m-l-8 text-truncate"
        >
          {{ bulkOperation.note }}
        </div>
      </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">{{
      bulkOperation.operationPrototype | json
    }}</pre>
  </div>
</div>