<aside class="catalog-filters card">
  <div class="filters-head">
    <h3>{{ 'catalog.filtersTitle' | translate }}</h3>
  </div>

  @for (filter of definitions; track filter.id) {
    @if (shouldRenderFilter(filter)) {
      <section class="filter-group">
        <button
          type="button"
          class="filter-group-toggle"
          [class.collapsed]="isCollapsed(filter.id)"
          [attr.aria-expanded]="!isCollapsed(filter.id)"
          (click)="toggleGroup(filter.id)">
          <span>{{ filter.label }}</span>
          <span class="filter-group-chevron" aria-hidden="true">⌄</span>
        </button>

        <div class="filter-group-body" [class.collapsed]="isCollapsed(filter.id)">

          @if (filter.type === 'checkbox' || filter.type === 'availability') {
            <div class="options">
              @for (option of filter.options; track option.id) {
                <label class="option-check">
                  <input
                    type="checkbox"
                    [checked]="isSelected(filter.id, option.value)"
                    (change)="toggleOption(filter.id, option.value)" />
                  @if (filter.type === 'availability') {
                    <span class="availability-dot" [attr.data-availability]="option.availability ?? option.value" aria-hidden="true"></span>
                  }
                  <span>{{ option.label }}</span>
                  @if (option.count != null) {
                    <small>{{ option.count }}</small>
                  }
                </label>
              }
            </div>
          }

          @if (filter.type === 'radio') {
            <div class="options">
              @for (option of filter.options; track option.id) {
                <label class="option-check">
                  <input
                    type="radio"
                    [name]="'radio-' + filter.id"
                    [checked]="isSelected(filter.id, option.value)"
                    (change)="selectSingleOption(filter.id, option.value)" />
                  <span>{{ option.label }}</span>
                </label>
              }
            </div>
          }

          @if (filter.type === 'range') {
            <div class="range-inputs">
              <label class="range-field">
                <span>{{ 'catalog.from' | translate }}</span>
                <input
                  type="number"
                  [value]="state.ranges[filter.id]?.min ?? ''"
                  (input)="updateRange(filter.id, 'min', $any($event.target).value)"
                  [placeholder]="'catalog.minValue' | translate:{ value: filter.min ?? '' }" />
              </label>

              <label class="range-field">
                <span>{{ 'catalog.to' | translate }}</span>
                <input
                  type="number"
                  [value]="state.ranges[filter.id]?.max ?? ''"
                  (input)="updateRange(filter.id, 'max', $any($event.target).value)"
                  [placeholder]="'catalog.maxValue' | translate:{ value: filter.max ?? '' }" />
              </label>
            </div>
          }

          @if (filter.type === 'slider') {
            <div class="slider-inputs">
              <input
                type="range"
                [min]="filter.min ?? 0"
                [max]="filter.max ?? 1000"
                [step]="filter.step ?? 1"
                [value]="state.ranges[filter.id]?.max ?? filter.max ?? 1000"
                (input)="updateSlider(filter.id, $any($event.target).value)" />
              <span>{{ state.ranges[filter.id]?.max ?? filter.max ?? 0 }}</span>
            </div>
          }

          @if (filter.type === 'color') {
            <div class="color-options">
              @for (option of filter.options; track option.id) {
                <button
                  type="button"
                  class="color-swatch"
                  [class.active]="isSelected(filter.id, option.value)"
                  [attr.aria-pressed]="isSelected(filter.id, option.value)"
                  [style.background]="option.colorHex ?? '#94a3b8'"
                  [attr.aria-label]="option.label"
                  (click)="toggleOption(filter.id, option.value)">
                  @if (isSelected(filter.id, option.value)) {
                    <span class="color-swatch-check" aria-hidden="true">✓</span>
                  }
                </button>
              }
            </div>
          }

          @if (filter.type === 'size') {
            <div class="size-options">
              @for (option of filter.options; track option.id) {
                <button
                  type="button"
                  class="size-chip"
                  [class.active]="isSelected(filter.id, option.value)"
                  [attr.aria-pressed]="isSelected(filter.id, option.value)"
                  (click)="toggleOption(filter.id, option.value)">{{ option.label }}</button>
              }
            </div>
          }

          @if (filter.type === 'rating') {
            <div class="rating-options">
              @for (option of filter.options; track option.id) {
                <button
                  type="button"
                  class="rating-chip"
                  [class.active]="isSelected(filter.id, option.value)"
                  [attr.aria-pressed]="isSelected(filter.id, option.value)"
                  (click)="toggleOption(filter.id, option.value)">
                  <span aria-hidden="true">★</span>
                  <span>{{ option.label }}</span>
                </button>
              }
            </div>
          }

          @if (filter.type === 'toggle') {
            <label class="option-check">
              <input
                type="checkbox"
                [checked]="state.toggles[filter.id]"
                (change)="updateToggle(filter.id, $any($event.target).checked)" />
              <span>{{ 'catalog.enabled' | translate }}</span>
            </label>
          }
        </div>
      </section>
    }
  }
</aside>
