<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LiveComponent Product Filter Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            padding: 2rem;
            background: #f5f5f5;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        h1 {
            margin-bottom: 1rem;
            color: #333;
        }

        .intro {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            margin-bottom: 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .intro h2 {
            font-size: 1.25rem;
            margin-bottom: 1rem;
            color: #444;
        }

        .feature-list {
            line-height: 1.8;
            color: #666;
        }

        .feature-list li {
            margin-bottom: 0.5rem;
        }

        .demo-layout {
            display: grid;
            grid-template-columns: 320px 1fr;
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .demo-section {
            background: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .demo-section h3 {
            margin-bottom: 1.5rem;
            color: #333;
            font-size: 1.125rem;
        }

        /* Product Grid */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 1.5rem;
        }

        .product-card {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 1rem;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .product-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }

        .product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 6px;
            margin-bottom: 1rem;
        }

        .product-category {
            font-size: 0.75rem;
            color: #666;
            text-transform: uppercase;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .product-name {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #333;
            font-size: 1rem;
        }

        .product-brand {
            font-size: 0.875rem;
            color: #888;
            margin-bottom: 0.5rem;
        }

        .product-rating {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }

        .product-stars {
            color: #FF9800;
        }

        .product-rating-count {
            font-size: 0.75rem;
            color: #888;
        }

        .product-price {
            font-size: 1.5rem;
            color: #2196F3;
            font-weight: 600;
            margin-bottom: 0.75rem;
        }

        .product-stock {
            font-size: 0.875rem;
            font-weight: 500;
        }

        .product-stock.in-stock {
            color: #4CAF50;
        }

        .product-stock.out-of-stock {
            color: #f44336;
        }

        .product-attributes {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.75rem;
        }

        .product-color {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 2px solid #e0e0e0;
        }

        .product-size {
            padding: 0.25rem 0.5rem;
            background: #f5f5f5;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        /* Demo Controls */
        .demo-controls {
            background: #f9f9f9;
            padding: 1.5rem;
            border-radius: 6px;
            margin-bottom: 2rem;
        }

        .demo-controls h4 {
            margin-bottom: 1rem;
            color: #333;
        }

        .control-row {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }

        .btn-demo {
            padding: 0.75rem 1.5rem;
            background: #2196F3;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: background 0.2s;
        }

        .btn-demo:hover {
            background: #1976D2;
        }

        .btn-demo.btn-success {
            background: #4CAF50;
        }

        .btn-demo.btn-success:hover {
            background: #388E3C;
        }

        .btn-demo.btn-danger {
            background: #f44336;
        }

        .btn-demo.btn-danger:hover {
            background: #d32f2f;
        }

        .info-box {
            background: #e3f2fd;
            padding: 1rem;
            border-radius: 4px;
            margin-top: 1rem;
            border-left: 4px solid #2196F3;
        }

        .info-box strong {
            color: #1976D2;
        }

        @media (max-width: 1024px) {
            .demo-layout {
                grid-template-columns: 1fr;
            }

            .product-grid {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }
        }
    </style>
</head>
<body data-module="livecomponent">
    <div class="container">
        <h1>🎯 LiveComponent Product Filter Demo</h1>

        <div class="intro">
            <h2>E-Commerce Produktfilter mit Live-Updates</h2>
            <ul class="feature-list">
                <li>✅ <strong>Multi-Criteria Filtering:</strong> Kategorie, Preis, Marke, Farbe, Größe, Bewertung</li>
                <li>✅ <strong>Price Range Slider:</strong> Min/Max Preis-Eingabe mit Live-Update</li>
                <li>✅ <strong>Brand Toggle:</strong> Mehrfachauswahl von Marken</li>
                <li>✅ <strong>Color Selection:</strong> Visuelle Farbauswahl mit Hex-Codes</li>
                <li>✅ <strong>Size Filter:</strong> XS, S, M, L, XL, XXL Größenauswahl</li>
                <li>✅ <strong>Rating Filter:</strong> Mindest-Sternebewertung (1-5 Sterne)</li>
                <li>✅ <strong>Stock Filter:</strong> Nur verfügbare Artikel anzeigen</li>
                <li>✅ <strong>Sort Options:</strong> Relevanz, Preis, Name, Bewertung, Neueste</li>
                <li>✅ <strong>Active Filter Badges:</strong> Anzeige aktiver Filter mit Entfernen-Funktion</li>
                <li>✅ <strong>Result Count:</strong> Anzahl gefilterter Produkte</li>
            </ul>
        </div>

        <div class="demo-controls">
            <h4>Schnellaktionen</h4>

            <div class="control-row">
                <button class="btn-demo btn-success" onclick="applyCommonFilters()">
                    🎯 Beliebte Filter anwenden
                </button>
                <button class="btn-demo" onclick="setPriceRange(0, 200)">
                    💰 Preis: 0-200€
                </button>
                <button class="btn-demo" onclick="filterByRating(4)">
                    ⭐ Min. 4 Sterne
                </button>
                <button class="btn-demo btn-danger" onclick="clearAllFilters()">
                    🗑️ Alle Filter löschen
                </button>
            </div>

            <div class="info-box">
                <strong>Tipp:</strong> Nutze die verschiedenen Filter-Optionen um die Produktliste einzugrenzen.
                Aktive Filter werden als Badges angezeigt und können einzeln entfernt werden.
                Die Anzahl der gefilterten Produkte wird am Ende der Filterleiste angezeigt.
            </div>
        </div>

        <div class="demo-layout">
            <!-- Product Filter Component -->
            <div>
                {{product_filter}}
            </div>

            <!-- Product Results -->
            <div class="demo-section">
                <h3>Gefilterte Produkte</h3>
                <div class="product-grid" id="product-results">
                    <!-- Demo Products -->
                    <div class="product-card" data-category="electronics" data-brand="TechPro" data-price="899" data-rating="5" data-color="#4CAF50" data-size="M" data-stock="true">
                        <img src="https://via.placeholder.com/250x200/4CAF50/fff?text=Laptop" alt="Premium Laptop" class="product-image">
                        <div class="product-category">Electronics</div>
                        <div class="product-name">Premium Laptop Pro</div>
                        <div class="product-brand">TechPro</div>
                        <div class="product-rating">
                            <span class="product-stars">★★★★★</span>
                            <span class="product-rating-count">(245)</span>
                        </div>
                        <div class="product-price">899,00 €</div>
                        <div class="product-stock in-stock">✓ Auf Lager</div>
                    </div>

                    <div class="product-card" data-category="electronics" data-brand="SmartTech" data-price="699" data-rating="4" data-color="#2196F3" data-size="S" data-stock="true">
                        <img src="https://via.placeholder.com/250x200/2196F3/fff?text=Phone" alt="Smartphone" class="product-image">
                        <div class="product-category">Electronics</div>
                        <div class="product-name">Smartphone Elite</div>
                        <div class="product-brand">SmartTech</div>
                        <div class="product-rating">
                            <span class="product-stars">★★★★☆</span>
                            <span class="product-rating-count">(892)</span>
                        </div>
                        <div class="product-price">699,00 €</div>
                        <div class="product-stock in-stock">✓ Auf Lager</div>
                    </div>

                    <div class="product-card" data-category="fashion" data-brand="FashionBrand" data-price="79" data-rating="5" data-color="#FF5722" data-size="L" data-stock="true">
                        <img src="https://via.placeholder.com/250x200/FF5722/fff?text=Shirt" alt="T-Shirt" class="product-image">
                        <div class="product-category">Fashion</div>
                        <div class="product-name">Premium T-Shirt</div>
                        <div class="product-brand">FashionBrand</div>
                        <div class="product-rating">
                            <span class="product-stars">★★★★★</span>
                            <span class="product-rating-count">(156)</span>
                        </div>
                        <div class="product-price">79,00 €</div>
                        <div class="product-stock in-stock">✓ Auf Lager</div>
                        <div class="product-attributes">
                            <div class="product-color" style="background: #FF5722"></div>
                            <div class="product-size">L</div>
                        </div>
                    </div>

                    <div class="product-card" data-category="home" data-brand="HomeLiving" data-price="299" data-rating="4" data-color="#9C27B0" data-size="XL" data-stock="false">
                        <img src="https://via.placeholder.com/250x200/9C27B0/fff?text=Chair" alt="Designer Chair" class="product-image">
                        <div class="product-category">Home & Living</div>
                        <div class="product-name">Designer Chair</div>
                        <div class="product-brand">HomeLiving</div>
                        <div class="product-rating">
                            <span class="product-stars">★★★★☆</span>
                            <span class="product-rating-count">(78)</span>
                        </div>
                        <div class="product-price">299,00 €</div>
                        <div class="product-stock out-of-stock">✗ Nicht verfügbar</div>
                    </div>

                    <div class="product-card" data-category="sports" data-brand="SportGear" data-price="149" data-rating="5" data-color="#00BCD4" data-size="M" data-stock="true">
                        <img src="https://via.placeholder.com/250x200/00BCD4/fff?text=Shoes" alt="Running Shoes" class="product-image">
                        <div class="product-category">Sports</div>
                        <div class="product-name">Running Shoes Pro</div>
                        <div class="product-brand">SportGear</div>
                        <div class="product-rating">
                            <span class="product-stars">★★★★★</span>
                            <span class="product-rating-count">(432)</span>
                        </div>
                        <div class="product-price">149,00 €</div>
                        <div class="product-stock in-stock">✓ Auf Lager</div>
                        <div class="product-attributes">
                            <div class="product-color" style="background: #00BCD4"></div>
                            <div class="product-size">M</div>
                        </div>
                    </div>

                    <div class="product-card" data-category="electronics" data-brand="TechPro" data-price="449" data-rating="4" data-color="#FF9800" data-size="S" data-stock="true">
                        <img src="https://via.placeholder.com/250x200/FF9800/fff?text=Tablet" alt="Tablet" class="product-image">
                        <div class="product-category">Electronics</div>
                        <div class="product-name">Tablet Plus</div>
                        <div class="product-brand">TechPro</div>
                        <div class="product-rating">
                            <span class="product-stars">★★★★☆</span>
                            <span class="product-rating-count">(321)</span>
                        </div>
                        <div class="product-price">449,00 €</div>
                        <div class="product-stock in-stock">✓ Auf Lager</div>
                    </div>

                    <div class="product-card" data-category="fashion" data-brand="StyleCo" data-price="129" data-rating="3" data-color="#E91E63" data-size="XL" data-stock="true">
                        <img src="https://via.placeholder.com/250x200/E91E63/fff?text=Jacket" alt="Winter Jacket" class="product-image">
                        <div class="product-category">Fashion</div>
                        <div class="product-name">Winter Jacket</div>
                        <div class="product-brand">StyleCo</div>
                        <div class="product-rating">
                            <span class="product-stars">★★★☆☆</span>
                            <span class="product-rating-count">(89)</span>
                        </div>
                        <div class="product-price">129,00 €</div>
                        <div class="product-stock in-stock">✓ Auf Lager</div>
                        <div class="product-attributes">
                            <div class="product-color" style="background: #E91E63"></div>
                            <div class="product-size">XL</div>
                        </div>
                    </div>

                    <div class="product-card" data-category="electronics" data-brand="SmartTech" data-price="249" data-rating="5" data-color="#F44336" data-size="S" data-stock="true">
                        <img src="https://via.placeholder.com/250x200/F44336/fff?text=Headphones" alt="Headphones" class="product-image">
                        <div class="product-category">Electronics</div>
                        <div class="product-name">Noise Cancelling Headphones</div>
                        <div class="product-brand">SmartTech</div>
                        <div class="product-rating">
                            <span class="product-stars">★★★★★</span>
                            <span class="product-rating-count">(567)</span>
                        </div>
                        <div class="product-price">249,00 €</div>
                        <div class="product-stock in-stock">✓ Auf Lager</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Helper function to trigger filter actions
        function triggerFilterAction(action, params = {}) {
            const component = document.querySelector('[data-component-id^="product-filter:"]');
            if (!component) {
                console.error('Product filter component not found');
                return;
            }

            const button = document.createElement('button');
            button.setAttribute('data-live-action', action);

            Object.entries(params).forEach(([key, value]) => {
                button.setAttribute(`data-param-${key}`, typeof value === 'object' ? JSON.stringify(value) : value);
            });

            button.style.display = 'none';
            component.appendChild(button);
            button.click();
            component.removeChild(button);
        }

        // Apply common filters
        function applyCommonFilters() {
            triggerFilterAction('setCategory', { category: 'electronics' });

            setTimeout(() => {
                triggerFilterAction('toggleBrand', { brand: 'TechPro' });
            }, 200);

            setTimeout(() => {
                triggerFilterAction('setMinRating', { 'min-rating': 4 });
            }, 400);
        }

        // Set price range
        function setPriceRange(min, max) {
            triggerFilterAction('setPriceRange', { min: min, max: max });
        }

        // Filter by rating
        function filterByRating(minRating) {
            triggerFilterAction('setMinRating', { 'min-rating': minRating });
        }

        // Clear all filters
        function clearAllFilters() {
            if (confirm('Möchten Sie alle Filter wirklich zurücksetzen?')) {
                triggerFilterAction('clearFilters', {});
            }
        }

        // Initialize with some filters
        window.addEventListener('DOMContentLoaded', function() {
            // Optionally start with some filters active
            setTimeout(() => {
                triggerFilterAction('setPriceRange', { min: 0, max: 1000 });
            }, 500);
        });
    </script>
</body>
</html>
