<!--@subject {{trans " %earned_reward reward points earned at %store_name" store_name=$store.getFrontendName() earned_reward=$earned_reward}} @-->

<!--@vars {
"var logo_height":"Email Logo Image Height",
"var logo_width":"Email Logo Image Width",
"var template_styles|raw":"Template CSS",
"var customer.getName()|escape":"Customer Name",
"var earned_reward":"Points Change",
"var store.getFrontendName()":"Store Name",
"var rewards_balance_change_date":"Balance Change Data",
"store url=\"\"":"Store URL"
} @-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, width=device-width"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
        <style type="text/css">
            {{var template_styles|raw}}

            {{css file="css/email.css"}}
        </style>
    </head>
    <body>
    {{inlinecss file="css/email-inline.css"}}
    <!-- Begin wrapper table -->
        <table align="center" class="amrewards-email-container" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td class="amrewards-line"></td>
            </tr>
            <tr>
                <td class="amrewards-email-header">
                    <a href="{{store url=""}}">
                    <img class="amrewards-logo"
                         {{if logo_width}}
                         width="{{var logo_width}}"
                         {{else}}
                         width="35"
                         {{/if}}

                    {{if logo_height}}
                    height="{{var logo_height}}"
                    {{else}}
                    height="35"
                    {{/if}}

                    src="{{var logo_url}}"
                    alt="{{var logo_alt}}"
                    border="0"
                    />
                    <div class="amrewards-storename-wrapper">
                        <span class="amrewards-storename">{{var store.getFrontendName()}}</span>
                    </div>
                    </a>
                </td>
            </tr>
            <tr>
                <td class="amrewards-email-body">
                    <div class="amrewards-title-wrapper">
                        <p class="amrewards-title">+{{var earned_reward}} {{trans 'Reward Points!'}}</p>
                        <img src="{{view url='Amasty_Rewards/images/earned.png'}}" class="amrewards-image" alt="{{trans 'Point Earned'}}" title="{{trans 'Point Earned'}}"></img>
                    </div>

                    <p class="amrewards-greeting"><strong>{{trans 'Hello %customer_name,' customer_name=$customer.getName()}}</strong></p>
                    <p class="amrewards-message"> {{trans 'Thank you for being our loyal customer.'}}<br/>
                        {{trans 'You just '}}<strong>{{trans 'earned '}} {{var earned_reward}} {{trans 'reward points as a bonus '}}({{var action}})</strong>.{{trans ' Reward points were added to your balance on '}}
                        <strong>{{var rewards_balance_change_date}}</strong>{{trans '. You can use it for purchasing items in our online store right away.'}}
                    </p>

                    <div class="amrewards-store-link">
                        <a class="amrewards-link" href="{{store url=''}}" title="{{trans 'Visit the Store'}}" target="_blank">{{trans 'Visit the Store'}}</a>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <table class="amrewards-footer-table" cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td>
                                <div class="amrewards-footer-container">
                                    <table cellpadding="0" cellspacing="0" border="0">
                                        <tr>
                                            <td>
                                                <div class="amrewards-regards-wrapper" >
                                            <span class="amrewards-regards">{{trans "Kindest Regards"}}, <br/>
                                                {{var store.getFrontendName()}} {{trans "Team"}}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="amrewards-social-wrapper">
                                                    <a href="#" title="{{trans 'Facebook Link'}}" alt="{{trans 'Facebook Link'}}">
                                                        <img class="amrewards-social -facebook" src="{{view url='Amasty_Rewards/images/facebook_icon.svg'}}" alt="{{trans 'Facebook Icon'}}">
                                                    </a>
                                                    <a href="#" title="{{trans 'Twitter Link'}}" alt="{{trans 'Twitter Link'}}">
                                                        <img class="amrewards-social -twitter" src="{{view url='Amasty_Rewards/images/twitter_icon.svg'}}" alt="{{trans 'Twitter Icon'}}">
                                                    </a>
                                                    <a href="#" title="{{trans 'Instagram Link'}}" alt="{{trans 'Instagram Link'}}">
                                                        <img class="amrewards-social -instagram" src="{{view url='Amasty_Rewards/images/instagram_icon.svg'}}" alt="{{trans 'Instagram Icon'}}">
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    <!-- End wrapper table -->
    </body>
</html>