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

<section class="bg-gray-100 dark:bg-gray-900">
    <div [ngStyle]="{'height': '1298px', 'width': width, float:'Right'}">
        <ejs-sidebar class="w-full" #sidebar position="Right" [type]="type" [width]="width" [isOpen]="true" [closeOnDocumentClick]="false" showBackdrop="true" role="sidebar" style="display: block;">
            <div class="p-4 md:p-6 bg-gray-100 dark:bg-gray-900">
                <div class="flex justify-between items-center mb-5">
                    <h2 class="text-lg font-medium text-gray-900 dark:text-white">My shopping cart</h2>
                    <button ejs-button class="e-icons e-btn e-flat text-xl" (click)="sidebar.toggle()" type="button" aria-label="close the sidebar" role="button">
                        <i class="e-icons e-close"></i>
                    </button>
                </div>
                <div class="rounded-lg p-3 bg-gray-200 dark:bg-gray-800">
                    <div class="grid grid-cols-1 gap-3">
                        <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>
                <div class="pt-5">
                    <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="grid grid-cols-1 w-full">
                                    <label class="block text-sm font-medium mb-1 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 justify-between gap-4 w-full flex-col md:flex-row lg:flex-row xl:flex-row">
                                    <div class="w-full md:w-1/2 lg:w-1/2 xl:w-1/2">
                                        <label class="block text-sm font-medium mb-1 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 lg:w-1/2 xl:w-1/2">
                                        <label class="block text-sm font-medium mb-1 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 text-sm font-medium mb-1 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 w-full">
                                <label class="block text-sm font-medium mb-1 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 md:grid-cols-2 gap-5 w-full">
                                <div>
                                    <label class="block text-sm font-medium mb-1 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 text-sm font-medium mb-1 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="py-6">
                    <div class="w-full">
                        <div>
                            <h6 class="font-semibold text-lg text-gray-900 dark:text-white">Delivery address</h6>
                            <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="pt-6">
                            <h6 class="font-semibold text-lg text-gray-900 dark:text-white">Payment details</h6>
                            <div class="flex flex-col gap-4 pt-4 e-bigger">
                                <ejs-radiobutton label="Debit card" name="paymentdetails" value="bank card" checked="true" aria-label="debit card" role="radio"></ejs-radiobutton>
                                <ejs-radiobutton label="Credit card" name="paymentdetails" value="online payments" aria-label="credit card" role="radio"></ejs-radiobutton>
                                <ejs-radiobutton label="Net banking" name="paymentdetails" value="net 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>
                <div class="flex flex-col md:flex-row items-center justify-center gap-4 pt-2">
                    <div class="w-full md:w-1/2 e-bigger">
                        <button ejs-button class="w-full e-primary e-btn text-lg" type="submit" aria-label="proceed to checkout" role="button">Proceed to checkout</button>
                    </div>
                    <div class="w-full md:w-1/2 e-bigger">
                        <button ejs-button class="w-full e-outline e-btn text-lg" type="submit" aria-label="continue shopping" role="button">Continue shopping</button>
                    </div>
                </div>
            </div>
        </ejs-sidebar>
    </div>
</section>
<!-- SB Code - Start -->
<div class="p-3 absolute top-0 right-0">
    <button ejs-button cssClass="e-large e-icons e-chevron-left e-round" type="button" (click)="sidebar?.show()" aria-label="expand menu" role="button"></button>
</div>
<!-- SB Code - End -->

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

<section class="bg-light-subtle">
    <div class="main-sidebar-content" [ngStyle]="{'height': '1298px', 'width': width, float:'Right'}">
        <ejs-sidebar #sidebar position="Right" [type]="type" [width]="width" [isOpen]="true" [closeOnDocumentClick]="false" showBackdrop="true" role="sidebar" style="display: block;">
            <div class="p-3 p-md-4 bg-light-subtle">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="h5 fs-5 fw-bold text-body mb-0">My shopping cart</h2>
                    <button ejs-button class="e-icons e-btn e-flat" (click)="sidebar.toggle()" type="button" aria-label="close the sidebar" role="button">
                        <i class="e-icons e-close"></i>
                    </button>
                </div>
                <div class="rounded p-3 px-2 bg-body-tertiary">
                    <div class="row g-3">
                        <div class="col-12">
                            <div class="d-flex justify-content-between pb-4 px-2">
                                <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 px-2">
                                <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 px-2">
                                <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 px-2">
                                <div class="fs-6 text-dark-emphasis">Tax</div>
                                <div class="fs-6 fw-medium text-body">$899.00</div>
                            </div>
                        </div>
                        <div class="mt-0 px-3">
                            <hr class="border-secondary" />
                        </div>
                        <div class="col-12 d-flex justify-content-between mt-0 px-3">
                            <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>
                </div>
                <div class="pt-4">
                    <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-md-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-md-6 pe-md-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-md-6 ps-md-2 pt-md-0">
                                <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 class="py-4">
                    <div>
                        <h6 class="fs-5 fw-medium text-body mb-0">Delivery address</h6>
                        <div class="d-flex flex-column gap-3 pt-3 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="pt-4">
                        <h6 class="fs-5 fw-medium text-body mb-0">Payment details</h6>
                        <div class="d-flex flex-column gap-3 pt-3 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="d-flex flex-column flex-md-row align-items-center justify-content-center gap-3">
                    <div class="w-100">
                        <button ejs-button class="e-btn e-primary e-block" type="submit" aria-label="proceed to checkout" role="button">Proceed to checkout</button>
                    </div>
                    <div class="w-100">
                        <button ejs-button class="e-btn e-secondary e-block" type="submit" aria-label="continue shopping" role="button">Continue shopping</button>
                    </div>
                </div>
            </div>
        </ejs-sidebar>
    </div>
</section>
<!-- SB Code - Start -->
<div class="p-3 position-absolute top-0 end-0">
    <button ejs-button cssClass="e-large e-icons e-chevron-left e-round" type="button" (click)="sidebar?.show()" aria-label="expand menu" role="button"></button>
</div>
<!-- SB Code - End -->

}