<table class="ie-header-bg" bgcolor="{{header.backgroundColor.val}}" style="width: 100%; background-color: '{{header.backgroundColor.val}}'; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: top center; background-repeat: no-repeat; " background="{{header.background.val}}" width="100%" cellspacing='0' cellpadding='0' border='0'>
    <tbody>
        <tr>
            <td>
                <table class="full" width="600" style="width: 600px; margin: 0px auto; padding: 0px; font-family: {{appearance.baseFont.val}}, sans-serif; " cellspacing='0' cellpadding='0' border='0' align="center">
                    <tbody>
                        <tr>
                            <td width="600" align="center" colspan="4"></td>
                        </tr>
                        <tr>
                            <td height='25'></td>
                        </tr>
                        <tr>
                            <td width='10' rowspan='10'></td>
                            <td align="left" class="full liquid-center">
                                <a href="{{header.logoUrl.val}}"><img <?php $this->imgSrc('{{header.logo.val}}') ?> alt='OrderEmail logo' /></a>
                            </td>
                            <td width='0' rowspan='1' class='full' height='35'></td>
                            <td align="right" class="full liquid-center">
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <a href="{{socialLinks.twitterLink.val}}"><img src="http://monsart.net/emails/order-3/images/twitter.png" alt="t" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
                                <a href="{{socialLinks.facebookLink.val}}"><img src="http://monsart.net/emails/order-3/images/facebook.png" alt="f" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
                                <a href="{{socialLinks.googlePlusLink.val}}"><img src="http://monsart.net/emails/order-3/images/google+.png" alt="g+" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
                                <a href="{{socialLinks.pinterestLink.val}}"><img src="http://monsart.net/emails/order-3/images/pinterest.png" alt="p" /></a>                                
                            </td>
                            <td width='10' rowspan='10'></td>
                        </tr>
                        <tr>
                            <td height='30'></td>
                        </tr>
                        <tr class="erase">
                            <td height='40'></td>
                        </tr>
                        <tr>
                            <td align="center" colspan="3" style="font-size: 24px; color: #ffffff; font-family: {{appearance.baseFont.val}}, sans-serif; font-weight: 700; ">
                                <?php do_action('ma_multiple_emails', $this->_emailType, 'email-title'); ?>
                            </td>
                        </tr>
                        <tr>
                            <td height='35'></td>
                        </tr>
                        <tr>
                            <td align="center" colspan="3">
                                <table align="center" bgcolor="#f64646" style="background-color: #f64646; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; margin: 0 auto; " cellspacing='0' cellpadding='0' border="0" background="0">
                                    <tbody>
                                        <tr>
                                            <td height='9' colspan='3'></td>
                                        </tr>
                                        <tr>
                                            <td width='30'></td>
                                            <td align="center">
                                                <a href="{{header.buttonLink.val}}" style="color: #ffffff; font-size: 14px;text-decoration: none;font-family: Helvetica,sans-serif;">{{header.buttonText.val}}</a>
                                            </td>
                                            <td width='30'></td>
                                        </tr>
                                        <tr>
                                            <td height='10' colspan='3'></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td height='30'></td>
                        </tr>
                        <tr class="erase">
                            <td height='40'></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
<table class="full ie-appearance-bg" bgcolor="{{appearance.backgroundColor.val}}" style="background: '{{appearance.backgroundColor.val}}'; width: 100%; " width="100%" cellspacing='0' cellpadding='0' border='0'>
    <tbody>
        <tr>
            <td height='60'></td>
        </tr>
        <tr>
            <td>
                <?php do_action('ma_multiple_emails', $this->_emailType, 'email-header'); ?>
                <table bgcolor="{{body.orderHeadingBackground.val}}" class="full ie-heading-bg" width="600" style="width: 600px; margin: 0px auto; padding: 0px; font-family: {{appearance.baseFont.val}}, sans-serif; background: {{body.orderHeadingBackground.val}};border-right: 1px solid #ededed; border-left: 1px solid #ededed; " cellspacing='0' cellpadding='0' border='0' align="center">
                    <tbody>
                        <tr>
                            <td colspan="4" width="600"></td>
                        </tr>
                        <tr>
                            <td height='18' colspan='4'></td>
                        </tr>
                        <tr>
                            <td width='20'></td>
                            <td width='30' class="erase"></td>
                            <td align="left" style="font-size: 18px; font-family: 'Raleway', sans-serif; font-weight: 700; color: #ffffff;letter-spacing: 2px;">
                                Your Order is: <b style="color: #f64646;">{{order.number}}</b>
                            </td>
                            <td align="right" style="color: #ffffff; font-family: {{appearance.baseFont.val}},sans-serif;font-weight: 500;">
                                (placed on {{order.datetime}})
                            </td>
                            <td width='20'></td>
                            <td width='30' class="erase"></td>
                        </tr>
                        <tr>
                            <td height='18' colspan='4'></td>
                        </tr>
                    </tbody>
                </table>
                <table bgcolor="{{body.backgroundColor.val}}" class="full ie-body-bg" width="600" style="width: 600px; margin: 0px auto; padding: 0px; border-right: 1px solid #ededed; border-left: 1px solid #ededed; background: {{body.backgroundColor.val}}; " cellspacing='0' cellpadding='0' border='0' align="center">
                    <tbody>
                        <tr>
                            <td colspan="6" width="600"></td>
                        </tr>
                        <tr>
                            <td height='40' colspan='6'></td>
                        </tr>
                        <tr>
                            <td width='30' rowspan='20' class="erase"></td>
                            <td width='20' rowspan='20'></td>
                            <td colspan="4" align="left" style="font-size: 15px; font-family: 'Raleway', sans-serif; font-weight: 600; color: #000000; ">Here's what you ordered:</td>
                            <td width='30' rowspan='20' class="erase"></td>
                            <td width='20' rowspan='20'></td>
                        </tr>
                        <tr>
                            <td height='15' colspan='4'></td>
                        </tr>
                       
                        <?php do_action('ma_items_loop', $this->_order, $this->_wcEmail, '', "<tr ng-repeat-start='item in products'><td height='15' colspan='4'></td></tr>", '<tr ng-repeat-end><td height="1" colspan="4" bgcolor="#f3f3f3" style="background: #f3f3f3; "></td></tr>'); ?>
                        
                    </tbody>
                </table>
                <!-- Product List -->
                <table bgcolor="{{body.backgroundColor.val}}" class="full ie-body-bg" width="600" style="width: 600px; margin: 0px auto; padding: 0px; font-family: {{appearance.baseFont.val}}, sans-serif; background:{{body.backgroundColor.val}};border-right: 1px solid #ededed; border-left: 1px solid #ededed; " cellspacing='0' cellpadding='0' border='0' align="center">
                    <tbody>
                        <tr>
                            <td width="600" colspan="7"></td>
                        </tr>
                        <tr>
                            <td height='15' colspan='7'></td>
                        </tr>
                        <tr>
                            <td height='15'></td>
                        </tr>
                        <tr>
                            <td width='30'></td>
                            <td width='20' class="erase"></td>
                            <td class="text-left" align="right" colspan="3" style="color: #606060;font-size: 13px; font-family: 'Raleway', sans-serif; font-weight: bold;letter-spacing: 0.5px;">SUBTOTAL</td>
                            <td width='15' rowspan='1' class='erase'></td>
                            <td align="right" style="color: #262626; font-family: Helvetica, sans-serif; font-size: 16px;">{{order.subtotal}}</td>
                            <td width='30' class=""></td>
                            <td width='10' class="erase"></td>
                        </tr>
                        <tr>
                            <td height='15'></td>
                        </tr>
                        <tr>
                            <td width='30'></td>
                            <td width='20' class="erase"></td>
                            <td class="text-left" align="right" colspan="3" style="color: #606060; font-family: 'Raleway', sans-serif; font-weight: bold;letter-spacing: 0.5px;">SHIPPING & HANDLING</td>
                            <td width='15' rowspan='1' class='erase'></td>
                            <td align="right" style="color: #262626; font-family: Helvetica, sans-serif; font-size: 16px;">{{order.shipping_total}}</td>
                            <td width='30' class=""></td>
                            <td width='10' class="erase"></td>
                        </tr>
                        <tr>
                            <td height='15'></td>
                        </tr>
                        <tr>
                            <td width='30'></td>
                            <td width='20' class="erase"></td>
                            <td class="text-left" align="right" colspan="3" style="color: #606060; font-family: 'Raleway', sans-serif; font-weight: bold; letter-spacing: 0.5px;">GRAND TOTAL</td>
                            <td width='15' rowspan='1' class='erase'></td>
                            <td align="right" style="color: #262626; font-family: Helvetica, sans-serif; font-size: 16px;font-weight: 700;">{{order.total}}</td>
                            <td width='30' class=""></td>
                            <td width='10' class="erase"></td>
                        </tr>
                        <tr>
                            <td height='15' colspan='7'></td>
                        </tr>
                    </tbody>
                </table>
                <!-- Billing to: -->
                <table class="full ie-body-bg" align="center" style="width: 600px; margin: 0px auto; padding: 0px; font-family: {{appearance.baseFont.val}}, sans-serif; background: {{body.backgroundColor.val}};border-right: 1px solid #ededed; border-left: 1px solid #ededed;" bgcolor="{{body.backgroundColor.val}}" width="600" cellspacing="0" cellpadding="0" border="0">
                    <tbody>
                        <tr>
                            <td height='40' colspan='4'></td>
                        </tr>
                        <tr class="erase">
                            <td colspan="4" width="600"></td>
                        </tr>
                        <tr class="erase">
                            <td width='25' rowspan='10'></td>
                            <td colspan="2"></td>
                            <td width='25' rowspan='10'></td>
                        </tr>
                        <tr>
                            <td class="full" align="left">
                                <table class="ie-body-bg" align="center" style="border: 1px solid #eeece7; background: {{body.backgroundColor.val}}; " bgcolor="{{body.backgroundColor.val}}" width='90%' cellspacing="0" cellpadding="0" border="0">
                                    <tbody>
                                        <tr>
                                            <td width='25' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                            <td height="55" bgcolor="#f3f3f3" style="font-weight: bold; background: #f3f3f3;font-family: Helvetica,sans-serif;color: #2b2b2b; ">
                                                Bill To:
                                            </td>
                                            <td width='25' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                        </tr>
                                        <tr>
                                            <td width='25' rowspan='8'></td>
                                            <td></td>
                                            <td width='25' rowspan='8'></td>
                                        </tr>
                                        <tr>
                                            <td height='15'></td>
                                        </tr>
                                        <tr>
                                            <td height="25" style="color: #646464; font-family: Helvetica,sans-serif; ">
                                                {{order.billing_fullname}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="25" style="color: #646464; font-family: Helvetica,sans-serif;">
                                                {{order.billing_address}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="25" style="color: #646464; font-family: Helvetica,sans-serif;">
                                                {{order.billing_postcode}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="25" style="color: #646464; font-family: Helvetica,sans-serif;">
                                                {{order.billing_city}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="25" style="color: #646464; font-family: Helvetica,sans-serif;">
                                                {{order.billing_country}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="25" style="color: #646464; font-family: Helvetica,sans-serif;">
                                                T: {{order.billing_phone}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height='20'></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td height="20" class="full hide-on-dt"></td>
                            <td class="full" align="right">
                                <table class="ie-body-bg" align="center" style="border: 1px solid #eeece7; background: {{body.backgroundColor.val}}; " bgcolor="{{body.backgroundColor.val}}" width='90%' cellspacing="0" cellpadding="0" border="0">
                                    <tbody>
                                        <tr>
                                            <td width='25' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                            <td height="55" bgcolor="#f3f3f3" style="font-weight: bold; background: #f3f3f3;font-family: Helvetica,sans-serif;color: #2b2b2b; ">
                                                Ship To:
                                            </td>
                                            <td width='25' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                        </tr>
                                        <tr>
                                            <td width='25' rowspan='8'></td>
                                            <td></td>
                                            <td width='25' rowspan='8'></td>
                                        </tr>
                                        <tr>
                                            <td height='15'></td>
                                        </tr>
                                        <tr>
                                            <td height="25" style="color: #646464; font-family: Helvetica,sans-serif;">
                                                {{order.shipping_fullname}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="25" style="color: #646464; font-family: Helvetica,sans-serif;">
                                                {{order.shipping_address}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="25" style="color: #646464; font-family: Helvetica,sans-serif;">
                                                {{order.shipping_postcode}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="25" style="color: #646464; font-family: Helvetica,sans-serif;">
                                                {{order.shipping_city}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="25" style="color: #646464; font-family: Helvetica,sans-serif;">
                                                {{order.shipping_country}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="25" style="color: #646464; font-family: Helvetica,sans-serif;">
                                                T: {{order.billing_phone}}
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height='20'></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td height='40'></td>
                        </tr>
                    </tbody>
                </table>
                <table class="full ie-body-bg" align="center" style="width: 600px; margin: 0px auto; padding: 0px; font-family: {{appearance.baseFont.val}}, sans-serif; background: {{body.backgroundColor.val}};border-right: 1px solid #ededed; border-left: 1px solid #ededed;border-bottom: 1px solid #ededed; border-radius: 0px 0px 5px 5px;" bgcolor="{{body.backgroundColor.val}}" width="600" cellspacing="0" cellpadding="0" border="0">
                    <tbody>
                        <tr>
                            <td>
                                <!-- Image -->
                                <table class="full" align="center" cellspacing="0" cellpadding="10" border="0">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <a href="#">
                                                    <img style="max-width: 100%;" <?php $this->imgSrc("{{body.banner.val}}"); ?> alt="banner">
                                                </a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td height='50' colspan='3'></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <!-- Footer -->
                <table class="full ie-footer-bg" align="center" style="width: 600px; margin: 0px auto; padding: 0px; font-family: {{appearance.baseFont.val}}, sans-serif; background: {{footer.backgroundColor.val}}; " bgcolor="{{footer.backgroundColor.val}}" width="600" cellspacing="0" cellpadding="0" border="0">
                    <tbody>
                        <tr>
                            <td height='35'></td>
                        </tr>
                        <tr>
                            <td colspan="3" width="600"></td>
                        </tr>
                        <tr>
                            <td width='10'></td>
                            <td class="full liquid-center" width="400" style="width: 400px; ">
                                <table width="100%" align="left" cellspacing='0' cellpadding='0' border='0'>
                                    <tbody>
                                        <tr>
                                            <td align="left" class="liquid-center">
                                                <img src='{{footer.footerLogo.val}}' alt='OrderMail' />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height='20'></td>
                                        </tr>
                                        <tr>
                                            <td style="color: #adadad; " class="liquid-center">
                                                <p style="font-family: Helvetica,sans-serif; margin: 0px;font-size: 14px;line-height: 22px;">
                                                    <?php if ($this->_preview) { ?>
                                                    <div ng-bind-html="footer.unsubscribeText.val | trusted"></div>
                                                <?php } else { ?>
                                                    {{footer.unsubscribeText.val}}
                                                <?php } ?>
                                                </p>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td class="full" width="290" style="width: 290px; ">
                                <table width="100%" cellspacing='0' cellpadding='0' border='0'>
                                    <tbody>
                                        <tr>
                                            <td align="right" class="liquid-center mobile-margin">
                                                &nbsp;&nbsp;&nbsp;&nbsp;
                                                <a href="{{socialLinks.twitterLink.val}}"><img src="http://monsart.net/emails/order-3/images/twitter-red.png" alt="t" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a href="{{socialLinks.facebookLink.val}}"><img src="http://monsart.net/emails/order-3/images/facebook-red.png" alt="f" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a href="{{socialLinks.googlePlusLink.val}}"><img src="http://monsart.net/emails/order-3/images/google+-red.png" alt="g+" /></a>&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a href="{{socialLinks.pinterestLink.val}}"><img src="http://monsart.net/emails/order-3/images/pinterest-red.png" alt="p" /></a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height='10'></td>
                                        </tr>
                                        <tr>
                                            <td align="right" style="color: #585858; " class="liquid-center">
                                                <?php if ($this->_preview) { ?>
                                                    <div ng-bind-html="footer.contactInfo.val | trusted"></div>
                                                <?php } else { ?>
                                                    {{footer.contactInfo.val}}
                                                <?php } ?>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td width='10'></td>
                        </tr>
                        <tr>
                            <td height='50'></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>