<div class="container py-5 d-flex justify-content-center">
  <div class="card bsenv-card">
    <div class="card-body p-3">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h6 class="fw-bold mb-0">Environment variables</h6>
        <span class="badge text-bg-secondary">production</span>
      </div>
      <ul class="list-unstyled mb-0" id="bsenvList"></ul>
    </div>
  </div>
</div>

.bsenv-card { width: 440px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsenv-row { padding: 7px 0; border-bottom: 1px solid #f1f2f5; }
.bsenv-row:last-child { border-bottom: none; }
.bsenv-key { font: 700 12px ui-monospace, Menlo, Consolas, monospace; color: #374151; }
.bsenv-line { display: flex; align-items: center; gap: 8px; }
.bsenv-value { font: 12px ui-monospace, Menlo, Consolas, monospace; color: #6b7280; flex-grow: 1; word-break: break-all; }
.bsenv-toggle, .bsenv-copy { border: none; background: none; color: #9ca3af; cursor: pointer; font-size: 11px; flex-shrink: 0; }
.bsenv-toggle:hover, .bsenv-copy:hover { color: #6366f1; }

const VARS = [
  { key: 'NODE_ENV', value: 'production', secret: false },
  { key: 'DATABASE_URL', value: 'postgres://admin:S9xk2Lm4@db.internal:5432/app', secret: true },
  { key: 'STRIPE_SECRET_KEY', value: 'sk_live_51H8x2FaK3n0tR3alKey987ab', secret: true },
  { key: 'PUBLIC_API_URL', value: 'https://api.example.com/v1', secret: false },
  { key: 'JWT_SIGNING_SECRET', value: 'p9Q7wZrT1mXaB4vC6nH2sJ8k', secret: true },
];

function mask(value) {
  return '\u2022'.repeat(Math.min(value.length, 24));
}

const list = document.getElementById('bsenvList');
let revealed = new Set();

function render() {
  list.innerHTML = VARS.map((v, i) => {
    const isRevealed = !v.secret || revealed.has(i);
    return '<li class="bsenv-row">' +
      '<div class="bsenv-key">' + v.key + '</div>' +
      '<div class="bsenv-line">' +
        '<span class="bsenv-value">' + (isRevealed ? v.value : mask(v.value)) + '</span>' +
        (v.secret ? '<button type="button" class="bsenv-toggle" data-action="toggle" data-index="' + i + '">' + (isRevealed ? 'Hide' : 'Reveal') + '</button>' : '') +
        '<button type="button" class="bsenv-copy" data-action="copy" data-index="' + i + '">Copy</button>' +
      '</div>' +
    '</li>';
  }).join('');
}

list.addEventListener('click', e => {
  const btn = e.target.closest('button');
  if (!btn) return;
  const index = Number(btn.dataset.index);

  if (btn.dataset.action === 'toggle') {
    if (revealed.has(index)) revealed.delete(index); else revealed.add(index);
    render();
  } else if (btn.dataset.action === 'copy') {
    navigator.clipboard.writeText(VARS[index].value).then(() => {
      const original = btn.textContent;
      btn.textContent = 'Copied';
      setTimeout(() => { btn.textContent = original; }, 1200);
    });
  }
});

render();