export const invitationToCollaborate = (
  email: string,
  typebotUrl: string
) => `<!DOCTYPE html>
<html
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:v="urn:schemas-microsoft-com:vml"
  xmlns:o="urn:schemas-microsoft-com:office:office"
>
  <head>
    <title></title>
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <style type="text/css">
      #outlook a {
        padding: 0;
      }
      body {
        margin: 0;
        padding: 0;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
      }
      table,
      td {
        border-collapse: collapse;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
      }
      img {
        border: 0;
        height: auto;
        line-height: 100%;
        outline: none;
        text-decoration: none;
        -ms-interpolation-mode: bicubic;
      }
      p {
        display: block;
        margin: 13px 0;
      }
    </style>
    <!--[if mso]>
      <noscript>
        <xml>
          <o:OfficeDocumentSettings>
            <o:AllowPNG />
            <o:PixelsPerInch>96</o:PixelsPerInch>
          </o:OfficeDocumentSettings>
        </xml>
      </noscript>
    <![endif]-->
    <!--[if lte mso 11]>
      <style type="text/css">
        .mj-outlook-group-fix {
          width: 100% !important;
        }
      </style>
    <![endif]-->
    <style type="text/css">
      @media only screen and (min-width: 480px) {
        .mj-column-per-100 {
          width: 100% !important;
          max-width: 100%;
        }
      }
    </style>
    <style media="screen and (min-width:480px)">
      .moz-text-html .mj-column-per-100 {
        width: 100% !important;
        max-width: 100%;
      }
    </style>
    <style type="text/css">
      @media only screen and (max-width: 480px) {
        table.mj-full-width-mobile {
          width: 100% !important;
        }
        td.mj-full-width-mobile {
          width: auto !important;
        }
      }
    </style>
  </head>
  <body style="word-spacing: normal; background-color: #ffffff">
    <div style="background-color: #ffffff">
      <!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
      <div style="margin: 0px auto; max-width: 600px">
        <table
          align="center"
          border="0"
          cellpadding="0"
          cellspacing="0"
          role="presentation"
          style="width: 100%"
        >
          <tbody>
            <tr>
              <td
                style="
                  border: 1px solid #e2e8f0;
                  direction: ltr;
                  font-size: 0px;
                  padding: 0;
                  text-align: center;
                "
              >
                <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:598px;" width="598" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
                <div
                  style="
                    background: #ffffff;
                    background-color: #ffffff;
                    margin: 0px auto;
                    max-width: 598px;
                  "
                >
                  <table
                    align="center"
                    border="0"
                    cellpadding="0"
                    cellspacing="0"
                    role="presentation"
                    style="
                      background: #ffffff;
                      background-color: #ffffff;
                      width: 100%;
                    "
                  >
                    <tbody>
                      <tr>
                        <td
                          style="
                            direction: ltr;
                            font-size: 0px;
                            padding: 0;
                            padding-bottom: 0px;
                            text-align: center;
                          "
                        >
                          <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
                          <div
                            class="mj-column-per-100 mj-outlook-group-fix"
                            style="
                              font-size: 0px;
                              text-align: left;
                              direction: ltr;
                              display: inline-block;
                              vertical-align: top;
                              width: 100%;
                            "
                          >
                            <table
                              border="0"
                              cellpadding="0"
                              cellspacing="0"
                              role="presentation"
                              width="100%"
                            >
                              <tbody>
                                <tr>
                                  <td style="vertical-align: top; padding: 0">
                                    <table
                                      border="0"
                                      cellpadding="0"
                                      cellspacing="0"
                                      role="presentation"
                                      width="100%"
                                    >
                                      <tbody>
                                        <tr>
                                          <td
                                            align="center"
                                            style="
                                              font-size: 0px;
                                              padding: 0px;
                                              word-break: break-word;
                                            "
                                          >
                                            <table
                                              border="0"
                                              cellpadding="0"
                                              cellspacing="0"
                                              role="presentation"
                                              style="
                                                border-collapse: collapse;
                                                border-spacing: 0px;
                                              "
                                            >
                                              <tbody>
                                                <tr>
                                                  <td style="width: 598px">
                                                    <img
                                                      alt="header image"
                                                      height="auto"
                                                      src="https://typebot.s3.eu-west-3.amazonaws.com/assets/invitation-banner.png"
                                                      style="
                                                        border: 0;
                                                        display: block;
                                                        outline: none;
                                                        text-decoration: none;
                                                        height: auto;
                                                        width: 100%;
                                                        font-size: 16px;
                                                      "
                                                      width="598"
                                                    />
                                                  </td>
                                                </tr>
                                              </tbody>
                                            </table>
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          <!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:598px;" width="598" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
                <div
                  style="
                    background: #ffffff;
                    background-color: #ffffff;
                    margin: 0px auto;
                    max-width: 598px;
                  "
                >
                  <table
                    align="center"
                    border="0"
                    cellpadding="0"
                    cellspacing="0"
                    role="presentation"
                    style="
                      background: #ffffff;
                      background-color: #ffffff;
                      width: 100%;
                    "
                  >
                    <tbody>
                      <tr>
                        <td
                          style="
                            direction: ltr;
                            font-size: 0px;
                            padding: 0;
                            padding-bottom: 20px;
                            padding-top: 20px;
                            text-align: center;
                          "
                        >
                          <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
                          <div
                            class="mj-column-per-100 mj-outlook-group-fix"
                            style="
                              font-size: 0px;
                              text-align: left;
                              direction: ltr;
                              display: inline-block;
                              vertical-align: top;
                              width: 100%;
                            "
                          >
                            <table
                              border="0"
                              cellpadding="0"
                              cellspacing="0"
                              role="presentation"
                              width="100%"
                            >
                              <tbody>
                                <tr>
                                  <td style="vertical-align: top; padding: 0">
                                    <table
                                      border="0"
                                      cellpadding="0"
                                      cellspacing="0"
                                      role="presentation"
                                      width="100%"
                                    >
                                      <tbody>
                                        <tr>
                                          <td
                                            align="left"
                                            style="
                                              font-size: 0px;
                                              padding: 10px 40px;
                                              word-break: break-word;
                                            "
                                          >
                                            <div
                                              style="
                                                font-family: Helvetica Neue,
                                                  Helvetica, Helvetica, Arial,
                                                  sans-serif;
                                                font-size: 16px;
                                                line-height: 23px;
                                                text-align: left;
                                                color: #000000;
                                              "
                                            >
                                              You have been invited to
                                              collaborate on a typebot created
                                              by ${email}
                                            </div>
                                          </td>
                                        </tr>
                                        <tr>
                                          <td
                                            align="left"
                                            style="
                                              font-size: 0px;
                                              padding: 10px 40px;
                                              word-break: break-word;
                                            "
                                          >
                                            <div
                                              style="
                                                font-family: Helvetica Neue,
                                                  Helvetica, Helvetica, Arial,
                                                  sans-serif;
                                                font-size: 16px;
                                                line-height: 23px;
                                                text-align: left;
                                                color: #000000;
                                              "
                                            >
                                              From now on you will see this
                                              typebot in your dashboard under
                                              the "Shared with me" button 👍
                                            </div>
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          <!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!--[if mso | IE]></td></tr></table></td></tr><tr><td class="" width="600px" ><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:598px;" width="598" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
                <div
                  style="
                    background: #ffffff;
                    background-color: #ffffff;
                    margin: 0px auto;
                    max-width: 598px;
                  "
                >
                  <table
                    align="center"
                    border="0"
                    cellpadding="0"
                    cellspacing="0"
                    role="presentation"
                    style="
                      background: #ffffff;
                      background-color: #ffffff;
                      width: 100%;
                    "
                  >
                    <tbody>
                      <tr>
                        <td
                          style="
                            direction: ltr;
                            font-size: 0px;
                            padding: 0;
                            padding-bottom: 20px;
                            text-align: center;
                          "
                        >
                          <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:598px;" ><![endif]-->
                          <div
                            class="mj-column-per-100 mj-outlook-group-fix"
                            style="
                              font-size: 0px;
                              text-align: left;
                              direction: ltr;
                              display: inline-block;
                              vertical-align: top;
                              width: 100%;
                            "
                          >
                            <table
                              border="0"
                              cellpadding="0"
                              cellspacing="0"
                              role="presentation"
                              width="100%"
                            >
                              <tbody>
                                <tr>
                                  <td style="vertical-align: top; padding: 0">
                                    <table
                                      border="0"
                                      cellpadding="0"
                                      cellspacing="0"
                                      role="presentation"
                                      width="100%"
                                    >
                                      <tbody>
                                        <tr>
                                          <td
                                            align="center"
                                            vertical-align="middle"
                                            style="
                                              font-size: 0px;
                                              padding: 0;
                                              word-break: break-word;
                                            "
                                          >
                                            <table
                                              border="0"
                                              cellpadding="0"
                                              cellspacing="0"
                                              role="presentation"
                                              style="
                                                border-collapse: separate;
                                                line-height: 100%;
                                              "
                                            >
                                              <tbody>
                                                <tr>
                                                  <td
                                                    align="center"
                                                    bgcolor="#0042da"
                                                    role="presentation"
                                                    style="
                                                      border: none;
                                                      border-radius: 5px;
                                                      cursor: auto;
                                                      mso-padding-alt: 10px 25px;
                                                      background: #0042da;
                                                    "
                                                    valign="middle"
                                                  >
                                                    <a
                                                      href="${typebotUrl}"
                                                      style="
                                                        display: inline-block;
                                                        background: #0042da;
                                                        color: white;
                                                        font-family: Helvetica
                                                            Neue,
                                                          Helvetica, Helvetica,
                                                          Arial, sans-serif;
                                                        font-size: 16px;
                                                        font-weight: 500;
                                                        line-height: 23px;
                                                        margin: 0;
                                                        text-decoration: none;
                                                        text-transform: none;
                                                        padding: 10px 25px;
                                                        mso-padding-alt: 0px;
                                                        border-radius: 5px;
                                                      "
                                                      target="_blank"
                                                      >See the typebot</a
                                                    >
                                                  </td>
                                                </tr>
                                              </tbody>
                                            </table>
                                          </td>
                                        </tr>
                                      </tbody>
                                    </table>
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          <!--[if mso | IE]></td></tr></table><![endif]-->
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!--[if mso | IE]></td></tr></table></td></tr></table><![endif]-->
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!--[if mso | IE]></td></tr></table><![endif]-->
    </div>
  </body>
</html>
`
