<div class="container py-5 d-flex justify-content-center">
  <div class="card bshl-card">
    <div class="card-body p-3">
      <input type="search" class="form-control mb-3" id="bshlInput" placeholder="Search articles...">
      <p class="small text-muted mb-2" id="bshlCount">6 articles</p>
      <ul class="list-unstyled mb-0" id="bshlList"></ul>
    </div>
  </div>
</div>

.bshl-card { width: 420px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bshl-item { padding: 8px 4px; font-size: 13.5px; border-bottom: 1px solid #f1f2f5; }
.bshl-item:last-child { border-bottom: none; }
.bshl-item mark { background: #fde68a; padding: 0 1px; border-radius: 2px; }

const ARTICLES = [
  'Getting started with keyboard navigation',
  'Designing accessible form validation',
  'A guide to CSS Grid layout patterns',
  'Debugging flaky JavaScript event listeners',
  'Building a design system from scratch',
  'Performance budgets for modern web apps',
];

const input = document.getElementById('bshlInput');
const count = document.getElementById('bshlCount');
const list = document.getElementById('bshlList');

function escapeHtml(str) {
  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

function highlight(text, query) {
  if (!query) return escapeHtml(text);
  const pattern = new RegExp('(' + escapeRegExp(query) + ')', 'ig');
  return escapeHtml(text).replace(pattern, '<mark>$1</mark>');
}

function render() {
  const query = input.value.trim();
  const matches = query
    ? ARTICLES.filter(t => t.toLowerCase().includes(query.toLowerCase()))
    : ARTICLES;

  count.textContent = matches.length + ' article' + (matches.length === 1 ? '' : 's') +
    (query ? ' matching "' + query + '"' : '');

  list.innerHTML = matches.map(t => '<li class="bshl-item">' + highlight(t, query) + '</li>').join('') ||
    '<li class="bshl-item text-muted">No articles match.</li>';
}

input.addEventListener('input', render);
render();