import { markRaw, defineAsyncComponent } from 'vue'

export default
{
  name: 'contact',
  data: { email: '', phone: '', german: { name: '', role: '' }, english: { name: '', role: '' }, errors: [] },
  renderDesktop: (element, lang) => `
    <tr section="${element.id}">
      <td align="center">
          <table align="center" width="500px"
              style="border: 1px solid #46003A;">
              <tr>
                  <td align="center">
                      <table>
                          <tr>
                              <td>
                                  <p
                                      style="font-size: 60px; padding-right: 10px; padding-left: 10px; margin:0px;">
                                      &#128100;</p>
                              </td>
                              <td>
                                  <table align="center">
                                      <tr>
                                          <td>
                                              <p
                                                  style="padding-top: 5px; margin: 0px; margin-right:20px">
                                                  <b>${element.data[lang].name}</b></p>
                                          </td>
                                      </tr>
                                      <tr>
                                          <td>
                                              <table>` +
                                              (element.data[lang].role ? `
                                                  <tr>
                                                      <td
                                                          style="padding: 0px; margin: 0px; max-width:500px; word-break:break-all;">
                                                          ${element.data[lang].role} </td>
                                                  </tr>
                                              ` : '') + `
                                                  <tr>
                                                      <td
                                                          style="padding: 0px; margin: 0px;">
                                                          <table>
                                                              <tbody>
                                                                  <tr>` +
                                                                    (element.data.phone ? `<td><a style="margin-right: 20px;" href="tel:${element.data.phone}">${element.data.phone}</a></td>` : '') +
                                                                    (element.data.email ? `<td><a style="margin-right: 20px;" href="mailto:${element.data.email}">${element.data.email}</a></td>` : '') +
                                                                  `</tr>
                                                              </tbody>
                                                          </table>
                                                      </td>
                                                  </tr>
                                              </table>
                                          </td>
                                      </tr>
                                  </table>
                              </td>
                          </tr>
                      </table>
                  </td>
              </tr>

          </table>
      </td>
    </tr>
  `,
  renderMobile: (element, lang) => `
  <tr>
  <td align="center">
      <table align="center" width="800px"
          style="border: 4px solid #46003A;">
          <tr>
              <td>
                  <table>
                      <tr>
                          <td>
                              <p
                                  style="font-size: 150px; padding-right: 10px; padding-left: 10px; margin:0px;">
                                  &#128100;</p>
                          </td>
                          <td>
                              <table align="center">
                                  <tr>
                                      <td>
                                          <p
                                              style="padding-top: 5px; margin: 0px; margin-right: 50px; font-size: 50px;">
                                              ${element.data[lang].name}</p>
                                      </td>
                                  </tr>
                                  <tr>
                                      <td>
                                          <table>` +
                                              (element.data[lang].role ? `
                                              <tr>
                                                  <td
                                                      style="padding: 0px; margin: 0px; font-size: 30px;">
                                                      ${element.data[lang].role} </td>
                                              </tr>
                                              ` : '') +
                                              (element.data.phone ? `
                                                <tr>
                                                    <td
                                                        style="padding: 0px; margin: 0px; font-size: 30px;">
                                                        <a href="tel:${element.data.phone}">${element.data.phone}</a></td>
                                                </tr>
                                                ` : '') +
                                                (element.data.email ? `
                                                  <tr>
                                                      <td
                                                          style="padding: 0px; margin: 0px; font-size: 30px;">
                                                          <a href="mailto:${element.data.email}">${element.data.email}</a></td>
                                                  </tr>
                                                  ` : '') + `
                                          </table>
                                      </td>
                                  </tr>
                              </table>
                          </td>
                      </tr>
                  </table>
              </td>
          </tr>
      </table>
  </td>
  </tr>
  `,
  component: markRaw(defineAsyncComponent(() => import('src/components/NewsletterElements/ContactElement.vue')))
}