<div class="type-nav">
  <div class="nav-item">
    <div class="nav-item-title">风险类别</div>
    <div class="nav-type">
      @for (type of types; track type.value) {
        <div
          class="nav-type-item"
          [class.active]="type.value === selectedType"
          [class.is-empty]="!emptyAbleToSelect && type.count === 0"
          (click)="changeType(type)"
        >
          {{ type.label }} {{ type.count ? '(' + type.count + ')' : '' }}
        </div>
      }
    </div>
  </div>

  <div class="nav-item">
    <div class="nav-item-title">风险项</div>
    <div class="nav-item-content">
      @for (category of categories; track category.value) {
        <div
          class="nav-category-item"
          [class.active]="category.value === selectedCategory"
          [class.is-empty]="!emptyAbleToSelect && category.count === 0"
          (click)="changeCategory(category)"
        >
          <span class="text-block"
            >{{ category.label }} {{ showCount && category.count ? '(' + category.count + ')' : '' }}</span
          >
        </div>
      }
    </div>
  </div>
</div>
