import type { TFunc } from './layout.js'

export function verifyEmailHtml(t: TFunc, username: string, emailAddress: string, verifyUrl: string): string {
  return `
    <div style="background-color:#F5F5F5;">
      <!-- email header -->
      <table style="border-collapse:collapse; width:100%;" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td></td>
            <td style="
              margin:auto;
              width:440px;
              height:56px;
              background-color:#6851FF;
              background-image:linear-gradient(to right, #6851FF, #B051FF);
            ">
              <div style="margin:auto; width:126px;">
                <img src="https://cdn.vitrap.com/email/lwth56t.png" height="37" width="126" alt="vitrap" style="color:white; margin-top:4px; font-size:24px; font-family: Arial, Helvetica, sans-serif;">
              </div>
            </td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <!-- 64px vertical margin -->
      <table style="border-collapse:collapse; width:100%;" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td></td>
            <td style="margin:auto; width:440px; height:64px; background-color:#FFFFFF;"></td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <!-- intro -->
      <table style="border-collapse:collapse; line-height:1.5;" width="100%" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td></td>
            <td style="margin:auto; width:440px; background-color:#FFFFFF;">
              <div style="
                text-align:left;
                padding:0 32px;
                box-sizing:border-box;
                font-size:16px;
                font-family:Arial, Helvetica, sans-serif;
              ">
                ${t('verify_email.greeting', { username })}<br><br>${t('verify_email.intro_body')}
              </div>
            </td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <!-- 64px vertical margin -->
      <table style="border-collapse:collapse; width:100%;" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td></td>
            <td style="margin:auto; width:440px; height:64px; background-color:#FFFFFF;"></td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <!-- button -->
      <table style="border-collapse:collapse; width:100%;" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td></td>
            <td style="
              margin:auto;
              width:440px;
              height:49px;
              background-color:#FFFFFF;
              font-size:16px;
              font-family:Arial, Helvetica, sans-serif;
              text-align:center;
            ">
              <a href="${verifyUrl}" target="_blank" style="display:inline-block; color:#FFFFFF; background-color:#6851FF; padding:15px 32px; border-radius:49px; text-decoration:none;">${t('verify_email.button')}</a>
            </td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <!-- 64px vertical margin -->
      <table style="border-collapse:collapse; width:100%;" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td></td>
            <td style="margin:auto; width:440px; height:64px; background-color:#FFFFFF;"></td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <!-- account details heading -->
      <table style="border-collapse:collapse; width:100%; line-height:1.5;" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td></td>
            <td style="
              margin:auto;
              width:440px;
              height:36px;
              background-color:#FFFFFF;
              text-align:center;
            ">
              <div style="color:#888888; font-size:16px; font-family:Arial, Helvetica, sans-serif;">
                ${t('verify_email.account_details_heading')}
              </div>
            </td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <!-- account detail username -->
      <table style="border-collapse:collapse; width:100%; line-height:1.5;" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td></td>
            <td style="width:440px; height:64px; background-color:#FFFFFF;">
              <div style="padding:0 32px; box-sizing:border-box;">
                <div style="
                  border:solid 2px #CCCCCC;
                  border-radius:64px;
                  text-align:start;
                  padding:13px 20px;
                  overflow:hidden;
                  white-space:nowrap;
                  text-overflow:ellipsis;
                  font-size:16px;
                  font-family:Arial, Helvetica, sans-serif;
                ">
                  <span style="color:#BBBBBB; display:inline-block; text-align:end; width:80px;">
                    ${t('verify_email.username_label')}
                  </span>
                  <span>${username}</span>
                </div>
              </div>
            </td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <!-- account detail email -->
      <table style="border-collapse:collapse; width:100%; line-height:1.5;" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td></td>
            <td style="width:440px; height:64px; background-color:#FFFFFF;">
              <div style="padding:0 32px; box-sizing:border-box;">
                <div style="
                  border:solid 2px #CCCCCC;
                  border-radius:64px;
                  text-align:start;
                  padding:13px 20px;
                  overflow:hidden;
                  white-space:nowrap;
                  text-overflow:ellipsis;
                  font-size:16px;
                  font-family:Arial, Helvetica, sans-serif;
                ">
                  <span style="color:#BBBBBB; display:inline-block; text-align:end; width:80px;">
                    ${t('verify_email.email_label')}
                  </span>
                  <span style="color:#000;">${emailAddress}</span>
                </div>
              </div>
            </td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <!-- 64px vertical margin -->
      <table style="border-collapse:collapse; width:100%;" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td></td>
            <td style="margin:auto; width:440px; height:64px; background-color:#FFFFFF;"></td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <!-- outro -->
      <table style="border-collapse:collapse; width:100%; line-height:1.5;" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td></td>
            <td style="margin:auto; width:440px; height:64px; background-color:#FFFFFF;">
              <div style="
                text-align:left;
                padding:0 32px;
                box-sizing:border-box;
                font-size:16px;
                font-family:Arial, Helvetica, sans-serif;
              ">
                ${t('verify_email.outro_greeting')}<br><br>${t('verify_email.team_name')}
              </div>
            </td>
            <td></td>
          </tr>
        </tbody>
      </table>
      <!-- 64px vertical margin -->
      <table style="border-collapse:collapse; width:100%;" cellspacing="0" cellpadding="0" border="0">
        <tbody>
          <tr>
            <td></td>
            <td style="margin:auto; width:440px; height:64px; background-color:#FFFFFF;"></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  `
}