{{ include('pub/breadcrumb.twig') }}

{% set inp = INP|default({}) %}
{% set confirmation = inp.confirmation|default({}) %}
{% set has_errors = FORM_ERRORS is defined and FORM_ERRORS %}

<!-- checkout start -->
<section class="checkout-area section-ptb">
    <form id="checkoutForm" method="post" action="">
        <div class="container">
            {% if has_errors %}
                <div class="alert alert-danger meb-20">
                    {{ dt.gM("Please review checkout form fields.") }}
                </div>
            {% endif %}

            <div class="row row-mtm flex-lg-row-reverse align-items-lg-start">
                <div class="col-12 col-lg-5 p-lg-sticky top-0" data-animate="animate__fadeIn">
                    {{ include('include/checkout/summary.twig') }}
                </div>
                <div class="col-12 col-lg-7 p-lg-sticky top-0">
                    <div class="checkout-billview">
                        <div class="checkout-box peb-30 meb-30 beb" data-animate="animate__fadeIn">
                            <label class="cust-checkbox-label">
                                <input type="checkbox" id="news-email" name="confirmation[subscribe]" value="1" class="cust-checkbox" {% if confirmation.subscribe|default(0) %}checked{% endif %}>
                                <span class="d-block cust-check"></span>
                                <span>{{ dt.gM("Email me with news and offers") }}</span>
                            </label>
                        </div>
                        {{ include('include/checkout/address.twig') }}
                        {{ include('include/checkout/notes.twig') }}
                    </div>
                </div>
            </div>

            <div class="row flex-lg-row-reverse align-items-lg-start">
                <div class="col-12 col-lg-5 p-lg-sticky top-0" data-animate="animate__fadeIn">
                    {{ include('include/checkout/shipping_method.twig') }}
                </div>
                <div class="col-12 col-lg-7 p-lg-sticky top-0" data-animate="animate__fadeIn">
                    <div class="checkout-billview">
                        {{ include('include/checkout/payment.twig') }}
                        <div class="checkout-box pst-25 validate js-terms-validate">
                            <label class="cust-checkbox-label">
                                <input type="checkbox" name="confirmation[agree_to_terms]" value="1" class="cust-checkbox" data-validator="agree_to_terms" {% if confirmation.agree_to_terms|default(0) %}checked{% endif %}>
                                <span class="d-block cust-check"></span>
                                {% set classForTerms = "body-secondary-color text-decoration-underline d-inline-block js-popup-link js-terms-modal" %}
                                {% set url = dt.gL(832, 'p:1/fload:1') %}
                                {% set openTag = '<a id="show-terms" class="' ~ classForTerms ~ '" data-modal-title="' ~ dt.gM("Terms & Conditions") ~ '" href="' ~ url ~ '">' %}
                                {% set closeTag = '</a>' %}
                                <span>
                                    {{ dt.gM("I have read and <a>agreed to terms.</a>")
                                    |replace({'<a>': openTag, '</a>': closeTag})
                                    |raw }}
                                </span>
                            </label>
                        </div>
                        <div class="checkout-btn d-flex flex-column flex-md-row-reverse justify-content-md-between mst-30 pst-30 bst">
                            <button type="submit" class="width-100 width-md-auto btn-style secondary-btn">{{ dt.gM("Place order") }}</button>
                            <a href="{{ dt.gL(896) }}" class="body-primary-color d-flex align-items-center justify-content-center mst-15 mst-md-0"><i class="ri-arrow-left-line d-block icon-16 mer-5 lh-1"></i>{{ dt.gM("Return to cart") }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</section>
<!-- checkout end -->