import { markRaw, defineAsyncComponent } from 'vue'

export default
{
  name: 'title',
  data: { german: { title: '', shortTitle: '' }, english: { title: '', shortTitle: '' }, errors: [] },
  renderDesktop: (element, lang) => `
                                      <tr section="${element.id}">
                                        <td align="left"  style="padding-left: 20px; padding-right: 20px; padding-top: 0px; padding-bottom: 0px;">
                                            <a name="${element.id}-${lang}-desktop" id="${element.id}-${lang}-desktop"></a>
                                            <table width="860" cellpadding="0" cellspacing="0">
                                                <tbody>
                                                    <tr>
                                                        <td  style=" vertical-align: bottom;"><h3 style="color:#000000; margin-top: 0px; margin-bottom: 0px;"><strong>${element.data[lang].title}</strong></h3></td>
                                                        <td style=" vertical-align: bottom;" align="end" width="100"><a style="text-decoration: none!important; font-size: 30px;" href="#${lang}-desktop">&#128285 </a></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </td>
                                      </tr>`,
  renderMobile: (element, lang) => `
                                      <tr section="${element.id}">
                                        <td align="left"  style="padding-left: 20px; padding-right: 20px; padding-top: 0px; padding-bottom: 0px;">
                                          <a name="${element.id}-${lang}-mobile" id="${element.id}-${lang}-mobile"></a>
                                          <h3 align="left" style="font-size: 40px;color:#000000; margin-top: 60px; margin-bottom: 0px;"><a style="text-decoration: none!important;" href="#${lang}-mobile">&#128285 </a><strong>${element.data[lang].title}</strong></h3>
                                        </td>
                                      </tr>
  `,
  component: markRaw(defineAsyncComponent(() => import('src/components/NewsletterElements/TitleElement.vue')))
}