<!doctype html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="color-scheme" content="light dark" />
    <meta name="supported-color-schemes" content="light dark" />
    <title>Email</title>
    <style media="all" type="text/css">
      /* Apple Mail / iOS Mail / some webmail */
      @media (prefers-color-scheme: dark) {
        body {
          background-color: #181a1b !important;
          color: #ffffff !important;
        }
        .divider {
          border-top: 1px solid #3e3f41 !important;
        }
      }

      /* For Mobile */
      @media only screen and (max-width: 640px) {
        .container {
          width: 100% !important;
          padding-left: 10px !important;
          padding-right: 10px !important;
        }
        .btn a {
          font-size: 16px !important;
          max-width: 100% !important;
          width: 100% !important;
        }
      }

      /* For Outlook */
      @media all {
        .ExternalClass {
          width: 100%;
        }
        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div {
          line-height: 100%;
        }
      }
    </style>
  </head>
  <body
    style="
      font-family: Helvetica, sans-serif;
      -webkit-font-smoothing: antialiased;
      font-size: 15px;
      -ms-text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%;
      background-color: #f8f8f8;
      color: black;
      margin: 0;
      padding: 0;
    "
  >
    <table
      role="presentation"
      border="0"
      cellpadding="0"
      cellspacing="0"
      style="
        border-collapse: separate;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
        width: 100%;
      "
      width="100%"
    >
      <tr>
        <td style="vertical-align: top" valign="top">&nbsp;</td>
        <td class="container" width="600" valign="top" style="padding: 25px">
          <!-- Preheader (inbox preview) -->
          <span
            class="preheader"
            style="
              color: transparent;
              display: none;
              height: 0;
              max-height: 0;
              max-width: 0;
              opacity: 0;
              overflow: hidden;
              mso-hide: all;
              visibility: hidden;
              width: 0;
            "
          >
            You requested to change your email address. Please verify your new
            email by clicking the button below.
          </span>

          <a href="https://linkwarden.app" target="_blank">
            <img
              style="width: 50px"
              src="https://raw.githubusercontent.com/linkwarden/linkwarden/2c727ccd478b911015b6a0d604c6fca97849c591/assets/logo_small.png"
              alt="Linkwarden"
            />
          </a>

          <!-- SPACER -->
          <table
            role="presentation"
            width="100%"
            cellpadding="0"
            cellspacing="0"
          >
            <tr>
              <td height="30" style="line-height: 30px; font-size: 0">
                &nbsp;
              </td>
            </tr>
          </table>

          <h1 style="font-size: 24px; font-weight: bold; margin: 0">
            Verify your new Linkwarden email address
          </h1>

          <!-- SPACER -->
          <table
            role="presentation"
            width="100%"
            cellpadding="0"
            cellspacing="0"
          >
            <tr>
              <td height="30" style="line-height: 30px; font-size: 0">
                &nbsp;
              </td>
            </tr>
          </table>

          <p style="font-weight: normal; margin: 0">Hi {{user}}!</p>

          <!-- SPACER -->
          <table
            role="presentation"
            width="100%"
            cellpadding="0"
            cellspacing="0"
          >
            <tr>
              <td height="20" style="line-height: 20px; font-size: 0">
                &nbsp;
              </td>
            </tr>
          </table>

          <p style="font-weight: normal; margin: 0">
            You recently requested to change the email address associated with
            your <a href="{{baseUrl}}">Linkwarden</a> account. To verify your
            new email address, please click the button below.
          </p>

          <!-- SPACER -->
          <table
            role="presentation"
            width="100%"
            cellpadding="0"
            cellspacing="0"
          >
            <tr>
              <td height="20" style="line-height: 20px; font-size: 0">
                &nbsp;
              </td>
            </tr>
          </table>

          <p style="font-weight: bold; margin: 0; margin-bottom: 5px">
            Old Email:
          </p>
          <p style="font-weight: normal; margin: 0">{{oldEmail}}</p>

          <!-- SPACER -->
          <table
            role="presentation"
            width="100%"
            cellpadding="0"
            cellspacing="0"
          >
            <tr>
              <td height="20" style="line-height: 20px; font-size: 0">
                &nbsp;
              </td>
            </tr>
          </table>

          <p style="font-weight: bold; margin: 0; margin-bottom: 5px">
            New Email:
          </p>
          <p style="font-weight: normal; margin: 0">{{newEmail}}</p>

          <!-- SPACER -->
          <table
            role="presentation"
            width="100%"
            cellpadding="0"
            cellspacing="0"
          >
            <tr>
              <td height="30" style="line-height: 30px; font-size: 0">
                &nbsp;
              </td>
            </tr>
          </table>

          <table
            role="presentation"
            border="0"
            cellpadding="0"
            cellspacing="0"
            class="btn"
            style="box-sizing: border-box; width: 100%; min-width: 100%"
            width="100%"
          >
            <tbody>
              <tr>
                <td align="left" style="vertical-align: top" valign="top">
                  <table
                    role="presentation"
                    border="0"
                    cellpadding="0"
                    cellspacing="0"
                  >
                    <tbody>
                      <tr>
                        <td
                          style="
                            vertical-align: top;
                            border-radius: 8px;
                            text-align: center;
                            background-color: #105f9c;
                          "
                          valign="top"
                          align="center"
                          bgcolor="#00335a"
                        >
                          <a
                            href="{{url}}"
                            target="_blank"
                            style="
                              border-radius: 8px;
                              box-sizing: border-box;
                              cursor: pointer;
                              display: inline-block;
                              font-weight: bold;
                              margin: 0;
                              padding: 10px 18px;
                              text-decoration: none;
                              color: #ffffff;
                            "
                          >
                            Verify New Email
                          </a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </tbody>
          </table>

          <!-- SPACER -->
          <table
            role="presentation"
            width="100%"
            cellpadding="0"
            cellspacing="0"
          >
            <tr>
              <td height="20" style="line-height: 20px; font-size: 0">
                &nbsp;
              </td>
            </tr>
          </table>

          <hr
            class="divider"
            style="border: none; border-top: 1px solid #eaebed; width: 100%"
          />

          <!-- SPACER -->
          <table
            role="presentation"
            width="100%"
            cellpadding="0"
            cellspacing="0"
          >
            <tr>
              <td height="20" style="line-height: 20px; font-size: 0">
                &nbsp;
              </td>
            </tr>
          </table>

          <p
            style="
              font-size: 12px;
              font-weight: normal;
              margin: 0;
              margin-bottom: 5px;
              color: #868686;
            "
          >
            If you’re having trouble clicking the button, click on the following
            link:
          </p>

          <a
            style="
              font-size: 10px;
              font-weight: normal;
              margin: 0;
              margin-bottom: 16px;
              word-break: break-all;
              color: rgb(89, 89, 179);
              text-decoration: underline;
            "
            href="{{url}}"
          >
            {{url}}
          </a>
        </td>
        <td style="vertical-align: top" valign="top">&nbsp;</td>
      </tr>
    </table>
  </body>
</html>
