@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"
                [fields]="{ value: 'name' }"
                popupHeight="750px"
                placeholder="Search"
                (focus)="search.showPopup()"
                (created)="openPopup(search)"
                role="combobox">
                <ng-template #headerTemplate let-data>
                    <p class="mt-4 mx-5 mb-3 text-sm font-medium text-gray-600 dark:text-gray-300">Recent</p>
                </ng-template>
                <ng-template #itemTemplate let-data>
                    <div class="flex items-center justify-center px-5 py-2">
                        <span class="e-avatar e-avatar-small e-avatar-circle indent-0 shrink-0 bg-green-100 dark:bg-green-800 dark:text-green-300 text-green-700" *ngIf="data.initial">{{data.initial}}</span>
                        <span class="mx-1 text-center indent-0 e-icons e-large sf-icon-clock-fast-backward text-gray-500 dark:text-gray-100" *ngIf="!data.initial"></span>
                        <div class="w-full indent-0 !ml-3">
                            <div class="text-sm !font-medium flex items-center !text-wrap text-gray-900 dark:text-white">{{data.name}}</div>
                            <div *ngIf="data.emailId" class="font-normal flex items-center !text-wrap text-gray-600 dark:text-gray-300 text-sm">{{data.emailId}}</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"
                    [fields]="{ value: 'name' }"
                    popupHeight="750px"
                    placeholder="Search"
                    (focus)="search.showPopup()"
                    (created)="openPopup(search)"
                    role="combobox">
                    <ng-template #headerTemplate let-data>
                        <p class="mt-2 mx-3 mb-2 fw-medium fs-6 lh-1 text-body-secondary">Recent</p>
                    </ng-template>
                    <ng-template #itemTemplate let-data>
                        <div class="d-flex align-items-center px-3 p-2" style="text-indent: 0;">
                            <span class="e-avatar flex-shrink-0 e-avatar-circle text-success bg-success-subtle" *ngIf="data.initial">{{data.initial}}</span>
                            <span class="text-center e-icons e-large sf-icon-clock-fast-backward text-body-secondary p-2" *ngIf="!data.initial"></span>
                            <div class="flex-grow-1 mx-2">
                                <div class="lh-base fw-medium fs-6 lh-base text-body">{{data.name}}</div>
                                <div *ngIf="data.emailId" class="text-wrap lh-base fw-normal fs-6 lh-base text-body-secondary">{{data.emailId}}</div>
                            </div>
                        </div>
                    </ng-template>
                </ejs-autocomplete>
            </div>
        </div>
    </div>
</section>

}