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

{% block before_content %}

{% endblock %}

{% 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>{{ order.billingAddress.firstname }}</strong>,
                        </p>

                        <p style="{{ large_intro_text }} {{ text_reset }}margin-bottom:15px;">
                            We couldn’t process your payment for the following subscription(s):
                        </p>

                        <ol class="subscriptionList">
                            <li>Order number: #{{ order.id }}</li>
                            {% if order.subscriptions is not empty %}
                                {% for sub in order.subscriptions %}
                                    <li>
                                        Subscription ID: {{ sub.id }}
                                    </li>
                                {% endfor %}
                            {% endif %}
                            <li>
                                Order items: {% for item in order.items %}
                                    {{ item.item_name }}{% if item.size and item.size != 'One Size' %} - {{ item.size }}{% endif %}{% if item.item_size.strength %} x {{ item.item_size.strength }}{% endif %}{% if not loop.last %}, {% endif %}
                                {% endfor %}
                            </li>
                        </ol>

                    </td>
                </tr>

                <tr>
                    <td
                            valign="middle"
                            align="center"
                            style="{{ sub_header_style }}">

                        <div><!--[if mso]>
                                                <v:rect
                                                xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
                                                href="{{ payment_url }}"
                                                style="height:56px;v-text-anchor:middle;width:200px;" stroke="f" fillcolor="{{ button_color }}"
                                                >
                                                        <w:anchorlock/>
                                                        <center>
                                                            <![endif]-->
                            <a href="{{ payment_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;"
                            >Update payment details</a>
                            <!--[if mso]>
                            </center>
                            </v:rect>
                            <![endif]--></div>

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

    <tr>
        <td style="height:50px"></td>
    </tr>

{% endblock %}

{% block after_content %}



{% endblock %}
