<div class="container py-5 d-flex justify-content-center">
  <div class="card bsundo-card">
    <div class="card-body p-3">
      <h6 class="fw-bold mb-2">Inbox</h6>
      <ul class="list-unstyled mb-0" id="bsundoList"></ul>
    </div>
  </div>

  <div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div class="toast align-items-center" id="bsundoToast" role="status">
      <div class="d-flex">
        <div class="toast-body" id="bsundoToastBody"></div>
        <button type="button" class="btn btn-sm btn-link text-decoration-none flex-shrink-0" id="bsundoBtn">Undo</button>
      </div>
    </div>
  </div>
</div>

.bsundo-card { width: 380px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsundo-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 4px; font-size: 13.5px; border-bottom: 1px solid #f1f2f5; }
.bsundo-item:last-child { border-bottom: none; }
.bsundo-remove { border: none; background: none; color: #9ca3af; cursor: pointer; }
.bsundo-remove:hover { color: #dc3545; }

const MESSAGES = [
  'Q3 planning notes',
  'Invoice #4021 receipt',
  'Team offsite itinerary',
  'Design review feedback',
  'Weekly report draft',
];

const list = document.getElementById('bsundoList');
const toastEl = document.getElementById('bsundoToast');
const toastBody = document.getElementById('bsundoToastBody');
const toast = new bootstrap.Toast(toastEl, { autohide: true, delay: 4000 });

let items = MESSAGES.map((text, id) => ({ id, text }));
let lastRemoved = null;
let lastIndex = -1;

function render() {
  list.innerHTML = items.map(item =>
    '<li class="bsundo-item" data-id="' + item.id + '"><span>' + item.text +
    '</span><button type="button" class="bsundo-remove" data-id="' + item.id + '">&times;</button></li>'
  ).join('') || '<li class="bsundo-item text-muted">Inbox is empty.</li>';
}

list.addEventListener('click', e => {
  const btn = e.target.closest('.bsundo-remove');
  if (!btn) return;
  const id = Number(btn.dataset.id);
  lastIndex = items.findIndex(i => i.id === id);
  lastRemoved = items[lastIndex];
  items = items.filter(i => i.id !== id);
  render();

  toastBody.textContent = '"' + lastRemoved.text + '" deleted.';
  toast.show();
});

document.getElementById('bsundoBtn').addEventListener('click', () => {
  if (!lastRemoved) return;
  items.splice(Math.min(lastIndex, items.length), 0, lastRemoved);
  lastRemoved = null;
  render();
  toast.hide();
});

render();