/** Permissions Matrix pattern — capability rows × role columns. */

const renderEditable = (v) =>
  `<check-ui ${v ? 'checked' : ''}></check-ui>`;

const columns = [
  { key: 'capability', label: 'Capability', width: 220 },
  { key: 'viewer',  label: 'Viewer',  type: 'boolean', width: 90 },
  { key: 'member',  label: 'Member',  type: 'boolean', width: 90 },
  { key: 'admin',   label: 'Admin',   type: 'boolean', width: 90 },
  { key: 'owner',   label: 'Owner',   type: 'boolean', width: 90 },
  { key: 'custom',  label: 'Custom',  align: 'center', width: 90, render: renderEditable },
];

const data = [
  { capability: 'Read content',       viewer: true,  member: true,  admin: true,  owner: true, custom: true  },
  { capability: 'Comment on content', viewer: false, member: true,  admin: true,  owner: true, custom: true  },
  { capability: 'Edit own content',   viewer: false, member: true,  admin: true,  owner: true, custom: false },
  { capability: 'Manage members',     viewer: false, member: false, admin: true,  owner: true, custom: false },
  { capability: 'Delete workspace',   viewer: false, member: false, admin: false, owner: true, custom: false },
];

export default function setup(router) {
  const table = router.querySelector('#pat-perm-matrix');
  if (!table) return;
  table.columns = columns;
  table.data = data;
}
