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

<section class="bg-white dark:bg-gray-900 h-100">
    <div class="w-full pt-5 pb-4 h-screen">
        <div class="px-4 mx-auto lg:px-0" [style]="width">
            <ejs-autocomplete
                class="e-bigger"
                #search
                [dataSource]="data"
                placeholder="Search"
                popupHeight="530px"
                (focus)="search.showPopup()"
                (created)="openPopup(search)"
                role="combobox">
                <ng-template #itemTemplate let-data>
                    <div class="text-sm font-medium text-wrap flex justify-between">
                        <div class="text-gray-900 dark:text-white indent-0 px-4 py-2">{{data.text}}</div>
                        <span class="text-gray-600 dark:text-gray-300 flex items-center">{{data.status}}</span>
                    </div>
                </ng-template>
                <ng-template #noRecordsTemplate>
                    <div class="text-center py-6 w-2/3 m-auto">
                        <div class="mb-3">
                            <span class="border border-gray-200 p-2 rounded text-xl e-icons e-search dark:border-gray-600 dark:text-gray-100"></span>
                        </div>
                        <div>
                            <div class="mb-4">
                                <div class="mb-1 text-lg text-gray-900 font-medium dark:text-white">No results found</div>
                                <div class="text-sm text-gray-600 font-medium dark:text-gray-300">"Webflow" did not match any projects or commands. Please try again.</div>
                            </div>
                            <div>
                                <button ejs-button class="e-btn e-outline px-4 text-gray-700 !text-base !dark:text-white" content="Clear Search" type="button" aria-label="clear search" role="button"></button>
                            </div>
                        </div>
                    </div>
                </ng-template>
            </ejs-autocomplete>
        </div>
    </div>
</section>

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

<section class="bg-body h-100">
    <div class="container-fluid pt-4 pb-3">
        <div class="row justify-content-center">
            <div class="px-3 px-lg-0 mx-auto" [style]="width">
                <ejs-autocomplete
                    class="e-bigger"
                    #search
                    [dataSource]="data"
                    popupHeight="530px"
                    placeholder="Search"
                    (focus)="search.showPopup()"
                    (created)="openPopup(search)"
                    role="combobox">
                    <ng-template #itemTemplate let-data>
                        <div class="d-flex justify-content-between text-wrap fs-6 lh-base fw-medium px-3 pt-2 pb-2" style="text-indent: 0;">
                            <div class="text-body lh-base">{{data.text}}</div>
                            <span class="text-body-secondary lh-base">{{data.status}}</span>
                        </div>
                    </ng-template>
                    <ng-template #noRecordsTemplate>
                        <div class="text-center py-5 w-75 m-auto">
                            <div class="mb-3">
                                <span class="border border-light-subtle p-2 rounded text-xl e-icons e-search"></span>
                            </div>
                            <div>
                                <div class="mb-3">
                                    <div class="mb-1 fw-medium lh-lg h6 text-body">No results found</div>
                                    <div class="fw-medium text-body-tertiary">"Webflow" did not match any projects or commands. Please try again.</div>
                                </div>
                                <div>
                                    <button ejs-button class="e-outline px-4 fw-medium" content="Clear Search" type="button" aria-label="clear search" role="button"></button>
                                </div>
                            </div>
                        </div>
                    </ng-template>
                </ejs-autocomplete>
            </div>
        </div>
    </div>
</section>

}