{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
<div bgcolor="#f5f5f5" lang="{{ LANGUAGE_CODE|default:"en" }}" style="
    margin: 0;
    padding: 0;
    min-width: 100%;
">
    <!-- This is preview text that is visible in the inbox view of many email clients but not visible in the actual
    email itself. -->
    <div style="
        display:none;
        font-size:1px;
        line-height:1px;
        max-height:0px;
        max-width:0px;
        opacity:0;
        overflow:hidden;
        visibility:hidden;
    ">
        {% block preview_text %}{% endblock %}
    </div>

    <!-- Hack for outlook 2010, which wants to render everything in Times New Roman -->
    <!--[if mso]>
    <style type="text/css">
    body, table, td {font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;}
    </style>
    <![endif]-->

    <!--[if (gte mso 9)|(IE)]>
    <table role="presentation" width="600" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
    <td>
    <![endif]-->

    <!-- CONTENT -->
    <table class="content" role="presentation" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#f5f5f5" width="100%" style="
        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 1em;
        line-height: 1.5;
        max-width: 600px;
        padding: 0 20px 0 20px;
    ">
        <tr>
            <!-- HEADER -->
            <td class="header" style="
                padding: 20px;
            ">
                <table role="presentation" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="70">
                            <a href="http://www.edx.org"><img
                                    src="https://media.sailthru.com/595/1k1/8/o/599f355101b3f.png" width="70"
                                    height="30" alt="edX Home Page"/></a>
                        </td>
                        <td align="right" style="text-align: right;">
                            <a class="login" href="https://courses.edx.org/dashboard" style="color: #005686;">Sign In</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <tr>
            <!-- MAIN -->
            <td class="main" bgcolor="#ffffff" style="
                padding: 30px 20px;
                box-shadow: 0 1px 5px rgba(0,0,0,0.25);
            ">
                {% block content %}{% endblock %}
            </td>
        </tr>

        <tr>
            <!-- FOOTER -->
            <td class="footer" style="padding: 20px;">
                <table role="presentation" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td style="padding-bottom: 20px;">
                            <!-- LOGO / SOCIAL -->
                            <table role="presentation" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td width="70">
                                        <!-- LOGO -->
                                        <a href="http://www.edx.org"><img
                                                src="https://media.sailthru.com/595/1k1/8/o/599f355101b3f.png"
                                                width="70" height="30" alt="edX Home Page"/></a>
                                    </td>
                                    <td align="right">
                                        <!-- SOCIAL -->
                                        <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="210">
                                            <tr>
                                                <td height="32" width="42" align="right">
                                                    <a href="https://www.linkedin.com/company/edx">
                                                        <img src="https://media.sailthru.com/595/1k1/8/o/599f354ec70cb.png"
                                                             width="32" height="32" alt="edX on LinkedIn"/>
                                                    </a>
                                                </td>
                                                <td height="32" width="42" align="right">
                                                    <a href="https://www.twitter.com/edXOnline/">
                                                        <img src="https://media.sailthru.com/595/1k1/8/o/599f354d9c26e.png"
                                                             width="32" height="32" alt="edX on Twitter"/>
                                                    </a>
                                                </td>
                                                <td height="32" width="42" align="right">
                                                    <a href="http://www.facebook.com/edX">
                                                        <img src="https://media.sailthru.com/595/1k1/8/o/599f355052c8e.png"
                                                             width="32" height="32" alt="edX on Facebook"/>
                                                    </a>
                                                </td>
                                                <td height="32" width="42" align="right">
                                                    <a href="https://plus.google.com/%2BedXOnline">
                                                        <img src="https://media.sailthru.com/595/1k1/8/o/599f354fc554a.png"
                                                             width="32" height="32" alt="edX on Google Plus"/>
                                                    </a>
                                                </td>
                                                <td height="32" width="42" align="right">
                                                    <a href="https://www.reddit.com/r/edX/">
                                                        <img src="https://media.sailthru.com/595/1k1/8/o/599f354e326b9.png"
                                                             width="32" height="32" alt="edX on Reddit"/>
                                                    </a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <!-- ACTIONS / APP BUTTONS -->
                        <td>
                            <table role="presentation" width="100%" align="left" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <!-- APP BUTTONS -->
                                    <td class="col" width="148" valign="top" align="right" style="padding-bottom: 20px;">
                                        <a href="https://itunes.apple.com/us/app/edx/id945480667?mt=8" style="text-decoration: none">
                                            <img src="https://media.sailthru.com/595/1k1/6/2/5931cfbba391b.png"
                                                 alt="Download the iOS app on the Apple Store" width="136" height="50"/>
                                        </a>
                                        <a href="https://play.google.com/store/apps/details?id=org.edx.mobile" style="text-decoration: none">
                                            <img src="https://media.sailthru.com/595/1k1/6/2/5931cf879a033.png"
                                                 alt="Download the Android app on the Google Play Store"
                                                 width="136" height="50" style="margin: 10px 0 0 5px"/>
                                        </a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <!-- COPYRIGHT -->
                        <td>
                            <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
                                <tr>
                                    <td>
                                        <p><small>Copyright &copy; 2017 edX, All rights
                                            reserved.</small></p>
                                        <p>
                                            Our mailing address is:<br/>
                                            141 Portland St. 9th Floor, Cambridge, MA 02139
                                        </p>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <!--[if (gte mso 9)|(IE)]>
    </td>
    </tr>
    </table>
    <![endif]-->

</div>
