<div #container class="tabContainer">
  <ul class="nav nav-tabs nav-tabsc8y">
    <li [ngClass]="{ active: tab.template === template }" *ngFor="let tab of tabs">
      <button [title]="tab.label | translate" class="btn-clean" (click)="template = tab.template">
        <i [c8yIcon]="tab.icon"></i>
        <span class="txt">{{ tab.label | translate }}</span>
      </button>
    </li>
  </ul>
</div>

<ng-container *ngTemplateOutlet="template"></ng-container>

<ng-template #details>
  <c8y-bulk-operation-details
    [bulkOperation]="bulkOperation"
    [readOnly]="readOnly"
    (showFailedOperation)="showFailedOperation.emit($event)"
  >
  </c8y-bulk-operation-details>
</ng-template>

<ng-template #audit>
  <c8y-audit-log [source]="bulkOperation.id"></c8y-audit-log>
</ng-template>

<c8y-single-operations-list
  [bulkOperation]="bulkOperation"
  [readOnly]="readOnly"
  (onRetryFailedOperations)="onRetryFailedOperations.emit($event)"
  class="d-flex d-col"
></c8y-single-operations-list>