⚙️

📋

👁️

📋 


      

    

  

  
    
  
    

    




    ${escHtml(state.meta.preheader)} ‌ ‌ ‌ ‌ ‌ ‌
    

    

    

${sectionsHtml}

    

    

    


`;
}

function render() {
  // section list
  const list = $('#section-list');
  list.innerHTML = state.sections.map((s, i) =>
    `
    
       ${t(s.type)}
       
     
    `).join('') + ``;
  // section editor
  const editor = $('#section-editor');
  const s = state.sections[state.activeIdx];
  if (!s) { editor.innerHTML = ''; }
  else {
    let fields = '';
    if (s.type === 'header') fields = `
    `;
    if (s.type === 'hero') fields = `
    `;
    if (s.type === 'text') fields = `
    `;
    if (s.type === 'cta') fields = `
    `;
    editor.innerHTML = `
    Edit: ${t(s.type)}
    ${fields}`;
  }
  // output
  const html = renderHtml();
  $('#code-out').textContent = html;
  const iframe = $('#preview');
  iframe.srcdoc = html;
}

function bind() {
  // meta
  ['subject','preheader','from','company','color','bg'].forEach(k => {
    const el = $('#f-' + k);
    el.addEventListener('input', () => { state.meta[k] = el.value; render(); });
  });
  // section list clicks
  $('#section-list').addEventListener('click', e => {
    if (e.target.dataset.idx !== undefined) { state.activeIdx = +e.target.dataset.idx; render(); return; }
    if (e.target.dataset.del !== undefined) { state.sections.splice(+e.target.dataset.del, 1); state.activeIdx = Math.min(state.activeIdx, state.sections.length - 1); render(); return; }
    if (e.target.id === 'add-sec') { addSection('text'); return; }
  });
  // editor changes
  const ed = $('#section-editor');
  ed.addEventListener('input', e => {
    const s = state.sections[state.activeIdx]; if (!s) return;
    const id = e.target.id;
    if (id === 's-title') s.title = e.target.value;
    if (id === 's-heading') s.heading = e.target.value;
    if (id === 's-sub') s.sub = e.target.value;
    if (id === 's-body') s.body = e.target.value;
    if (id === 's-img') s.img = e.target.value;
    if (id === 's-label') s.label = e.target.value;
    if (id === 's-url') s.url = e.target.value;
    render();
  });
  ed.addEventListener('click', e => { if (e.target.id === 'del-sec') { state.sections.splice(state.activeIdx, 1); state.activeIdx = Math.max(0, state.activeIdx - 1); render(); } });
  // template buttons
  $$('.et-template button').forEach(b => b.onclick = () => loadTemplate(b.dataset.tpl));
}

function addSection(type, data) {
  state.sections.push(Object.assign({ type }, data || {}));
  state.activeIdx = state.sections.length - 1;
  render();
}

function loadTemplate(name) {
  state.sections = [];
  if (name === 'welcome') {
    addSection('header', { title: 'Welcome to Acme!' });
    addSection('hero', { heading: 'Thanks for joining us!', sub: 'We are thrilled to have you on board. Here is what you can expect:', img: '' });
    addSection('text', { heading: 'What is next?', body: 'Get started with our 5-minute quickstart guide and explore the dashboard. If you have any questions, our team is always happy to help.' });
    addSection('cta', { heading: 'Ready to dive in?', label: 'Go to Dashboard', url: 'https://example.com/dashboard' });
    addSection('footer', {});
  } else if (name === 'promo') {
    addSection('header', { title: '🎉 Flash Sale!' });
    addSection('hero', { heading: '50% off everything', sub: 'For the next 48 hours only.', img: '' });
    addSection('cta', { heading: 'Shop now and save big', label: 'Shop the Sale', url: 'https://example.com/sale' });
    addSection('footer', {});
  } else if (name === 'receipt') {
    addSection('header', { title: 'Order Confirmed' });
    addSection('text', { heading: 'Thanks for your order!', body: 'Your order #12345 has been received and is being processed. We will send a shipping notification once your items are on the way.' });
    addSection('cta', { heading: 'View order details', label: 'View Order', url: 'https://example.com/orders/12345' });
    addSection('footer', {});
  } else if (name === 'newsletter') {
    addSection('header', { title: 'The Weekly Dispatch' });
    addSection('text', { heading: 'Top stories this week', body: 'Catch up on the latest industry news, deep-dive tutorials and product updates curated by our team.' });
    addSection('cta', { heading: 'Read more on our blog', label: 'Read the Blog', url: 'https://example.com/blog' });
    addSection('footer', {});
  }
  state.activeIdx = 0;
  render();
}

// initialize labels
$('#lbl-settings').textContent = t('lblSettings');
$('#lbl-sections').textContent = t('lblSections');
$('#lbl-subj').textContent = t('lblSubj');
$('#lbl-pre').textContent = t('lblPre');
$('#lbl-from').textContent = t('lblFrom');
$('#lbl-company').textContent = t('lblCompany');
$('#lbl-color').textContent = t('lblColor');
$('#lbl-bg').textContent = t('lblBg');
$('#lbl-preview').textContent = t('lblPreview');
$('#lbl-html').textContent = t('lblHtml');
$('#f-subject').value = state.meta.subject;
$('#f-preheader').value = state.meta.preheader;
$('#f-from').value = state.meta.from;
$('#f-company').value = state.meta.company;
$('#f-color').value = state.meta.color;
$('#f-bg').value = state.meta.bg;

bind();
loadTemplate('welcome');

$('#btn-cpy').onclick = () => copyText($('#code-out').textContent);
$('#btn-dl').onclick = () => {
  const v = $('#code-out').textContent;
  const blob = new Blob([v], { type: 'text/html' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = 'email-template.html';
  a.click();
  URL.revokeObjectURL(url);
};

GZ.renderToolPage({
  category: 'text',
  titleKey: 'toolTitle',
  descKey: 'toolDesc',
  howToSteps: ['step1','step2','step3','step4'],
  related: [
    {icon:'✉️', href:'/text/email-signature.html', name:'Email Signature'},
    {icon:'📄', href:'/text/invoice-generator.html', name:'Invoice Generator'},
    {icon:'🏷️', href:'/text/hashtag-generator.html', name:'Hashtag Generator'},
    {icon:'📱', href:'/social/og-meta.html', name:'OG Meta'},
  ]
});