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

{% form_theme form '@SyliusShop/Form/theme.html.twig' %}

{% block content %}
    <div class="checkout-payment-container container">
        {{ sylius_template_event(['sylius.shop.checkout.select_payment.steps', 'sylius.shop.checkout.steps'], _context|merge({'active': 'select_payment', 'orderTotal': order.total})) }}

        <div class="row">
            <div class="col-lg-7 col-xl-8">
                <div id="sylius-payment-methods" class="form-block checkout-block">
                    <h1 class="h3">{{ 'app.ui.cart.payment_title'|trans }}</h1>

                    {{ sylius_template_event('sylius.shop.checkout.select_payment.before_form', {'order': order}) }}

                    {{ form_start(form, {'action': path('sylius_shop_checkout_select_payment'), 'attr': {'class': 'ui loadable form', 'novalidate': 'novalidate'}}) }}
                    {{ form_errors(form) }}
                    <input type="hidden" name="_method" value="PUT" />

                    {% include '@SyliusShop/Checkout/SelectPayment/_form.html.twig' %}

                    {{ sylius_template_event('sylius.shop.checkout.select_payment.before_navigation', {'order': order}) }}
                    {% include '@SyliusShop/Checkout/SelectPayment/_navigation.html.twig' %}

                    {{ form_row(form._token) }}
                    {{ form_end(form, {'render_rest': false}) }}
                </div>
            </div>

            <div class="col-lg-5 col-xl-4">
                {{ sylius_template_event(['sylius.shop.checkout.select_payment.sidebar', 'sylius.shop.checkout.sidebar'], _context) }}
            </div>
        </div>
    </div>
{% endblock %}
