.filtersort.bg-white.rounded-lg.shadow-sm.border.border-gray-200(class='dark:bg-gray-800 dark:border-gray-700')
  .filtersort-header.p-6.border-b.border-gray-200(class='dark:border-gray-700')
    .flex.flex-col.gap-4(class="sm:flex-row sm:items-center sm:justify-between")
      h3.text-lg.font-semibold.text-gray-800(class='dark:text-white') Фильтры и сортировка
      .flex.items-center.space-x-3
        button.reset-btn.px-3.py-2.text-sm.rounded-lg.transition-colors(
          @click='resetFilters'
          class='text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700'
        ) Сбросить
        button.apply-btn.px-4.py-2.text-sm.rounded-lg.font-medium.transition-colors(
          @click='applyFilters'
          class='bg-accent text-white hover:bg-yellow-600'
        ) Применить

  .filtersort-body.p-6
    .grid.grid-cols-1.gap-6(class="md:grid-cols-2 lg:grid-cols-4")
      //- Фильтр по категориям
      .filter-group
        label.block.text-sm.font-medium.mb-3(class='text-gray-700 dark:text-gray-300') Категория
        .space-y-2
          .filter-option.flex.items-center(
            v-for='category in filterOptions.categories'
            :key='category.value'
          )
            input.mr-3.rounded.border-gray-300.text-accent(
              :id='`category-${category.value}`'
              type='checkbox' 
              v-model='selectedFilters.categories'
              :value='category.value'
              @change='handleFilterChange'
              class='focus:ring-accent focus:ring-offset-0 dark:border-gray-600 dark:bg-gray-700'
            )
            label.text-sm.cursor-pointer(
              :for='`category-${category.value}`'
              class='text-gray-600 dark:text-gray-400'
            ) {{ category.label }}

      //- Фильтр по дате
      .filter-group
        label.block.text-sm.font-medium.mb-3(class='text-gray-700 dark:text-gray-300') Дата
        .space-y-2
          .filter-option.flex.items-center(
            v-for='dateRange in filterOptions.dateRanges'
            :key='dateRange.value'
          )
            input.mr-3.rounded.border-gray-300.text-accent(
              :id='`date-${dateRange.value}`'
              type='radio' 
              v-model='selectedFilters.dateRange'
              :value='dateRange.value'
              @change='handleFilterChange'
              name='date-range'
              class='focus:ring-accent focus:ring-offset-0 dark:border-gray-600 dark:bg-gray-700'
            )
            label.text-sm.cursor-pointer(
              :for='`date-${dateRange.value}`'
              class='text-gray-600 dark:text-gray-400'
            ) {{ dateRange.label }}

      //- Фильтр по цене
      .filter-group
        label.block.text-sm.font-medium.mb-3(class='text-gray-700 dark:text-gray-300') Цена, сомони
        .price-slider.space-y-4
          .price-inputs.flex.items-center.space-x-3
            input.w-20.px-3.py-2.text-sm.rounded-lg.border(
              type='number'
              v-model.number='selectedFilters.priceRange.min'
              @change='handleFilterChange'
              placeholder='0'
              class='border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white'
            )
            span.text-gray-400 –
            input.w-20.px-3.py-2.text-sm.rounded-lg.border(
              type='number'
              v-model.number='selectedFilters.priceRange.max'
              @change='handleFilterChange'
              placeholder='500'
              class='border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white'
            )
          .price-labels.flex.justify-between.text-xs.text-gray-500(class="dark:text-gray-400")
            span 0
            span 250
            span 500+

      //- Сортировка
      .filter-group
        label.block.text-sm.font-medium.mb-3(class='text-gray-700 dark:text-gray-300') Сортировка
        select.w-full.px-3.py-2.text-sm.rounded-lg.border.transition-colors(
          v-model='selectedSort'
          @change='handleSortChange'
          class='border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white focus:ring-accent focus:border-accent'
        )
          option(
            v-for='option in sortOptions'
            :key='option.value'
            :value='option.value'
          ) {{ option.label }}

    //- Активные фильтры
    .active-filters.mt-6.pt-6.border-t.border-gray-200(class='dark:border-gray-700')
      .flex.flex-wrap.items-center.gap-2
        span.text-sm.font-medium(class='text-gray-700 dark:text-gray-300') Активные фильтры:
        .active-filter-tag.px-3.py-1.text-xs.rounded-full.flex.items-center.space-x-1(
          v-for='(filter, index) in activeFilters'
          :key='index'
          class='bg-accent bg-opacity-10 text-accent'
        )
          span {{ filter }}
          button.text-accent( class="hover:text-yellow-700" @click='removeFilter(index)')
            svg.w-3.h-3(fill='none' stroke='currentColor' viewBox='0 0 24 24')
              path(stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12')
