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

<section class="bg-gray-50 dark:bg-gray-950">
    <div id="target" class="w-full h-screen" [ngStyle]="{ height: isMobileView ? '625px' : '740px' }">
        <ejs-dialog #dialog id="floating-contact" class="sm:!rounded-t !rounded-none overflow-hidden !border-0" width="400px" minHeight="625px" height="625px" (open)="setDialogPosition($event)" (created)="dialog.show()" aria-label="contact form for assistance" role="dialog">
            <ng-template #header>
                <div class="flex flex-col justify-between items-center bg-indigo-100 dark:bg-cyan-800 py-12 px-6">
                    <span class="sf-icon sf-icon-message-chat-circle text-3xl text-gray-500 dark:text-white"></span>
                    <div class="text-center mt-3">
                        <p class="text-xl font-semibold dark:text-gray-50">Contact Us</p>
                        <p class="text-sm text-gray-500 dark:text-gray-200 mt-2">Reach out to us for any inquiry</p>
                    </div>
                </div>
            </ng-template>
            <ng-template #content>
                <div class="sm:px-6 px-4 pt-6 flex flex-col gap-4">
                    <ejs-textbox class="e-bigger w-full" type="text" placeholder="Name" floatLabelType="Never" aria-label="enter the name" role="textbox"></ejs-textbox>
                    <ejs-textbox class="e-bigger w-full" type="text" placeholder="Email" floatLabelType="Never" aria-label="enter the email address" role="textbox"></ejs-textbox>
                    <ejs-textarea class="e-bigger" placeholder="Your message" rows="5" cols="100" resizeMode="None" aria-label="enter the message" role="textbox"></ejs-textarea>
                    <div class="w-full flex flex-col gap-1.5">
                        <ejs-uploader></ejs-uploader>
                        <p class="text-xs text-gray-900 dark:text-gray-50">Supported formats: Docs / PDF</p>
                    </div>
                </div>
            </ng-template>
            <ng-template #footerTemplate>
                <div class="e-bigger sm:px-6 px-4 py-6 pb-6">
                    <button ejs-button class="e-primary w-full !ml-0" type="submit" content="Send" aria-label="send the message" role="button"></button>
                </div>
            </ng-template>
        </ejs-dialog>
        <button #fab ejs-fab class="e-primary e-bigger e-round !hidden sm:!block" [iconCss]="toggleState?'sf-icon-message-chat-circle !text-2xl':'e-icons e-close !text-2xl'" position="BottomRight" type="button" target="#target" (click)="toggleDialog()" aria-label="show/hide form" role="button"></button>
    </div>
</section>

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

<section class="bg-body">
    <div id="target" class="w-100" [ngStyle]="{ height: isMobileView ? '625px' : '740px' }">
        <ejs-dialog #dialog id="floating-contact" class="rounded-1 border-0 overflow-hidden" width="400px" minHeight="625px" height="625px" (open)="setDialogPosition($event)" (created)="dialog.show()" aria-label="contact form for assistance" role="dialog">
            <ng-template #header>
                <div class="d-flex flex-column justify-content-between align-items-center bg-primary-subtle py-5 px-4">
                    <span class="sf-icon sf-icon-message-chat-circle fs-4 text-secondary"></span>
                    <div class="text-center mt-3">
                        <p class="fs-5 fw-semibold lh-sm text-body m-0">Contact Us</p>
                        <p class="mt-2 mb-0 text-body">Reach out to us for any inquiry</p>
                    </div>
                </div>
            </ng-template>
            <ng-template #content>
                <div class="py-4 px-3 px-sm-4 pb-0 d-flex flex-column gap-3">
                    <ejs-textbox class="e-bigger w-100" type="text" placeholder="Name" floatLabelType="Never" aria-label="enter the name" role="textbox"></ejs-textbox>
                    <ejs-textbox class="e-bigger w-100" type="text" placeholder="Email" floatLabelType="Never" aria-label="enter the email address" role="textbox"></ejs-textbox>
                    <ejs-textarea class="e-bigger w-100" placeholder="Your message" rows="5" cols="48" resizeMode="None" aria-label="enter the message" role="textbox"></ejs-textarea>
                    <div>
                        <ejs-uploader></ejs-uploader>
                        <p class="small m-0 mt-1 text-body-secondary">Supported formats: Docs / PDF</p>
                    </div>
                </div>
            </ng-template>
            <ng-template #footerTemplate>
                <div class="e-bigger py-4 px-3 px-sm-4">
                    <button ejs-button class="e-primary w-100 m-0" type="submit" content="Send" aria-label="send the message" role="button"></button>
                </div>
            </ng-template>
        </ejs-dialog>
        <button #fab ejs-fab class="e-primary e-bigger e-round d-none d-sm-block" [iconCss]="toggleState?'sf-icon-message-chat-circle fs-4':'e-icons e-close fs-5'" position="BottomRight" type="button" (click)="toggleDialog()" aria-label="show/hide form" role="button"></button>
    </div>
</section>

}