<div class="workbench-panel mb-5" style="height: 184px">
  <div class="workbench-panel-header">
    <div class="shared-button-group">
      @for (tab of tabs; track tab) {
        <span class="shared-button-item" [class.active]="activeTab === tab" (click)="activeTab = tab">{{ tab }}</span>
      }
    </div>
  </div>
  <div class="workbench-panel-body overflow-y-auto custom-scroll-bar" style="height: calc(100% - 54px)">
    @for (item of items; track item) {
      <ng-container
        *ngTemplateOutlet="
          planItem;
          context: {
            $implicit: {
              title: item.label,
              count: item.count,
            },
          }
        "
      ></ng-container>
    }
  </div>
</div>

<ng-template #planItem let-plan>
  <div class="text-[#666666]">
    <div class="flex justify-between mx-8 border-bottom h-[43px] leading-[43px]">
      <div class="text-[#666666]">
        {{ plan.title }}
      </div>
      <div
        class="underline underline-offset-2 pr-[43px]"
        [class.cursor-pointer]="plan.count > 0"
        [class.hover:!text-primary]="plan.count > 0"
        [style.color]="plan.count > 0 ? '#3083E6' : '#979797 '"
      >
        {{ plan.count ? plan.count : '' }}{{ plan.count > 0 ? '起' : '无' }}
      </div>
    </div>
  </div>
</ng-template>
