<mjml data-template="false">
    <mj-head>
    </mj-head>
    <mj-body background-color="#f2f2f2">
        <mj-section padding-check="false" background-color="#ffffff">
            <mj-column padding-top="10px" padding-right="0px" padding-left="0px" padding-bottom="10px"
                       padding-check="false">
                <mj-image src="https://static.flycart.net/email_customizer_advance/image/editor/logo.png"
                          width="215px"></mj-image>
            </mj-column>
        </mj-section>
        <mj-section padding-check="false" border-top="1px solid #E0E0E0" background-color="#ffffff">
            <mj-column width="100%" padding-top="10px" padding-right="0px" padding-left="0px" padding-bottom="10px"
                       padding-check="false">
                <mj-image
                        src="https://static.flycart.net/email_customizer_advance/image/templates/default/customer-failed-order.png"
                        width="60px" padding-top="30px" padding-bottom="30px" padding-right="px" padding-left="px"
                        padding="10px" padding-check="false"></mj-image>
                <mj-text data-global="text-line-height,text-font-size" color="#000000"
                         font-family="Helvetica, sans-serif" padding-check="false" font-style="normal"
                         font-size="30px" line-height="1" align="center" font-weight="700">The order has failed
                </mj-text>
                <mj-text data-global="text-line-height" color="#000000" font-family="Helvetica, sans-serif"
                         padding-top="0px" font-size="16px"
                         align="center" line-height="1" padding-bottom="0px" padding="25px" padding-check="false">Order
                    #{{order.id}}
                    ({{order.created_at}})
                </mj-text>
            </mj-column>
        </mj-section>
        <mj-section padding-check="false" background-color="#ffffff" padding-top="10px" padding-bottom="10px">
            <mj-column width="100%" padding-top="5px" padding-right="0px" padding-left="0px" padding-bottom="5px"
                       padding-check="false">
                <mj-divider border-width="1px" border-style="dashed"></mj-divider>
            </mj-column>
        </mj-section>
        <mj-section padding-check="false" background-color="#ffffff" padding-top="10px" padding-bottom="10px">
            <mj-column width="100%" padding-top="2px" padding-right="0px" padding-left="0px" padding-bottom="2px"
                       padding-check="false">
                <mj-text data-global="text-line-height" color="#000000" font-family="Helvetica, sans-serif"
                         font-size="16px" line-height="1.5" padding="25px" padding-check="false" padding-top="0px"
                         padding-bottom="0px">Hey {{customer.name}},<br/><br/>Unfortunately, we couldn't complete your
                    order due to an issue with your payment method.<br/><br/>If you'd like to continue with your
                    purchase, please return to {{shop.name}} and try a different method of payment.<br/><br/>Your
                    order details are as follows:<br/></mj-text>
            </mj-column>
        </mj-section>
        <mj-section padding-check="false" background-color="#ffffff" padding-top="10px" padding-bottom="10px">
            <mj-column width="100%" padding-top="2px" padding-right="0px" padding-left="0px" padding-bottom="2px"
                       padding-check="false">
                <mj-text data-global="text-line-height" color="#000000" padding-top="0" padding-bottom="0"
                         padding-right="0" padding-left="0"
                         font-size="16px" line-height="1" font-family="Helvetica, sans-serif"><img
                        data-global="text-line-height"
                        data-gjs-type="order-summary" show_sku="yes" show_image="yes"
                        product_image_width="32" product_image_height="32" product_image_size="thumbnail"
                        show_payment_instruction="yes" order-summary-border="1px solid #e1e1e1;" draggable="false"
                        font-family="Helvetica, sans-serif" id="edpw-order-summary" height="100%" width="100%"
                        data-cr-id="line_item"
                        src="https://static.flycart.net/email_customizer_advance/image/editor/blocks/order-summary.png"
                        alt=""
                        style="width:100%;font-size:16px;font-family:Helvetica, sans-serif;line-height:1.5;color:#000000;"/>
                </mj-text>
            </mj-column>
        </mj-section>
        <mj-section padding-check="false" background-color="#ffffff">
            <mj-column width="50%" padding-top="10px" padding-right="0px" padding-left="0px" padding-bottom="10px"
                       padding-check="false">
                <mj-text data-global="text-line-height" color="#000000" padding-check="false"
                         font-family="Helvetica, sans-serif" font-size="15px"
                         font-weight="700" line-height="1">
                    Customer Name
                </mj-text>
                <mj-text data-global="text-line-height" color="#000000" padding-check="false"
                         font-family="Helvetica, sans-serif" font-size="16px"
                         line-height="1">
                    {{billing_address.name}}
                </mj-text>
                <mj-text data-global="text-line-height" color="#000000" padding-check="false"
                         font-family="Helvetica, sans-serif" font-size="15px"
                         font-weight="700" line-height="1">
                    Order Number
                </mj-text>
                <mj-text data-global="text-line-height" color="#000000" padding-check="false"
                         font-family="Helvetica, sans-serif" font-size="16px"
                         line-height="1">
                    #{{order.id}}
                </mj-text>
                <mj-text data-global="text-line-height" color="#000000" padding-check="false"
                         font-family="Helvetica, sans-serif" font-size="15px"
                         font-weight="700" line-height="1">
                    Delivery Address
                </mj-text>
                <mj-text data-global="text-line-height" color="#000000" padding-check="false"
                         font-family="Helvetica, sans-serif" font-size="16px"
                         line-height="1">
                    {{shipping_address.formatted_address}}
                </mj-text>
            </mj-column>
            <mj-column width="50%" padding-top="10px" padding-right="0px" padding-left="0px" padding-bottom="10px"
                       padding-check="false">
                <mj-text data-global="text-line-height" color="#000000" padding-check="false"
                         font-family="Helvetica, sans-serif" font-size="15px"
                         font-weight="700" line-height="1">
                    Customer Email
                </mj-text>
                <mj-text data-global="text-line-height" color="#000000" padding-check="false"
                         font-family="Helvetica, sans-serif" font-size="16px"
                         line-height="1">
                    {{order.email}}
                </mj-text>
                <mj-text data-global="text-line-height" color="#000000" padding-check="false"
                         font-family="Helvetica, sans-serif" font-size="15px"
                         font-weight="700" line-height="1">
                    Payment Option
                </mj-text>
                <mj-text data-global="text-line-height" color="#000000" padding-check="false"
                         font-family="Helvetica, sans-serif" font-size="16px"
                         line-height="1">
                    {{payment.payment_method}}
                </mj-text>
                <mj-text data-global="text-line-height" color="#000000" padding-check="false"
                         font-family="Helvetica, sans-serif" font-size="15px"
                         font-weight="700" line-height="1">
                    Billing Address
                </mj-text>
                <mj-text data-global="text-line-height" color="#000000" padding-check="false"
                         font-family="Helvetica, sans-serif" font-size="16px"
                         line-height="1">
                    {{billing_address.formatted_address}}
                </mj-text>
            </mj-column>
        </mj-section>
        <mj-section padding-check="false" background-color="#F3F5F7">
            <mj-column padding-top="10px" padding-right="0px" padding-left="0px" padding-bottom="10px"
                       padding-check="false">
                <mj-social font-size="15px" icon-size="30px" mode="horizontal" padding="10px" padding-check="false"
                           padding-top="10px" padding-right="25px" padding-left="25px" padding-bottom="10px">
                    <mj-social-element href="{{social.facebook}}" name="facebook_share"
                                       src="https://static.flycart.net/email_customizer_advance/image/editor/facebook.png"></mj-social-element>
                    <mj-social-element href="{{social.twitter}}" name="twitter_share"
                                       src="https://static.flycart.net/email_customizer_advance/image/editor/twitter.png"></mj-social-element>
                    <mj-social-element href="{{social.linkedin}}" name="linkedin_share"
                                       src="https://static.flycart.net/email_customizer_advance/image/editor/linkedin.png"></mj-social-element>
                    <mj-social-element href="{{social.pinterest}}" name="pinterest_share"
                                       src="https://static.flycart.net/email_customizer_advance/image/editor/pinterest.png"></mj-social-element>
                </mj-social>
                <mj-text data-global="text-line-height" color="#000000" font-family="Helvetica, sans-serif"
                         padding-check="false" font-style="normal"
                         font-size="14px" line-height="1" align="center">©
                    {{shop.name}}, {{shop.address_1}}
                    <br/>
                </mj-text>
            </mj-column>
        </mj-section>
    </mj-body>
</mjml>