<div class="container py-5 d-flex justify-content-center">
  <div class="dropdown bsms-wrap">
    <button class="btn btn-outline-dark dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" id="bsmsToggle">
      <span id="bsmsSummary">Select skills</span>
    </button>
    <div class="dropdown-menu p-2 bsms-menu" aria-labelledby="bsmsToggle">
      <input type="text" class="form-control form-control-sm mb-2" id="bsmsSearch" placeholder="Search skills...">
      <div class="bsms-list" id="bsmsList">
        <div class="form-check" data-name="JavaScript">
          <input class="form-check-input bsms-check" type="checkbox" value="JavaScript" id="bsmsOpt1">
          <label class="form-check-label" for="bsmsOpt1">JavaScript</label>
        </div>
        <div class="form-check" data-name="Python">
          <input class="form-check-input bsms-check" type="checkbox" value="Python" id="bsmsOpt2">
          <label class="form-check-label" for="bsmsOpt2">Python</label>
        </div>
        <div class="form-check" data-name="React">
          <input class="form-check-input bsms-check" type="checkbox" value="React" id="bsmsOpt3">
          <label class="form-check-label" for="bsmsOpt3">React</label>
        </div>
        <div class="form-check" data-name="Vue">
          <input class="form-check-input bsms-check" type="checkbox" value="Vue" id="bsmsOpt4">
          <label class="form-check-label" for="bsmsOpt4">Vue</label>
        </div>
        <div class="form-check" data-name="Node.js">
          <input class="form-check-input bsms-check" type="checkbox" value="Node.js" id="bsmsOpt5">
          <label class="form-check-label" for="bsmsOpt5">Node.js</label>
        </div>
        <div class="form-check" data-name="SQL">
          <input class="form-check-input bsms-check" type="checkbox" value="SQL" id="bsmsOpt6">
          <label class="form-check-label" for="bsmsOpt6">SQL</label>
        </div>
        <div class="form-check" data-name="Docker">
          <input class="form-check-input bsms-check" type="checkbox" value="Docker" id="bsmsOpt7">
          <label class="form-check-label" for="bsmsOpt7">Docker</label>
        </div>
        <div class="small text-muted text-center py-2 d-none" id="bsmsNoResults">No matches found.</div>
      </div>
      <hr class="my-2">
      <button type="button" class="btn btn-sm btn-link p-0 text-decoration-none" id="bsmsClear">Clear all</button>
    </div>
  </div>
</div>

.bsms-wrap { width: 320px; }
.bsms-menu { width: 100%; }
.bsms-list { max-height: 200px; overflow-y: auto; }
.bsms-list .form-check { padding-left: 1.75rem; padding-top: .25rem; padding-bottom: .25rem; }

const checkboxes = Array.from(document.querySelectorAll('.bsms-check'));
const summary = document.getElementById('bsmsSummary');
const search = document.getElementById('bsmsSearch');
const clearBtn = document.getElementById('bsmsClear');
const noResults = document.getElementById('bsmsNoResults');

function updateSummary() {
  const selected = checkboxes.filter(cb => cb.checked);
  if (selected.length === 0) {
    summary.textContent = 'Select skills';
  } else if (selected.length <= 2) {
    summary.textContent = selected.map(cb => cb.value).join(', ');
  } else {
    summary.textContent = selected.length + ' selected';
  }
}

checkboxes.forEach(cb => cb.addEventListener('change', updateSummary));

// Filters the checkbox rows by matching the search text against each row's
// data-name, hiding non-matching rows in place rather than re-rendering.
search.addEventListener('input', () => {
  const query = search.value.trim().toLowerCase();
  let visibleCount = 0;
  checkboxes.forEach(cb => {
    const row = cb.closest('.form-check');
    const name = row.dataset.name.toLowerCase();
    const matches = name.includes(query);
    row.classList.toggle('d-none', !matches);
    if (matches) visibleCount++;
  });
  noResults.classList.toggle('d-none', visibleCount !== 0);
});

clearBtn.addEventListener('click', () => {
  checkboxes.forEach(cb => { cb.checked = false; });
  updateSummary();
});

// data-bs-auto-close="outside" keeps the dropdown open while interacting
// with checkboxes and the search field, closing only on an outside click.
updateSummary();