{strip}

{$_background_color = "#f3f5fa"}
{$_bonus_background = "#fea"}
{$_border_color = "rgba(0, 20, 80, 0.1)"}

<table cellspacing="0" border="0" cellpadding="0" width="100%" bgcolor="{$_background_color}" style="
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
letter-spacing:normal;
text-indent:0;
text-transform:none;
word-spacing:0;
border-collapse:collapse
">
    <tr>
        <td style="padding: 20px;">
            <table width="600" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse; width: 600px !important;margin:auto;">
                <tr>
                    <td width="20" style="width:20px !important;"></td>
                    <td valign="middle" align="left" height="55" style="height: 55px;">
                        <a href="[`https://www.webasyst.com`]" style="text-decoration: none;"><img src="{$wa->url(true)}wa-apps/shop/img/webasyst.png" alt="Webasyst" width="103" height="23" style="border: 0;"></a>
                    </td>
                    <td valign="middle" align="right" height="55" style="color: #89a; height: 55px;">
                        {$wa->shop->settings("name")}
                    </td>
                    <td width="20" style="width:20px !important;"></td>
                </tr>
            </table>
            <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="
                width: 600px !important;
                background-color:#fff;
                border-radius: 12px;
                margin:auto;
                overflow: hidden;
                ">

                <!-- HEADER -->
                <tr>
                    <td width="50" style="width:50px !important; border: solid {$_border_color}; border-width: 0 0 1px 0;"></td>
                    <td height="70" align="center" valign="middle" style="border: solid {$_border_color}; border-width: 0 0 1px 0;">
                        <table width="500" border="0" align="center" cellpadding="0" cellspacing="0" style="width: 100% !important;">
                            <tr>
                                <td>
                                    <font style="font-weight: bold; font-size: 20px; margin: 0 12px 0 0;"><b>{$order.id}</b></font>
                                    <font style="color: #89a">{$order.create_datetime|wa_date:'humandate'}</font>
                                </td>
                                <td style="text-align: right;">
                                    <font style="{if !empty($order.style)}{$order.style}{/if}">{$status}</font>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td width="50" style="width:50px !important; border: solid {$_border_color}; border-width: 0 0 1px 0;"></td>
                </tr>

                <!-- STATUS -->
                <tr>
                    <td></td>
                    <td>
                        <table cellspacing="0" border="0" cellpadding="0" width="100%" style="border-collapse:collapse">
                            <tr>
                                <td>
                                    <p style="
                            color: #444;
                            font-style:normal;
                            font-variant:normal;
                            font-weight:normal;
                            font-size:14px;
                            line-height:16px;
                            margin: 20px 0;
                            text-align:center;
                            ">%17%</p>
                                </td>
                            </tr>
                        </table>
                    </td>
                    <td></td>
                </tr>

                <!-- TEXT -->
                <tr>
                    <td bgcolor="{$_bonus_background}"></td>
                    <td bgcolor="{$_bonus_background}" style="padding: 12px 0 12px 0;">
                        <p>%1%</p>
                        <p>%2%</p>
                    </td>
                    <td bgcolor="{$_bonus_background}"></td>
                </tr>

                <!-- TEXT -->
                <tr>
                    <td></td>
                    <td style="padding: 24px 0 36px 0;">
                        <h3 style="margin: 0;">%contact_info%</h3>
                        {if strlen($wa->shop->settings("email"))}
                            <p style="margin: 10px 0 0;color:#444;">
                                [`Email`]: <a href="mailto:{$wa->shop->settings("email")}">{$wa->shop->settings("email")}</a>
                            </p>
                        {/if}
                        {if strlen($wa->shop->settings("phone"))}
                            <p style="margin: 10px 0 0;color:#444;">
                                [`Phone`]: {$wa->shop->settings("phone")}
                            </p>
                        {/if}
                    </td>
                    <td></td>
                </tr>
            </table>

            <!-- BOTTOM SITE INFORMATION -->
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse:collapse">
                <tr>
                    <td valign="middle" align="center" height="45">
                      <p style="
                          font-style:normal;
                          font-variant:normal;
                          font-weight:normal;
                          font-size:13px;
                          line-height:16px;
                          color: #89a;
                          margin: 20px 0 0;
                          ">
                          <a href="[`https://www.shop-script.com`]" style="color: #89a; text-decoration: none;" target="_blank">[`Sent via Shop-Script app`]</a>
                      </p>
                    </td>
                </tr>
            </table>

        </td>
    </tr>
</table>

{/strip}