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

<section class="bg-white dark:bg-gray-900">
    <div [ngStyle]="{'height': '905px', 'width': width, float:'Right'}">
        <ejs-sidebar class="w-full bg-white dark:bg-gray-900" #sidebar position="Right" type="push" [width]="width" [isOpen]="true" showBackdrop="true" (created)="refreshPriceSlider()" role="sidebar" style="display: block;">
            <div class="bg-white dark:bg-gray-900">
                <div class="border-b border-gray-200 dark:border-gray-600">
                    <div class="flex justify-between items-center px-4 py-3 border-b border-gray-200 dark:border-gray-600">
                        <h2 class="text-base font-semibold text-gray-900 dark:text-white">Room Filters</h2>
                        <button ejs-button class="e-icons e-btn e-flat" (click)="sidebar.toggle()" iconCss="e-icons e-close" content=" " type="button" aria-label="close sidebar" role="button"></button>
                    </div>
                    <div class="p-4 flex justify-center">
                        <ejs-calendar class="e-bigger shadow-none border-none"></ejs-calendar>
                    </div>
                </div>
                <div class="pt-4 px-1">
                    <ejs-accordion #accordion1 class="border-0 bg-transparent" expandMode="Multiple" role="accordion">
                        <e-accordionitems>
                            <e-accordionitem expanded="true">
                                <ng-template #header>
                                    <div class="font-normal text-gray-500 dark:text-gray-400">Floors</div>
                                </ng-template>
                                <ng-template #content>
                                    <div class="grid gap-3 p-1">
                                        <div class="flex justify-between">
                                            <ejs-checkbox label="Ground Floor" aria-label="ground floor" role="checkbox"></ejs-checkbox>
                                            <span class="e-badge e-badge-pill e-badge-success e-bigger">12 Rooms</span>
                                        </div>
                                        <div class="flex justify-between">
                                            <ejs-checkbox label="First Floor" aria-label="first floor" role="checkbox"></ejs-checkbox>
                                            <span class="e-badge e-badge-pill e-badge-danger e-bigger">Full</span>
                                        </div>
                                        <div class="flex justify-between">
                                            <ejs-checkbox label="Second Floor" aria-label="second floor" role="checkbox"></ejs-checkbox>
                                            <span class="e-badge e-badge-pill e-badge-warning e-bigger">2 Rooms</span>
                                        </div>
                                    </div>
                                </ng-template>
                            </e-accordionitem>
                        </e-accordionitems>
                    </ejs-accordion>
                    <div class="sliderwrap px-3 my-6">
                        <label class="labeltext text-sm text-gray-500 dark:text-gray-400">
                            Price Range
                            <span class="e-icons e-circle-info ml-2"></span>
                        </label>
                        <div class="px-2">
                            <ejs-slider #slider type="Range" [value]="[2500, 4000]" [tooltip]="tooltipInfo" min="1000" max="5000" [step]="1" [ticks]="{ placement: 'After', largeStep: 4000, showlargeTicks: true, format: 'c0' }" style="width: 225px; left: 15px;"></ejs-slider>
                        </div>
                    </div>
                    <ejs-accordion #accordion2 class="border-0 bg-transparent" expandMode="Multiple" role="accordion">
                        <e-accordionitems>
                            <e-accordionitem expanded="true">
                                <ng-template #header>
                                    <div class="font-normal text-gray-500 dark:text-gray-400">Facility</div>
                                </ng-template>
                                <ng-template #content>
                                    <div class="grid gap-3 text-gray-500 p-1">
                                        <div class="flex justify-between">
                                            <ejs-checkbox label="Air Conditioner" aria-label="air conditioner" role="checkbox"></ejs-checkbox>
                                        </div>
                                        <div class="flex justify-between">
                                            <ejs-checkbox label="Swimming Pool" aria-label="swimming pool" role="checkbox"></ejs-checkbox>
                                        </div>
                                        <div class="flex justify-between">
                                            <ejs-checkbox label="Television" aria-label="television" role="checkbox"></ejs-checkbox>
                                        </div>
                                        <div>
                                            <button ejs-button class="e-primary e-flat" content="Show more" iconCss="e-icons e-plus" type="button" aria-label="show more" role="button"></button>
                                        </div>
                                    </div>
                                </ng-template>
                            </e-accordionitem>
                        </e-accordionitems>
                    </ejs-accordion>
                </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-body">
    <div [ngStyle]="{'height': '955px', 'width': width, float:'Right'}">
        <ejs-sidebar class="bg-body" #sidebar position="Right" type="push" [width]="width" [isOpen]="true" showBackdrop="true" (created)="refreshPriceSlider()" role="sidebar" style="display: block;">
            <div class="bg-body">
                <div class="border-bottom border-light-subtle">
                    <div class="d-flex justify-content-between align-items-center px-4 pt-3 pb-2 border-bottom border-light-subtle">
                        <h2 class="h6 font-weight-semibold text-body mb-0">Room Filters</h2>
                        <button ejs-button class="e-icons e-btn e-flat fs-6" (click)="sidebar.toggle()" iconCss="e-icons e-close" content=" " aria-label="close sidebar" role="button"></button>
                    </div>
                    <div class="p-4 pb-0 d-flex justify-content-center align-items-center">
                        <ejs-calendar class="e-bigger shadow-none border-0"></ejs-calendar>
                    </div>
                </div>
                <div class="pt-2 px-1">
                    <ejs-accordion #accordion1 class="border-0 bg-transparent" expandMode="Multiple" role="accordion">
                        <e-accordionitems>
                            <e-accordionitem expanded="true">
                                <ng-template #header>
                                    <div class="fw-medium text-body-secondary">Floors</div>
                                </ng-template>
                                <ng-template #content>
                                    <div class="row gap-3">
                                        <div class="d-flex justify-content-between pt-1">
                                            <ejs-checkbox label="Ground Floor" aria-label="ground floor" role="checkbox"></ejs-checkbox>
                                            <span class="e-badge e-badge-pill e-badge-success">12 Rooms</span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <ejs-checkbox label="First Floor" aria-label="first floor" role="checkbox"></ejs-checkbox>
                                            <span class="e-badge e-badge-pill e-badge-danger">Full</span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <ejs-checkbox label="Second Floor" aria-label="second floor" role="checkbox"></ejs-checkbox>
                                            <span class="e-badge e-badge-pill e-badge-warning">2 Rooms</span>
                                        </div>
                                    </div>
                                </ng-template>
                            </e-accordionitem>
                        </e-accordionitems>
                    </ejs-accordion>
                    <div class="sliderwrap px-3 my-4">
                        <label class="fw-medium text-body-secondary">
                            Price Range
                            <span class="e-icons e-circle-info ms-2"></span>
                        </label>
                        <div class="px-2 w-4/5">
                            <ejs-slider #slider type="Range" [value]="[2500, 4000]" [tooltip]="tooltipInfo" min="1000" max="5000" [step]="1" [ticks]="{ placement: 'After', largeStep: 4000, showlargeTicks: true, format: 'c0' }"></ejs-slider>
                        </div>
                    </div>
                    <ejs-accordion #accordion2 class="border-0 bg-transparent" expandMode="Multiple" role="accordion">
                        <e-accordionitems>
                            <e-accordionitem expanded="true">
                                <ng-template #header>
                                    <div class="fw-medium text-body-secondary">Facility</div>
                                </ng-template>
                                <ng-template #content>
                                    <div class="row gap-3">
                                        <div class="d-flex justify-content-between pt-1">
                                            <ejs-checkbox label="Air Conditioner" aria-label="air conditioner" role="checkbox"></ejs-checkbox>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <ejs-checkbox label="Swimming Pool" aria-label="swimming pool" role="checkbox"></ejs-checkbox>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <ejs-checkbox label="Television" aria-label="television" role="checkbox"></ejs-checkbox>
                                        </div>
                                        <div>
                                            <button ejs-button class="e-primary e-flat" content="Show more" iconCss="e-icons e-plus" aria-label="show more" role="button"></button>
                                        </div>
                                    </div>
                                </ng-template>
                            </e-accordionitem>
                        </e-accordionitems>
                    </ejs-accordion>
                </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 -->

}