<view class="category-page">
    <view class="category-page__header">
        <text class="category-page__header-title">{{title}}</text>
    </view>

    <view class="category-page__filters">
        <view class="category-page__filter-row">
            <text class="category-page__filter-label">年龄</text>
            <view class="category-page__pills">
                <view
                    wx:for="{{ageFilters}}"
                    wx:key="key"
                    class="category-page__pill {{activeAge === item.key ? 'category-page__pill--active' : ''}}"
                    data-key="{{item.key}}"
                    bindtap="onAgeFilter"
                >
                    {{item.label}}
                </view>
            </view>
        </view>
        <view class="category-page__filter-row">
            <text class="category-page__filter-label">难度</text>
            <view class="category-page__pills">
                <view
                    wx:for="{{diffFilters}}"
                    wx:key="key"
                    class="category-page__pill {{activeDiff === item.key ? 'category-page__pill--active' : ''}}"
                    data-key="{{item.key}}"
                    bindtap="onDiffFilter"
                >
                    {{item.label}}
                </view>
            </view>
        </view>
    </view>

    <view wx:if="{{items.length}}" class="category-page__list">
        <view
            wx:for="{{items}}"
            wx:key="id"
            class="category-page__card-wrap"
        >
            <detail-card
                title="{{item.title}}"
                preview-bg="{{item.previewBg}}"
                preview-text="{{item.previewText}}"
                age-range="{{item.ageRangeLabel}}"
                difficulty="{{item.difficultyLabel}}"
                data-id="{{item.id}}"
                bind:tap="onCardTap"
            />
        </view>
    </view>

    <view wx:else class="category-page__empty">
        <text class="category-page__empty-text">暂无符合条件的练习纸</text>
    </view>
</view>
