{% set pluginOptions = {
    currency: context.currency.isoCode,
    locale: app.request.locale,
    cart: page.extensions.spApp.cart,
    salesChannelContext: page.extensions.spApp.salesChannelContext,
    order: page.extensions.spApp.order,
} %}

{% block shopware_payments_card_fields_form %}
<div
    id="shopware-payments-card-fields-form"
    class="my-3 shopware-payments-card-fields-form"
    data-shopware-payments-checkout-card-fields="true"
    data-shopware-payments-checkout-card-fields-options='{{ pluginOptions|json_encode }}'
>

    <div class="mb-2">
        <label class="d-none" for="shopware-payments-card-field-number">{{ "shopwarePayments.card.cardNumber"|trans|sw_sanitize }}</label>
        <div
            id="shopware-payments-card-field-number"
            class="shopware-payments-card-field"
            data-placeholder="{{ "shopwarePayments.card.cardNumber"|trans|striptags }}"
        >
        </div>
    </div>

    <div class="row g-2">
        <div class="col-6">
            <label class="d-none" for="shopware-payments-card-field-expiry">{{ "shopwarePayments.card.expiration"|trans|sw_sanitize }}</label>
            <div
                id="shopware-payments-card-field-expiry"
                class="shopware-payments-card-field"
                data-placeholder="{{ "shopwarePayments.card.expiration"|trans|striptags }}"
            >
            </div>
        </div>
        <div class="col-6">
            <label class="d-none" for="shopware-payments-card-field-cvv">{{ "shopwarePayments.card.cvv"|trans|sw_sanitize }}</label>
            <div
                id="shopware-payments-card-field-cvv"
                class="shopware-payments-card-field"
                data-placeholder="{{ "shopwarePayments.card.cvv"|trans|striptags }}"
            >
            </div>
        </div>
    </div>

</div>
{% endblock %}