@let _tabs = tabs();
<ui-carousel class="flex-1 min-w-0">
  @for (tab of _tabs; track tab.id) {
    <shell-tab-item
      animate.enter="fade-slide-in"
      animate.leave="fade-slide-out"
      [tab]="tab"
      [compact]="compact()"
    />
  }

  @if (!compact() && _tabs.length > 0) {
    <button
      animate.enter="fade-slide-in"
      animate.leave="fade-slide-out"
      uiTextButton
      [disabled]="_tabs.length === 0"
      color="strong"
      [size]="compact() ? 'small' : 'medium'"
      class="self-center whitespace-nowrap"
      (click)="closeAll()"
      [class.h-6]="compact()"
    >
      Alle schließen
    </button>
  }
</ui-carousel>
@if (!compact()) {
  <ui-icon-button
    animate.enter="fade-slide-in"
    animate.leave="fade-slide-out"
    name="isaActionPlus"
    [size]="compact() ? 'small' : 'large'"
    class="shrink-0 self-center -mt-2 z-sticky"
    [class.size-6]="compact()"
    (click)="addTab()"
  ></ui-icon-button>
}