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

.bsflag-card { width: 400px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsflag-row { padding: 10px 0; border-bottom: 1px solid #f1f2f5; }
.bsflag-row:last-child { border-bottom: none; }
.bsflag-top { display: flex; justify-content: space-between; align-items: center; }
.bsflag-name { font-size: 13.5px; font-weight: 600; }
.bsflag-desc { font-size: 11.5px; color: #9ca3af; }
.bsflag-rollout { margin-top: 6px; }
.bsflag-rollout.d-none { display: none; }

const FLAGS = [
  { id: 'new-nav', name: 'New navigation', desc: 'Redesigned top nav with mega menu', on: true, rollout: 100 },
  { id: 'ai-summary', name: 'AI summaries', desc: 'Auto-generated summaries on reports', on: true, rollout: 25 },
  { id: 'dark-mode', name: 'Dark mode', desc: 'System-aware dark theme', on: false, rollout: 0 },
  { id: 'bulk-export', name: 'Bulk export', desc: 'Export more than 500 rows at once', on: false, rollout: 0 },
];

const list = document.getElementById('bsflagList');
let flags = FLAGS.map(f => ({ ...f }));

function render() {
  list.innerHTML = flags.map(f =>
    '<li class="bsflag-row" data-id="' + f.id + '">' +
      '<div class="bsflag-top">' +
        '<div><div class="bsflag-name">' + f.name + '</div><div class="bsflag-desc">' + f.desc + '</div></div>' +
        '<div class="form-check form-switch mb-0">' +
          '<input class="form-check-input bsflag-toggle" type="checkbox" role="switch" data-id="' + f.id + '"' + (f.on ? ' checked' : '') + '>' +
        '</div>' +
      '</div>' +
      '<div class="bsflag-rollout' + (f.on ? '' : ' d-none') + '">' +
        '<div class="d-flex justify-content-between small text-muted mb-1">' +
          '<span>Rollout</span><span>' + f.rollout + '%</span>' +
        '</div>' +
        '<input type="range" class="form-range bsflag-slider" min="0" max="100" value="' + f.rollout + '" data-id="' + f.id + '">' +
      '</div>' +
    '</li>'
  ).join('');
}

list.addEventListener('change', e => {
  if (!e.target.classList.contains('bsflag-toggle')) return;
  const flag = flags.find(f => f.id === e.target.dataset.id);
  flag.on = e.target.checked;
  // Turning a flag off resets its rollout to 0 rather than leaving a stale
  // percentage that would be misleading the next time it's switched back on.
  if (!flag.on) flag.rollout = 0;
  else if (flag.rollout === 0) flag.rollout = 100;
  render();
});

list.addEventListener('input', e => {
  if (!e.target.classList.contains('bsflag-slider')) return;
  const flag = flags.find(f => f.id === e.target.dataset.id);
  flag.rollout = Number(e.target.value);
  const label = e.target.closest('.bsflag-rollout').querySelector('span:last-child');
  label.textContent = flag.rollout + '%';
});

render();