<div
  class="tabContainer"
  [ngClass]="{ 'hidden-xs': !outletName }"
  #container
>
  @if (showLeft || showRight) {
    <button
      class="tabs-slider tabs-slider-left"
      title="{{ 'Scroll to the left' | translate }}"
      type="button"
      #left
      [disabled]="!showLeft"
      (click)="scroll('left')"
    >
      <i [c8yIcon]="'chevron-left'"></i>
    </button>
  }
  @if (showRight || showLeft) {
    <button
      class="tabs-slider tabs-slider-right"
      title="{{ 'Scroll to the right' | translate }}"
      type="button"
      #right
      [disabled]="!showRight"
      (click)="scroll('right')"
    >
      <i [c8yIcon]="'chevron-right'"></i>
    </button>
  }
  @if (!outletName) {
    <div
      class="nav nav-tabs nav-tabsc8y"
      role="list"
      #tabsContainer
    >
      @for (tab of tabs; track tab) {
        @if (!tab.component && !tab.hide) {
          <div
            role="listitem"
            [attr.data-cy]="'c8y-tab--tab-item-' + tab.label"
            [ngClass]="{ active: rla?.isActive }"
          >
            <a
              [routerLink]="tab.path"
              routerLinkActive
              [queryParamsHandling]="'preserve'"
              #rla="routerLinkActive"
              [ngClass]="{ 'p-r-24': !tab.template && tab?.badge }"
              (click)="tab.onSelect?.emit()"
            >
              @if (!tab.template && tab?.icon) {
                <i [c8yIcon]="tab?.icon"></i>
              }
              @if (!tab.template && !tab.component) {
                <span
                  title="{{ tab?.skipLabelTranslation ? tab?.label : (tab?.label | translate) }}"
                >
                  {{ tab?.skipLabelTranslation ? tab?.label : (tab?.label | translate) }}
                </span>
              }
              @if (!tab.template && tab?.badge) {
                <span
                  class="dashboard-template-marker"
                  tooltip="{{ tab?.tooltipText | translate }}"
                  placement="bottom"
                  container="body"
                  [adaptivePosition]="false"
                  [delay]="300"
                ></span>
              }
            </a>
            <ng-container *ngTemplateOutlet="tab.template; injector: tab.injector"></ng-container>
          </div>
        }
        <ng-container *ngComponentOutlet="tab.component; injector: tab.injector"></ng-container>
      }
    </div>
  }

  @if (outletName) {
    <div
      class="component-tabs nav nav-tabs nav-tabsc8y"
      #tabsContainer
    >
      @for (tab of tabs; track trackByPath($index, tab)) {
        <div
          [ngClass]="{ active: tab.isActive }"
          [routerLink]="tab.path"
          [routerLinkActive]="tab.path ? 'active' : ''"
          [queryParamsHandling]="'preserve'"
        >
          @let tabLabel = tab?.skipLabelTranslation ? tab?.label : (tab?.label | translate);
          @let tabTitle = tab?.title ? tab?.title : (tab?.title | translate);
          <a
            class="pointer"
            title="{{ tabLabel ?? tabTitle }}"
            (click)="tab.onSelect?.emit()"
          >
            @if (tab?.icon && tab?.label) {
              <i [c8yIcon]="tab?.icon"></i>
            }
            @if (tab?.label) {
              <span>{{ tabLabel }}</span>
            }
            <ng-container *ngTemplateOutlet="tab.template; injector: tab.injector"></ng-container>
          </a>
        </div>
      }
    </div>
  }
</div>

@if (!outletName) {
  <div class="visible-xs mobile-tabs">
    <ul class="list-unstyled d-flex m-b-0">
      <li class="c8y-select-wrapper flex-grow">
        <select
          (change)="navigateTo($event.target.value)"
          #select
        >
          @for (tab of tabs; track tab) {
            @if (!tab.component) {
              <option
                [value]="tab.path"
                [selected]="isActive(tab)"
              >
                {{ tab?.skipLabelTranslation ? tab?.label : (tab?.label | translate) }}
              </option>
            }
          }
        </select>
      </li>
      @for (tab of tabs; track tab) {
        @if (tab.component) {
          <ng-container
            *c8yComponentOutlet="tab.component; environmentInjector: tab.injector"
          ></ng-container>
        }
      }
    </ul>
  </div>
}