{% extends 'emails/layouts/notification.twig' %}

{% block content %}
    <tr>
        <td>
            <table width="{{ inner_wrapper_width }}" align="center" border="0" cellspacing="0" cellpadding="0"
                   style="{{ font_family }}margin:0 auto;">
                <tr>
                    <td style="{{ intro_text }}">
                        <p style="{{ text_reset }}margin-bottom:15px;">
                            Hi <strong>{{ member_name }}</strong>,
                        </p>

                        <p style="{{ paragraph_style }}">
                            Great news &mdash; you've earned a <strong>{{ amount|currency_format }} reward</strong>
                            through our Refer a Friend programme!
                        </p>

                        <p style="{{ paragraph_style }}">
                            Use the code below on your next order of {{ min_spend|currency_format }}+ to claim your discount.
                        </p>
                    </td>
                </tr>

                <tr>
                    <td height="16"></td>
                </tr>

                <tr>
                    <td align="center">
                        <table border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto;">
                            <tr>
                                <td style="background-color: #f5f5f5; border: 2px dashed {{ highlight_color }}; padding: 16px 32px; text-align: center; border-radius: 6px;">
                                    <span style="font-family: monospace; font-size: 22px; font-weight: 700; letter-spacing: 2px; color: {{ highlight_color }};">
                                        {{ coupon_code }}
                                    </span>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>

                <tr>
                    <td height="16"></td>
                </tr>

                <tr>
                    <td style="{{ small_body_text }}; text-align: center; color: #999999;">
                        <p style="{{ text_reset }}">
                            Minimum spend: {{ min_spend|currency_format }} &bull; Expires: {{ expiry_date }} &bull; Single use
                        </p>
                    </td>
                </tr>

                <tr>
                    <td height="20"></td>
                </tr>

                <tr>
                    <td align="center">
                        <div><!--[if mso]>
                            <v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
                                    href="{{ SETTINGS_SITE_URL }}"
                                    style="height:56px;v-text-anchor:middle;width:240px;" stroke="f" fillcolor="{{ button_color }}">
                                <w:anchorlock/>
                                <center><![endif]-->
                                    <a href="{{ SETTINGS_SITE_URL }}"
                                       style="background-color:{{ button_color }};color:#ffffff;display:inline-block;font-family:sans-serif;font-size:{{ font_size_body }};font-weight:bold;line-height:56px;text-align:center;text-decoration:none;width:240px;-webkit-text-size-adjust:none;">
                                        SHOP NOW
                                    </a>
                                    <!--[if mso]>
                                </center>
                            </v:rect>
                            <![endif]-->
                        </div>
                    </td>
                </tr>

                <tr>
                    <td height="30"></td>
                </tr>
            </table>
        </td>
    </tr>
{% endblock %}
