<?php
/* @var $this MaEmail */
?>
<table bgcolor="{{appearance.backgroundColor.val}}" class="full full-table ie-appearance-bg" 
       style="
       background-image: url('{{appearance.backgroundImage.val}}');
       background-color: {{appearance.backgroundColor.val}}; 
       font-family: '{{appearance.baseFont.val}}', sans-serif; 
       width: 100%; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; 
       -o-background-size: 100% auto; background-size: cover; background-attachment: fixed; 
       background-position: top center; background-repeat: no-repeat;" 
       width="100%" cellspacing='0' cellpadding='0' border='0'>
    <tbody>
        <tr>
            <td height='50' class="erase"></td>
        </tr>
        <tr>
            <td height='50'></td>
        </tr>
        <tr>
            <td>
                <!-- Header lvl1-->
                <table bgcolor="{{header.backgroundColor.val}}" class="full ie-header-bg" width="600" style="background-color:{{header.backgroundColor.val}}; width: 600px; margin: 0px auto; padding: 0px; font-family: Helvetica, Arial, sans-serif, 'Open Sans'; letter-spacing: 0.7px; " cellspacing='0' cellpadding='0' border='0' align="center">
                    <tbody>
                        <tr>
                            <td colspan="4" width="600"></td>
                        </tr>
                        <tr>
                            <td height='20'></td>
                        </tr>
                        <tr>
                            <td width='40'></td>
                            <td align="left" class="full ">
                                <table width="100%;" >
                                    <tbody>
                                        <tr>
                                            <td height='5'></td>
                                        </tr>
                                        <tr>
                                            <td class="liquid-center" valign="center">
                                                <a href="{{header.logoUrl.val}}">
                                                    <img <?php $this->imgSrc('{{header.logo.val}}') ?> alt='Logo' />
                                                </a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height='10'></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td align="right" class="full liquid-center">
                                <a style="text-decoration: none; color: #ffffff; " href="{{menu.menuItemUrl_1.val}}">{{menu.menuItem_1.val}}</a>
                                <a style="text-decoration: none; color: #ffffff; " href="{{menu.menuItemUrl_2.val}}">&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;{{menu.menuItem_2.val}}</a>
                                <a style="text-decoration: none; color: #ffffff; " href="{{menu.menuItemUrl_3.val}}">&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;{{menu.menuItem_3.val}}</a>
                            </td>
                            <td width='40'></td>
                        </tr>
                        <tr>
                            <td height='20'></td>
                        </tr>
                    </tbody>
                </table>
                <!-- Header lvl2-->
                <?php do_action('ma_multiple_emails', $this->_emailType, 'email-header'); ?>
                <table bgcolor="#ffffff" class="full" width="600" style="width: 600px; margin: 0px auto; padding: 0px; font-family: 'Open Sans', sans-serif; background: #ffffff; border-radius: 0px 0px 4px 4px;" cellspacing='0' cellpadding='0' border='0' align="center">
                    <tbody>
                        <tr>
                            <td colspan="4" width="600"></td>
                        </tr>
                        <tr>
                            <td width='20' rowspan='100'></td>
                            <td>
                                <table class="full" width="520" cellspacing='0' cellpadding='0' border='0'>
                                    <tbody>
                                        <!-- Left: -->
                                    <td valign="top" width="220" class="full">
                                        <!-- Left: Row 1 -->
                                        <table class="full" bgcolor="#f3f3f3" style="background: #f3f3f3; " width="240" cellspacing='0' cellpadding='0' border='0'>
                                            <tbody>
                                                <tr>
                                                    <td height='30' colspan='3' bgcolor='#ffffff' style='background: #ffffff;'></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="3" width="240"></td>
                                                </tr>
                                                <tr>
                                                    <td height='10' colspan='3'></td>
                                                </tr>
                                                <tr>
                                                    <td width='20' rowspan='3'></td>
                                                    <td style="color: #6f6f6f;font-size: 14px;font-family: '{{appearance.baseFont.val}}', sans-serif,'Open Sans'; ">
                                                        Order placed
                                                    </td>
                                                    <td width='20' rowspan='3'></td>
                                                </tr>
                                                <tr>
                                                    <td height='5' colspan='1'></td>
                                                </tr>
                                                <tr>
                                                    <td style="color: #3a3a3a; font-family: '{{appearance.baseFont.val}}', sans-serif; font-weight: 800; font-size: 18px; ">
                                                        {{order.date}}
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td height='15' colspan='3'></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <!-- Left: Row 2 -->
                                        <table class="full" bgcolor="#303030" style="background: #303030; " width="240" cellspacing='0' cellpadding='0' border='0'>
                                            <tbody>
                                                <tr>
                                                    <td height='15' colspan='3' bgcolor='#ffffff' style='background: #ffffff;'></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="3" width="240"></td>
                                                </tr>
                                                <tr>
                                                    <td height='10' colspan='3'></td>
                                                </tr>
                                                <tr>
                                                    <td width='20' rowspan='3'></td>
                                                    <td align="center" style="color: #ffffff;font-family: '{{appearance.baseFont.val}}', sans-serif;font-size: 14px; ">Order number</td>
                                                    <td width='20' rowspan='3'></td>
                                                </tr>
                                                <tr>
                                                    <td height='5' colspan='1'></td>
                                                </tr>
                                                <tr>
                                                    <td align="center" style="color: #ffffff; font-family: '{{appearance.baseFont.val}}', sans-serif; font-weight: bold; font-size: 14px; ">{{order.number}}</td>
                                                </tr>
                                                <tr>
                                                    <td height='10' colspan='3'></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <!-- Left: Row 3 -->
                                        <table class="full" bgcolor="#f3f3f3" style="background: #f3f3f3; " width="240" cellspacing='0' cellpadding='0' border='0'>
                                            <tbody>
                                                <tr>
                                                    <td height='15' colspan='3' bgcolor='#ffffff' style='background: #ffffff;'></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="3" width="240"></td>
                                                </tr>
                                                <tr>
                                                    <td height='10' colspan='3'></td>
                                                </tr>
                                                <tr>
                                                    <td width='20' rowspan='100'></td>
                                                    <td align="left" style="color: #363636; font-weight: bold; font-size: 14px; font-family: '{{appearance.baseFont.val}}',sans-serif;"><b>Recipient</b></td>
                                                    <td width='20' rowspan='100'></td>
                                                </tr>
                                                <tr>
                                                    <td height='5'></td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="color: #363636; font-size: 14px;font-family: '{{header.headerFont.val}}',sans-serif; ">{{order.shipping_first_name}} {{order.shipping_last_name}}</td>
                                                </tr>
                                                <tr>
                                                    <td height='5'></td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="color: #363636; font-size: 14px;font-family: '{{appearance.baseFont.val}}',sans-serif; ">{{order.shipping_address}}</td>
                                                </tr>
                                                <tr>
                                                    <td height='5'></td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="color: #363636; font-size: 14px; font-family: '{{appearance.baseFont.val}}',sans-serif;">{{order.shipping_phone}}</td>
                                                </tr>
                                                <tr>
                                                    <td height='5'></td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="color: #363636; font-size: 14px;font-family: '{{appearance.baseFont.val}}',sans-serif; ">{{order.shipping_postcode}}</td>
                                                </tr>
                                                <tr>
                                                    <td height='5'></td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="color: #363636; font-size: 14px;font-family: '{{appearance.baseFont.val}}',sans-serif; ">{{order.shipping_country}}</td>
                                                </tr>
                                                <tr>
                                                    <td height='25'></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <!-- Left: Row 4 -->
                                        <table class="full" bgcolor="#f3f3f3" style="background: #f3f3f3; " width="240" cellspacing='0' cellpadding='0' border='0'>
                                            <tbody>
                                                <tr>
                                                    <td height='15' colspan='3' bgcolor='#ffffff' style='background: #ffffff;'></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="3" width="240"></td>
                                                </tr>
                                                <tr>
                                                    <td height='10' colspan='3'></td>
                                                </tr>
                                                <tr>
                                                    <td width='20' rowspan='100'></td>
                                                    <td align="left" style="color: #262626; font-weight: bold; font-size: 14px; font-family: '{{appearance.baseFont.val}}',sans-serif;"><b>Billed To:</b></td>
                                                    <td width='20' rowspan='100'></td>
                                                </tr>
                                                <tr>
                                                    <td height='5'></td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="color: #262626; font-size: 14px; font-family: '{{appearance.baseFont.val}}',sans-serif;">{{order.billing_first_name}} {{order.billing_last_name}}</td>
                                                </tr>
                                                <tr>
                                                    <td height='5'></td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="color: #262626; font-size: 14px; font-family: '{{appearance.baseFont.val}}',sans-serif;">{{order.billing_address}}</td>
                                                </tr>
                                                <tr>
                                                    <td height='5'></td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="color: #262626; font-size: 14px; font-family: '{{appearance.baseFont.val}}',sans-serif;">{{order.billing_phone}}</td>
                                                </tr>
                                                <tr>
                                                    <td height='5'></td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="color: #262626; font-size: 14px; font-family: '{{appearance.baseFont.val}}',sans-serif;">{{order.billing_postcode}}</td>
                                                </tr>
                                                <tr>
                                                    <td height='5'></td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="color: #262626; font-size: 14px; font-family: '{{appearance.baseFont.val}}',sans-serif;">{{order.billing_country}}</td>
                                                </tr>
                                                <tr>
                                                    <td height='25'></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <!-- Left: Row 5 -->
                                        <table class="full" bgcolor="#f3f3f3" style="background: #f3f3f3; " width="240" cellspacing='0' cellpadding='0' border='0'>
                                            <tbody>
                                                <tr>
                                                    <td height='15' colspan='4' bgcolor='#ffffff' style='background: #ffffff;'></td>
                                                </tr>
                                                <tr>
                                                    <td colspan="4" width="240"></td>
                                                </tr>
                                                <tr>
                                                    <td height='10' colspan='4'></td>
                                                </tr>
                                                <tr>
                                                    <td width='20' rowspan='100'></td>
                                                    <td width="100"></td>
                                                    <td width="100"></td>
                                                    <td width='20' rowspan='100'></td>
                                                </tr>
                                                <tr>
                                                    <td height='5' colspan='2'></td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="color: #363636; font-size: 14px;font-family: '{{appearance.baseFont.val}}',sans-serif; ">Subtotal</td>
                                                    <td align="right" style="color: #3a3a3a; font-size: 14px; font-weight: bold; font-family: '{{appearance.baseFont.val}}',sans-serif;">{{order.subtotal}}</td>
                                                </tr>
                                                <tr>
                                                    <td height='5' colspan='2'></td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="color: #363636; font-size: 14px; font-family: '{{appearance.baseFont.val}}',sans-serif;">Shiping</td>
                                                    <td align="right" style="color: #3a3a3a; font-size: 14px; font-weight: bold; font-family: '{{appearance.baseFont.val}}',sans-serif;"><b style="color:#e66161;">{{order.shipping_total}}</b></td>
                                                </tr>
                                                <tr>
                                                    <td height='5' colspan='2'></td>
                                                </tr>

                                                <tr>
                                                    <td height='5' colspan='2'></td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="color: #363636; font-size: 14px;font-family: '{{appearance.baseFont.val}}',sans-serif; ">Tax</td>
                                                    <td align="right" style="color: #3a3a3a; font-size: 14px; font-weight: bold;font-family: '{{appearance.baseFont.val}}',sans-serif; ">{{order.tax}}</td>
                                                </tr>
                                                <tr>
                                                    <td height='20' colspan='2'></td>
                                                </tr>
                                                <tr>
                                                    <td height="1" colspan="2" bgcolor="#dfdfdf" style="background: #dfdfdf; "></td>
                                                </tr>
                                                <tr>
                                                    <td height='15' colspan='2'></td>
                                                </tr>
                                                <tr>
                                                    <td height='5' colspan='2'></td>
                                                </tr>
                                                <tr>
                                                    <td align="left" style="color: #363636; font-size: 14px; font-family: '{{appearance.baseFont.val}}',sans-serif;"><b style="color: #363636;">Total</b></td>
                                                    <td align="right" style="color: #3a3a3a; font-size: 14px; font-weight: bold; font-family: '{{appearance.baseFont.val}}',sans-serif;">{{order.total}}</td>
                                                </tr>
                                                <tr>
                                                    <td height='5' colspan='2'></td>
                                                </tr>

                                                <tr>
                                                    <td height='25' colspan='2'></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                    <!-- Right: -->
                                    <td valign="top" width="300" class="full">

                                        <?php do_action('ma_items_loop', $this->_order, $this->_wcEmail); ?>
                                    </td>
                    </tbody>
                </table>
            </td>
            <td width='20' rowspan='100'></td>
        </tr>
        <tr>
            <td height='40'></td>
        </tr>
        <tr>
            <td style="color: #6f6f6f; font-style: italic; font-size: 14px;font-family: '{{appearance.baseFont.val}}',sans-serif; letter-spacing: 1px;line-height: 22px;font-weight: 400;">
                <?php if ($this->_preview) { ?>
                    <div ng-bind-html="body.orderBottomText.val | trusted"></div>
                <?php } else { ?>
                    {{body.orderBottomText.val}}
                <?php } ?>

            </td>
        </tr>
        <tr>
            <td height='50'></td>
        </tr>
    </tbody>
</table>

<!-- Footer -->
<table class="full" width="600" style="width: 600px; margin: 0px auto; padding: 0px; font-family: 'Open Sans', sans-serif; " cellspacing='0' cellpadding='0' border='0' align="center">
    <tbody>
        <tr>
            <td colspan="2" width="600"></td>
        </tr>
        <tr>
            <td height='20'></td>
        </tr>
        <tr>
            <td align="left" class="full liquid-center" style="color: #ffffff;font-family: Helvetica, Arial, sans-serif, 'Open Sans'; font-size: 12px;">

                <?php if ($this->_preview) { ?>
                    <div ng-bind-html="footer.copyright.val | trusted"></div>
                <?php } else { ?>
                    {{footer.copyright.val}}
                <?php } ?>
            </td>
            <td align="right" class="full liquid-center">
                <a style="text-decoration: none; color: #d63c3c; font-weight: bold; font-family: Helvetica, Arial, sans-serif, 'Open Sans';" href="http://monsart.net/emails/order-1/">Unsubscribe</a>
            </td>
        </tr>
        <tr>
            <td height='40'></td>
        </tr>
    </tbody>
</table>
</td>
</tr>
</tbody>
</table>