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

{% block before_content %}

    <tr>
        <td style="font-family: Arial, Helvetica, sans-serif;color:#1f1f1f;" colspan="3">
            {{ recovery.content | raw }}
        </td>
    </tr>

    <tr><td height="20">&nbsp;</td></tr>

    {% if recovery.trigger == 'cart' %}
        <tr>
            <td style="font-family: Arial, Helvetica, sans-serif;color:#1f1f1f;" colspan="3">
                <table width="100%">
                {% for item in items %}

                    <tr>
                        <td height="40" align="center" width="40" style="font-family: Arial, Helvetica, sans-serif;color:#1f1f1f; font-weight:bold; border-top:1px solid #999; padding:10px;">
                        {% if item.item_image != '' %}
                            <img src="{{ settings.SITE_URL }}{{item.item_image}}" alt="{{item.item_name}} product image" height="40" />
                        {% endif %}
                        </td>

                        <td style="font-family: Arial, Helvetica, sans-serif;color:#1f1f1f; font-weight:bold; border-top:1px solid #999; padding:10px;">
                            {{ item.item_name }}
                        </td>

                        <td align="right" style="font-family: Arial, Helvetica, sans-serif;color:#1f1f1f; border-top:1px solid #999; padding:10px;">
                            {{ item.item_price|currency_format(2) }}
                        </td>
                    </tr>

                {% endfor %}
                </table>
            </td>
        </tr>

        <tr><td height="20" colspan="3">&nbsp;</td></tr>
    {% endif %}

    {% if coupon.code != '' %}
    <tr>
        <td style="font-family: Arial, Helvetica, sans-serif;color:#1f1f1f; border-top:1px solid #999; padding:10px;" colspan="3">
            <p>
                Use coupon code '<strong>{{coupon.code}}</strong>' at checkout for

                {% if coupon.value > 0 %}

                    {% if coupon.type == 'percent' %}
                        {{coupon.value}}%
                    {% else %}
                        {{ coupon.value | currency_format(2) }}
                    {% endif %}
                    off

                    {% if coupon.free_delivery > 0 %}
                        and
                    {% endif %}

                {% endif %}

                {% if coupon.free_delivery > 0 %}

                    free delivery

                    {% if coupon.free_delivery == 1 %}
                        around the world
                    {% else %}
                        within the UK
                    {% endif %}

                {% endif %}

                {% if coupon.min_price > 0 %}
                    (Minimum spend of {{ coupon.min_price | currency_format(2) }})
                {% endif %}
            </p>
        </td>
    </tr>
    {% endif %}

    {% if recovery.trigger == 'cart' or recovery.is_button_visible %}
        <tr><td height="16" colspan="3">&nbsp;</td></tr>

        <tr>
            <td colspan="3" style="text-align:center;">

                <div class="" style="display:inline-block"><!--[if mso]>
                    <v:rect
                            xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
                            href="{{ recovery_url }}"
                            style="height:56px;v-text-anchor:middle;width:200px;" stroke="f" fillcolor="{{ button_color }}"
                    >
                        <w:anchorlock/>
                        <center>
                        <![endif]-->
                            <a href="{{ recovery_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:200px;-webkit-text-size-adjust:none;"
                            >{{ recovery.button_copy ?: 'Resume your order' }}</a>
                        <!--[if mso]>
                        </center>
                    </v:rect>
                <![endif]--></div>

            </td>
        </tr>

        <tr><td height="40" colspan="3">&nbsp;</td></tr>
    {% endif %}

{% endblock %}

{% block after_content %}
    <!-- Tracking pixel -->
    <img src="{{ recovery_read_url }}" alt="" width="1" height="1" />
{% endblock %}
