<div class="shared-panel risk-list">
  <div class="shared-panel-header">
    <div class="title">我的风险清单</div>
    <div>
      <div class="header-button-group">
        @for (inv of involvedOptions; track inv.value) {
          <div class="button-item" [class.active]="involved === inv.value" (click)="changeInvolved(inv.value)">
            {{ inv.label }}
          </div>
        }
      </div>
    </div>
  </div>
  <nz-spin [nzSpinning]="loading">
    <div class="risk-list-content">
      <div class="type-nav-container">
        <div class="type-nav-box">
          <risk-type-category-nav
            [types]="types"
            [categories]="categories"
            [selectedType]="selectedType"
            [selectedCategory]="selectedCategory"
            (selectedTypeChange)="selectedTypeChange($event)"
            (selectedCategoryChange)="selectedCategoryChange($event)"
          >
          </risk-type-category-nav>
        </div>
      </div>
      <div class="list-wrapper">
        <div class="pt-4 px-8">
          <filter-button-group-with-count
            label="风险等级"
            [options]="levels"
            [activeValue]="selectedLevel"
            (change)="changeLevel($event!)"
          ></filter-button-group-with-count>
        </div>
        <div class="flex-center pt-4">
          <data-empty [isEmpty]="filteredList.length === 0"></data-empty>
        </div>
        <div class="list-container custom-scroll-bar" [class.half]="showDetail">
          <div class="card-list">
            @for (item of filteredList; track $index) {
              <div class="list-item-card" (click)="onCardClick(item)" [class.active]="activeItem === item">
                <div class="card-header">
                  <div class="title">{{ item.title }}</div>
                  <div class="level">
                    <span class="inline-block !w-[80px]">
                      <star-icon class="align-middle mr-1" [color]="colorMap[item.level]" [size]="14"></star-icon>
                      <span [style.color]="colorMap[item.level]">{{ item.level }}</span>
                    </span>
                  </div>
                </div>
                <div class="description">{{ item.title }}</div>
              </div>
            }
          </div>
        </div>
        <div class="detail-container" [class.half]="showDetail">
          @if (activeItem) {
            <div class="info custom-scroll-bar">
              <detail-info [data]="activeItem"></detail-info>
            </div>
            <div class="control">
              <control-info [data]="activeItem"></control-info>
            </div>
          }
        </div>
      </div>
    </div>
  </nz-spin>
</div>
