{% extends 'base.html' %}

{% block title %}Account Activation{% endblock %}

{% block content %}
<table role="presentation" width="100%" style="padding: 3.5rem;">
  <tr>
      <td>
          <div style="text-align: center; margin-bottom: 1.5rem;">
              <h1 style="font-size: 1.5rem; color: #0A0A0A; font-weight: 600;">Your account is now active</h1>
              <!-- <p style="font-size: 1.125rem; color: rgba(0, 0, 0, 0.8); font-weight: 500;">Hi</p> -->
          </div>

          <div>
              <p style="color: #111; font-size: 1.125rem; font-weight: 600;">Hi {{first_name}}, {{last_name}}</p>
              <p style="color: rgba(17, 17, 17, 0.9); font-weight: 400;">Congratulations! Your account with Boilerplate is now active and ready
                to use.</p>
          </div>

          <div style="margin-bottom: 1.75rem;">
              <h3 style="color: #0A0A0A; font-weight: 600;">We're thrilled to have you as part of our community and look forward
                to helping you make the most out of your experience with us.</h3>
              <div style="margin-bottom: 1.25rem;">
                  <p style="opacity: 0.9; color: #111; font-weight: 400;">
                    You can now log in and start exploring all the features and benefits we have to offer.
                  </p>
              </div>
          </div>

          <a href="{{cta_link}}" style="display: block; width: fit-content; padding: 0.5rem 2.5rem; background-color: #F97316; color: white; text-decoration: none; border-radius: 0.5rem; margin: 0 auto; text-align: center;">
              Learn more
          </a>

          <div style="margin-top: 2rem;">
              <p style="color: #111; font-size: 0.875rem; font-weight: 500;">Thank you for joining Boilerplate</p>
          </div>

          <div style="margin-top: 2rem;">
            <p>Regards,</p>
            <p>Boilerplate</p>
          </div>
      </td>
  </tr>
</table>
{% endblock %}