<div class="workbench-panel">
  <div class="workbench-panel-header flex justify-between">
    <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 class="flex items-center">
      <nz-radio-group [(ngModel)]="type" (ngModelChange)="changeType($event)">
        @for (item of typeOptions; track $index) {
          <label nz-radio [nzValue]="item.value" class="mr-8 last:mr-0">{{ item.label }}</label>
        }
      </nz-radio-group>
    </div>
  </div>
  <div class="workbench-panel-body">
    <workbench-tabs
      [tabs]="levelOptions"
      [(activeTab)]="level"
      (activeTabChange)="changeLevel($event)"
    ></workbench-tabs>
    <div class="overflow-y-auto custom-scroll-bar" style="max-height: calc(453px - 54px - 47px)">
      @for (item of list; track $index) {
        <workbench-list-item [item]="item"></workbench-list-item>
      }
    </div>
  </div>
</div>
