<nav class="tabs">
  <button
    *ngFor="let tab of tabs"
    (click)="selectTab(tab.id, $event)"
    [class.active]="selectedTabId === tab.id"
  >
    {{ getFormattedTabLabel(tab) }}
  </button>
</nav>

<div class="tab-content" *ngIf="tabs.length">
  <ng-container *ngFor="let tab of tabs">
    <div [hidden]="selectedTabId !== tab.id">
      <!-- Se tiver template customizado, usa -->
      <ng-container *ngIf="tab.template; else defaultContent">
        <ng-container [ngTemplateOutlet]="tab.template"></ng-container>
      </ng-container>

      <!-- Template default -->
      <ng-template #defaultContent>
        <ng-container
          *ngIf="autoContent"
          [ngTemplateOutlet]="autoContent"
          [ngTemplateOutletContext]="{ $implicit: tab }"
        >
        </ng-container>
      </ng-template>
    </div>
  </ng-container>
</div>
