<nz-spin nzSize="large" [nzSpinning]="loading">
  <div class="py-2 px-4 relative flex items-center mb-2">
    <div>
      <label
        nz-checkbox
        [(ngModel)]="allChecked"
        [nzIndeterminate]="indeterminate"
        (ngModelChange)="updateAllChecked()"
        [nzDisabled]="isAllCheckboxDisabled"
        class="mr-2"
      >
        全选 ({{ filteredList.length }})
      </label>
    </div>
    <div class="flex-1">
      <nz-input-group [nzPrefix]="searchPrefixTemplate" class="precaution-input w-full h-[45px]">
        <input nz-input type="text" placeholder="姓名" [(ngModel)]="search.text" (ngModelChange)="onSearch()" />
      </nz-input-group>
    </div>
  </div>
  <div #content class="px-2 py-2 overflow-y-auto custom-scroll-bar" style="height: calc(100vh - 100px)">
    @if (!hiddenContent) {
      @for (w of list; track w.w) {
        <div class="leading-8">
          <div [attr.data]="w.w" class="capital-line">{{ w.w }}</div>
          <div>
            @for (item of w.items; track item.id) {
              <div>
                <label nz-checkbox [(ngModel)]="checkedDto[item.id]" (ngModelChange)="updateSingleChecked()"
                  >{{ item.name }}{{ additionalLabel(item) }}
                </label>
              </div>
            }
          </div>
        </div>
      }
    }
  </div>
  <div class="absolute right-4 top-20">
    @for (w of list; track w.w) {
      <div class="capital-locate" (click)="onLocate(w.w)">{{ w.w }}</div>
    }
  </div>
</nz-spin>
<ng-template #searchPrefixTemplate>
  <span nz-icon nzType="icons:query" class="text-xl text-[#7E84A3]"></span>
</ng-template>
