{% extends "base.html" %}

{% block preheader %}Reset your {{ product_name }} password. This link expires in {{ expires_in_minutes }} minutes.{% endblock %}

{% block content %}
<!-- Heading -->
<h1 style="margin: 0 0 8px 0; font-size: 26px; font-weight: 700; color: #1a1a2e; line-height: 1.3;">
  Reset your password
</h1>

<p style="margin: 0 0 28px 0; font-size: 16px; line-height: 1.6; color: #4a4a5a;">
  {% if user_name %}Hi {{ user_name }},{% else %}Hi there,{% endif %}
</p>

<p style="margin: 0 0 28px 0; font-size: 16px; line-height: 1.6; color: #4a4a5a;">
  We received a request to reset your password for your {{ product_name }} account. Click the button below to choose a new password.
</p>

<!-- CTA Button -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%">
  <tr>
    <td style="text-align: center; padding: 4px 0 24px 0;">
      <a href="{{ reset_url }}" style="display: inline-block; background-color: #6366f1; color: #ffffff; font-size: 16px; font-weight: 600; text-decoration: none; padding: 14px 36px; border-radius: 8px; mso-padding-alt: 0; text-align: center;">
        <!--[if mso]><i style="letter-spacing: 36px; mso-font-width: -100%; mso-text-raise: 26pt;">&nbsp;</i><![endif]-->
        <span style="mso-text-raise: 13pt;">Reset Password</span>
        <!--[if mso]><i style="letter-spacing: 36px; mso-font-width: -100%;">&nbsp;</i><![endif]-->
      </a>
    </td>
  </tr>
</table>

<!-- Expiry notice -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 0 24px 0;">
  <tr>
    <td style="background-color: #fef3c7; border-radius: 8px; padding: 14px 20px;">
      <p style="margin: 0; font-size: 14px; line-height: 1.5; color: #92400e;">
        <strong>This link expires in {{ expires_in_minutes }} minutes.</strong> After that, you'll need to request a new password reset.
      </p>
    </td>
  </tr>
</table>

<p style="margin: 0 0 16px 0; font-size: 14px; line-height: 1.5; color: #8c8c9a;">
  If the button doesn't work, copy and paste this URL into your browser:
</p>
<p style="margin: 0 0 24px 0; font-size: 13px; line-height: 1.5; color: #6366f1; word-break: break-all;">
  <a href="{{ reset_url }}" style="color: #6366f1; text-decoration: none;">{{ reset_url }}</a>
</p>

<p style="margin: 0; font-size: 14px; line-height: 1.5; color: #8c8c9a;">
  If you didn't request a password reset, you can safely ignore this email. Your password will remain unchanged.
</p>
{% endblock %}