<div
  class="tabContainer hidden-xs"
  #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>
  <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"
      >
        <a
          title="{{ tab?.label | translate }}"
          [routerLink]="tab.path"
          routerLinkActive
          #rla="routerLinkActive"
        >
          <i
            [c8yIcon]="tab?.icon"
            *ngIf="!tab.template && tab?.icon"
          ></i>
          <span *ngIf="!tab.template && !tab.component">
            {{ tab?.label | translate }}
          </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>
</div>

<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
      >
        <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 *ngComponentOutlet="tab.component; injector: tab.injector"></ng-container>
      </ng-container>
    </ng-container>
  </ul>
</div>