{# compatible with < sw6.4 #}
{% sw_extends '@Storefront/storefront/component/payment/payment-fields.html.twig' %}

{% block component_payment_method_input %}
    <input type="radio"
           id="paymentMethod{{ loop.index }}"
           name="paymentMethodId"
           value="{{ payment.id }}"
           {% if payment.id is same as(defaultPaymentMethodId) %}checked="checked"{% endif %}
           class="custom-control-input form-check-input payment-method-input {{ payment.translated.customFields.mollie_payment_method_name }}">
{% endblock %}

{% block component_payment_method_description %}
    {% if "MolliePayments" in payment.handlerIdentifier and page.extensions.MollieTestModePageExtension.testMode == true %}
        <div class="payment-method-description">
            <strong>{{ payment.translated.name }} ({{ "molliePayments.testMode.label"|trans }})</strong>
            {% if payment.translated.description %}
                <p>{{ payment.translated.description|raw }}</p>
            {% endif %}
        </div>
    {% else %}
        {{ parent() }}
    {% endif %}
{% endblock %}

{% block component_payment_method_control %}
    {{ parent() }}

    {# load mollie creditcard components #}
    {% if payment.translated.customFields.mollie_payment_method_name == 'creditcard' %}
        {% sw_include '@MolliePayments/storefront/component/payment/component/cc-fields.html.twig' with {
            showIfActive: false
        } %}
    {% elseif payment.translated.customFields.mollie_payment_method_name == 'pointofsale' %}
        {% sw_include '@MolliePayments/storefront/component/payment/component/pos-fields.html.twig' %}
    {% elseif payment.translated.customFields.mollie_payment_method_name == 'bancomatpay' %}
        {% sw_include '@MolliePayments/storefront/component/payment/component/bancomat-fields.html.twig' %}
    {% endif %}
{% endblock %}