{% extends 'base.html.twig' %}

{% block title %} Test Payment Page {% endblock %}

{% block body %}

    <div class="container mt-5">
        <div class="row">
            <div class="col-3"></div>
            <div class="col-6">
                <h3>Test Payment Page</h3>
                <hr>
                {{ form_start(form) }}

                {{ form_row(form.cardNumber,{label: 'Test Card Numbers'}) }}
                {{ form_row(form.customCardNumber) }}
                {{ form_row(form.cardholderName) }}

                <div class="row">
                    <div class="col-6">
                        {{ form_row(form.cardExpirationMonth) }}
                    </div>
                    <div class="col-6">
                        {{ form_row(form.cardExpirationYear) }}
                    </div>
                </div>

                <div class="row">
                    <div class="col-6">
                        {{ form_row(form.merchantName) }}
                    </div>
                    <div class="col-6">
                        {{ form_row(form.merchantId) }}
                    </div>
                </div>

                <div class="row">
                    <div class="col-6">
                        {{ form_row(form.amount) }}
                    </div>
                    <div class="col-6">
                        {{ form_row(form.currency) }}
                    </div>
                </div>

                {{ form_row(form.version,{label: '3d Version'}) }}

                {{ form_widget(form.browserIp,{value: app.request.clientIp}) }}
                {{ form_widget(form.browserAcceptHeader,{value: app.request.headers.get('Accept')}) }}
                {{ form_widget(form.browserColorDepth) }}
                {{ form_widget(form.browserScreenWidth) }}
                {{ form_widget(form.browserScreenHeight) }}
                {{ form_widget(form.browserTz,{value: '3'}) }}
                {{ form_widget(form.browserUserAgent, {value: app.request.headers.get('User-Agent')}) }}

                {{ form_end(form) }}
            </div>
        </div>
    </div>
    <script>
        document.getElementById('payment_page_browserScreenWidth').value = window.outerWidth
        document.getElementById('payment_page_browserScreenHeight').value = window.outerHeight
        document.getElementById('payment_page_browserColorDepth').value = window.screen.colorDepth || 32
    </script>
{% endblock %}