{% extends '@CoreShopFrontend/Checkout/layout.html.twig' %}

{% form_theme form 'bootstrap_4_layout.html.twig' %}

{% block checkout_title %}
    {{ 'coreshop.ui.payment'|trans }}
{% endblock %}

{% block checkout %}
    <div class="card">
        <div class="card-header">
            {{ 'coreshop.ui.payment'|trans }}
        </div>
        <div class="card-body">
            {{ form_start(form, {'attr': {'novalidate': 'novalidate'}}) }}
                {{ form_errors(form) }}

                {{ form_row(form.paymentProvider, coreshop_test_form_attribute('select-payment-provider')) }}

                <div class="paymentSettings">
                    {% if form.paymentSettings is defined %}
                        {% for field in form.paymentSettings %}
                            {{ form_row(field) }}
                        {% endfor %}
                    {% endif %}
                </div>

                {% for name, paymentSettingConfigurationPrototype in form.vars.prototypes %}
                    <div id="{{ form.paymentProvider.vars.id }}_{{ name }}" data-container=".configuration"
                         data-prototype="{{ form_widget(paymentSettingConfigurationPrototype)|e }}">
                    </div>
                {% endfor %}

                <div class="row">
                    {% set previousStep = coreshop_checkout_steps_get_previous() %}
                    {% if previousStep is not null %}
                        <div class="col-12 col-sm-6">
                            <a href="{{ path('coreshop_checkout', {'stepIdentifier': previousStep}) }}" class="btn btn-secondary">
                                {{ 'coreshop.ui.back'|trans }}
                            </a>
                        </div>
                    {% endif %}
                    <div class="col-12 {{ previousStep is not null ? 'col-sm-6' : '' }}">
                        <button type="submit" class="btn btn-success pull-right" {{ coreshop_test_html_attribute('submit-payment-step') }}>
                            {{ 'coreshop.ui.proceed'|trans }}
                        </button>
                    </div>
                </div>

            {{ form_end(form) }}
        </div>
    </div>
{% endblock %}
