<div class="container py-5 d-flex justify-content-center">
  <div class="card bsperm-card">
    <div class="card-body p-3">
      <h6 class="fw-bold mb-2">Role permissions</h6>
      <div class="table-responsive">
        <table class="table table-sm align-middle mb-0" id="bspermTable">
          <thead>
            <tr>
              <th>Permission</th>
              <th class="text-center">Viewer</th>
              <th class="text-center">Editor</th>
              <th class="text-center">Admin</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
      <p class="small text-muted mt-2 mb-0">Click a cell to toggle it. Admin always keeps every permission.</p>
    </div>
  </div>
</div>

.bsperm-card { width: 420px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bsperm-cell { cursor: pointer; font-size: 16px; }
.bsperm-cell.bsperm-locked { cursor: not-allowed; opacity: .6; }
.bsperm-on { color: #198754; }
.bsperm-off { color: #d1d5db; }

const PERMISSIONS = ['View content', 'Edit content', 'Publish content', 'Manage billing', 'Manage users'];
const ROLES = ['viewer', 'editor', 'admin'];

// Admin is modeled as always-true and locked, rather than just pre-checked —
// this is what actually prevents someone from accidentally locking an admin
// out of a permission the role is supposed to always guarantee.
const grid = {
  viewer: [true, false, false, false, false],
  editor: [true, true, true, false, false],
  admin: PERMISSIONS.map(() => true),
};

const tbody = document.querySelector('#bspermTable tbody');

function render() {
  tbody.innerHTML = PERMISSIONS.map((perm, row) =>
    '<tr><td>' + perm + '</td>' +
    ROLES.map(role => {
      const locked = role === 'admin';
      const on = grid[role][row];
      return '<td class="text-center bsperm-cell' + (locked ? ' bsperm-locked' : '') +
        '" data-role="' + role + '" data-row="' + row + '">' +
        '<span class="' + (on ? 'bsperm-on' : 'bsperm-off') + '">' + (on ? '\u2713' : '\u2014') + '</span></td>';
    }).join('') + '</tr>'
  ).join('');
}

tbody.addEventListener('click', e => {
  const cell = e.target.closest('.bsperm-cell');
  if (!cell || cell.classList.contains('bsperm-locked')) return;
  const role = cell.dataset.role;
  const row = Number(cell.dataset.row);
  grid[role][row] = !grid[role][row];
  render();
});

render();