<table class="full" id="bg-image" bgcolor="{{appearance.backgroundColor.val}}" style="background-color: {{appearance.backgroundColor.val}}; width: 100%; -webkit-background-size: auto auto; -moz-background-size: auto auto; -o-background-size: auto auto; background-size: auto auto; background-position: top right; background-repeat: no-repeat; " width="100%" background="http://monsart.net/emails/order-10/images/iphone-bg.png" cellspacing="0" cellpadding="0" border="0">
    <tbody>
        <tr>
            <td>
                <!-- Header -->
                <table class="full" width="600" style="width: 600px; margin: 0px auto; padding: 0px; " cellspacing="0" cellpadding="0" border="0" align="center">
                    <tbody>
                        <!-- Gmail App Sizekeeper -->
                        <tr>
                            <td width="600"></td>
                        </tr>
                        <tr>
                            <td>
                                <table class="full" width="350" align="left" style="width: 350px; " cellspacing="0" cellpadding="0" border="0">
                                    <tbody>
                                        <!-- Gmail App Sizekeeper -->
                                        <tr>
                                            <td colspan="3" width="600"></td>
                                        </tr>
                                        <tr>
                                            <td height="30"></td>
                                        </tr>
                                        <tr>
                                            <td width="10" rowspan="10"></td>
                                            <td>
                                                <a href="{{header.logoUrl.val}}"><img src="{{header.logo.val}}" alt="Logo" /></a>
                                            </td>
                                            <td width="10" rowspan="10"></td>
                                        </tr>
                                        <tr>
                                            <td height="50"></td>
                                        </tr>
                                        <tr>
                                            <td align="left">
                                                <p style="font-size: 16px; font-family: 'Nunito', sans-serif; font-weight: 700; color: #414141; margin: 0; ">
                                                    John Do,
                                                </p>
                                                <p style="margin:0; font-family: 'Nunito',sans-serif;font-size: 16px;color: #414141;"> Thank you for your Order :) </p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="20"></td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <?php if ($this->_preview) { ?>
                                                    <div ng-bind-html="header.headerContent.val | trusted"></div>
                                                <?php } else { ?>
                                                    {{header.headerContent.val}}
                                                <?php } ?>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="40" class="erase"></td>
                                        </tr>
                                        <tr>
                                            <td height="30"></td>
                                        </tr>
                                        <tr>
                                            <td align="left">
                                                <a href="{{socialLinks.twitterLink.val}}"><img src="http://monsart.net/emails/order-10/images/twitter.png" alt="t" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a href="{{socialLinks.facebookLink.val}}"><img src="http://monsart.net/emails/order-10/images/facebook.png" alt="f" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a href="{{socialLinks.dribbleLink.val}}"><img src="http://monsart.net/emails/order-10/images/dribbble.png" alt="d" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a href="{{socialLinks.behanceLink.val}}"><img src="http://monsart.net/emails/order-10/images/be.png" alt="b" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a href="{{socialLinks.instagramLink.val}}"><img src="http://monsart.net/emails/order-10/images/instagram.png" alt="i" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a href="{{socialLinks.linkedinLink.val}}"><img src="http://monsart.net/emails/order-10/images/linkedin.png" alt="l" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="30"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!-- Main block header -->
                <table bgcolor="f9f9f9" class="full" width="600" style="width: 600px; margin: 0px auto; padding: 0px; font-family: 'Open Sans', sans-serif;border-top: 1px solid #ededed; border-right: 1px solid #ededed;border-left: 1px solid #ededed;background: #f9f9f9; " cellspacing="0" cellpadding="0" border="0" align="center">
                    <tbody>
                        <!-- Gmail App Sizekeeper -->
                        <tr>
                            <td width="600" colspan="4"></td>
                        </tr>
                        <!-- Red border Top -->
                        <tr>
                            <td width="100%" colspan="8" bgcolor="#f64646" style="background: #f64646; border-radius: 5px 5px 0px 0px; " height="7"></td>
                        </tr>
                        <tr>
                            <td height="20"></td>
                        </tr>
                        <tr>
                            <td width="25" rowspan="3" class="erase"></td>
                            <td width="25" rowspan="3"></td>
                            <td width="400" align="left" style="color: #515151; font-family: 'Open Sans', sans-serif; font-weight: bold; font-size: 18px; letter-spacing: 2px;">Your Order is: <b style="color:#f64646;">#0000001</b></td>
                            <td width="250" align="right" rowspan="3">
                                <img src="http://monsart.net/emails/order-10/images/j-letter.png" alt="j" />
                            </td>
                            <td width="25" rowspan="3" class="erase"></td>
                            <td width="25" rowspan="3"></td>
                        </tr>
                        <tr>
                            <td height="10"></td>
                        </tr>
                        <tr>
                            <td align="left" style="color: #343434;font-family: 'Open Sans',sans-serif;font-size: 13px; ">
                                (placed on 11-11-16 01:14:58 BST)
                            </td>
                        </tr>
                        <tr>
                            <td height="20"></td>
                        </tr>
                    </tbody>
                </table>
                <!-- Product list -->
                <table class="full" align="center" style="width: 600px; margin: 0px auto; padding: 0px; background: {{body.background.val}}; border-right: 1px solid #ededed;border-left: 1px solid #ededed;" bgcolor="{{body.background.val}}" width="600" cellspacing="0" cellpadding="0" border="0">
                    <tbody>
                        <tr>
                            <td colspan="6" width="600"></td>
                        </tr>
                        <tr>
                            <td width="30" rowspan="17" class="erase"></td>
                            <td width="20" rowspan="17"></td>
                            <td height="100" style="font-weight: 600;font-family: 'Raleway',sans-serif; font-size: 15px; " align="left" colspan="4">
                                Here"s what you ordered:
                            </td>
                            <td width="30" rowspan="17" class="erase"></td>
                            <td width="20" rowspan="17"></td>
                        </tr>
                        <tr>
                            <td width="125" valign="top" align="left">
                                <p style="margin: 0; ">
                                    <a href="#"><img src="http://monsart.net/emails/order-3/images/glasses.png" alt="glasses" /></a>
                                </p>
                            </td>
                            <td style="font-size: 14px; color: #262626; font-family: Helvetica,sans-serif;line-height: 23px;vertical-align: middle;" class="erase" width="200" valign="center" align="left">
                                <p style="margin: 0; ">Raybann Sunglasses</p>
                                <p style="margin:0;"> <abbr title="Stock Keeping Unit">SKU</abbr>:032821</p>
                            </td>
                            <td style="font-size: 14px; color: #262626; font-family: Helvetica,sans-serif;vertical-align: middle;" class="erase" width="125" valign="center" align="right">
                                <p style="margin: 0; ">Quantity:&nbsp;1</p>
                            </td>
                            <td style="font-size: 14px; color: #262626; font-family: Helvetica,sans-serif;vertical-align: middle;" class="" width="125" valign="center" align="right">
                                <p style="margin: 0; ">$129.00</p>
                            </td>
                        </tr>
                        <tr>
                            <td height="25"></td>
                        </tr>
                        <tr>
                            <td height="2" bgcolor="{{appearance.backgroundColor.val}}" style="background: {{appearance.backgroundColor.val}};"
                                colspan="4"><p style = "margin:0;line-height: 2px; font-size: 2px">&nbsp;</p></td>
                        </tr>
                        <tr>
                            <td height="20"></td>
                        </tr>
                        <tr>
                            <td class="" width="125" valign="top" align="left">
                                <p style="margin: 0; ">
                                    <a href="#"><img src="http://monsart.net/emails/order-3/images/shoos.png" alt="shooses" /></a>
                                </p>
                            </td>
                            <td style="font-size: 14px; color: #262626; font-family: Helvetica,sans-serif;line-height: 23px;vertical-align: middle;" class="erase" width="200" valign="center" align="left">
                                <p style="margin: 0; ">Shoes Latest Collection</p>
                                <p style="margin:0;"> <abbr title="Stock Keeping Unit">SKU</abbr>:032821</p>
                            </td>
                            <td style="font-size: 14px; color: #262626; font-family: Helvetica,sans-serif;vertical-align: middle;" class="erase" width="125" valign="center" align="right">
                                <p style="margin: 0; ">Quantity:&nbsp;1</p>
                            </td>
                            <td style="font-size: 14px; color: #262626; font-family: Helvetica,sans-serif;vertical-align: middle;" class="" width="125" valign="center" align="right">
                                <p style="margin: 0; ">$129.00</p>
                            </td>
                        </tr>
                        <tr>
                            <td height="25"></td>
                        </tr>
                        <tr>
                            <td height="2" bgcolor="#f9f9f9" style="background: #f9f9f9;"
                                colspan="4"><p style = "margin:0;line-height: 2px; font-size: 2px">&nbsp;</p></td>
                        </tr>
                        <tr>
                            <td height="20"></td>
                        </tr>
                        <tr>
                            <td class="" width="125" valign="top" align="left">
                                <p style="margin: 0; ">
                                    <a href="#"><img src="http://monsart.net/emails/order-3/images/bag.png" alt="bag" /></a>
                                </p>
                            </td>
                            <td style="font-size: 14px; color: #262626; font-family: Helvetica,sans-serif;line-height: 23px;vertical-align: middle;" class="erase" width="200" valign="center" align="left">
                                <p style="margin: 0; ">Black Design Woman Bag</p>
                                <p style="margin:0;"> <abbr title="Stock Keeping Unit">SKU</abbr>:032821</p>
                            </td>
                            <td style="font-size: 14px; color: #262626; font-family: Helvetica,sans-serif;vertical-align: middle;" class="erase" width="125" valign="center" align="right">
                                <p style="margin: 0; ">Quantity:&nbsp;1</p>
                            </td>
                            <td style="font-size: 14px; color: #262626; font-family: Helvetica,sans-serif;vertical-align: middle;" class="" width="125" valign="center" align="right">
                                <p style="margin: 0; ">$129.00</p>
                            </td>
                        </tr>
                        <tr>
                            <td height="20"></td>
                        </tr>
                        <tr>
                            <td height="2" bgcolor="#f9f9f9" style="background: #f9f9f9;"
                                colspan="4"><p style = "margin:0;line-height: 2px; font-size: 2px">&nbsp;</p></td>
                        </tr>
                        <tr>
                            <td height="40"></td>
                        </tr>
                        <tr>
                            <td colspan="4">
                                <!-- Products Totals List -->
                                <table class="full" align="center" style="width: 600px; margin: 0px auto; padding: 0px; font-family: 'Open Sans', sans-serif; background: #f9f9f9; width: 100%; " bgcolor="#f9f9f9" width="100%" cellspacing="0" cellpadding="0" border="0">
                                    <tbody>
                                        <tr>
                                            <td colspan="4" width="600"></td>
                                        </tr>
                                        <tr>
                                            <td width="30" rowspan="20"></td>
                                            <td colspan="2"></td>
                                            <td width="30" rowspan="20"></td>
                                        </tr>
                                        <tr>
                                            <td height="20"></td>
                                        </tr>
                                        <tr>
                                            <td align="left">
                                                <p style="color: #363636; margin: 0; line-height: 20px;font-size: 14px;font-family: 'Raleway',sans-serif; ">
                                                    Subtotal
                                                </p>
                                            </td>
                                            <td align="right" style="font-family: 'Raleway',sans-serif;font-size: 14px;font-weight: 600; color: #363636; font-family: 'Open Sans', sans-serif; ">
                                                $288.00
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left">
                                                <p style="color: #363636; margin: 0; line-height: 20px;font-size: 14px;font-family: 'Raleway',sans-serif; ">
                                                    Shipping
                                                </p>
                                            </td>
                                            <td align="right" style="color: #3a3a3a; font-family: 'Raleway',sans-serif;font-size: 14px;font-weight: 600; ">
                                                <b style="color:#d63c3c;">FREE</b>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left">
                                                <p style="color: #363636; margin: 0; line-height: 20px;font-size: 14px;font-family: 'Raleway',sans-serif; ">
                                                    Handling
                                                </p>
                                            </td>
                                            <td align="right" style="font-family: 'Raleway',sans-serif;font-size: 14px;font-weight: 600; color: #363636;">
                                                $0.00
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left">
                                                <p style="color: #363636; margin: 0; line-height: 20px;font-size: 14px;font-family: 'Raleway',sans-serif; ">
                                                    Delivery
                                                </p>
                                            </td>
                                            <td align="right" style="font-family: 'Raleway',sans-serif;font-size: 14px;font-weight: 600; color: #363636;">
                                                $0.00
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left">
                                                <p style="color: #363636; margin: 0; line-height: 20px;font-size: 14px;font-family: 'Raleway',sans-serif; ">
                                                    Tax
                                                </p>
                                            </td>
                                            <td align="right" style="font-family: 'Raleway',sans-serif;font-size: 14px;font-weight: 600; color: #363636;">
                                                $0.00
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="20"></td>
                                        </tr>
                                        <tr>
                                            <td height="1" bgcolor="#dfdfdf" style="background: #dfdfdf;"
                                                colspan="2"><p style = "margin:0;line-height: 1px; font-size: 1px">&nbsp;</p></td>
                                        </tr>
                                        <tr>
                                            <td height="20"></td>
                                        </tr>
                                        <tr>
                                            <td align="left">
                                                <p style="color: #adadad; margin: 0; line-height: 20px; ">
                                                    <b style="font-family: 'Raleway',sans-serif;font-size: 14px;font-weight: 600; color: #363636;">Total</b>
                                                </p>
                                            </td>
                                            <td align="right" style="font-family: 'Raleway',sans-serif;font-size: 14px;font-weight: 600; color: #363636;">
                                                $288.00
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="left">
                                                <p style="color: #808080; margin: 0; line-height: 20px; font-family: 'Raleway',sans-serif;font-size: 14px;font-weight: 600;">
                                                    Credits
                                                </p>
                                            </td>
                                            <td align="right" style="font-family: 'Raleway',sans-serif;font-size: 14px;font-weight: 600; color: #363636;">
                                                $10.00
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="20"></td>
                                        </tr>
                                        <tr>
                                            <td height="1" bgcolor="#dfdfdf" style="background: #dfdfdf;"
                                                colspan="2"><p style = "margin:0;line-height: 1px; font-size: 1px">&nbsp;</p></td>
                                        </tr>
                                        <tr>
                                            <td height="20"></td>
                                        </tr>
                                        <tr>
                                            <td align="left">
                                                <p style="color: #adadad; margin: 0; line-height: 20px; ">
                                                    <b style="font-family: 'Raleway',sans-serif;font-size: 14px;font-weight: 600; color: #363636;">Orded Total</b>
                                                </p>
                                            </td>
                                            <td align="right" style="font-family: 'Raleway',sans-serif;font-size: 14px;font-weight: 900; color: #363636;">
                                                <b>$278.00</b>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td height="20"></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td height="40"></td>
                        </tr>
                        <tr>
                            <td colspan="4">
                                <!-- Banner -->
                                <table class="full" align="center" style = "width: 100%;" width="100%" cellspacing="0" cellpadding="0" border="0" >
                                    <tbody>
                                        <tr>
                                            <td align = "center">
                                                <a href="{{body.bannerUrl.val}}"><img width = "100%" style = "width: 100%; " src="{{body.banner.val}}" alt="promotion banner"></a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td height="50"></td>
                        </tr>
                        <!-- Red border Top -->
                        <tr>
                            <td colspan="8" bgcolor="#f64646" style="background: #f64646; border-radius: 0px 0px 5px 5px; " height="7"></td>
                        </tr>
                    </tbody>
                </table>
                <!-- Footer -->
                <table class="full" align="center" style="width: 600px; margin: 0px auto; padding: 0px; font-family: 'Open Sans', sans-serif; background: #f9f9f9; " bgcolor="#f9f9f9" width="600" cellspacing="0" cellpadding="0" border="0">
                    <tbody>
                        <tr>
                            <td colspan="3" width="600"></td>
                        </tr>
                        <tr>
                            <td height="30"></td>
                        </tr>
                        <tr>
                            <td width="10" rowspan="20"></td>
                            <td>
                                <!-- Link list -->
                                <table cellspacing="0" cellpadding="0" border="0" align="center" style="margin: 0 auto; ">
                                    <tbody>
                                        <tr>
                                            <td align="center">
                                                <a href="{{socialLinks.twitterLink.val}}"><img src="http://monsart.net/emails/order-10/images/twitter.png" alt="t" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a href="{{socialLinks.facebookLink.val}}"><img src="http://monsart.net/emails/order-10/images/facebook.png" alt="f" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a href="{{socialLinks.dribbleLink.val}}"><img src="http://monsart.net/emails/order-10/images/dribbble.png" alt="d" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a href="{{socialLinks.behanceLink.val}}"><img src="http://monsart.net/emails/order-10/images/be.png" alt="b" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a href="{{socialLinks.instagramLink.val}}"><img src="http://monsart.net/emails/order-10/images/instagram.png" alt="i" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                <a href="{{socialLinks.linkedinLink.val}}"><img src="http://monsart.net/emails/order-10/images/linkedin.png" alt="l" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td width="10" rowspan="20"></td>
                        </tr>
                        <tr>
                            <td height="40"></td>
                        </tr>
                        <tr>
                            <td align="center">
                                <a href="{{footer.logoUrl.val}}"><img src="{{footer.logo.val}}" alt="logo" /></a>
                            </td>
                        </tr>
                        <tr>
                            <td height="30"></td>
                        </tr>
                        <tr>
                            <td align="center">
                                <?php if ($this->_preview) { ?>
                                    <div ng-bind-html="footer.unsubscribeText.val | trusted"></div>
                                <?php } else { ?>
                                    {{footer.unsubscribeText.val}}
                                <?php } ?>
                            </td>
                        </tr>
                        <tr>
                            <td height="50"></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>