{# @var personalization \ProjectsM\MembershipWordpress\Api\Data\ClientPersonalization #}
<!doctype html>
<html>
    <head>
        <meta name="viewport" content="width=device-width">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>{{ subject }}</title>
        <style>
            @media only screen and (max-width: 620px) {
                table[class=body] h1 {
                    font-size: 28px !important;
                    margin-bottom: 10px !important;
                }
                table[class=body] p,
                table[class=body] ul,
                table[class=body] ol,
                table[class=body] td,
                table[class=body] span,
                table[class=body] a {
                    font-size: 16px !important;
                }
                table[class=body] .wrapper,
                table[class=body] .article {
                    padding: 10px !important;
                }
                table[class=body] .content {
                    padding: 0 !important;
                }
                table[class=body] .container {
                    padding: 0 !important;
                    width: 100% !important;
                }
                table[class=body] .main {
                    border-left-width: 0 !important;
                    border-radius: 0 !important;
                    border-right-width: 0 !important;
                }
                table[class=body] .btn table {
                    width: 100% !important;
                }
                table[class=body] .btn a {
                    width: 100% !important;
                }
                table[class=body] .img-responsive {
                    height: auto !important;
                    max-width: 100% !important;
                    width: auto !important;
                }
            }

            /* -------------------------------------
                PRESERVE THESE STYLES IN THE HEAD
            ------------------------------------- */
            @media all {
                .ExternalClass {
                    width: 100%;
                }
                .ExternalClass,
                .ExternalClass p,
                .ExternalClass span,
                .ExternalClass font,
                .ExternalClass td,
                .ExternalClass div {
                    line-height: 100%;
                }
                .apple-link a {
                    color: inherit !important;
                    font-family: inherit !important;
                    font-size: inherit !important;
                    font-weight: inherit !important;
                    line-height: inherit !important;
                    text-decoration: none !important;
                }
                .btn-primary table td:hover {
                    background-color: #{{ personalization.emailColorButtonBgHover | default("34495e") }} !important;
                }
                .btn-primary a:hover {
                    background-color: #{{ personalization.emailColorButtonBgHover | default("34495e") }} !important;
                    border-color: #{{ personalization.emailColorButtonBgHover | default("34495e") }} !important;
                }
            }
        </style>
    </head>
    <body class="" style="background-color: #{{ personalization.emailColorBodyBg | default("f6f6f6") }}; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
        <table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #{{ personalization.emailColorBodyBg | default("f6f6f6") }};">
            <tr>
                <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">&nbsp;</td>
                <td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
                    <div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">

                        <!-- START CENTERED WHITE CONTAINER -->
                        <table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #{{ personalization.emailColorBoxBg | default("ffffff") }}; border-radius: 3px;">

                            {%- if personalization.emailHeaderImage is not empty -%}
                            <tr>
                                <td align="center" style="padding: 0; background-color: #{{ personalization.emailColorHeaderBg | default("ffffff") }}"><img src="{{ personalization.emailHeaderImage }}" style="max-width: 100%;" alt=""></td>
                            </tr>
                            {%- endif -%}
                            <!-- START MAIN CONTENT AREA -->
                            <tr>
                                <td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
                                    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
                                        <tr>
                                            <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; color: #{{ personalization.emailColorText | default("000000") }}; text-align: {{ personalization.emailTextAlignment | default("left") }};">
                                                {%- if textContent is defined and textContent is not empty -%}
                                                    <p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">{{ textContent | raw }}</p>
                                                {%- endif -%}

                                                {%- if actions is defined and actions is not empty -%}
                                                    {%- for action in actions -%}
                                                        <table border="0" cellpadding="0" cellspacing="0" class="btn btn-primary" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; box-sizing: border-box;">
                                                            <tbody>
                                                                <tr>
                                                                    <td align="{{ personalization.emailTextAlignment | default("left") }}" style="font-family: sans-serif; font-size: 14px; vertical-align: top; padding-bottom: 15px;">
                                                                        <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
                                                                            <tbody>
                                                                                <tr>
                                                                                    <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #{{ personalization.emailColorButtonBg | default("3498db") }}; border-radius: 5px; text-align: center;"> <a href="{{ action.url }}" target="_blank" style="display: inline-block; color: #{{ personalization.emailColorButtonText | default("ffffff") }}; background-color: #{{ personalization.emailColorButtonBg | default("3498db") }}; border: solid 1px #{{ personalization.emailColorButtonBg | default("3498db") }}; border-radius: 5px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; border-color: #{{ personalization.emailColorButtonBg | default("3498db") }};">{{ action.label }}</a> </td>
                                                                                </tr>
                                                                            </tbody>
                                                                        </table>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    {%- endfor -%}
                                                {%- endif -%}
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                            <!-- END MAIN CONTENT AREA -->
                        </table>

                        <!-- START FOOTER -->
                        <div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
                            <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
                                <tr>
                                    <td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #{{ personalization.emailColorFooterText | default("999999") }}; text-align: {{ personalization.emailTextAlignment | default("center") }};">
                                        {{ personalization.mailFooter | default("") | raw }}
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!-- END FOOTER -->

                        <!-- END CENTERED WHITE CONTAINER -->
                    </div>
                </td>
                <td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">&nbsp;</td>
            </tr>
        </table>
    </body>
</html>
