{# set progress from 1-5 #}
{% set progress_nav = 3 %}

{% set page_class = 'requiresSticky' %}

{% set content_class = 'isCheckout' %}

{% extends 'layouts/default.twig' %}

{% block head %}
    {% if settings.STRIPE %}
        <script src="https://checkout.stripe.com/v2/checkout.js"></script>
    {% endif %}

    {{ judopay_assets() }}
    {{ ryftpay_assets() }}
    {% if initial_payload is defined and initial_payload is not empty %}
        <script>
            window.__INITIAL_BASKET_PAYLOAD__ = {{ initial_payload|json_encode|raw }};
        </script>
    {% endif %}
{% endblock %}

{% block content %}

    {% set hide_inputs = true %}

    {% include 'includes/page_blocks/title_banner.twig' with {
        title: 'Confirm & Pay',
        subtitle: false,
        content: false,
        dark_background: false,
        class: 'checkoutTitle'
    }%}

    <div id="checkout" class="checkoutOverview">

        {{ macro.alert('error', error) }}

        <div class="wrapper">

            <div class="orderOverviewWrapper">

                <section class="orderSummaryArea">

                    <basket inline-template input_hide_inputs="{{ hide_inputs }}">

                        <div class="innerOrderSummaryArea orderOverviewArea">

                            <div class="orderSummaryBox" v-show="loaded" v-if="!busy" v-cloak>

                                <h4>Review your order <span>(Order # {{ order_id }})</span></h4>

                                <div class="innerSummary">

                                    {% include 'shop/basket/view.twig' with {
                                        hide_inputs: true
                                    } %}

                                    {{ include('shop/basket/view_totals.twig') }}

                                </div> <!-- .innerSummary -->

                            </div> <!-- #orderSummary -->

                            <div class="userDetailsOverview">

                                {{ include('shop/basket/details_overview.twig') }}

                            </div> <!-- .userDetails -->

                            <div class="overviewBackButtons desktopBackButton">
                                <a href="/shop/checkout/basket.php" class="backToBasket">Go Back & Edit Details</a>
                            </div> <!-- .overviewBackButtons -->

                        </div> <!-- .orderSummaryWrap -->

                    </basket>

                </section>


                <div class="paymentBoxWrap">
                    
                    <div class="paymentDetails">

                        <h4>Make your payment</h4>
                        
                        {% if failed_id_check_message is not empty %}
                        <div class="alertBlue">
                            We failed to automatically verify your identity.
                            We will contact you once the order is placed.
                        </div>
                        {% endif %}

                        {{ payment_form|raw }}

                        {% include "includes/accepted_cards.twig" %}

                    </div>

                </div>

                <div class="overviewBackButtons mobileBackButton">
                    <a href="/shop/checkout/basket.php" class="backToBasket">Go Back & Edit Details</a>
                </div> <!-- .overviewBackButtons -->

            </div> <!-- .orderSummaryWrap -->

        </div> <!-- .wrapper -->

    </div> <!-- #checkout -->

    {% include 'shop/basket/delivery_banner.twig' with {
        no_wrapper: false,
        show_expected_delivery: true
    } %}

{% endblock %}
