@if (currentTheme === 'tailwind') {

<section class="bg-gray-50 dark:bg-gray-950">
    <h4 class="py-5 px-4 md:px-6 text-xl font-semibold text-gray-900 dark:text-white">Checkout</h4>
    <div class="grid grid-cols-1 gap-6 px-4 md:px-6 lg:px-6 xl:px-11 pb-10 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-2">
        <div class="order-1 lg:order-2 bg-gray-50 dark:bg-gray-950 md:border rounded-lg md:border-gray-200 md:dark:border-gray-600">
            <h6 class="px-0 md:p-6 pb-0 text-lg font-semibold text-gray-900 dark:text-white">Product summary</h6>
            <ejs-grid class="pt-4 sm:pt-0" #grid [dataSource]="data" rowHeight="68" gridLines="None" width="100%" maxWidth="1280" role="grid" style="border: none !important;">
                <e-columns>
                    <e-column field="Items" width="56" textAlign="center">
                        <ng-template #template let-data>
                            <div class="flex items-center justify-center">
                                <img class="w-8 rounded-lg" src="assets/images/checkout/checkout-product-list/{{data.image}}" alt="product image" />
                            </div>
                        </ng-template>
                    </e-column>
                    <e-column field="description" width="173" allowTextWrap="true" clipMode="EllipsisWithTooltip"></e-column>
                    <e-column field="quantity" width="80" clipMode="EllipsisWithTooltip" textAlign="center">
                        <ng-template #template let-data>
                            <span>x{{data.quantity}}</span>
                        </ng-template>
                    </e-column>
                    <e-column field="amount" width="83" textAlign="center" format="c0"></e-column>
                </e-columns>
            </ejs-grid>
        </div>
        <div class="order-2 lg:order-1 md:border rounded-lg px-0 md:p-6 md:border-gray-200 md:dark:border-gray-600">
            <form action="#" onsubmit="event.preventDefault();">
                <div class="grid gap-5">
                    <div class="grid grid-cols-1 gap-5 w-full">
                        <h5 class="mb-1 text-lg font-semibold text-gray-900 dark:text-white">Billing address</h5>
                        <div class="e-bigger">
                            <ejs-radiobutton name="billingType" value="individual" label="Individual" checked="true" aria-label="individual" role="radio"></ejs-radiobutton>
                            <ejs-radiobutton cssClass="ml-6" name="billingType" value="company" label="Company" aria-label="company" role="radio"></ejs-radiobutton>
                        </div>
                        <div class="w-full">
                            <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Saved address</label>
                            <ejs-dropdownlist class="e-bigger" placeholder="Saved address" aria-label="choose a saved address" role="listbox"></ejs-dropdownlist>
                        </div>
                        <div class="flex flex-col justify-between gap-5 w-full md:flex-row">
                            <div class="w-full md:w-1/2">
                                <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">First name</label>
                                <ejs-textbox class="e-bigger" type="text" name="firstName" placeholder="First name" floatLabelType="Never" aria-label="enter the first name" role="textbox"></ejs-textbox>
                            </div>
                            <div class="w-full md:w-1/2">
                                <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Last name</label>
                                <ejs-textbox class="e-bigger" type="text" name="lastName" placeholder="Last name" floatLabelType="Never" aria-label="enter the last name" role="textbox"></ejs-textbox>
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 gap-5 w-full">
                        <div class="w-full">
                            <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Phone number</label>
                            <div class="flex space-x-2">
                                <div class="w-2/5 sm:w-1/5 md:w-1/5 lg:1/5 xl:w-1/5">
                                    <ejs-dropdownlist class="e-bigger" placeholder="+1" aria-label="choose a country code" role="listbox"></ejs-dropdownlist>
                                </div>
                                <div class="w-3/5 sm:w-4/5 md:w-4/5 lg:w-4/5 xl:w-4/5">
                                    <ejs-maskedtextbox class="e-bigger" mask="9999999999" placeholder="432 432 4321" promptChar=" " aria-label="enter the phone number" role="textbox"></ejs-maskedtextbox>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="grid grid-cols-1">
                        <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Shipping address</label>
                        <ejs-textarea class="e-bigger" placeholder="Shipping address" resizeMode="Vertical" aria-label="enter the shipping address" role="textbox"></ejs-textarea>
                    </div>
                    <div class="grid grid-cols-1 gap-5 md:grid-cols-2 w-full">
                        <div>
                            <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">Country</label>
                            <ejs-dropdownlist class="e-bigger" placeholder="Country" aria-label="choose a country" role="listbox"></ejs-dropdownlist>
                        </div>
                        <div>
                            <label class="block mb-1 text-sm font-medium text-gray-700 dark:text-gray-300">City</label>
                            <ejs-dropdownlist class="e-bigger" placeholder="City" aria-label="choose a city" role="listbox"></ejs-dropdownlist>
                        </div>
                    </div>
                    <div class="e-bigger">
                        <ejs-checkbox label="Save the data in the address list" aria-label="save the data in the address list" role="checkbox"></ejs-checkbox>
                    </div>
                </div>
            </form>
        </div>
        <div class="order-3 w-full">
            <div class="md:border rounded-lg px-0 md:p-6 md:border-gray-200 md:dark:border-gray-600">
                <div class="text-lg font-semibold text-gray-900 dark:text-white">Delivery address</div>
                <div class="flex flex-col gap-4 pt-4 e-bigger">
                    <ejs-radiobutton label="Delivery to the same address" name="deliveryType" value="same address" checked="true" aria-label="delivery to the same address" role="radio"></ejs-radiobutton>
                    <ejs-radiobutton label="Delivery to the another address" name="deliveryType" value="another address" aria-label="delivery to the another address" role="radio"></ejs-radiobutton>
                    <ejs-radiobutton label="Store pickup" name="deliveryType" value="store pickup" aria-label="store pickup" role="radio"></ejs-radiobutton>
                </div>
            </div>
            <div class="md:border rounded-lg px-0 md:p-6 mt-6 md:border-gray-200 md:dark:border-gray-600">
                <div class="text-lg font-semibold text-gray-900 dark:text-white">Payment details</div>
                <div class="flex flex-col gap-4 pt-4 e-bigger">
                    <ejs-radiobutton label="Debit card" name="paymentdetails" value="bank" checked="true" aria-label="debit card" role="radio"></ejs-radiobutton>
                    <ejs-radiobutton label="Credit card" name="paymentdetails" value="payments" aria-label="credit card" role="radio"></ejs-radiobutton>
                    <ejs-radiobutton label="Net banking" name="paymentdetails" value="banking" aria-label="net banking" role="radio"></ejs-radiobutton>
                    <ejs-radiobutton label="UPI transaction" name="paymentdetails" value="UPI transaction" aria-label="UPI transaction" role="radio"></ejs-radiobutton>
                </div>
            </div>
        </div>
        <div class="order-4 rounded-lg px-0 md:p-6 md:border md:border-gray-200 md:dark:border-gray-600">
            <div class="w-full">
                <h6 class="pb-4 text-lg text-left font-semibold text-gray-900 dark:text-white">Order summary</h6>
                <div class="grid grid-cols-1 gap-6">
                    <div class="grid grid-cols-1 gap-6">
                        <div class="flex justify-between">
                            <div class="text-base text-gray-700 dark:text-gray-300">Subtotal</div>
                            <div class="text-base font-semibold text-gray-900 dark:text-white">$8,900.00</div>
                        </div>
                        <div class="flex justify-between">
                            <div class="text-base text-gray-700 dark:text-gray-300">Savings</div>
                            <div class="text-base font-semibold text-green-700 dark:text-green-500">-$299.00</div>
                        </div>
                        <div class="flex justify-between">
                            <div class="text-base text-gray-700 dark:text-gray-300">Store pickup</div>
                            <div class="text-base font-semibold text-gray-900 dark:text-white">$99.00</div>
                        </div>
                        <div class="flex justify-between">
                            <div class="text-base text-gray-700 dark:text-gray-300">Tax</div>
                            <div class="text-base font-semibold text-gray-900 dark:text-white">$899.00</div>
                        </div>
                    </div>
                    <div>
                        <hr class="w-full border-gray-200 dark:border-gray-600" />
                    </div>
                    <div class="flex justify-between">
                        <div class="text-base font-semibold text-gray-700 dark:text-gray-300">Total</div>
                        <div class="text-base font-semibold text-gray-900 dark:text-white">$9,599.00</div>
                    </div>
                </div>
                <div class="flex flex-col md:flex-row items-center justify-center pt-8 gap-4 sm:gap-4 md:gap-0 lg:gap-0 xl:gap-0">
                    <div class="w-full md:w-1/2 md:pr-3">
                        <button ejs-button class="w-full text-base e-primary e-btn" type="submit" aria-label="proceed to payment" role="button">Proceed to payment</button>
                    </div>
                    <div class="w-full md:w-1/2 md:pl-3">
                        <button ejs-button class="w-full text-base e-outline e-btn" type="submit" aria-label="return to shopping" role="button">Return to shopping</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

} @else if (currentTheme === 'bootstrap5.3') {

<section class="bg-body">
    <div class="p-3 p-md-4">
        <h1 class="py-2 fs-4 fw-bold text-body">Checkout</h1>
        <div class="d-lg-flex mx-0 gap-4 mb-sm-4 pe-lg-4">
            <div class="col-md-12 col-lg-6 order-lg-2 bg-body border border-light-subtle rounded px-0">
                <h6 class="fs-5 fw-medium text-body pb-2 p-4 mb-0">Product summary</h6>
                <ejs-grid class="border-0 pt-3" #grid [dataSource]="data" rowHeight="68" gridLines="None" width="100%" maxWidth="1280" role="grid">
                    <e-columns>
                        <e-column field="Items" width="56" textAlign="center">
                            <ng-template #template let-data>
                                <div class="d-flex align-items-center justify-content-center">
                                    <img class="rounded-3 ms-1" width="32" src="assets/images/checkout/checkout-product-list/{{data.image}}" alt="product image" />
                                </div>
                            </ng-template>
                        </e-column>
                        <e-column field="Description" width="173" allowTextWrap="true" clipMode="EllipsisWithTooltip"></e-column>
                        <e-column field="Quantity" width="80" clipMode="EllipsisWithTooltip" textAlign="center">
                            <ng-template #template let-data>
                                <span>x{{data.quantity}}</span>
                            </ng-template>
                        </e-column>
                        <e-column field="Amount" width="83" textAlign="center" format="c0"></e-column>
                    </e-columns>
                </ejs-grid>
            </div>
            <div class="col-md-12 col-lg-6 order-lg-1 border border-light-subtle rounded p-3 p-md-4 mt-4 mt-lg-0">
                <form action="#" onsubmit="event.preventDefault();">
                    <div class="mb-3">
                        <h5 class="mb-3 fs-5 fw-medium text-body">Billing address</h5>
                        <div class="mb-3 e-bigger">
                            <ejs-radiobutton name="billingType" value="individual" label="Individual" checked="true" aria-label="individual" role="radio"></ejs-radiobutton>
                            <ejs-radiobutton cssClass="ms-3" name="billingType" value="company" label="Company" aria-label="company" role="radio"></ejs-radiobutton>
                        </div>
                        <div class="mb-3">
                            <label class="fs-6 fw-medium text-dark-emphasis mb-1">Saved address</label>
                            <ejs-dropdownlist class="e-bigger" placeholder="Saved address" aria-label="choose a saved address" role="listbox"></ejs-dropdownlist>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6 pe-lg-2">
                                <label class="fs-6 fw-medium text-dark-emphasis mb-1">First name</label>
                                <ejs-textbox class="e-bigger" type="text" name="firstName" placeholder="First name" floatLabelType="Never" aria-label="enter the first name" role="textbox"></ejs-textbox>
                            </div>
                            <div class="col-md-6 ps-lg-2">
                                <label class="fs-6 fw-medium text-dark-emphasis mb-1">Last name</label>
                                <ejs-textbox class="e-bigger" type="text" name="lastName" placeholder="Last name" floatLabelType="Never" aria-label="enter the last name" role="textbox"></ejs-textbox>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="fs-6 fw-medium text-dark-emphasis mb-1">Phone number</label>
                        <div class="row">
                            <div class="col-4 col-sm-3 pe-0">
                                <ejs-dropdownlist class="e-bigger" placeholder="+1" aria-label="choose a country code" role="listbox"></ejs-dropdownlist>
                            </div>
                            <div class="col-8 col-sm-9 ps-2">
                                <ejs-maskedtextbox class="e-bigger" mask="9999999999" placeholder="432 432 4321" promptChar=" " aria-label="enter the phone number" role="textbox"></ejs-maskedtextbox>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="fs-6 fw-medium text-dark-emphasis d-block mb-1">Shipping address</label>
                        <ejs-textarea class="e-bigger" placeholder="Shipping address" resizeMode="Vertical" aria-label="enter the shipping address" role="textbox"></ejs-textarea>
                    </div>
                    <div class="row g-3 mb-3">
                        <div class="col-12 col-md-6 pe-lg-2">
                            <label class="fs-6 fw-medium text-dark-emphasis mb-1">Country</label>
                            <ejs-dropdownlist class="e-bigger" placeholder="Country" aria-label="choose a country" role="listbox"></ejs-dropdownlist>
                        </div>
                        <div class="col-12 col-md-6 ps-lg-2">
                            <label class="fs-6 fw-medium text-dark-emphasis mb-1">City</label>
                            <ejs-dropdownlist class="e-bigger" placeholder="City" aria-label="choose a city" role="listbox"></ejs-dropdownlist>
                        </div>
                    </div>
                    <div class="mb-3 e-bigger">
                        <ejs-checkbox label="Save the data in the address list" aria-label="save the data in the address list" role="checkbox"></ejs-checkbox>
                    </div>
                </form>
            </div>
        </div>
        <div class="d-lg-flex gap-4 mt-4 mb-sm-4 pe-lg-4">
            <div class="col-md-12 col-lg-6 order-lg-3 px-0">
                <div class="col-lg-12 border border-light-subtle rounded p-3 p-md-4">
                    <h6 class="fs-5 fw-medium text-body mb-0">Delivery address</h6>
                    <div class="e-bigger d-flex flex-column gap-3 pt-3">
                        <ejs-radiobutton label="Delivery to the same address" name="deliveryType" value="same address" checked="true" aria-label="delivery to the same address" role="radio"></ejs-radiobutton>
                        <ejs-radiobutton label="Delivery to the another address" name="deliveryType" value="another address" aria-label="delivery to the another address" role="radio"></ejs-radiobutton>
                        <ejs-radiobutton label="Store pickup" name="deliveryType" value="store pickup" aria-label="store pickup" role="radio"></ejs-radiobutton>
                    </div>
                </div>
                <div class="col-lg-12 border border-light-subtle rounded p-3 p-md-4 mt-4">
                    <h6 class="fs-5 fw-medium text-body mb-0">Payment details</h6>
                    <div class="e-bigger d-flex flex-column gap-3 pt-3">
                        <ejs-radiobutton label="Debit card" name="paymentdetails" value="bank" checked="true" aria-label="debit card" role="radio"></ejs-radiobutton>
                        <ejs-radiobutton label="Credit card" name="paymentdetails" value="payments" aria-label="credit card" role="radio"></ejs-radiobutton>
                        <ejs-radiobutton label="Net banking" name="paymentdetails" value="banking" aria-label="net banking" role="radio"></ejs-radiobutton>
                        <ejs-radiobutton label="UPI transaction" name="paymentdetails" value="UPI transaction" aria-label="UPI transaction" role="radio"></ejs-radiobutton>
                    </div>
                </div>
            </div>
            <div class="col-md-12 col-lg-6 order-lg-4 border border-light-subtle rounded p-3 p-md-4 mt-4 mt-lg-0">
                <h6 class="fs-5 fw-medium text-body mb-0 pb-3">Order summary</h6>
                <div class="mb-3">
                    <div class="d-flex justify-content-between pb-4">
                        <div class="fs-6 text-dark-emphasis">Subtotal</div>
                        <div class="fs-6 fw-medium text-body">$8,900.00</div>
                    </div>
                    <div class="d-flex justify-content-between pb-4">
                        <div class="fs-6 text-dark-emphasis">Savings</div>
                        <div class="fs-6 fw-medium text-success">-$299.00</div>
                    </div>
                    <div class="d-flex justify-content-between pb-4">
                        <div class="fs-6 text-dark-emphasis">Store pickup</div>
                        <div class="fs-6 fw-medium text-body">$99.00</div>
                    </div>
                    <div class="d-flex justify-content-between pb-2">
                        <div class="fs-6 text-dark-emphasis">Tax</div>
                        <div class="fs-6 fw-medium text-body">$899.00</div>
                    </div>
                </div>
                <div>
                    <hr class="border-secondary" />
                </div>
                <div class="d-flex justify-content-between mt-4">
                    <div class="fs-6 fw-medium text-dark-emphasis">Total</div>
                    <div class="fs-6 fw-medium text-body">$9,599.00</div>
                </div>
                <div class="d-flex flex-column flex-md-row align-items-center justify-content-between pt-4">
                    <button ejs-button class="e-btn e-primary e-block mb-3 mb-md-0 me-md-3" type="submit" aria-label="proceed to payment" role="button">Proceed to payment</button>
                    <button ejs-button class="e-btn e-secondary e-block" type="submit" aria-label="return to shopping" role="button">Return to shopping</button>
                </div>
            </div>
        </div>
    </div>
</section>

}