<div class="container py-5 d-flex justify-content-center">
  <div class="card bsapi-card">
    <div class="card-body p-3">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <div class="d-flex align-items-center gap-2">
          <span class="badge text-bg-success">200 OK</span>
          <span class="small text-muted">GET /api/orders/1042</span>
        </div>
        <button type="button" class="btn btn-sm btn-outline-secondary" id="bsapiCopy">Copy JSON</button>
      </div>
      <div class="bsapi-tree" id="bsapiTree"></div>
    </div>
  </div>
</div>

.bsapi-card { width: 440px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsapi-tree {
  background: #14151a; color: #e1e4e8; border-radius: 10px; padding: 12px 14px;
  font: 12.5px/1.6 ui-monospace, Menlo, Consolas, monospace; max-height: 320px; overflow: auto;
}
.bsapi-key { color: #7dd3fc; }
.bsapi-string { color: #86efac; }
.bsapi-number { color: #fca5a5; }
.bsapi-bool { color: #fcd34d; }
.bsapi-toggle { cursor: pointer; user-select: none; color: #9ca3af; }
.bsapi-toggle:hover { color: #e1e4e8; }
.bsapi-children { margin-left: 18px; }
.bsapi-children.bsapi-collapsed { display: none; }

const DATA = {
  id: 1042,
  status: 'shipped',
  total: 128.5,
  paid: true,
  customer: { name: 'Dana Reyes', email: 'dana@acme.co' },
  items: [
    { sku: 'TR-4021', qty: 2, price: 42 },
    { sku: 'WB-1188', qty: 1, price: 44.5 },
  ],
};

const tree = document.getElementById('bsapiTree');

function valueSpan(value) {
  if (typeof value === 'string') return '<span class="bsapi-string">"' + value + '"</span>';
  if (typeof value === 'number') return '<span class="bsapi-number">' + value + '</span>';
  if (typeof value === 'boolean') return '<span class="bsapi-bool">' + value + '</span>';
  return String(value);
}

let nodeId = 0;

function renderNode(value, keyLabel) {
  const isObject = value !== null && typeof value === 'object';
  const prefix = keyLabel !== undefined ? '<span class="bsapi-key">"' + keyLabel + '"</span>: ' : '';

  if (!isObject) return '<div>' + prefix + valueSpan(value) + '</div>';

  const id = 'bsapi-node-' + (nodeId++);
  const isArray = Array.isArray(value);
  const entries = Object.entries(value);
  const openBrace = isArray ? '[' : '{';
  const closeBrace = isArray ? ']' : '}';

  const children = entries.map(([k, v]) => renderNode(v, isArray ? undefined : k)).join('');

  return '<div>' + prefix +
    '<span class="bsapi-toggle" data-target="' + id + '">&#9662; ' + openBrace + '</span>' +
    '<div class="bsapi-children" id="' + id + '">' + children + '</div>' +
    closeBrace + '</div>';
}

tree.innerHTML = renderNode(DATA);

tree.addEventListener('click', e => {
  const toggle = e.target.closest('.bsapi-toggle');
  if (!toggle) return;
  const child = document.getElementById(toggle.dataset.target);
  const collapsed = child.classList.toggle('bsapi-collapsed');
  toggle.innerHTML = (collapsed ? '&#9656; ' : '&#9662; ') + toggle.textContent.trim().slice(-1);
});

document.getElementById('bsapiCopy').addEventListener('click', () => {
  navigator.clipboard.writeText(JSON.stringify(DATA, null, 2));
});