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

{% block title %}Subscription renewal on {{ renewal_date }}{% endblock %}

{% block hero %}
{% with hero_title="Renews on "|add:renewal_date %}
{% include "email/partials/_hero.html" with hero_variant="warning" hero_title=hero_title hero_subtitle=plan_name hero_icon="card.png" %}
{% endwith %}
{% 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" %}
    Your <strong style="font-weight:700;">{{ plan_name }}</strong> plan renews on
    <strong style="font-weight:700;">{{ renewal_date }}</strong> for <strong style="font-weight:700;">{{ amount }}</strong>.
  {% else %}
    The <strong style="font-weight:700;">{{ plan_name }}</strong> plan for
    <strong style="font-weight:700;">{{ company_name }}</strong> renews on
    <strong style="font-weight:700;">{{ renewal_date }}</strong> for <strong style="font-weight:700;">{{ amount }}</strong>.
  {% endif %}
  No action is required unless you want to change or cancel your plan.
</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="RENEWAL DATE" pill_value=renewal_date pill_variant="gray" %}
  {% include "email/partials/_detail_row.html" with pill_label="AMOUNT" pill_value=amount pill_variant="gray" %}
  {% include "email/partials/_detail_row.html" with pill_label="PAYMENT METHOD" pill_value=payment_gateway pill_variant="gray" pill_border="none" pill_radius="bottom" %}
</table>

{% if 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="TASKS COMPLETED" pill_value=cases_completed|default:"0" pill_variant="gray" pill_radius="top" %}
  {% include "email/partials/_detail_row.html" with pill_label="XP EARNED" pill_value=xp_earned|default:"0" pill_variant="gray" pill_border="none" pill_radius="bottom" %}
</table>
{% else %}
<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="ASSESSMENTS USED" pill_value=assessments_used pill_variant="gray" pill_radius="top" %}
  {% include "email/partials/_detail_row.html" with pill_label="ASSESSMENT LIMIT" pill_value=assessment_limit pill_variant="gray" %}
  {% include "email/partials/_detail_row.html" with pill_label="TEAM MEMBERS" pill_value=seats_used pill_variant="gray" %}
  {% include "email/partials/_detail_row.html" with pill_label="SEAT LIMIT" pill_value=seat_limit pill_variant="gray" pill_border="none" pill_radius="bottom" %}
</table>
{% endif %}

<p class="text-main" style="margin:0 0 16px;font-size:16px;font-weight:400;line-height:26px;color:#171717;">
  To upgrade, downgrade, or cancel before renewal, open billing settings.
</p>

{% if hosted_invoice_url %}
<p class="text-main" style="margin:0 0 16px;font-size:16px;font-weight:400;line-height:26px;color:#171717;">
  {% if has_invoice_pdf %}
    Your upcoming invoice is attached to this email. You can also
    <a href="{{ hosted_invoice_url }}" style="color:#0D41FF;text-decoration:none;">view it online</a>.
  {% else %}
    <a href="{{ hosted_invoice_url }}" style="color:#0D41FF;text-decoration:none;">View your upcoming invoice</a>.
  {% endif %}
</p>
{% endif %}

{% include "email/partials/_cta.html" with cta_url=billing_url cta_label="Manage subscription" %}

<p class="text-main" style="margin:16px 0 0;font-size:16px;font-weight:400;line-height:26px;color:#171717;">
  Questions about this renewal? Contact support before <strong style="font-weight:700;">{{ renewal_date }}</strong>.
</p>
{% endblock %}