{% load static %}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Password Reset</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="{% static 'client/css/password_mail_template.css' %}">
</head>

<body style="background-color: #e9ecef;">
  <!-- start body -->
  <table border="0" cellpadding="0" cellspacing="0" width="100%">

    <!-- start logo -->
    <tr>
      <td align="center" bgcolor="#e9ecef">
        <!-- not worked -->
        <img src="https://i.ibb.co/JkMNFWw/DBK-Creation-logos-black1.png" alt="Logo" border="0"
          style="display: block; width: 200px; max-width: 200px;">
      </td>
    </tr>
    <!-- end logo -->

    <!-- start hero -->
    <tr>
      <td align="center" bgcolor="#e9ecef">
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
          <tr>
            <td align="left" bgcolor="#ffffff"
              style="padding: 36px 24px 0; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; border-top: 3px solid #d4dadf;">
              <h3
                style="margin: 0; text-align: center; color: cadetblue; font-size: 28px; font-weight: 700; letter-spacing: -1px; line-height: 48px;">
                Reset Your Password</h3>
            </td>
          </tr>
        </table>

      </td>
    </tr>
    <!-- end hero -->

    <!-- start copy block -->
    <tr>
      <td align="center" bgcolor="#e9ecef">
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">

          <!-- start copy -->
          <tr>
            <td align="left" bgcolor="#ffffff"
              style="padding: 24px; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px;">
              <p style="margin: 0; text-align: center;">Click the button below to reset your account password. If you
                didn't request a new password, you can safely delete this email.</p>
            </td>
          </tr>
          <!-- end copy -->

          <!-- start button -->
          <tr>
            <td align="left" bgcolor="#ffffff">
              <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tr>
                  <td align="center" bgcolor="#ffffff" style="padding: 12px;">
                    <table border="0" cellpadding="0" cellspacing="0">
                      <tr>
                        <td align="center" bgcolor="#1a82e2" style="border-radius: 6px;">
                          <a href="{{ protocol }}://{{ domain }}{% url 'account:password_reset_confirm' user_id token %}"
                            target="_blank"
                            style="display: inline-block; padding: 16px 36px; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 16px; color: #ffffff; text-decoration: none; border-radius: 6px;">Reset
                            Password</a>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- end button -->


          <!-- start copy -->
          <tr>
            <td align="left" bgcolor="#ffffff"
              style="padding: 24px; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; border-bottom: 3px solid #d4dadf">
              <p style="margin: 0;">Thank You,<br> DBK Creation Team</p>
            </td>
          </tr>
          <!-- end copy -->

        </table>
      </td>
    </tr>
    <!-- end copy block -->

    <!-- WRAPPER -->
    <!-- Set wrapper width (twice) -->
    <table border="0" cellpadding="0" cellspacing="0" align="center" width="560" style="border-collapse: collapse; border-spacing: 0; padding: 0; width: inherit;
    max-width: 560px;" class="wrapper">
      <tr>
        <td align="center" bgcolor="#e9ecef"
          style=" font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #666;">
          <h2>Follow Us</h2>
        </td>
      </tr>

      <!-- SOCIAL NETWORKS -->
      <!-- Image text color should be opposite to background color. Set your url, image src, alt and title. Alt text should fit the image size. Real image size should be x2 -->

      <td align="center" valign="top"
        style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0; padding-left: 6.25%; padding-right: 6.25%; width: 87.5%;"
        class="social-icons">
        <table width="256" border="0" cellpadding="0" cellspacing="0" align="center"
          style="border-collapse: collapse; border-spacing: 0; padding: 0;">
          <tr>
            <!-- ICON 1 -->
            <td align="center" valign="middle"
              style="margin: 0; padding: 0; padding-left: 10px; padding-right: 10px; border-collapse: collapse; border-spacing: 0;">
              <a target="_blank" href="https://www.facebook.com/dhanbdrkarki2" style="text-decoration: none;"><img
                  border="0" vspace="0" hspace="0" style="padding: 0; margin: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: none; display: inline-block;
                color: #000000;" alt="F" title="Facebook" width="44" height="44"
                  src="https://raw.githubusercontent.com/konsav/email-templates/master/images/social-icons/facebook.png"></a>
            </td>

            <!-- ICON 2 -->
            <td align="center" valign="middle"
              style="margin: 0; padding: 0; padding-left: 10px; padding-right: 10px; border-collapse: collapse; border-spacing: 0;">
              <a target="_blank" href="https://twitter.com/Dhan_Bdr_Karki1" style="text-decoration: none;"><img
                  border="0" vspace="0" hspace="0" style="padding: 0; margin: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: none; display: inline-block;
                  color: #000000;" alt="T" title="Twitter" width="44" height="44"
                  src="https://raw.githubusercontent.com/konsav/email-templates/master/images/social-icons/twitter.png"></a>
            </td>

            <!-- ICON 3 -->
            <td align="center" valign="middle"
              style="margin: 0; padding: 0; padding-left: 10px; padding-right: 10px; border-collapse: collapse; border-spacing: 0;">
              <a target="_blank" href="https://www.linkedin.com/in/dhan-bdr-karki-315b97212/"
                style="text-decoration: none;">
                <img border="0" vspace="0" hspace="0" style="padding: 0; margin: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: none; display: inline-block;
                  color: #000000;" alt="G" title="Linkedin" width="44" height="44"
                  src="https://i.ibb.co/gv2ZG4K/553-5538587-linkedin-logo-white-circle-transparent-png-linkedin-transparent-removebg-preview-2.png"></a>
            </td>

            <!-- ICON 4 -->
            <td align="center" valign="middle"
              style="margin: 0; padding: 0; padding-left: 10px; padding-right: 10px; border-collapse: collapse; border-spacing: 0;">
              <a target="_blank" href="https://www.instagram.com/i.am_dbk/" style="text-decoration: none;"><img
                  border="0" vspace="0" hspace="0" style="padding: 0; margin: 0; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: none; display: inline-block;
                  color: #000000;" alt="I" title="Instagram" width="44" height="44"
                  src="https://raw.githubusercontent.com/konsav/email-templates/master/images/social-icons/instagram.png"></a>
            </td>

          </tr>
        </table>

        <!-- start footer -->
        <tr>
          <td align="center" bgcolor="#e9ecef" style="padding: 24px;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">

              <!-- start permission -->
              <tr>
                <td align="center" bgcolor="#e9ecef"
                  style="padding: 12px 24px; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #666;">
                  <p style="margin: 0;">You received this email because we received a request for password reset for
                    your account. If you didn't request, you can safely delete this email.</p>
                </td>
              </tr>
              <!-- end permission -->

              <!-- start unsubscribe -->
              <tr>
                <td align="center" bgcolor="#e9ecef"
                  style="padding: 12px 24px; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #666;">
                  <p style="margin: 0;">To stop receiving these emails, you can <a href="https://google.com"
                      target="_blank">unsubscribe</a> at any time.</p>
                  <p style="margin: 0;">Maitidevi Chowk, Kathmandu City, Nepal</p>
                </td>
              </tr>
              <!-- end unsubscribe -->
          </td>
        </tr>
    </table>
    <!-- end of wrapper -->
  </table>
  <!-- end body -->

</body>

</html>