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

export function resetPasswordHtml(t: TFunc, username: string, resetUrl: 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('password_reset.greeting', { username })}<br><br>${t('password_reset.intro_body')}<br><br>${t('password_reset.disclaimer')}
              </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%; line-height:1.5;" 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="${resetUrl}" target="_blank" style="display:inline-block; color:#FFFFFF; background-color:#6851FF; padding:15px 32px; border-radius:49px; text-decoration:none;">${t('password_reset.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>
      <!-- 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('password_reset.outro_greeting')}<br><br>${t('password_reset.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>
  `
}