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

  <div
    class="component-tabs nav nav-tabs nav-tabsc8y"
    *ngIf="outletName"
    #tabsContainer
  >
    <ng-container *ngFor="let tab of tabs; trackBy: trackByPath">
      <div
        [ngClass]="{ active: tab.isActive }"
        [routerLink]="tab.path"
        [routerLinkActive]="tab.path ? 'active' : ''"
      >
        <a
          class="pointer"
          title="{{ tab?.label | translate }}"
          (click)="tab.onSelect?.emit()"
        >
          <i [c8yIcon]="tab?.icon"></i>
          <span>
            {{ tab?.label | translate }}
          </span>
        </a>
      </div>
    </ng-container>
  </div>
</div>

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