{% set collapseTriggerLabels = {
    collapseTriggerMoreLabel: 'checkout.collapseTriggerMore'|trans|sw_sanitize,
    collapseTriggerLessLabel: 'checkout.collapseTriggerLess'|trans|sw_sanitize
} %}

{% block component_payment_methods %}
    <div class="payment-methods">
        {% block component_payment_method %}
            {% for payment in page.paymentMethods[:visiblePaymentMethodsLimit] %}
                {% sw_include '@Storefront/storefront/component/payment/payment-method.html.twig' %}
            {% endfor %}

            {% block component_payment_method_collapse %}
                {% if page.paymentMethods|length > visiblePaymentMethodsLimit and visiblePaymentMethodsLimit is not same as(null) %}
                    <div class="collapse">
                        {% for payment in page.paymentMethods[visiblePaymentMethodsLimit:] %}
                            {% sw_include '@Storefront/storefront/component/payment/payment-method.html.twig' %}
                        {% endfor %}
                    </div>

                    {% block component_payment_method_collapse_trigger %}
                        <button class="btn btn-link confirm-checkout-collapse-trigger"
                                type="button"
                                data-collapse-checkout-confirm-methods="true"
                                data-collapse-checkout-confirm-methods-options="{{ collapseTriggerLabels|json_encode }}">
                            <span class="confirm-checkout-collapse-trigger-label">
                                {% block component_payment_method_collapse_trigger_label %}
                                    {{ collapseTriggerLabels.collapseTriggerMoreLabel }}
                                {% endblock %}
                            </span>

                            {% block component_payment_method_collapse_trigger_icon %}
                                {% sw_icon 'arrow-down' style {
                                    class: 'confirm-checkout-chevron',
                                    size: 'xs',
                                    pack : 'solid',
                                    ariaHidden: true
                                } %}
                            {% endblock %}
                        </button>
                    {% endblock %}
                {% endif %}
            {% endblock %}
        {% endblock %}
    </div>
{% endblock %}
