<bmx-filter-panel>

<div class="ex-fp" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 16px; align-items: start">
  <bmx-filter-panel id="ex-fp" searchable save-views label="Filter products" style="max-inline-size: 22rem"></bmx-filter-panel>
  <div>
    <p id="ex-fp-count" style="margin: 0 0 8px; font-weight: 600">Products</p>
    <ul id="ex-fp-list" style="display: grid; gap: 6px; margin: 0; padding: 0; list-style: none"></ul>
  </div>
</div>

<script type="module">
  await customElements.whenDefined('bmx-filter-panel');
  const panel = document.getElementById('ex-fp');
  const list = document.getElementById('ex-fp-list');
  const count = document.getElementById('ex-fp-count');

  // A small office-equipment catalogue (fictional brands).
  const brands = ['Ashby', 'Corvel', 'Halden', 'Mireo', 'Tarrow'];
  const kinds = [
    ['Laptop', 649, 1899],
    ['Monitor', 129, 899],
    ['Desk', 199, 1199],
    ['Chair', 89, 949],
    ['Headset', 29, 349],
    ['Printer', 119, 799],
  ];
  const colours = ['Black', 'White', 'Graphite', 'Oak', 'Blue'];
  const products = [];
  let seed = 7;
  const next = () => ((seed = (seed * 9301 + 49297) % 233280) / 233280);
  for (let i = 0; i < 60; i++) {
    const [kind, lo, hi] = kinds[i % kinds.length];
    const brand = brands[Math.floor(next() * brands.length)];
    const day = new Date();
    day.setDate(day.getDate() - Math.floor(next() * 120));
    products.push({
      id: i + 1,
      name: `${brand} ${kind} ${100 + i * 7}`,
      kind,
      brand,
      colour: colours[Math.floor(next() * colours.length)],
      price: Math.round((lo + next() * (hi - lo)) / 5) * 5,
      rating: Math.round((3 + next() * 2) * 10) / 10,
      stock: next() > 0.25,
      added: day.toISOString().slice(0, 10),
      features: ['Next-day delivery', 'Eco label', 'Three-year warranty'].filter(() => next() > 0.55),
    });
  }

  panel.facets = [
    { id: 'kind', label: 'Product type', sort: 'label' },
    { id: 'brand', label: 'Brand', limit: 4 },
    { id: 'price', label: 'Price', type: 'range', step: 25, format: { style: 'currency', currency: 'GBP', maximumFractionDigits: 0 } },
    { id: 'rating', label: 'Customer rating', type: 'rating' },
    { id: 'stock', label: 'Availability', type: 'toggle', toggleLabel: 'In stock only' },
    { id: 'features', label: 'Features', operator: 'and', description: 'Products with every feature ticked.' },
    { id: 'colour', label: 'Colour', collapsed: true },
    { id: 'added', label: 'Date added', type: 'date', collapsed: true },
  ];
  panel.searchFields = ['name', 'brand', 'kind'];
  panel.views = [{ id: 'cheap-chairs', label: 'Chairs under £300', value: { kind: ['Chair'], price: { max: 300 } } }];
  panel.items = products;

  const money = new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP', maximumFractionDigits: 0 });
  // The list is drawn once now, then again at every change.
  const render = shown => {
    count.textContent = `${shown.length} of ${products.length} products`;
    list.replaceChildren(
      ...shown.slice(0, 8).map(p => {
        const li = document.createElement('li');
        li.style.cssText = 'display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border:1px solid var(--bmx-border);border-radius:8px;background:var(--bmx-surface)';
        li.innerHTML = `<span><strong></strong><br><small style="color:var(--bmx-text-muted)"></small></span><span></span>`;
        li.querySelector('strong').textContent = p.name;
        li.querySelector('small').textContent = `${p.colour} · ★ ${p.rating} · ${p.stock ? 'In stock' : 'Out of stock'}`;
        li.lastElementChild.textContent = money.format(p.price);
        return li;
      }),
    );
    if (shown.length > 8) {
      const more = document.createElement('li');
      more.style.color = 'var(--bmx-text-muted)';
      more.textContent = `…and ${shown.length - 8} more`;
      list.append(more);
    }
  };
  render(products);
  panel.addEventListener('bmxFilterChange', e => render(e.detail.filtered));
</script>