{% extends "email/base.html" %}

{% block title %}Your Praxicraft subscription is active{% endblock %}

{% block hero %}
{% include "email/partials/_hero.html" with hero_variant="success" hero_title="Subscription active" hero_subtitle="Your plan is ready to use." hero_icon="check-circle.png" hero_accent_icon="confetti.png" %}
{% endblock %}

{% block content %}
<p class="text-main" style="margin:0 0 16px;font-size:16px;font-weight:400;line-height:26px;color:#171717;">Hi {{ admin_name }},</p>
<p class="text-main" style="margin:0 0 16px;font-size:16px;font-weight:400;line-height:26px;color:#171717;">
  {% if customer_type == "engineer" %}
    {% if admin_comp %}
      Complimentary <strong style="font-weight:700;">{{ plan_name }}</strong> access is now on your account.
    {% else %}
      Your <strong style="font-weight:700;">{{ plan_name }}</strong> subscription is active.
    {% endif %}
  {% else %}
    The <strong style="font-weight:700;">{{ plan_name }}</strong> plan for <strong style="font-weight:700;">{{ company_name }}</strong> is active.
  {% endif %}
</p>

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:16px;border-collapse:separate;border-spacing:0;">
  {% include "email/partials/_detail_row.html" with pill_label="PLAN" pill_value=plan_name pill_variant="gray" pill_radius="top" %}
  {% include "email/partials/_detail_row.html" with pill_label="BILLING CYCLE" pill_value=billing_cycle pill_variant="gray" %}
  {% include "email/partials/_detail_row.html" with pill_label="AMOUNT" pill_value=amount pill_variant="gray" %}
  {% if admin_comp %}
  {% if next_renewal_date %}
  {% include "email/partials/_detail_row.html" with pill_label="ACCESS" pill_value=next_renewal_date pill_variant="gray" %}
  {% endif %}
  {% else %}
  {% if next_renewal_date %}
  {% include "email/partials/_detail_row.html" with pill_label="NEXT RENEWAL" pill_value=next_renewal_date pill_variant="gray" %}
  {% endif %}
  {% if payment_gateway %}
  {% include "email/partials/_detail_row.html" with pill_label="PAYMENT METHOD" pill_value=payment_gateway pill_variant="gray" %}
  {% endif %}
  {% endif %}
  {% include "email/partials/_detail_row.html" with pill_label="STATUS" pill_value="Active" pill_variant="success" pill_border="none" pill_radius="bottom" %}
</table>

{% if plan_features %}
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:16px;border-collapse:separate;border-spacing:0;">
  <tr>
    <td class="email-surface" style="background-color:#FFFFFF;padding:12px 16px;border-radius:8px;" bgcolor="#FFFFFF">
      <div class="email-pill" style="display:inline-block;padding:4px 10px;border-radius:36px;margin-bottom:8px;background-color:#E7ECFF;">
        <span class="email-pill-text" style="font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:500;line-height:18px;white-space:nowrap;color:#0D41FF;">INCLUDED</span>
      </div>
      <p class="text-main" style="margin:0;font-size:14px;font-weight:400;line-height:22px;color:#171717;">
        {% for feature in plan_features %}{% if not forloop.first %} · {% endif %}{{ feature }}{% endfor %}{% if customer_type != "engineer" %} · {{ assessment_limit }} assessments / month · {{ seat_limit }} seats{% endif %}
      </p>
    </td>
  </tr>
</table>
{% elif customer_type != "engineer" %}
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:16px;border-collapse:separate;border-spacing:0;">
  {% include "email/partials/_detail_row.html" with pill_label="INCLUDED" pill_note=assessment_limit|stringformat:"s"|add:" assessments / month · "|add:seat_limit|stringformat:"s"|add:" team seats" pill_variant="primary" pill_radius="all" pill_border="none" %}
</table>
{% endif %}

{% include "email/partials/_cta.html" with cta_url=dashboard_url cta_label="Go to dashboard" %}

{% if not admin_comp %}
{% if receipt_url %}
<p style="margin:16px 0 0;font-size:14px;font-weight:400;line-height:22px;color:#5C5C5D;">
  <a href="{{ receipt_url }}" style="color:#0D41FF;text-decoration:underline;">View your payment receipt</a>.
</p>
{% endif %}
<p style="margin:16px 0 0;font-size:14px;font-weight:400;line-height:22px;color:#5C5C5D;">
  Manage billing anytime from
  <a href="{{ billing_url }}" style="color:#0D41FF;text-decoration:underline;">{% if customer_type == "engineer" %}Subscriptions{% else %}Billing settings{% endif %}</a>.
</p>
{% endif %}
{% endblock %}