<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" (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-operation-details
    [operation]="operation"
    (showFailedOperation)="showFailedOperation.emit($event)"
    [bulkOperationModalDetailsService]="bulkOperationModalDetailsService"
  >
  </c8y-operation-details>
</ng-template>

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

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