{#
    Vue SFC Component version of checkout overview page
    This replaces the inline-template pattern with proper Vue components
    To use: rename this file to overview.twig (backup original first)
#}

{# 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() }}

    {# All checkout data (basket + config) is fetched via AJAX to avoid exposing any data in page source #}
{% endblock %}

{% block content %}

    {% 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">
                    {# Vue SFC Component - replaces inline-template basket component #}
                    <mtc-checkout-overview order-id="{{ order_id }}"></mtc-checkout-overview>
                </section>


                <div class="paymentBoxWrap" v-show="$store.getters['checkout/checkoutReady']" v-cloak>

                    <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 %}
