<div
    class="product-filter"
    data-live-component="{{componentId}}"
    data-state='{{stateJson}}'
>
    <!-- Filter Header -->
    <div class="filter-header">
        <h3 class="filter-title">Filter</h3>
        <if condition="has_active_filters">
            <button
                class="clear-all-btn"
                data-live-action="clearFilters"
            >
                Alle löschen ({{active_filter_count}})
            </button>
        </if>
    </div>

    <!-- Active Filter Badges -->
    <if condition="has_active_filters">
        <div class="filter-badges">
            <for items="filter_badges" as="badge">
                <div class="filter-badge">
                    <span class="badge-label">{{badge.label}}</span>
                    <button
                        class="badge-remove"
                        data-live-action="removeFilter"
                        data-param-filter-type="{{badge.filter_type}}"
                        data-param-value="{{badge.value}}"
                        aria-label="Remove filter"
                    >
                        ×
                    </button>
                </div>
            </for>
        </div>
    </if>

    <!-- Category Filter -->
    <div class="filter-section">
        <h4 class="filter-section-title">Kategorie</h4>
        <div class="filter-options">
            <for items="prepared_categories" as="category">
                <button
                    class="filter-option {{category.class}}"
                    data-live-action="setCategory"
                    data-param-category="{{category.value}}"
                >
                    {{category.label}}
                </button>
            </for>
        </div>
    </div>

    <!-- Price Range Filter -->
    <div class="filter-section">
        <h4 class="filter-section-title">Preis</h4>
        <div class="price-range-container">
            <div class="price-range-inputs">
                <div class="price-input-group">
                    <label for="price-min">Min</label>
                    <input
                        type="number"
                        id="price-min"
                        class="price-input"
                        value="{{price_min}}"
                        min="{{price_range_min}}"
                        max="{{price_range_max}}"
                        data-live-blur="setPriceRange"
                        data-param-min="this.value"
                        data-param-max="{{price_max}}"
                    />
                    <span class="currency">€</span>
                </div>
                <span class="price-separator">-</span>
                <div class="price-input-group">
                    <label for="price-max">Max</label>
                    <input
                        type="number"
                        id="price-max"
                        class="price-input"
                        value="{{price_max}}"
                        min="{{price_range_min}}"
                        max="{{price_range_max}}"
                        data-live-blur="setPriceRange"
                        data-param-min="{{price_min}}"
                        data-param-max="this.value"
                    />
                    <span class="currency">€</span>
                </div>
            </div>
            <div class="price-range-display">
                <span>{{price_min_formatted}} - {{price_max_formatted}}</span>
            </div>
        </div>
    </div>

    <!-- Brand Filter -->
    <if condition="has_brands">
        <div class="filter-section">
            <h4 class="filter-section-title">Marke</h4>
            <div class="filter-options checkbox-options">
                <for items="prepared_brands" as="brand">
                    <label class="checkbox-option">
                        <input
                            type="checkbox"
                            {{brand.checked}}
                            data-live-action="toggleBrand"
                            data-param-brand="{{brand.value}}"
                        />
                        <span class="checkbox-label">{{brand.label}}</span>
                        <span class="checkbox-count">({{brand.count}})</span>
                    </label>
                </for>
            </div>
        </div>
    </if>

    <!-- Color Filter -->
    <if condition="has_colors">
        <div class="filter-section">
            <h4 class="filter-section-title">Farbe</h4>
            <div class="filter-options color-options">
                <for items="prepared_colors" as="color">
                    <button
                        class="color-option {{color.class}}"
                        data-live-action="toggleColor"
                        data-param-color="{{color.value}}"
                        style="background-color: {{color.hex_code}}"
                        title="{{color.label}}"
                        aria-label="{{color.label}}"
                    >
                        <if condition="color.is_active">
                            <span class="color-checkmark">✓</span>
                        </if>
                    </button>
                </for>
            </div>
        </div>
    </if>

    <!-- Size Filter -->
    <if condition="has_sizes">
        <div class="filter-section">
            <h4 class="filter-section-title">Größe</h4>
            <div class="filter-options size-options">
                <for items="prepared_sizes" as="size">
                    <button
                        class="size-option {{size.class}}"
                        data-live-action="toggleSize"
                        data-param-size="{{size.value}}"
                    >
                        {{size.label}}
                    </button>
                </for>
            </div>
        </div>
    </if>

    <!-- Rating Filter -->
    <div class="filter-section">
        <h4 class="filter-section-title">Bewertung</h4>
        <div class="filter-options rating-options">
            <for items="rating_options" as="rating">
                <button
                    class="rating-option {{rating.class}}"
                    data-live-action="setMinRating"
                    data-param-min-rating="{{rating.value}}"
                >
                    <span class="rating-stars">{{rating.stars}}</span>
                    <span class="rating-label">{{rating.label}}</span>
                </button>
            </for>
        </div>
    </div>

    <!-- Stock Filter -->
    <div class="filter-section">
        <h4 class="filter-section-title">Verfügbarkeit</h4>
        <label class="checkbox-option">
            <input
                type="checkbox"
                {{in_stock_only_checked}}
                data-live-action="toggleInStock"
            />
            <span class="checkbox-label">Nur verfügbare Artikel</span>
        </label>
    </div>

    <!-- Sort Options -->
    <div class="filter-section">
        <h4 class="filter-section-title">Sortierung</h4>
        <select
            class="sort-select"
            data-live-change="setSortBy"
            data-param-sort-by="this.value"
        >
            <for items="sort_options" as="option">
                <option value="{{option.value}}" {{option.selected}}>
                    {{option.label}}
                </option>
            </for>
        </select>
    </div>

    <!-- Result Count -->
    <div class="filter-footer">
        <div class="result-count">
            {{result_count_label}}
        </div>
    </div>
</div>

<style>
    .product-filter {
        background: white;
        border-radius: 8px;
        padding: 1.5rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid #e0e0e0;
    }

    .filter-title {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
        color: #333;
    }

    .clear-all-btn {
        padding: 0.5rem 1rem;
        background: #f44336;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        transition: background 0.2s;
    }

    .clear-all-btn:hover {
        background: #d32f2f;
    }

    /* Filter Badges */
    .filter-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e0e0e0;
    }

    .filter-badge {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.75rem;
        background: #e3f2fd;
        border: 1px solid #2196F3;
        border-radius: 20px;
        font-size: 0.875rem;
    }

    .badge-label {
        color: #1976D2;
        font-weight: 500;
    }

    .badge-remove {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        padding: 0;
        background: #1976D2;
        color: white;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        font-size: 1rem;
        line-height: 1;
        transition: background 0.2s;
    }

    .badge-remove:hover {
        background: #1565C0;
    }

    /* Filter Sections */
    .filter-section {
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #f0f0f0;
    }

    .filter-section:last-of-type {
        border-bottom: none;
    }

    .filter-section-title {
        margin: 0 0 0.75rem 0;
        font-size: 1rem;
        font-weight: 600;
        color: #555;
    }

    .filter-options {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Category & Size Options */
    .filter-option,
    .size-option {
        padding: 0.5rem 1rem;
        background: #f5f5f5;
        color: #333;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s;
    }

    .filter-option:hover,
    .size-option:hover {
        background: #eeeeee;
        border-color: #bdbdbd;
    }

    .filter-option.active,
    .size-option.active {
        background: #2196F3;
        color: white;
        border-color: #2196F3;
    }

    /* Price Range */
    .price-range-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .price-range-inputs {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .price-input-group {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        flex: 1;
        position: relative;
    }

    .price-input-group label {
        font-size: 0.75rem;
        color: #666;
        font-weight: 500;
    }

    .price-input {
        width: 100%;
        padding: 0.5rem 2rem 0.5rem 0.5rem;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        font-size: 0.875rem;
    }

    .currency {
        position: absolute;
        right: 0.5rem;
        bottom: 0.5rem;
        color: #666;
        font-weight: 500;
    }

    .price-separator {
        margin-top: 1.5rem;
        font-weight: 500;
        color: #666;
    }

    .price-range-display {
        text-align: center;
        padding: 0.5rem;
        background: #f5f5f5;
        border-radius: 4px;
        font-weight: 600;
        color: #2196F3;
    }

    /* Checkbox Options */
    .checkbox-options {
        flex-direction: column;
    }

    .checkbox-option {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.2s;
    }

    .checkbox-option:hover {
        background: #f5f5f5;
    }

    .checkbox-option input[type="checkbox"] {
        cursor: pointer;
    }

    .checkbox-label {
        flex: 1;
        font-weight: 500;
        color: #333;
    }

    .checkbox-count {
        color: #666;
        font-size: 0.875rem;
    }

    /* Color Options */
    .color-options {
        gap: 0.75rem;
    }

    .color-option {
        width: 40px;
        height: 40px;
        border: 2px solid #e0e0e0;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    .color-option:hover {
        transform: scale(1.1);
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }

    .color-option.active {
        border-color: #2196F3;
        border-width: 3px;
    }

    .color-checkmark {
        color: white;
        font-weight: bold;
        text-shadow: 0 0 2px rgba(0,0,0,0.5);
    }

    /* Rating Options */
    .rating-options {
        flex-direction: column;
    }

    .rating-option {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem;
        background: white;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .rating-option:hover {
        background: #f5f5f5;
        border-color: #bdbdbd;
    }

    .rating-option.active {
        background: #fff3e0;
        border-color: #FF9800;
    }

    .rating-stars {
        color: #FF9800;
        font-size: 1.125rem;
    }

    .rating-label {
        color: #666;
        font-size: 0.875rem;
    }

    /* Sort Select */
    .sort-select {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        font-size: 0.875rem;
        background: white;
        cursor: pointer;
    }

    /* Filter Footer */
    .filter-footer {
        margin-top: 1.5rem;
        padding-top: 1rem;
        border-top: 2px solid #e0e0e0;
    }

    .result-count {
        text-align: center;
        font-weight: 600;
        color: #2196F3;
        font-size: 1rem;
    }
</style>
