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

<section class="bg-gray-50 dark:bg-gray-950">
    <div id="checkout-accordion" class="container-lg px-4 md:px-6 text-gray-700 dark:text-gray-300 py-20" style="min-height: 1145px;">
        <div class="m-auto w-full max-w-3xl">
            <h2 class="font-semibold text-xl">Checkout</h2>
            <div class="e-bigger mt-4 mb-6">
                <ejs-accordion #accordion class="border-t-0 border-l-0 border-r-0 border-b border-gray-200 dark:border-gray-600" expandMode="Single" role="button">
                    <e-accordionitems>
                        <e-accordionitem expanded="true">
                            <ng-template #header>
                                <div class="font-normal">Delivery information</div>
                            </ng-template>
                            <ng-template #content>
                                <div>
                                    <div class="e-card pt-3 shadow-none border-transparent hover:border-primary-600 dark:hover:border-primary-400">
                                        <div class="e-card-content !pt-1 !px-4">
                                            <div class="e-bigger">
                                                <ejs-radiobutton label="Trig Yellow - (+1) 432 434 2345" name="delivery" aria-label="trig yellow - (+1) 432 434 2345" role="radio"></ejs-radiobutton>
                                            </div>
                                            <div class="mt-1 ml-7 text-gray-500 dark:text-gray-400">68 Dakota St, San Francisco, California 94107.</div>
                                        </div>
                                    </div>
                                    <div class="e-card pt-3 mt-4 shadow-none border-transparent hover:border-primary-600 dark:hover:border-primary-400">
                                        <div class="e-card-content !pt-1 !px-4">
                                            <div class="e-bigger">
                                                <ejs-radiobutton label="G8 - (+1) 432 000 2245" name="delivery" checked="true" aria-label="g8 - (+1) 432 000 2245" role="radio"></ejs-radiobutton>
                                            </div>
                                            <div class="mt-1 ml-7 text-gray-500 dark:text-gray-400">1 Dakota St, San Francisco, California 94107.</div>
                                        </div>
                                    </div>
                                    <div class="e-bigger mt-5">
                                        <button ejs-button class="e-flat e-btn m-1" type="button" content="Add new delivery information" iconCss="e-icons e-plus" aria-label="add new delivery information" role="button"></button>
                                    </div>
                                </div>
                            </ng-template>
                        </e-accordionitem>
                    </e-accordionitems>
                </ejs-accordion>
            </div>
            <form action="#" onsubmit="event.preventDefault();">
                <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>
                <div class="e-bigger mt-5">
                    <label class="block text-sm mb-1">Additional info</label>
                    <ejs-textarea class="e-bigger" placeholder="Enter additional information here" floatLabelType="Never" resizeMode="Vertical" aria-label="enter the additional information" role="textbox"></ejs-textarea>
                </div>
                <div class="mt-5">
                    <button ejs-button class="w-full e-btn border-gray-300 dark:border-gray-500" type="button" content="Add new info" iconCss="e-icons e-plus" aria-label="add new info" role="button"></button>
                </div>
            </form>
            <div class="e-bigger mt-8">
                <ejs-accordion class="border-t-0 border-l-0 border-r-0 border-b border-gray-200 dark:border-gray-600" role="button">
                    <e-accordionitems>
                        <e-accordionitem>
                            <ng-template #header>
                                <div class="font-normal">Payment methods</div>
                            </ng-template>
                            <ng-template #content>
                                <div></div>
                            </ng-template>
                        </e-accordionitem>
                        <e-accordionitem>
                            <ng-template #header>
                                <div>Product</div>
                            </ng-template>
                            <ng-template #content>
                                <div></div>
                            </ng-template>
                        </e-accordionitem>
                    </e-accordionitems>
                </ejs-accordion>
            </div>
        </div>
    </div>
</section>

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

<section class="bg-body">
    <div id="checkout-accordion" class="mx-auto row px-3 px-md-4 py-5" style="min-height: 1076px;">
        <div class="mx-auto px-0 col-md-12 col-xl-6 col-lg-9">
            <h2 class="fw-semibold fs-4">Checkout</h2>
            <div class="e-bigger my-4">
                <ejs-accordion #accordion class="border-0 border-bottom rounded-0 border-light-subtle" expandMode="Single" role="button">
                    <e-accordionitems>
                        <e-accordionitem expanded="true">
                            <ng-template #header>
                                <div class="content-text-color">Delivery information</div>
                            </ng-template>
                            <ng-template #content>
                                <div>
                                    <div class="e-card">
                                        <div class="e-card-content">
                                            <div class="e-bigger">
                                                <ejs-radiobutton label="Trig Yellow - (+1) 432 434 2345" name="delivery" aria-label="trig yellow - (+1) 432 434 2345" role="radio"></ejs-radiobutton>
                                            </div>
                                            <div class="mt-1 ms-4 text-light-emphasis">68 Dakota St, San Francisco, California 94107.</div>
                                        </div>
                                    </div>
                                    <div class="e-card mt-3">
                                        <div class="e-card-content">
                                            <div class="e-bigger">
                                                <ejs-radiobutton label="G8 - (+1) 432 000 2245" name="delivery" checked="true" aria-label="g8 - (+1) 432 000 2245" role="radio"></ejs-radiobutton>
                                            </div>
                                            <div class="mt-1 ms-4 B5 text-light-emphasis">1 Dakota St, San Francisco, California 94107.</div>
                                        </div>
                                    </div>
                                    <div class="e-bigger mt-3">
                                        <button ejs-button class="e-btn e-flat" type="button" content="Add new delivery information" iconCss="e-icons e-plus" aria-label="add new delivery information" role="button"></button>
                                    </div>
                                </div>
                            </ng-template>
                        </e-accordionitem>
                    </e-accordionitems>
                </ejs-accordion>
            </div>
            <form action="#" onsubmit="event.preventDefault();">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="text-dark-emphasis fw-medium 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 mb-1">Last name</label>
                        <ejs-textbox class="e-bigger" type="text" name="lastNmae" 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 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 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 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 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 mb-1">Company name</label>
                        <ejs-textbox class="e-bigger" type="text" name="companyName" 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 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>
                <div class="e-bigger mt-3">
                    <label class="text-dark-emphasis fw-medium d-block mb-1">Additional info</label>
                    <ejs-textarea class="e-bigger" resizeMode="Vertical" placeholder="Enter additional information here" floatLabelType="Never" aria-label="enter the additional information" role="textbox"></ejs-textarea>
                </div>
                <div class="mt-3" cssClass="border-bottom">
                    <button ejs-button class="e-block e-btn e-secondary" type="button" content="Add new info" iconCss="e-icons e-plus" aria-label="add new info" role="button"></button>
                </div>
            </form>
            <div class="e-bigger mt-4">
                <ejs-accordion class="border-0 border-bottom rounded-0 border-light-subtle" role="button">
                    <e-accordionitems>
                        <e-accordionitem>
                            <ng-template #header>
                                <div>Payment methods</div>
                            </ng-template>
                            <ng-template #content>
                                <div></div>
                            </ng-template>
                        </e-accordionitem>
                        <e-accordionitem>
                            <ng-template #header>
                                <div>Product</div>
                            </ng-template>
                            <ng-template #content>
                                <div></div>
                            </ng-template>
                        </e-accordionitem>
                    </e-accordionitems>
                </ejs-accordion>
            </div>
        </div>
    </div>
</section>

}