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

<section>
    <div id="dialog-container" class="relative" style="min-height: 1370px;">
        <ejs-dialog #checkout class="absolute" target="#dialog-container" [visible]="true" [showCloseIcon]="true" width="662px" height="100%" (open)="$event.preventFocus = true" [closeOnEscape]="true">
            <div class="max-w-2xl px-1 text-gray-700 dark:text-gray-300">
                <ng-template #header>
                    <span class="text-lg">My shopping cart</span>
                </ng-template>
                <ng-template #content>
                    <div class="p-3 mt-2 bg-gray-100 dark:bg-gray-700 rounded-lg">
                        <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>
                    <form action="#" class="mt-5 md:mt-4 mb-6" onsubmit="event.preventDefault();">
                        <h2 class="mb-4 font-semibold text-lg text-gray-900 dark:text-white">Delivery details</h2>
                        <div class="grid gap-5">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-5 w-full">
                                <div>
                                    <label class="block text-sm font-semibold mb-1 text-gray-700 dark:text-gray-300">First name</label>
                                    <ejs-textbox class="e-bigger" type="text" placeholder="First name" floatLabelType="Never" aria-label="enter the first name" role="textbox"></ejs-textbox>
                                </div>
                                <div>
                                    <label class="block text-sm font-semibold mb-1 text-gray-700 dark:text-gray-300">Last name</label>
                                    <ejs-textbox class="e-bigger" type="text" placeholder="Last name" floatLabelType="Never" aria-label="enter the last name" role="textbox"></ejs-textbox>
                                </div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-5 w-full">
                                <div>
                                    <label class="block text-sm font-semibold 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-semibold 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="grid grid-cols-1 md:grid-cols-2 gap-5 w-full">
                                <div>
                                    <label class="block text-sm font-semibold mb-1 text-gray-700 dark:text-gray-300">Phone number</label>
                                    <div class="flex space-x-2">
                                        <div class="w-2/5">
                                            <ejs-dropdownlist class="e-bigger" placeholder="+1" aria-label="choose a country code" role="listbox"></ejs-dropdownlist>
                                        </div>
                                        <div class="w-4/5">
                                            <ejs-maskedtextbox class="e-bigger" mask="9999999999" promptChar=" " placeholder="432 432 4321" aria-label="enter the phone number" role="textbox"></ejs-maskedtextbox>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <label class="block text-sm font-semibold mb-1 text-gray-700 dark:text-gray-300">Email</label>
                                    <ejs-textbox class="e-bigger" type="email" placeholder="Email" floatLabelType="Never" aria-label="enter the email address" role="textbox"></ejs-textbox>
                                </div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-5 w-full">
                                <div>
                                    <label class="block text-sm font-semibold mb-1 text-gray-700 dark:text-gray-300">Company name</label>
                                    <ejs-textbox class="e-bigger" type="text" placeholder="Company name" floatLabelType="Never" aria-label="enter the company name" role="textbox"></ejs-textbox>
                                </div>
                                <div>
                                    <label class="block text-sm font-semibold mb-1 text-gray-700 dark:text-gray-300">VAT number</label>
                                    <ejs-textbox class="e-bigger" type="text" placeholder="VAT number" floatLabelType="Never" aria-label="enter the VAT number" role="textbox"></ejs-textbox>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div>
                        <h2 class="mb-4 font-semibold text-lg text-gray-900 dark:text-white">Payments</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div class="e-card pt-4 shadow-none border-transparent hover:border-primary-600 dark:hover:border-primary-400 hover:border">
                                <div class="e-card-content">
                                    <div class="e-bigger">
                                        <ejs-radiobutton label="Credit card" name="payment" aria-label="credit card" role="radio"></ejs-radiobutton>
                                    </div>
                                    <div class="mt-1 ml-7 text-gray-500 dark:text-gray-400">Pay with your credit card</div>
                                </div>
                                <div class="e-card-actions">
                                    <button ejs-button class="e-flat e-btn mr-3" type="button" aria-label="delete" role="button">
                                        <span class="e-icons e-trash mr-1.5 e-medium"></span>
                                        <span>Delete</span>
                                    </button>
                                    <button ejs-button class="e-flat e-btn" type="button" aria-label="edit" role="button">
                                        <span class="e-icons e-edit mr-1.5 e-medium"></span>
                                        <span>Edit</span>
                                    </button>
                                </div>
                            </div>
                            <div class="e-card pt-4 shadow-none border-transparent hover:border-primary-600 dark:hover:border-primary-400">
                                <div class="e-card-content">
                                    <div class="e-bigger">
                                        <ejs-radiobutton label="Payment on delivery" name="payment" checked="true" aria-label="payment on delivery" role="radio"></ejs-radiobutton>
                                    </div>
                                    <div class="mt-1 ml-7 text-gray-500 dark:text-gray-400">+ $12 payment processing fee</div>
                                </div>
                                <div class="e-card-actions">
                                    <button ejs-button class="e-flat e-btn mr-3" type="button" aria-label="delete" role="button">
                                        <span class="e-icons e-trash mr-1.5 e-medium"></span>
                                        <span>Delete</span>
                                    </button>
                                    <button ejs-button class="e-flat e-btn" type="button" aria-label="edit" role="button">
                                        <span class="e-icons e-edit mr-1.5 e-medium"></span>
                                        <span>Edit</span>
                                    </button>
                                </div>
                            </div>
                            <div class="e-card pt-4 shadow-none border-transparent hover:border-primary-600 dark:hover:border-primary-400">
                                <div class="e-card-content">
                                    <div class="e-bigger">
                                        <ejs-radiobutton label="PayPal account" name="payment" aria-label="paypal account" role="radio"></ejs-radiobutton>
                                    </div>
                                    <div class="mt-1 ml-7 text-gray-500 dark:text-gray-400">Connect to your account</div>
                                </div>
                                <div class="e-card-actions">
                                    <button ejs-button class="e-flat e-btn mr-3" type="button" aria-label="delete" role="button">
                                        <span class="e-icons e-trash mr-1.5 e-medium"></span>
                                        <span>Delete</span>
                                    </button>
                                    <button ejs-button class="e-flat e-btn" type="button" aria-label="edit" role="button">
                                        <span class="e-icons e-edit mr-1.5 e-medium"></span>
                                        <span>Edit</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-6">
                        <h2 class="mb-4 font-semibold text-lg text-gray-900 dark:text-white">Delivery methods</h2>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div class="e-card pt-4 pb-1 shadow-none border-transparent hover:border-primary-600 dark:hover:border-primary-400">
                                <div class="e-card-content">
                                    <div class="e-bigger">
                                        <ejs-radiobutton label="$15 - DHL fast delivery" name="delivery" aria-label="$15 - DHL fast delivery" role="radio"></ejs-radiobutton>
                                    </div>
                                    <div class="mt-1 ml-7 text-gray-500 dark:text-gray-400">Get it by tomorrow</div>
                                </div>
                            </div>
                            <div class="e-card pt-4 pb-1 shadow-none border-transparent hover:border-primary-600 dark:hover:border-primary-400">
                                <div class="e-card-content">
                                    <div class="e-bigger">
                                        <ejs-radiobutton label="Free delivery - FedEx" name="delivery" checked="true" aria-label="FedEx free delivery" role="radio"></ejs-radiobutton>
                                    </div>
                                    <div class="mt-1 ml-7 text-gray-500 dark:text-gray-400">Get it by Friday, 13 Dec 2023</div>
                                </div>
                            </div>
                            <div class="e-card pt-4 pb-1 shadow-none border-transparent hover:border-primary-600 dark:hover:border-primary-400">
                                <div class="e-card-content">
                                    <div class="e-bigger">
                                        <ejs-radiobutton label="$49 - Express delivery" name="delivery" aria-label="$49 - express delivery" role="radio"></ejs-radiobutton>
                                    </div>
                                    <div class="mt-1 ml-7 text-gray-500 dark:text-gray-400">Get it today</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </ng-template>
                <ng-template #footerTemplate>
                    <div class="e-bigger mb-4 text-right">
                        <button ejs-button class="e-btn md:mr-4 !ml-0 w-full md:w-fit e-primary" type="submit" aria-label="proceed to checkout" role="button">Proceed to checkout</button>
                        <button ejs-button class="e-btn dark:text-white w-full !ml-0 md:w-fit mt-4 md:mt-0 e-outline" type="submit" aria-label="continue shopping" role="button">Continue shopping</button>
                    </div>
                </ng-template>
            </div>
        </ejs-dialog>
    </div>
</section>

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

<section>
    <div id="dialog-container" class="position-relative e-bigger" style="min-height: 1390px;">
        <ejs-dialog #checkout class="position-absolute" target="#dialog-container" header="My shopping cart" [visible]="true" [showCloseIcon]="true" width="662px" height="100%" (open)="$event.preventFocus = true" [closeOnEscape]="true">
            <ng-template #content>
                <div class="mx-md-2">
                    <div class="border border-light-subtle bg-light-subtle rounded-3 p-2 mt-2">
                        <div>
                            <div class="d-flex flex-column gap-3">
                                <div class="d-flex justify-content-between">
                                    <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">
                                    <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">
                                    <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">
                                    <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">
                                <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>
                    <form action="#" class="my-4" onsubmit="event.preventDefault();">
                        <h2 class="fw-semibold fs-5 mb-3">Delivery details</h2>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="text-dark-emphasis fw-medium small 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">
                                <label class="text-dark-emphasis fw-medium small 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 class="row g-3 mt-0">
                            <div class="col-md-6">
                                <label class="text-dark-emphasis fw-medium small 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">
                                <label class="text-dark-emphasis fw-medium small mb-1">City</label>
                                <ejs-dropdownlist class="e-bigger" placeholder="City" aria-label="choose a city" role="listbox"></ejs-dropdownlist>
                            </div>
                        </div>
                        <div class="row g-3 mt-0">
                            <div class="col-md-6">
                                <label class="text-dark-emphasis fw-medium small mb-1">Phone number</label>
                                <div class="row">
                                    <div class="col-4 px-2">
                                        <ejs-dropdownlist class="e-bigger" placeholder="+1" aria-label="choose a country code" role="listbox"></ejs-dropdownlist>
                                    </div>
                                    <div class="col-8 ps-0">
                                        <ejs-maskedtextbox class="e-bigger" mask="9999999999" promptChar=" " placeholder="432 432 4321" aria-label="enter the phone number" role="textbox"></ejs-maskedtextbox>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <label class="text-dark-emphasis fw-medium small mb-1">Email</label>
                                <ejs-textbox class="e-bigger" type="email" name="email" placeholder="Email" floatLabelType="Never" aria-label="enter the email address" role="textbox"></ejs-textbox>
                            </div>
                        </div>
                        <div class="row g-3 mt-0">
                            <div class="col-md-6">
                                <label class="text-dark-emphasis fw-medium small mb-1">Company name</label>
                                <ejs-textbox class="e-bigger" type="text" name="companyNmae" placeholder="Company name" floatLabelType="Never" aria-label="enter the company name" role="textbox"></ejs-textbox>
                            </div>
                            <div class="col-md-6">
                                <label class="text-dark-emphasis fw-medium small mb-1">VAT number</label>
                                <ejs-textbox class="e-bigger" type="text" name="vatNumber" placeholder="VAT number" floatLabelType="Never" aria-label="enter the VAT number" role="textbox"></ejs-textbox>
                            </div>
                        </div>
                    </form>
                    <div>
                        <h2 class="fw-medium fs-5 text-body mb-3">Payments</h2>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="e-card h-100">
                                    <div class="e-card-content pb-2">
                                        <ejs-radiobutton label="Credit card" name="payment" aria-label="credit card" role="radio"></ejs-radiobutton>
                                        <div class="text-dark-emphasis mt-1 ps-1 ms-4">Pay with your credit card</div>
                                    </div>
                                    <div class="e-card-actions">
                                        <button ejs-button class="e-btn e-flat me-3" type="button" aria-label="delete" role="button">
                                            <span class="e-icons e-trash me-2"></span>
                                            <span>Delete</span>
                                        </button>
                                        <button ejs-button class="e-btn e-flat" type="button" aria-label="edit" role="button">
                                            <span class="e-icons e-edit me-2"></span>
                                            <span>Edit</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="e-card h-100">
                                    <div class="e-card-content pb-2">
                                        <ejs-radiobutton label="Payment on delivery" name="payment" checked="true" aria-label="payment on delivery" role="radio"></ejs-radiobutton>
                                        <div class="text-dark-emphasis mt-1 ms-4 ps-1">+ $12 payment processing fee</div>
                                    </div>
                                    <div class="e-card-actions">
                                        <button ejs-button class="e-btn e-flat me-3" type="button" aria-label="delete" role="button">
                                            <span class="e-icons e-trash me-2"></span>
                                            <span>Delete</span>
                                        </button>
                                        <button ejs-button class="e-btn e-flat" type="button" aria-label="edit" role="button">
                                            <span class="e-icons e-edit me-2"></span>
                                            <span>Edit</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="e-card h-100">
                                    <div class="e-card-content pb-2">
                                        <ejs-radiobutton label="PayPal account" name="payment" aria-label="paypal account" role="radio"></ejs-radiobutton>
                                        <div class="text-dark-emphasis mt-1 ms-4 ps-1">Connect to your account</div>
                                    </div>
                                    <div class="e-card-actions">
                                        <button ejs-button class="e-btn e-flat me-3" type="button" aria-label="delete" role="button">
                                            <span class="e-icons e-trash me-2"></span>
                                            <span>Delete</span>
                                        </button>
                                        <button ejs-button class="e-btn e-flat" type="button" aria-label="edit" role="button">
                                            <span class="e-icons e-edit me-2"></span>
                                            <span>Edit</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4 mb-2">
                        <h2 class="fw-medium fs-5 text-body mb-3">Delivery methods</h2>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="e-card h-100">
                                    <div class="e-card-content">
                                        <div class="e-bigger">
                                            <ejs-radiobutton label="$15 - DHL fast delivery" name="delivery" aria-label="$15 - DHL fast delivery" role="radio"></ejs-radiobutton>
                                        </div>
                                        <div class="text-dark-emphasis mt-1 ms-4 ps-1">Get it by tomorrow</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="e-card h-100">
                                    <div class="e-card-content">
                                        <ejs-radiobutton label="Free delivery - FedEx" name="delivery" checked="true" aria-label="FedEx free delivery" role="radio"></ejs-radiobutton>
                                        <div class="text-dark-emphasis mt-1 ms-4 ps-1">Get it by Friday, 13 Dec 2023</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="e-card h-100">
                                    <div class="e-card-content">
                                        <ejs-radiobutton label="$49 - Express delivery" name="delivery" aria-label="$49 - express delivery" role="radio"></ejs-radiobutton>
                                        <div class="text-dark-emphasis mt-1 ms-4 ps-1">Get it today</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </ng-template>
            <ng-template #footerTemplate>
                <div class="e-bigger row justify-content-lg-center justify-content-xl-end flex-column flex-md-row px-2 text-right">
                    <div class="col-12 col-md-6 col-xl-5 m-0 mb-3 mb-md-0">
                        <button ejs-button class="e-btn e-primary e-block m-0" type="submit" aria-label="proceed to checkout" role="button">Proceed to checkout</button>
                    </div>
                    <div class="col-12 col-md-6 col-xl-5 ps-md-1">
                        <button ejs-button class="e-btn e-secondary e-block m-0" type="submit" aria-label="continue shopping" role="button">Continue shopping</button>
                    </div>
                </div>
            </ng-template>
        </ejs-dialog>
    </div>
</section>

}