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

.bswh-card { width: 440px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bswh-row { border-bottom: 1px solid #f1f2f5; }
.bswh-row:last-child { border-bottom: none; }
.bswh-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 4px; cursor: pointer; }
.bswh-event { font: 700 12.5px ui-monospace, Menlo, Consolas, monospace; }
.bswh-time { font-size: 11px; color: #9ca3af; }
.bswh-body { display: none; padding: 0 4px 10px; }
.bswh-body.bswh-open { display: block; }
.bswh-payload {
  margin: 6px 0 8px; padding: 8px 10px; background: #14151a; color: #e1e4e8;
  border-radius: 8px; font: 11.5px/1.5 ui-monospace, Menlo, Consolas, monospace; overflow-x: auto; white-space: pre;
}

const EVENTS = [
  { event: 'invoice.paid', status: 200, time: '2 min ago', payload: '{ "id": "in_1a2b", "amount": 4900, "currency": "usd" }' },
  { event: 'customer.subscription.updated', status: 500, time: '14 min ago', payload: '{ "id": "sub_9x8y", "status": "past_due" }' },
  { event: 'checkout.session.completed', status: 200, time: '1 hr ago', payload: '{ "id": "cs_7f6e", "customer": "cus_44kd" }' },
  { event: 'invoice.payment_failed', status: 404, time: '3 hr ago', payload: '{ "id": "in_5c4d", "reason": "endpoint not found" }' },
];

const list = document.getElementById('bswhList');
let events = EVENTS.map((e, id) => ({ ...e, id, open: false }));

function toneFor(status) {
  if (status < 300) return 'success';
  if (status < 500) return 'warning';
  return 'danger';
}

function render() {
  list.innerHTML = events.map(ev =>
    '<li class="bswh-row" data-id="' + ev.id + '">' +
      '<div class="bswh-head" data-toggle="' + ev.id + '">' +
        '<div><span class="badge text-bg-' + toneFor(ev.status) + ' me-2">' + ev.status + '</span><span class="bswh-event">' + ev.event + '</span></div>' +
        '<span class="bswh-time">' + ev.time + '</span>' +
      '</div>' +
      '<div class="bswh-body' + (ev.open ? ' bswh-open' : '') + '">' +
        '<pre class="bswh-payload mb-0">' + ev.payload + '</pre>' +
        (ev.status >= 400 ? '<button type="button" class="btn btn-sm btn-outline-danger" data-retry="' + ev.id + '">Retry delivery</button>' : '') +
      '</div>' +
    '</li>'
  ).join('');
}

list.addEventListener('click', e => {
  const head = e.target.closest('.bswh-head');
  const retryBtn = e.target.closest('[data-retry]');

  if (retryBtn) {
    const ev = events.find(x => x.id === Number(retryBtn.dataset.retry));
    retryBtn.textContent = 'Retrying...';
    retryBtn.disabled = true;
    setTimeout(() => {
      ev.status = 200;
      ev.time = 'Just now (retried)';
      render();
    }, 900);
    return;
  }

  if (head) {
    const ev = events.find(x => x.id === Number(head.dataset.toggle));
    ev.open = !ev.open;
    render();
  }
});

render();