<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{churchName}}</title>
    <style type="text/css">
        /**
         * Google webfonts. Recommended to include the .woff version for cross-client compatibility.
         */
        @media screen {
            @font-face {
                font-family: 'Source Sans Pro';
                font-style: normal;
                font-weight: 400;
                src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format('woff');
            }

            @font-face {
                font-family: 'Source Sans Pro';
                font-style: normal;
                font-weight: 700;
                src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://fonts.gstatic.com/s/sourcesanspro/v10/toadOcfmlt9b38dHJxOBGFkQc6VGVFSmCnC_l7QZG60.woff) format('woff');
            }
        }

        /**
         * Avoid browser level font resizing.
         * 1. Windows Mobile
         * 2. iOS / OSX
         */
        body,
        table,
        td,
        a {
            -ms-text-size-adjust: 100%; /* 1 */
            -webkit-text-size-adjust: 100%; /* 2 */
        }

        /**
         * Remove extra space added to tables and cells in Outlook.
         */
        table,
        td {
            mso-table-rspace: 0pt;
            mso-table-lspace: 0pt;
        }

        /**
         * Better fluid images in Internet Explorer.
         */
        img {
            -ms-interpolation-mode: bicubic;
        }

        /**
         * Remove blue links for iOS devices.
         */
        a[x-apple-data-detectors] {
            font-family: inherit !important;
            font-size: inherit !important;
            font-weight: inherit !important;
            line-height: inherit !important;
            color: inherit !important;
            text-decoration: none !important;
        }

        /**
         * Fix centering issues in Android 4.4.
         */
        div[style*="margin: 16px 0;"] {
            margin: 0 !important;
        }

        body {
            width: 100% !important;
            height: 100% !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        /**
         * Collapse table borders to avoid space between cells.
         */
        table {
            border-collapse: collapse !important;
        }

        a {
            color: #1a82e2;
        }

        img {
            height: auto;
            line-height: 100%;
            text-decoration: none;
            border: 0;
            outline: none;
        }
    </style>

</head>
<body style="background-color: #e9ecef;">

{% if preheader %}
<!-- start preheader -->
<div class="preheader" style="display: none; max-width: 0; max-height: 0; overflow: hidden; font-size: 1px; line-height: 1px; color: #fff; opacity: 0;">{{- preheader|trim -}}</div>
<!-- end preheader -->
{% endif %}

<!-- start body -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">

    <!-- start logo -->
    <tr>
        <td align="center" bgcolor="#e9ecef">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">
                <tr>
                    <td align="center" valign="top" style="padding: 36px 24px;">
                        <a href="{{churchCRMURL}}" target="_blank" style="display: inline-block; text-decoration: none; color: inherit;">
                            <img src="{{churchLogo}}" alt="" border="0" width="180" style="display: block; margin: 0 auto; width: 180px; max-width: 180px; height: auto;">
                            <h1 style="margin: 12px 0 0; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 700; color: #1f2d3d;">{{churchName}}</h1>
                        </a>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <!-- end logo -->

    <!-- start copy block -->
    <tr>
        <td align="center" bgcolor="#e9ecef">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">

                <!-- start copy -->
                <tr>
                    <td align="left" bgcolor="#ffffff" style="padding: 36px 24px 24px; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; border-top: 3px solid #d4dadf;">
                        <h2 style="margin: 0 0 16px;">{{dear}} {{toName}},</h2>
                        <p style="margin: 0 0 16px;">
                            {{body|nl2br}}
                        </p>
                        {% if userName %}
                        <p style="margin: 0 0 16px;">
                            {{userNameText}}: {{userName}}
                            {% if password %}
                            <br/>{{passwordText}}: {{password}}
                            {% endif %}
                        </p>
                        {% endif %}

                        {% if IncludeDataInNewFamilyNotifications %}
                            {% if FamilyEmail %}<p style="margin: 0 0 8px;">{{FamilyEmail}}</p>{% endif %}
                            {% if FamilyPhone %}<p style="margin: 0 0 8px;">{{FamilyPhone}}</p>{% endif %}
                            {% if FamilyAddress %}<p style="margin: 0 0 8px;">{{FamilyAddress}}</p>{% endif %}
                        {% endif %}

                        {% if IncludeDataInNewPersonNotifications %}
                            {% if PersonEmail %}<p style="margin: 0 0 8px;">{{PersonEmail}}</p>{% endif %}
                            {% if PersonPhone %}<p style="margin: 0 0 8px;">{{PersonPhone}}</p>{% endif %}
                            {% if PersonAddress %}<p style="margin: 0 0 8px;">{{PersonAddress}}</p>{% endif %}
                            {% if PersonAge %}<p style="margin: 0 0 8px;">{{PersonAge}}</p>{% endif %}
                        {% endif %}
                    </td>
                </tr>
                <!-- end copy -->

                {% if fullURL %}
                <!-- start button -->
                <tr>
                    <td align="left" bgcolor="#ffffff">
                        <table border="0" cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td align="center" bgcolor="#ffffff" style="padding: 12px;">
                                    <table border="0" cellpadding="0" cellspacing="0">
                                        <tr>
                                            <td align="center" bgcolor="#1a82e2" style="border-radius: 6px;">
                                                <a href="{{fullURL}}" target="_blank" style="display: inline-block; padding: 16px 36px; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 16px; color: #ffffff; text-decoration: none; border-radius: 6px;">{{buttonText}}</a>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <!-- end button -->

                <!-- start copy -->
                <tr>
                    <td align="left" bgcolor="#ffffff" style="padding: 24px; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px;">
                        <p style="margin: 0;">{{buttonNotWorkingText}}:</p>
                        <p style="margin: 0;"><a href="{{fullURL}}" target="_blank">{{fullURL}}</a></p>
                    </td>
                </tr>
                <!-- end copy -->
                {% endif %}

                <!-- start copy -->
                <tr>
                    <td align="left" bgcolor="#ffffff" style="padding: 24px; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 24px; border-bottom: 3px solid #d4dadf">
                        {% if sGreeterCustomMsg1 %}<p style="margin: 0 0 12px;">{{ sGreeterCustomMsg1 }}</p>{% endif %}
                        {% if sGreeterCustomMsg2 %}<p style="margin: 0 0 12px;">{{ sGreeterCustomMsg2 }}</p>{% endif %}
                        <p style="margin: 0;">{{confirmSincerely}},<br> {{confirmSigner}}</p>
                    </td>
                </tr>
                <!-- end copy -->

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

<!-- start footer -->
<tr>
    <td align="center" bgcolor="#e9ecef" style="padding: 24px;">
        <!--[if (gte mso 9)|(IE)]>
        <table align="center" border="0" cellpadding="0" cellspacing="0" width="600">
            <tr>
                <td align="center" valign="top" width="600">
        <![endif]-->
        <table border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width: 600px;">

            <!-- start permission -->
            <tr>
                <td align="center" bgcolor="#e9ecef" style="padding: 12px 24px; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #666;">
                    <p style="margin: 0;">{{emailErrorText}}</p>
                </td>
            </tr>
            <!-- end permission -->

            <!-- start unsubscribe -->
            <tr>
                <td align="center" bgcolor="#e9ecef" style="padding: 12px 24px; font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #666;">
                    <p style="margin: 0;">{{stopEmailText}} <a href="mailto:{{churchEmail}}" target="_blank">{{churchName}}</a>.</p>
                    <p style="margin: 0;">{{churchAddress}}</p>
                    <p style="margin: 0;">{{churchPhone}}</p>

                </td>
            </tr>
            <!-- end unsubscribe -->

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

</table>
<!-- end body -->

</body>
</html>
