<div class="horizontal-tab-nav">
  <div class="tab-container" #tabContainer>
    @for (item of navItems; track item.id) {
      <button 
        class="tab-item"
        [class.active]="isActive(item.id)"
        (click)="onTabClick(item.id)"
        type="button">
        <span class="tab-text">{{ item.name }}</span>
      </button>
    }
  </div>
  <div class="tab-indicator" [style.transform]="'translateX(' + getIndicatorPosition() + 'px)'"></div>
</div>