<c8y-li
  class="c8y-list__item--double-actions"
  [ngClass]="{ 'c8y-list__item--no-expand': !detailsCollapsed }"
  [collapsed]="detailsCollapsed"
  #listItem
  id="{{ bulkOperation.id }}"
>
  <c8y-li-icon>
    <i
      [c8yIcon]="getOperationStatusOptions().icon"
      [ngClass]="getOperationStatusOptions().styleClass"
      [tooltip]="getOperationStatusOptions().label | translate"
    ></i>
  </c8y-li-icon>
  <div [ngClass]="{ 'content-flex-58': !readOnly, 'content-flex-50': readOnly }">
    <div class="col-5">
      <span
        class="text-truncate"
        title="{{ bulkOperation.id }} - {{
          bulkOperation.operationPrototype.description | translate
        }}"
      >
        <strong class="text-muted m-r-4">{{ bulkOperation.id }}</strong>
        {{ bulkOperation.operationPrototype.description | translate }}
      </span>
    </div>
    <div class="flex-grow">
      <div class="m-t-8 visible-xs"></div>
      <hr *ngIf="isStatusCanceled(); else statusNotCanceled" class="m-t-16 m-b-0 visible-xs" />
      <ng-template #statusNotCanceled>
        <div
          [class]="progressBarClass"
          title="{{ progressBarStatus | c8yNumber: 'floor':'1.0-0' }}%"
        >
          <div
            [class]="progressBarColor"
            role="progressbar"
            aria-valuenow="0"
            aria-valuemin="0"
            aria-valuemax="100"
            [style.width.%]="progressBarStatus"
          >
            <span *ngIf="progressBarStatus !== 0"
              >{{ progressBarStatus | c8yNumber: 'floor':'1.0-0' }}%</span
            >
          </div>
        </div>
      </ng-template>
    </div>
    <div class="col-4">
      <div class="p-t-8 visible-xs"></div>
      <small *ngIf="bulkOperation.progress.successful > 0" class="m-r-8 icon-flex">
        <i c8yIcon="check-circle" class="text-success m-r-4"></i>
        <span
          ngNonBindable
          translate
          [translateParams]="{ bulkOperationsCountSuccessful: bulkOperation.progress.successful }"
        >
          {{ bulkOperationsCountSuccessful }} successful
        </span>
      </small>
      <small *ngIf="bulkOperation.progress.failed > 0" class="m-r-8 icon-flex">
        <i c8yIcon="warning" class="text-danger m-r-4"></i>
        <span
          ngNonBindable
          translate
          [translateParams]="{ bulkOperationsCountFailed: bulkOperation.progress.failed }"
        >
          {{ bulkOperationsCountFailed }} failed
        </span>
      </small>
      <small *ngIf="bulkOperation.progress.executing > 0" class="m-r-8 icon-flex">
        <i c8yIcon="refresh" class="text-primary m-r-4"></i>
        <span
          ngNonBindable
          translate
          [translateParams]="{ bulkOperationsCountExecuting: bulkOperation.progress.executing }"
        >
          {{ bulkOperationsCountExecuting }} executing
        </span>
      </small>
      <small *ngIf="bulkOperation.progress.pending > 0" class="m-r-8 icon-flex">
        <i c8yIcon="clock-o" class="text-primary m-r-4"></i>
        <span
          ngNonBindable
          translate
          [translateParams]="{ bulkOperationsCountPending: bulkOperation.progress.pending }"
        >
          {{ bulkOperationsCountPending }} pending
        </span>
      </small>
    </div>
  </div>
  <div class="c8y-list__item__footer">
    <div class="m-r-16">
      <span class="text-label-small m-r-4" translate>Start</span>
      <small class="icon-flex">
        <i c8yIcon="calendar" class="m-r-4"></i>
        <span>
          {{ bulkOperation.startDate | c8yDate }}
        </span>
      </small>
    </div>
    <div class="m-r-16" *ngIf="bulkOperationGeneralStatus.CANCELED !== bulkOperation.generalStatus">
      <span class="text-label-small m-r-4" translate>Finish</span>

      <small class="icon-flex">
        <i c8yIcon="calendar" class="m-r-4"></i>
        <span>{{ finishDate | c8yDate }}</span>
      </small>
      <a
        container="body"
        *ngIf="isStatusScheduled() || isStatusExecutingOrExecutingWithError()"
        class="btn-clean m-l-4"
        popover="{{ finishDatePopoverText | translate }}"
        placement="right"
        outsideClick="true"
      >
        <i c8yIcon="question-circle-o text-primary"></i>
      </a>
    </div>
  </div>
  <ng-container *ngIf="!readOnly">
    <c8y-li-action
      *ngIf="isStatusScheduled()"
      label="{{ 'Edit schedule' | translate }}"
      (click)="editSchedule()"
      icon="pencil"
    >
    </c8y-li-action>
    <c8y-li-action
      *ngIf="
        isStatusScheduled() || (isStatusExecutingOrExecutingWithError() && !allOperationsCreated())
      "
      label="{{ 'Cancel bulk operation' | translate }}"
      (click)="cancelBulkOperation()"
      icon="remove"
    >
    </c8y-li-action>
    <c8y-li-action
      *ngIf="isStatusFailed()"
      label="{{ 'Retry failed operations' | translate }}"
      (click)="retryFailedOperation()"
      icon="repeat"
    >
    </c8y-li-action>
    <c8y-li-action
      *ngIf="isStatusFailed()"
      label="{{ 'Set operation to SUCCESSFUL' | translate }}"
      (click)="setToSuccessful()"
      icon="check-circle"
    >
    </c8y-li-action>
  </ng-container>
  <c8y-li-collapse class="m-b-16">
    <c8y-operation-details-tabs
      *ngIf="!listItem.collapsed"
      [operation]="bulkOperation"
      [readOnly]="readOnly"
      (onRetryFailedOperations)="retryFailedOperation()"
      (showFailedOperation)="openFailedOperation($event)"
      [bulkOperationModalDetailsService]="bulkOperationListItemService"
    >
    </c8y-operation-details-tabs>
  </c8y-li-collapse>
</c8y-li>