<?php
/* @var $this MaEmail */
?>
<!-- Header lvl1-->
<table class="ie-menu-bg" bgcolor="{{menu.menuBackground.val}}" style="width: 100%; background-color: {{menu.menuBackground.val}}; " width="100%" cellspacing='0' cellpadding='0' border='0'>
    <tbody>
        <tr>
            <td>
                <table class="full" width="500" style="width: 500px; margin: 0px auto; padding: 0px; font-family: {{appearance.baseFont.val}}, sans-serif; " cellspacing='0' cellpadding='0' border='0' align="center">
                    <tbody>
                        <tr>
                            <td width="500" colspan="9"></td>
                        </tr>
                        <tr>
                            <td height='10'></td>
                        </tr>
                        <tr>
                            <!-- no separator for first -->
                            <td align="center">
                               <a style="text-decoration: none; color: #ffffff; font-size: 14px; " href="{{menu.menuItemUrl_1.val}}">{{menu.menuItem_1.val}}</a>
                            </td>
                            <td align="center" style="color: #ffffff; ">|</td>
                            <td align="center">
                                <a style="text-decoration: none; color: #ffffff; font-size: 14px; " href="{{menu.menuItemUrl_2.val}}">{{menu.menuItem_2.val}}</a>
                            </td>
                            <td align="center" style="color: #ffffff; ">|</td>
                            <td align="center">
                                <a style="text-decoration: none; color: #ffffff; font-size: 14px; " href="{{menu.menuItemUrl_3.val}}">{{menu.menuItem_3.val}}</a>
                            </td>
                            <td align="center" style="color: #ffffff; ">|</td>
                            <td align="center">
                                <a style="text-decoration: none; color: #ffffff; font-size: 14px; " href="{{menu.menuItemUrl_4.val}}">{{menu.menuItem_4.val}}</a>
                            </td>
                            <td width='60' class="erase"></td>
                        </tr>
                        <tr>
                            <td height='15'></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
<!-- Header lvl2-->
<table class="ie-header-bg" bgcolor="{{header.background.val}}" style="width: 100%; background: {{header.background.val}}; border-bottom: 1px solid #ebebeb; " width="100%" cellspacing='0' cellpadding='0' border='0'>
    <tbody>
        <tr>
            <td>
                <table class="ie-header-bg" bgcolor="{{header.background.val}}" class="full" width="500" style="width: 500px; margin: 0px auto; padding: 0px; font-family: {{appearance.baseFont.val}}, sans-serif; background: {{header.background.val}}; " cellspacing='0' cellpadding='0' border="0" align="center">
                    <tbody>
                        <tr>
                            <td width="500" colspan="7"></td>
                        </tr>
                        <tr>
                            <td height='40'></td>
                        </tr>
                        <tr>
                            <td width='10'></td>
                            <td valign="middle" class="full mobile-center">
                                <a href="{{header.logoUrl.val}}">
                                    <img <?php $this->imgSrc('{{header.logo.val}}') ?> alt='Logo' />
                                </a>
                            </td>
                            <td width='40' class="erase"></td>
                            <td class="erase" width="2" bgcolor="#c6c6c6" style="background: #eeece7; "></td>
                            <td width='16' class="erase"></td>
                            <td class="show-on-mobile full" height="20"></td>
                            <td valign="middle" class="full pad-15">
                                <?php if ($this->_preview) { ?>
                                    <div ng-bind-html="header.headerContent.val | trusted"></div>
                                <?php } else { ?>
                                    {{header.headerContent.val}} 
                                <?php } ?> 
                            </td>
                            <td width='8'></td>
                        </tr>
                        <tr>
                            <td height='40'></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
<!-- Header lvl3-->
<?php do_action('ma_multiple_emails', $this->_emailType, 'email-header'); ?>


<!-- Content -->
<table class="pad-15 ie-appearance-bg" bgcolor="{{appearance.backgroundColor.val}}" style="width: 100%; background: {{appearance.backgroundColor.val}}; " width="100%" cellspacing='0' cellpadding='0' border='0'>
    <tbody>
        <tr>
            <td>
                <table bgcolor="#ffffff" class="full" width="500" style="width: 500px; margin: 0px auto; padding: 0px; font-family: {{appearance.baseFont.val}}, sans-serif; background: #ffffff;border: 1px solid #eaeaea;" cellspacing='0' cellpadding='0' border='0' align="center">
                    <tbody>
                        <tr>
                            <td width="500" colspan="6"></td>
                        </tr>
                        <tr>
                            <td height='20' colspan='6' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                        </tr>
                        <tr>
                            <td width='30' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                            <td align="left" class="" style="background: #f3f3f3; color: #606060; font-family: 'Monserrat', sans-serif; font-weight: bold; font-size: 12px;" bgcolor="#f3f3f3">
                                ITEM IN YOUR ORDER
                            </td>
                            <td align="center" class="erase" style="background: #f3f3f3; color: #464646; color: #606060; font-family: 'Monserrat', sans-serif; font-weight: bold; font-size: 12px; " bgcolor="#f3f3f3">
                                PRICE
                            </td>
                            <td align="center" class="right-text" style="background: #f3f3f3; color: #606060; font-family: 'Monserrat', sans-serif; font-weight: bold; font-size: 12px; " bgcolor="#f3f3f3">
                                QTY
                            </td>
                            <td align="center" class="erase" style="background: #f3f3f3; color: #606060; font-family: 'Monserrat', sans-serif; font-weight: bold; font-size: 12px;" bgcolor="#f3f3f3">
                                TOTAL
                            </td>
                            <td width='20' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                        </tr>
                        <tr>
                            <td height='6' colspan='6' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                        </tr>
                        <?php do_action('ma_items_loop', $this->_order, $this->_wcEmail, '',
                                "<tr ng-repeat-start='item in products'><td height='15' colspan='6' bgcolor='#ffffff' style='background: #ffffff;'></td></tr>",
                                '<tr ng-repeat-end><td colspan="6" height="1" bgcolor="#eaeaea" style="background: #eaeaea; "></td></tr>'); ?>
                        
                        
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table bgcolor="#f3f3f3" class="full" width="500" style="width: 500px; margin: 0px auto; padding: 0px; font-family: {{appearance.baseFont.val}}, sans-serif; background: #f3f3f3; border-left: 1px solid #eaeaea;border-right: 1px solid #eaeaea;border-bottom: 1px solid #eaeaea; " cellspacing='0' cellpadding='0' border='0' align="center">
                    <tbody>
                        <tr>
                            <td height='15'></td>
                        </tr>
                        <tr>
                            <td height='15'></td>
                        </tr>
                        <tr>
                            <td class="text-left pad-30" width="465" align="right" colspan="3" style="color: #606060; font-family: 'Monserrat', sans-serif; font-weight: bold;font-size: 12px; ">SUBTOTAL</td>
                            <td width='70' class='erase'></td>
                            <td align="right" style="background: #f3f3f3; color: #262626; font-family: Helvetica, sans-serif;font-size: 16px; " bgcolor="#f3f3f3">{{order.subtotal}}</td>

                            <td width='20' style="padding-right: 20px;"></td>
                        </tr>
                        <tr>
                            <td height='15'></td>
                        </tr>
                        <tr>
                            <td class="text-left pad-30" width="465" align="right" colspan="3" style="color: #606060; font-family: 'Monserrat', sans-serif; font-weight: bold;font-size: 12px; ">SHIPPING & HANDLING</td>
                            <td width='70' class='erase'></td>
                            <td align="right" style="background: #f3f3f3; color: #262626; font-family: Helvetica, sans-serif;font-size: 16px; " bgcolor="#f3f3f3">{{order.shipping_total}}</td>
                            <td width='20'></td>
                        </tr>
                        <tr>
                            <td height='15'></td>
                        </tr>
                        <tr>
                            <td class="text-left pad-30" width="465" align="right" colspan="3" style="color: #606060; font-family: 'Monserrat', sans-serif; font-weight: bold;font-size: 12px; ">GRAND TOTAL</td>
                            <td width='70' class='erase'></td>
                            <td align="right" style="background: #f3f3f3; color: #262626; font-family: Helvetica, sans-serif;font-weight: 700;font-size: 16px; " bgcolor="#f3f3f3"><b>{{order.total}}</b></td>
                            <td width='20'></td>
                        </tr>
                        <tr>
                            <td height='50'></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

<table class="ie-appearance-bg" width="100%" bgcolor="{{appearance.backgroundColor.val}}" style="background: {{appearance.backgroundColor.val}}; width: 100%;">
    <tr>
        <td>
            <table class="full pad-15" align="center" style="width: 500px; margin: 0px auto; padding: 0px; font-family: {{appearance.baseFont.val}}, sans-serif; background: #ffffff; " bgcolor="#ffffff" width="600" cellspacing="0" cellpadding="0" border="0">
                <tbody>
                    <tr>
                        <td colspan="3" width="600"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td width='25' rowspan='10' class='erase'></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td height='20' class='erase'></td>
                    </tr>
                    <tr>               
                        <td height='20' class="hide-on-desktop full"></td><!-- //Hide on desktop-->         
                        <td class="full" align="left">
                            <table align="center" style="margin: 0 auto; border: 1px solid #eeece7; background: #ffffff; " bgcolor="#ffffff" width='100%' cellspacing="0" cellpadding="0" border="0">
                                <tbody>
                                    <tr>
                                        <td height='20' colspan='3' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                    </tr>
                                    <tr>
                                        <td width='25' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                        <td bgcolor="#2b2b2b" style="font-weight: bold; background: #f3f3f3;font-family: Helvetica,sans-serif;font-size: 13px; ">
                                            Bill To:
                                        </td>
                                        <td width='25' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                    </tr>
                                    <tr>
                                        <td height='20' colspan='3' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                    </tr>
                                    <tr>
                                        <td width='25' rowspan='100'></td>
                                        <td></td>
                                        <td width='25' rowspan='100'></td>
                                    </tr>
                                    <tr>
                                        <td height='15' colspan='1'></td>
                                    </tr>
                                    <tr>
                                        <td height="25" style="color: #646464;font-family: Helvetica,sans-serif;font-size: 13px; ">
                                            {{order.billing_fullname}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="25" style="color: #646464;font-family: Helvetica,sans-serif;font-size: 13px; ">
                                            {{order.billing_address}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="25" style="color: #646464;font-family: Helvetica,sans-serif;font-size: 13px; ">
                                            {{order.billing_postcode}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="25" style="color: #646464;font-family: Helvetica,sans-serif;font-size: 13px; ">
                                            {{order.billing_city}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="25" style="color: #646464;font-family: Helvetica,sans-serif;font-size: 13px; ">
                                            {{order.billing_country}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="25" style="color: #646464;font-family: Helvetica,sans-serif;font-size: 13px; "">
                                            T: {{order.billing_phone}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height='20' colspan='1'></td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                        <td height='20' class="hide-on-desktop full"></td><!-- //Hide on desktop-->   
                        <td class="full" align="right">
                            <table align="center" style="margin: 0 auto; border: 1px solid #eeece7; background: #ffffff; " bgcolor="#ffffff" width='100%' cellspacing="0" cellpadding="0" border="0">
                                <tbody>
                                    <tr>
                                        <td height='20' colspan='3' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                    </tr>
                                    <tr>
                                        <td width='25' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                        <td bgcolor="#f3f3f3" style="font-weight: bold; background: #f3f3f3; font-family: Helvetica,sans-serif;font-size: 13px;">
                                            Ship To:
                                        </td>
                                        <td width='25' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                    </tr>
                                    <tr>
                                        <td height='20' colspan='3' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                    </tr>
                                    <tr>
                                        <td width='25' rowspan='100'></td>
                                        <td></td>
                                        <td width='25' rowspan='100'></td>
                                    </tr>
                                    <tr>
                                        <td height='15' colspan='1'></td>
                                    </tr>
                                    <tr>
                                        <td height="25" style="color: #646464;font-family: Helvetica,sans-serif;font-size: 13px; ">
                                            {{order.shipping_fullname}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="25" style="color: #646464;font-family: Helvetica,sans-serif;font-size: 13px; ">
                                            {{order.shipping_address}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="25" style="color: #646464;font-family: Helvetica,sans-serif;font-size: 13px; ">
                                            {{order.shiiping_postcode}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="25" style="color: #646464;font-family: Helvetica,sans-serif;font-size: 13px; ">
                                            {{order.shiiping_city}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="25" style="color: #646464;font-family: Helvetica,sans-serif;font-size: 13px; ">
                                            {{order.shipping_country}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height="25" style="color: #646464;font-family: Helvetica,sans-serif;font-size: 13px; ">
                                            T: {{order.billing_phone}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height='20' colspan='1'></td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td height='20' ></td>
                    </tr>
                    <tr>
                        <td class="full" align="left">
                            <table align="center" style="margin: 0 auto; border: 1px solid #eeece7; background: #ffffff; " bgcolor="#ffffff" width='100%' cellspacing="0" cellpadding="0" border="0">
                                <tbody>
                                    <tr>
                                        <td height='20' colspan='3' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                    </tr>
                                    <tr>
                                        <td width='25' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                        <td bgcolor="#f3f3f3" style="font-weight: bold; background: #f3f3f3;font-family: Helvetica,sans-serif;font-size: 13px; ">
                                            Shipping Method:
                                        </td>
                                        <td width='25' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                    </tr>
                                    <tr>
                                        <td height='20' colspan='3' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                    </tr>
                                    <tr>
                                        <td width='25' rowspan='100'></td>
                                        <td></td>
                                        <td width='25' rowspan='100'></td>
                                    </tr>
                                    <tr>
                                        <td height='15' colspan='1'></td>
                                    </tr>
                                    <tr>
                                        <td height="25" style="color: #646464;font-family: Helvetica,sans-serif;font-size: 13px; ">
                                            {{order.shipping_method}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height='20' colspan='1'></td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>  
                        <td height="20" class="hide-on-desktop full"></td><!-- //Hide on desktop--> 
                        <td class="full" align="right">
                            <table align="center" style="margin: 0 auto; border: 1px solid #eeece7; background: #ffffff; " bgcolor="#ffffff" width='100%' cellspacing="0" cellpadding="0" border="0">
                                <tbody>
                                    <tr>
                                        <td height='20' colspan='3' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                    </tr>
                                    <tr>
                                        <td width='25' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                        <td bgcolor="#f3f3f3" style="font-weight: bold; background: #f3f3f3; font-family: Helvetica,sans-serif;font-size: 13px;">
                                            Payment Method:
                                        </td>
                                        <td width='25' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                    </tr>
                                    <tr>
                                        <td height='20' colspan='3' bgcolor='#f3f3f3' style='background: #f3f3f3;'></td>
                                    </tr>
                                    <tr>
                                        <td width='25' rowspan='100'></td>
                                        <td></td>
                                        <td width='25' rowspan='100'></td>
                                    </tr>
                                    <tr>
                                        <td height='15' colspan='1'></td>
                                    </tr>
                                    <tr>
                                        <td height="25" style="color: #646464;font-family: Helvetica,sans-serif;font-size: 13px; ">
                                            {{order.pay_method}}
                                        </td>
                                    </tr>
                                    <tr>
                                        <td height='20' colspan='1'></td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td height='50'></td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>

<table class="ie-appearance-bg" width="100%" bgcolor="{{appearance.backgroundColor.val}}" style="background: {{appearance.backgroundColor.val}}; width: 100%;">
    <tr>
        <td>
            <table class="full" width="500" align="center" style="width: 500px; margin: 0px auto; padding: 0px;" cellspacing="0" cellpadding="10" border="0">
                <tbody>
                    <tr>
                        <td style="padding: 0px;" class="pad-15">
                            <table bgcolor="red" class="full" align="center" style="width: 500px; margin: 0px auto; padding: 0px; font-family: {{appearance.baseFont.val}}, sans-serif; width: 100%; " cellspacing="0" cellpadding="0" border="0">
                                <tbody>
                                    <tr>
                                        <td>
                                            <a href="{{body.bannerUrl.val}}">                                    
                                                <img style="max-width: 100%;" <?php $this->imgSrc("{{body.banner.val}}") ?> >
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>

            <table cellspacing='0' cellpadding='0' border='0'>
                <tbody>
                    <tr>
                        <td height='50'></td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
</table>
<!-- Footer -->
<table class="ie-footer-bg" bgcolor="{{footer.backgroundColor.val}}" style="width: 100%; background: {{footer.backgroundColor.val}}; " width="100%" cellspacing='0' cellpadding='0' border='0'>
    <tbody>
        <tr>
            <td>
                <table class="full" width="500" style="width: 500px; margin: 0px auto; padding: 0px; font-family: Helvetica, Arial, sans-serif, {{appearance.baseFont.val}}; " cellspacing='0' cellpadding='0' border='0' align="center">
                    <tbody>
                        <tr>
                            <td width="500" colspan="9"></td>
                        </tr>
                        <tr>
                            <td height='40'></td>
                        </tr>
                        <tr>
                            <td width='60' class="erase"></td>
                            <td align="center">
                                <a style="text-decoration: none; color: #ffffff; font-size: 13px;font-family: Helvetica,sans-serif; " href="{{menu.menuItemUrl_1.val}}">{{menu.menuItem_1.val}}</a>
                            </td>
                            <td align="center" style="color: #ffffff; ">|</td>
                            <td align="center">
                                <a style="text-decoration: none; color: #ffffff; font-size: 13px;font-family: Helvetica,sans-serif; " href="{{menu.menuItemUrl_2.val}}">{{menu.menuItem_2.val}}</a>
                            </td>
                            <td align="center" style="color: #ffffff; ">|</td>
                            <td align="center">
                                <a style="text-decoration: none; color: #ffffff; font-size: 13px;font-family: Helvetica,sans-serif; " href="{{menu.menuItemUrl_3.val}}">{{menu.menuItem_3.val}}</a>
                            </td>
                            <td align="center" style="color: #ffffff; ">|</td>
                            <td align="center">
                                <a style="text-decoration: none; color: #ffffff; font-size: 13px;font-family: Helvetica,sans-serif; " href="{{menu.menuItemUrl_4.val}}">{{menu.menuItem_4.val}}</a>
                            </td>
                            <td width='40' class="erase"></td>
                        </tr>
                        <tr>
                            <td height='30'></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td align="center" style="font-family: Helvetica, sans-serif; color: #ffffff;font-size: 12px; ">                
                <?php if ($this->_preview) { ?>
                    <div ng-bind-html="footer.copyrightText.val | trusted"></div>
                <?php } else { ?>
                    {{footer.copyrightText.val}}
                <?php } ?>
            </td>
        </tr>
        <tr>
            <td height='50' colspan='1'></td>
        </tr>
        <tr>
            <td height='20' colspan='1'></td>
        </tr>
    </tbody>
</table>