<ng-container *transloco="let t; prefix: 'book.filter'">
<div class="book-filter-container">

  <div class="filter-header">
    <span class="filter-title">{{ t('title') }}</span>
    <p-selectButton
      [options]="filterModeOptions"
      [(ngModel)]="selectedFilterMode"
      optionLabel="label"
      optionValue="value"
      class="filter-mode-select"
      allowEmpty="false"
    ></p-selectButton>
  </div>

  <div class="filter-content">
    <p-accordion [value]="expandedPanels" [multiple]="true" (valueChange)="onExpandedPanelsChange($event)">
      @for (filterType of visibleFilterTypes; track trackByFilterType(i, filterType); let i = $index) {
        @if (filterStreams[filterType] | async; as filters) {
          @if (filters.length > 0) {
            <p-accordion-panel [value]="i">
              <p-accordion-header>
            <span class="filter-type-label">
              <span class="filter-label-text">
                {{ getFilterLabel(filterType) }}
              </span>
              @if (activeFilters[filterType]?.length) {
                <span class="active-filter-count">
                  ({{ activeFilters[filterType].length }})
                </span>
              }
            </span>
              </p-accordion-header>

              <p-accordion-content>
                @if (expandedPanels.includes(i)) {
                  <cdk-virtual-scroll-viewport
                    [itemSize]="28"
                    [style.height.px]="getVirtualScrollHeight(filters.length)"
                    class="filter-list">
                    <div
                      *cdkVirtualFor="let filter of filters; trackBy: trackByFilter"
                      class="filter-row"
                      [ngClass]="{
                    'active': activeFilters[filterType]?.includes(getFilterValueId(filter)),
                    'active-not': activeFilters[filterType]?.includes(getFilterValueId(filter)) && selectedFilterMode === 'not'
                  }"
                      (click)="handleFilterClick(filterType, getFilterValueId(filter))">
                      <span class="filter-value-text">{{ getFilterValueDisplay(filter) }}</span>
                      <p-badge class="filter-value-badge" [value]="filter.bookCount"></p-badge>
                    </div>
                  </cdk-virtual-scroll-viewport>
                  @if (truncatedFilters[filterType]) {
                    <div class="truncation-notice">
                      {{ t('showingFirst100') }}
                    </div>
                  }
                }
              </p-accordion-content>
            </p-accordion-panel>
          }
        }
      }
    </p-accordion>

    <div class="footer-notice">
      {{ t('footerNote') }}
    </div>
  </div>
</div>
</ng-container>
