<div class="py-2 px-4 relative flex items-center mb-2 justify-between">
  <div>
    <label
      nz-checkbox
      [(ngModel)]="allChecked"
      [nzIndeterminate]="indeterminate"
      (ngModelChange)="updateAllChecked()"
      [nzDisabled]="isAllCheckboxDisabled"
      class="mr-2"
    >
      全选 ({{ filteredList.length }})
    </label>
  </div>

  <div class="flex-1 flex items-center">
    <div class="flex-1 flex items-center">
      <label for="selectedCategory" class="mr-2">风险类别</label>
      <nz-select
        id="selectedCategory"
        class="precaution-input flex-1"
        nzDropdownClassName="precaution-select-dropdown"
        [(ngModel)]="selectedCategory"
        (ngModelChange)="onSearch()"
        nzAllowClear
      >
        @for (item of docCategories; track item.value) {
          <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
        }
      </nz-select>
    </div>
    <div class="flex-1 flex items-center">
      <label for="selectedLevel" class="mx-2">风险等级</label>
      <nz-select
        id="selectedLevel"
        class="precaution-input flex-1"
        nzDropdownClassName="precaution-select-dropdown"
        [(ngModel)]="selectedLevel"
        (ngModelChange)="onSearch()"
        nzAllowClear
      >
        @for (item of docLevels; track item.value) {
          <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
        }
      </nz-select>
    </div>
  </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 px-2">
        <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 }}
              </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>
<ng-template #searchPrefixTemplate>
  <span nz-icon nzType="icons:query" class="text-xl text-[#7E84A3]"></span>
</ng-template>
