HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<title></title> <!-- The title tag shows in email notifications, like Android 4.4. -->
<!-- Web Font / @font-face : BEGIN -->
<!-- NOTE: If web fonts are not required, lines 9 - 26 can be safely removed. -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!--[if !mso]><!-->
<!-- insert web font reference, eg: <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> -->
<!--<![endif]-->
<!-- Web Font / @font-face : END -->
{% snippet "newsletter_styles" %}
</head>
<body width="100%" bgcolor="#F2F2F2" style="Margin: 0;">
<!-- !!!!! Insert template name or leave it blank to use template name from Sendwithus-->
{% set tmpl = "" %}
<!-- !!!!! Insert template version or leave it blank. Please use "a", "b", "c" values only-->
{% set ver = "" %}
<!-- !!!!! Insert the type of person that receives and email. Please use "user", "student, "npc", "customer", "tutor"-->
{% set contact_type = "student" %}
<!-- !!!!! Insert the source. Please use value "system" for transactional emails -->
{% set source = "system" %}
{% set unsubscribe = false %}
<!-- !!!!! Configuration snippet that creates correct links -->
{% snippet "configuration" %}
<center style="width: 100%; background: #F2F2F2;text-align:left">
<!-- Visually Hidden Preheader Text : BEGIN -->
<!-- <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">
(Optional) This text will appear in the inbox preview, but not the email body.
</div> -->
<!-- Visually Hidden Preheader Text : END -->
<!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 680px.
2. MSO tags for Desktop Windows Outlook enforce a 680px width.
-->
<div style="max-width: 680px; margin: auto;">
<!--[if (gte mso 9)|(IE)]>
<table cellspacing="0" cellpadding="0" border="0" width="600" align="center">
<tr>
<td>
<![endif]-->
<!-- Email Header : BEGIN -->
{% snippet "c_header" %}
<!-- Email Header : END -->
<!-- Email Body : BEGIN -->
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="100%" style="max-width: 680px;">
<!-- Hero Image, Flush : BEGIN -->
<!-- <tr>
<td>
<img src="http://placehold.it/600x300" width="680" height="" alt="alt_text" border="0" align="center" style="width: 100%; max-width: 680px;">
</td>
</tr> -->
<!-- Hero Image, Flush : END -->
<!-- 1 Column Text + Button : BEGIN -->
<tr>
<td class="content__block">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="content__block__inner" style="padding-bottom: 0px;">
<h2>{% trans %}Prepare to speak confidently{% endtrans %}</h2>
</td>
</tr>
<tr>
<td class="content__block__inner" style="padding-top: 0px; padding-bottom: 10px;">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="content__block__avatar" style="padding:0; padding-top: 0px; width: 80px;">
<img src='{{avatar}}' alt='Tutor' width="80" height="80" class="avatar__rounded" />
</td>
<td style="padding: 10px 32px 22px;">
<p style="font-size:24px; line-height:28px;">{%trans%}<b>{{num_hours}} hours</b> with {{tutor_name}} were added
to your balance.{%endtrans%}</p>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="content__block__avatar" rowspan="5" style="padding:0; padding-right: 30px; width: 80px;">
<img src='https://d1pgqke3goo8l6.cloudfront.net/6iTt8aC8SFC8ewFR8rTH_refill-active-img.png' alt="enabled" width="80" height="80" />
</td>
<tr>
<td>
<p style="margin: 0px 0; font-size: 16px; font-weight: 500; font-family: 'Roboto', Helvetica, Arial sans-serif; line-height: 24px;" >{%trans%}Your weekly lessons are reserved for:{%endtrans%}</p>
<ul style="margin: 15px 0; font-size: 16px; font-weight: 500; font-family: 'Roboto', Helvetica, Arial sans-serif; line-height: 24px;">
{% for r_lesson in r_lessons %}
<li>{%trans%}Every{%endtrans%} {{r_lesson.r_weekday}} {%trans%}at{%endtrans%} {{r_lesson.r_time}} {%trans%}(Repeats weekly){%endtrans%}</li>
{%endfor%}
</ul>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="0" border="0" width="100%"> <tr><td style="padding-top: 20px; padding-bottom: 0px;"> <p style="text-align: left; font-size: 16px; font-weight: 700; line-height:24px; font-family: 'Roboto', Helvetica, Arial sans-serif;">{%trans%}Keep your weekly reservation secure{%endtrans%}</p>
<p style="margin: 10px 0; font-size: 16px; font-weight: 400; font-family: 'Roboto', Helvetica, Arial sans-serif; line-height: 24px;" >{%trans%}To keep weekly lessons reserved, you must have hours available for scheduling 1 week before each lesson. If you have no hours available to schedule the next weekly lessons, {{num_hours}} hours will be added automatically using your saved card.{%endtrans%}</p>
<p style="margin: 10px 0; font-size: 16px; font-weight: 400; font-family: 'Roboto', Helvetica, Arial sans-serif; line-height: 24px;" >{%trans%}Payments from your saved card guarantee that your weekly time slot stays reserved. To continue weekly lessons without automatic payments, remove your saved card and remember to buy packages manually. To stop weekly lessons, cancel on the My lessons page.{%endtrans%}</p><br>
</td></tr></table>
</table>
</td>
</tr>
<!-- <tr>
<td bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%" style="padding-bottom: 40px">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:560px;">
<tr>
<td align="center" valign="top" width="50%">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="text-align: center; padding: 0 10px;">
<img src="http://placehold.it/200" width="200" alt="" style="border: 0;width: 100%;max-width: 200px;" class="center-on-narrow">
</td>
</tr>
<tr>
<td style="text-align: center;font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px 10px 0;" class="stack-column-center">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora per conubia nostra, per torquent inceptos himenaeos.
</td>
</tr>
</table>
</td>
<td align="center" valign="top" width="50%">
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="font-size: 14px;text-align: left;">
<tr>
<td style="text-align: center; padding: 0 10px;">
<img src="http://placehold.it/200" width="200" alt="" style="border: 0;width: 100%;max-width: 200px;" class="center-on-narrow">
</td>
</tr>
<tr>
<td style="text-align: center;font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px 10px 0;" class="stack-column-center">
Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora per conubia nostra, per torquent inceptos himenaeos.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr> -->
<!-- Two Even Columns : END -->
</table>
<!-- Email Body : END -->
<!-- Email Footer : BEGIN -->
{% snippet "c_footer" %}
<!-- Email Footer : END -->
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>