<div class="container py-5">
  <div class="list-group bspop-list" style="max-width:420px" id="bspopList">
    <div class="list-group-item d-flex justify-content-between align-items-center">
      <span>Q3-financial-report.pdf</span>
      <button class="btn btn-sm btn-outline-danger bspop-trigger" type="button">Delete</button>
    </div>
    <div class="list-group-item d-flex justify-content-between align-items-center">
      <span>brand-guidelines.sketch</span>
      <button class="btn btn-sm btn-outline-danger bspop-trigger" type="button">Delete</button>
    </div>
    <div class="list-group-item d-flex justify-content-between align-items-center">
      <span>onboarding-notes.docx</span>
      <button class="btn btn-sm btn-outline-danger bspop-trigger" type="button">Delete</button>
    </div>
  </div>
  <p class="text-muted small mt-3">Deleted: <strong id="bspopDeleted">none</strong></p>
</div>

.bspop-popover .popover-body { padding: 10px 12px; }
.bspop-popover .btn { font-size: 12px; padding: 3px 10px; }

let pending = null;

// Bootstrap's popover sanitizes its HTML content by default, and <button>
// is not in that default allowlist — left as-is, both buttons below would
// be silently stripped before the popover ever renders them. Extending the
// allowList (not disabling sanitize) is the documented, still-safe way to
// permit the one extra tag this content actually needs.
const allowList = { ...bootstrap.Popover.Default.allowList, button: ['type', 'class'] };

// One popover instance per trigger, built with a custom HTML body (two real
// buttons) rather than Bootstrap's plain-text default — the standard
// "are you sure?" inline-confirm pattern, with no modal and no page reload.
document.querySelectorAll('.bspop-trigger').forEach(btn => {
  const row = btn.closest('.list-group-item');
  const name = row.querySelector('span').textContent;

  const popover = new bootstrap.Popover(btn, {
    html: true,
    trigger: 'manual',
    placement: 'top',
    customClass: 'bspop-popover',
    allowList,
    content: '<div class="d-flex flex-column gap-2">' +
      '<div>Delete <strong>' + name + '</strong>?</div>' +
      '<div class="d-flex gap-2">' +
      '<button type="button" class="btn btn-danger bspop-confirm">Delete</button>' +
      '<button type="button" class="btn btn-light bspop-cancel">Cancel</button>' +
      '</div></div>',
  });

  btn.addEventListener('click', () => {
    if (pending && pending !== popover) pending.hide();
    popover.toggle();
    pending = popover;
  });

  btn.addEventListener('shown.bs.popover', () => {
    const tip = document.querySelector('.popover.show .bspop-confirm, .popover.show .bspop-cancel')?.closest('.popover');
    if (!tip) return;
    tip.querySelector('.bspop-confirm').addEventListener('click', () => {
      document.getElementById('bspopDeleted').textContent = name;
      row.remove();
      popover.hide();
    });
    tip.querySelector('.bspop-cancel').addEventListener('click', () => popover.hide());
  });
});

// Clicking anywhere outside a trigger or its popover closes it.
document.addEventListener('click', e => {
  if (!pending) return;
  const tipEl = document.querySelector('.popover.show');
  if (tipEl && (tipEl.contains(e.target))) return;
  if (e.target.closest('.bspop-trigger')) return;
  pending.hide();
  pending = null;
});