<div
  class="tabContainer"
  #container
>
  <ul class="nav nav-tabs nav-tabsc8y">
    <li
      [ngClass]="{ active: tab.template === template }"
      *ngFor="let tab of tabs"
    >
      <button
        class="btn"
        [title]="tab.label | translate"
        (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-li-details
    [operation]="operation"
    (showFailedOperation)="showFailedOperation.emit($event)"
    [bulkOperationModalDetailsService]="bulkOperationModalDetailsService"
  ></c8y-operation-li-details>
</ng-template>

<ng-template #audit>
  <c8y-audit-log
    [source]="operation.id"
    [type]="
      !!operation.operationPrototype ? AuditRecordType.BULK_OPERATION : AuditRecordType.OPERATION
    "
  ></c8y-audit-log>
</ng-template>

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