<div class="container py-5 d-flex justify-content-center">
  <div class="card bsnores-card">
    <div class="card-body p-3">
      <input type="search" class="form-control mb-3" id="bsnoresInput" placeholder="Search integrations...">

      <ul class="list-unstyled mb-0" id="bsnoresList"></ul>

      <div class="text-center py-4 d-none" id="bsnoresEmpty">
        <p class="fw-semibold mb-1">No results for &ldquo;<span id="bsnoresQuery"></span>&rdquo;</p>
        <p class="small text-muted mb-3">Try a different spelling, or clear your search to see everything.</p>
        <button type="button" class="btn btn-sm btn-outline-secondary" id="bsnoresClear">Clear search</button>
      </div>
    </div>
  </div>
</div>

.bsnores-card { width: 380px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsnores-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 8px; font-size: 13.5px; }
.bsnores-item:hover { background: #f8f9fb; }
.bsnores-dot { width: 8px; height: 8px; border-radius: 50%; background: #6366f1; flex-shrink: 0; }

const ITEMS = ['Slack', 'Notion', 'Figma', 'GitHub', 'Jira', 'Zoom', 'Stripe', 'Linear', 'Zendesk', 'HubSpot'];
const input = document.getElementById('bsnoresInput');
const list = document.getElementById('bsnoresList');
const empty = document.getElementById('bsnoresEmpty');
const queryEl = document.getElementById('bsnoresQuery');

function render() {
  const q = input.value.trim();
  const matches = q === '' ? ITEMS : ITEMS.filter(name => name.toLowerCase().includes(q.toLowerCase()));

  if (matches.length === 0) {
    list.innerHTML = '';
    list.classList.add('d-none');
    empty.classList.remove('d-none');
    queryEl.textContent = q;
    return;
  }

  empty.classList.add('d-none');
  list.classList.remove('d-none');
  list.innerHTML = matches.map(name =>
    '<li class="bsnores-item"><span class="bsnores-dot"></span>' + name + '</li>'
  ).join('');
}

input.addEventListener('input', render);

document.getElementById('bsnoresClear').addEventListener('click', () => {
  input.value = '';
  render();
  input.focus();
});

render();