{% sw_extends '@Storefront/storefront/page/account/payment/index.html.twig' %}

{% block page_account_payment_main %}
    {% if page.extensions.unzerPaymentMethod.deviceRemoved %}
        {% sw_include '@Storefront/storefront/utilities/alert.html.twig' with {
            type: "success",
            content:  "UnzerPayment.accountPayment.deviceDeleted"|trans
        } %}
    {% endif %}

    {{ parent() }}

    {% if page.extensions.unzerPaymentMethod.savedDevices|length > 0 %}
        {% block page_account_payment_main_unzer_paymentwrapper %}
            <div class="unzer-payment-card has-margin-top">
                {% block page_account_payment_main_unzer_paymentwrapper_title %}
                    <div class="card-title">
                        {{ "UnzerPayment.accountPayment.title"|trans }}
                    </div>
                {% endblock %}

                {% block page_account_payment_main_unzer_paymentwrapper_body %}
                    <div class="unzer-payment-card-body">
                        {% for paymentDevice in page.extensions.unzerPaymentMethod.savedDevices %}
                            {% sw_include '@Storefront/storefront/component/unzer/account/payment/' ~ paymentDevice.deviceType  ~ '.html.twig' ignore missing with {
                                'device': paymentDevice
                            }  %}
                        {% endfor %}
                    </div>
                {% endblock %}
            </div>
        {% endblock %}
    {% endif %}
{% endblock %}