(function(){
  window.BridgeBlocksCustomElements = window.BridgeBlocksCustomElements || [];
  window.BridgeBlocksCustomElements.push(function(ctx){
    const { bm, addOnce, css } = ctx;
    addOnce(bm, 'cust-media-left', { id:'cust-media-left', label:'🖼️◀ Text',
      content:{
        type:'default',
        tagName:'table',
        attributes:{
          role:'presentation',
          width:'100%',
          cellpadding:'0',
          cellspacing:'0'
        },
        style:{
          'font-family':'Arial,sans-serif',
          'border-collapse':'collapse',
          'margin-bottom':'16px'
        },
        components:`
          <tr>
            <td width="40%" valign="top" style="${css({padding:'0 8px 0 0'})}">
              <img src="https://placehold.co/400x260" alt="Bild" style="${css({width:'100%',height:'auto',border:'0',display:'block'})}">
            </td>
            <td width="60%" valign="top" style="${css({padding:'0 0 0 8px'})}">
              <p style="${css({margin:'0','font-size':'14px',color:'#0f172a','line-height':'1.5'})}">Text …</p>
            </td>
          </tr>`
      }
    });
  });
})();