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

{% block title %}Pair Programming Invite{% endblock %}

{% block body_radius %}border-radius:8px;{% endblock %}

{% block content %}
<p class="text-main" style="margin:0 0 16px;font-size:16px;font-weight:400;line-height:26px;color:#171717;">Hi {{ invitee_name }},</p>

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom:16px;background-color:#FFFFFF;border-radius:8px;">
  <tr>
    <td style="padding:16px;">
      <table role="presentation" cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td style="padding-right:0;">
            {% if host_avatar_url %}
            <img src="{{ host_avatar_url }}" alt="" width="40" height="40" style="display:block;width:40px;height:40px;border-radius:64px;border:2px solid #FFFFFF;" />
            {% else %}
            <div style="width:40px;height:40px;border-radius:64px;background-color:#0D41FF;border:2px solid #FFFFFF;text-align:center;line-height:40px;">
              <span style="font-size:14px;font-weight:700;color:#FFFFFF;">{{ host_name|slice:":1"|upper }}</span>
            </div>
            {% endif %}
          </td>
          <td style="padding-left:0;">
            <div style="width:40px;height:40px;border-radius:64px;background-color:#B2A5FF;border:2px solid #FFFFFF;text-align:center;line-height:40px;margin-left:-12px;">
              <span style="font-size:14px;font-weight:700;color:#FFFFFF;">{{ invitee_name|slice:":1"|upper }}</span>
            </div>
          </td>
        </tr>
      </table>
      <p class="text-main" style="margin:16px 0 0;font-size:16px;font-weight:400;line-height:26px;color:#171717;">
        <strong style="font-weight:700;">{{ host_name }}</strong> invited you to pair on task
        <strong style="font-weight:700;">{{ case_number }}: {{ case_title }}</strong>.
      </p>
      <p style="margin:12px 0 0;font-size:14px;font-weight:400;line-height:22px;color:#5C5C5D;">Invite code</p>
      <p class="text-main" style="margin:4px 0 0;font-size:22px;font-weight:700;letter-spacing:0.12em;color:#01071A;">{{ invite_code }}</p>
    </td>
  </tr>
</table>

{% include "email/partials/_cta.html" with cta_url=join_url cta_label="Join Pair Session" %}
{% endblock %}