<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        color: #333333;
        max-width: 600px;
        margin: 0 auto;
        padding: 20px;
      }
      .container {
        background-color: #ffffff;
        border-radius: 8px;
        padding: 30px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      .header {
        text-align: center;
        margin-bottom: 30px;
      }
      .reset-button {
        display: inline-block;
        background-color: #007bff;
        color: white;
        padding: 12px 24px;
        text-decoration: none;
        border-radius: 4px;
        margin: 20px 0;
      }
      .reset-button:hover {
        background-color: #0056b3;
      }
      .divider {
        border-top: 1px solid #e0e0e0;
        margin: 20px 0;
      }
      .otp-section {
        background-color: #f8f9fa;
        padding: 15px;
        border-radius: 4px;
        text-align: center;
        margin: 20px 0;
      }
      .community-section {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class='container'>
      <div class='header'>
        <h1>Password Reset Request</h1>
      </div>

      <p>Hello {{name}},</p>

      <p>We have received a request to reset your password. If you did not make
        this request, please ignore this email. Otherwise, you can reset your
        password using the button below.</p>

      <div style='text-align: center;'>
        <a href='{{resetLink}}' class='reset-button'>Reset Password</a>
      </div>

      <div class='divider'></div>

      <p>If the button above doesn't work, you can copy and paste the following
        link into your browser:</p>
      <p style='word-break: break-all;'>{{resetLink}}</p>

      <div class='otp-section'>
        <p>Alternatively, you can use this OTP:</p>
        <div class='otp-code'>{{otp}}</div>
      </div>

      <div class='divider'></div>

      <div class='footer'>
        <p>
          Thank you,<br />
          <strong>TextBee.dev</strong>
        </p>
        <p style='font-size: 12px; color: #999;'>
          If you didn't request this password reset, you can safely ignore this
          email.
        </p>

        <div class='divider'></div>
        <div class='community-section'>
          <p style='font-size: 14px; margin-bottom: 15px;'>Join our community!</p>
          <a
            href='https://discord.gg/d7vyfBpWbQ'
            style='display: inline-block; margin: 0 10px; color: #7289DA; text-decoration: none;'
          >
            <img
              src='https://cdn.prod.website-files.com/6257adef93867e50d84d30e2/636e0a6918e57475a843f59f_icon_clyde_black_RGB.svg'
              alt='Discord'
              style='width: 20px; vertical-align: middle;'
            />
            Join Discord
          </a>
          <a
            href='https://github.com/vernu/textbee'
            style='display: inline-block; margin: 0 10px; color: #333; text-decoration: none;'
          >
            <img
              src='https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png'
              alt='GitHub'
              style='width: 20px; vertical-align: middle;'
            />
            Star on GitHub
          </a>
          <a
            href='https://patreon.com/vernu'
            style='display: inline-block; margin: 0 10px; color: #FF424D; text-decoration: none;'
          >
            <img
              src='https://c5.patreon.com/external/logo/downloads_logomark_color_on_white.png'
              alt='Patreon'
              style='width: 20px; vertical-align: middle;'
            />
            Support on Patreon
          </a>
        </div>
      </div>
    </div>
  </body>
</html>