{{ header }}

<section>

    <div class="container">

        <!-- Breadcrumb -->

  <nav class="franklin-breadcrumb" aria-label="breadcrumb">
    <ol class="breadcrumb mb-0">
        {% for breadcrumb in breadcrumbs %}
            <li class="breadcrumb-item {% if loop.last %}active{% endif %}">
                {% if loop.last %}
                    {{ breadcrumb.text }}
                {% elseif loop.first %}
                    <a href="{{ breadcrumb.href }}">
                        <i class="bi bi-house-door-fill"></i> Home
                    </a>
                {% else %}
                    <a href="{{ breadcrumb.href }}">
                        {{ breadcrumb.text }}
                    </a>
                {% endif %}
            </li>
        {% endfor %}
    </ol>
</nav>
</div>
</section>

<section class="common-pageheader mb-5">
     <div class="container">
        <div class="mb-3">

            <h1 class="fw-bold">{{ heading_title }}</h1>

            <p class="text-muted">
                Complete your order securely
            </p>

        </div>
</div>
</section>
<section class="franklin-checkout">

<div class="container">

<div class="franklin-checkout-header text-center mb-5">

<h2 class="fw-bold">Secure Checkout</h2>

<p class="text-muted">
Complete your purchase in two easy steps
</p>

<div class="checkout-progress">

<div class="checkout-progress-bar">

<div class="checkout-step active">

<span>1</span>

<small>Customer Details</small>

</div>

<div class="checkout-line"></div>

<div class="checkout-step">

<span>2</span>

<small>Delivery & Payment</small>

</div>

</div>

</div>

</div>

<div class="row g-4">

            <!-- LEFT -->

<div class="col-lg-8">

<div id="checkout-step-1">

{% if register %}

<div class="card shadow-sm border-0 rounded-4 mb-4">

<div class="card-header bg-white">

<h5 class="mb-0">
<i class="bi bi-person-circle me-2"></i>
Customer Information
</h5>

</div>

<div class="card-body">

{{ register }}

</div>

</div>

{% endif %}

<div class="text-end mt-4">

<button
type="button"
id="btn-step-1"
class="btn btn-primary btn-lg rounded-pill px-5">

Continue to Delivery & Payment

<i class="bi bi-arrow-right ms-2"></i>

</button>

</div>

</div>

            <!-- RIGHT -->

            <div class="col-lg-4">

                <div class="position-sticky" style="top:100px;">

                    {% if shipping_method %}

                    <div class="card shadow-sm border-0 rounded-4 mb-4">

                        <div class="card-header bg-white">

                            <h5 class="mb-0">

                                <i class="bi bi-box-seam me-2"></i>

                                Shipping Method

                            </h5>

                        </div>

                        <div class="card-body">

                            {{ shipping_method }}

                        </div>

                    </div>

                    {% endif %}

                    <div class="card shadow-sm border-0 rounded-4 mb-4">

                        <div class="card-header bg-white">

                            <h5 class="mb-0">

                                <i class="bi bi-credit-card me-2"></i>

                                Payment Method

                            </h5>

                        </div>

                        <div class="card-body">

                            {{ payment_method }}

                        </div>

                    </div>

                    <div class="card shadow-sm border-0 rounded-4">

                        <div class="card-header bg-white">

                            <h5 class="mb-0">

                                <i class="bi bi-bag-check me-2"></i>

                                Order Summary

                            </h5>

                        </div>

                        <div class="card-body">

                            {{ confirm }}

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

</section>

{{ footer }}