(function(){
  window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
  window.BridgeBlocksCustomElements.push(function(ctx){
    const { bm, addOnce, css } = ctx;
    const headStyle = css({'text-align':'left','padding':'8px','border':'1px solid #e2e8f0','background-color':'#f8fafc','font-size':'13px'});
    const cellStyle = css({'padding':'8px','border':'1px solid #e2e8f0','font-size':'13px'});
    addOnce(bm, 'cust-table', { id:'cust-table', label:'🧩 Tabelle (2xN)',
      content: {
        tagName: 'table',
        attributes: {
          'data-bridge-table': '1',
          'data-bridge-rows': '3',
          'data-bridge-cols': '2',
          role: 'presentation',
          width: '100%',
          cellpadding: '0',
          cellspacing: '0',
          style: css({'font-family':'Arial,sans-serif','border-collapse':'collapse','width':'100%','margin-bottom':'16px'}),
          'data-gjs-selectable': 'true',
          'data-gjs-hoverable': 'true',
        },
        components: [{
          tagName: 'tbody',
          selectable: false,
          hoverable: false,
          draggable: false,
          highlightable: false,
          components: [
            {
              tagName: 'tr',
              selectable: false,
              hoverable: false,
              draggable: false,
              highlightable: false,
              components: [
                { type:'text', tagName:'th', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: headStyle, 'data-gjs-draggable':'false' }, content:'Spalte A' },
                { type:'text', tagName:'th', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: headStyle, 'data-gjs-draggable':'false' }, content:'Spalte B' },
              ],
            },
            {
              tagName: 'tr',
              selectable: false,
              hoverable: false,
              draggable: false,
              highlightable: false,
              components: [
                { type:'text', tagName:'td', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: cellStyle, 'data-gjs-draggable':'false' }, content:'Zeile 1' },
                { type:'text', tagName:'td', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: cellStyle, 'data-gjs-draggable':'false' }, content:'...' },
              ],
            },
            {
              tagName: 'tr',
              selectable: false,
              hoverable: false,
              draggable: false,
              highlightable: false,
              components: [
                { type:'text', tagName:'td', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: cellStyle, 'data-gjs-draggable':'false' }, content:'Zeile 2' },
                { type:'text', tagName:'td', editable:true, selectable:true, hoverable:true, draggable:false, attributes:{ style: cellStyle, 'data-gjs-draggable':'false' }, content:'...' },
              ],
            },
          ],
        }],
      }
    });
  });
})();