{% apply inky_to_html|inline_css(source('@css/foundation-emails.css')) %}

    <style type="text/css">
        /* basics */
        body {background-color: #F4F4F4; margin: 0px !important; padding: 0px !important; display: block !important; min-width: 100% !important; width: 100% !important; -webkit-text-size-adjust: none; }
        table { border-spacing: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
        table td { border-collapse: collapse; }
        strong { font-weight: bold !important; }
        td img { -ms-interpolation-mode: bicubic; display: block; width: auto; max-width: auto; height: auto; margin: auto; display: block !important; border: 0px!important; }
        td p { margin: 0 !important; padding: 0 !important; display: inline-block !important; font-family: inherit !important; }
        td a { text-decoration: none !important; }

       .container-padding {padding: 20px!important;  }
        .email-body {
            background-color: #F5F5F3;
        }
        /* outlook */
        .ExternalClass { width: 100%; }
        .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: inherit; }
        .ReadMsgBody { width:100%; background-color: #ffffff; }

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

        /* gmail blue links */
        u + #body a { color: inherit; text-decoration: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; }

        /* buttons fix */
        .undoreset a, .undoreset a:hover { text-decoration: none !important; }
        .yshortcuts a { border-bottom: none !important; }
        .ios-footer a { color: #aaaaaa !important; text-decoration: none; }

        /* responsive */
        @media screen and (max-width: 640px) {

            td.img-responsive img { width: 100% !important; max-width: 100%!important; height: auto!important; margin: auto; }
            table.row { width: 100%!important; max-width: 100%!important; }
            table.center-float, td.center-float { float: none!important; } /* stops floating modules next to each other */
            td.center-text { text-align: center!important; }

            table.hide-mobile, tr.hide-mobile, td.hide-mobile, br.hide-mobile { display: none!important; }
            td.menu-container { text-align: center !important; }
            td.autoheight { height: auto!important; }
            table.mobile-padding { margin: 15px 0!important; }
            table.br-mobile-true td br { display: initial!important; }
        }

    </style>

    <wrapper>
        <container>
            <row class="container-padding">
                <columns small="12">
                    <row>
                        <spacer size="20"></spacer>
                        <columns small="6">
                            <h4>{{ appname }}</h4>
                        </columns>
                        <columns small="6" valign="middle">
                            <p  class="text-right">Need help? <a href="mailto:support@icentric-bw.com">Contact our support team</a></p>
                        </columns>
                    </row>
                    <spacer size="20"></spacer>
                </columns>
            </row>
        </container>

        <spacer size="20"></spacer>

        <container>
            <row class="container-padding">
                <columns small="10" large="10" class="email-body">
                    {% block content %}
                    {% endblock %}
                    <spacer size="16"></spacer>
                </columns>
            </row>
        </container>

        <container>
            <row style="background-color: #f3ddcf;">
                <columns small="12">

                    <spacer size="16"></spacer>
                    <row>
                        <columns small="12">
                            <center>
                                <p>&copy; {{ "now"|date("Y") }} {{ appname }}</p>
                            </center>
                        </columns>
                    </row>
                </columns>
            </row>
        </container>
    </wrapper>


{% endapply %}