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

<section class="bg-white dark:bg-gray-900 h-100">
    <div class="w-full pt-5 pb-4 h-screen" style="height: 750px;">
        <div class="px-4 mx-auto lg:px-0" [style]="width">
            <ejs-autocomplete
                class="e-bigger"
                #search
                [dataSource]="data"
                [fields]="{ value: 'ticket' }"
                popupHeight="650px"
                placeholder="Search"
                (focus)="search.showPopup()"
                (created)="openPopup(search)"
                role="combobox">
                <ng-template #headerTemplate>
                    <div class="p-5 border-b border-gray-200 dark:border-gray-600 mb-2">
                        <ejs-chiplist id="chip-filter" class="!border-gray-200 !dark:border-gray-600" aria-label="filter options" role="option">
                            <e-chips>
                                <e-chip cssClass="e-outline !text-sm !font-medium !px-3 !py-1 !rounded-2xl !h-8 !ml-0" text="Ticket Id" aria-label="filter by ticket id" role="button"></e-chip>
                                <e-chip cssClass="e-outline !text-sm !font-medium !px-3 !py-1 !rounded-2xl !h-8 !ml-0" text="Status" aria-label="filter by status" role="button"></e-chip>
                                <e-chip cssClass="e-outline !text-sm !font-medium !px-3 !py-1 !rounded-2xl !h-8 !ml-0" text="Priority" aria-label="filter by priority" role="button"></e-chip>
                                <e-chip cssClass="e-outline !text-sm !font-medium !px-3 !py-1 !rounded-2xl !h-8 !ml-0" text="Created by" aria-label="filter by created by" role="button"></e-chip>
                            </e-chips>
                        </ejs-chiplist>
                    </div>
                    <p class="my-2 mx-5 text-gray-600 font-semibold text-base dark:text-gray-300">Ticket</p>
                </ng-template>
                <ng-template #itemTemplate let-data>
                    <div class="flex items-center gap-4 pl-5 py-2">
                        <span class="indent-0 e-avatar e-avatar-medium shrink-0 text-sm" [ngClass]="{'bg-green-100 text-green-600 dark:bg-green-800 dark:text-green-300': data.colorTheme === 'Green', 'bg-orange-50 text-orange-500 dark:bg-orange-800 dark:text-orange-300': data.colorTheme === 'Orange', 'bg-cyan-50 text-cyan-500 dark:bg-cyan-800 dark:text-cyan-300': data.colorTheme === 'Blue', 'bg-red-50 text-red-500 dark:bg-red-800 dark:text-red-300': data.colorTheme === 'Red', 'bg-indigo-50 text-indigo-600 dark:bg-indigo-800 dark:text-indigo-300': data.colorTheme === 'Indigo'}" *ngIf="data.fontIcon">
                            <span class="text-2xl {{data.fontIcon}}"></span>
                        </span>
                        <div class="w-full indent-0">
                            <div class="text-sm !font-medium flex items-center !text-wrap text-gray-900 dark:text-white mb-0.5">{{data.ticket}}</div>
                            <div class="text-gray-600 font-normal flex items-center !text-wrap dark:text-gray-300 text-sm">{{data.id}}, Created on: {{data.createdDate}}</div>
                        </div>
                    </div>
                </ng-template>
            </ejs-autocomplete>
        </div>
    </div>
</section>

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

<section class="bg-body h-100">
    <div class="w-100 pt-4 pb-3" style="height: 800px;">
        <div class="px-3 px-lg-0 mx-auto" [style]="width">
            <ejs-autocomplete
                class="e-bigger"
                #search
                [dataSource]="data"
                [fields]="{ value: 'ticket' }"
                popupHeight="730"
                placeholder="Search"
                (focus)="search.showPopup()"
                (created)="openPopup(search)"
                role="combobox">
                <ng-template #headerTemplate let-data>
                    <div class="p-3 border-bottom border-light-subtle mb-2">
                        <ejs-chiplist id="chip-filter" cssClass="e-outline border border-light-subtle text-body-secondary p-3" aria-label="filter options" role="option">
                            <e-chips>
                                <e-chip class="fs-6 lh-base fw-medium px-3 py-1 rounded-pill h-8 me-3" text="Ticket Id" aria-label="filter by ticket id" role="button"></e-chip>
                                <e-chip class="fs-6 lh-base fw-medium px-3 py-1 rounded-pill h-8 me-3" text="Status" aria-label="filter by status" role="button"></e-chip>
                                <e-chip class="fs-6 lh-base fw-medium px-3 py-1 rounded-pill h-8 me-3" text="Priority" aria-label="filter by priority" role="button"></e-chip>
                                <e-chip class="fs-6 lh-base fw-medium px-3 py-1 rounded-pill h-8 me-3" text="Created by" aria-label="filter by created by" role="button"></e-chip>
                            </e-chips>
                        </ejs-chiplist>
                    </div>
                    <p class="my-2 mx-4 fw-semibold fs-5 text-body-secondary">Ticket</p>
                </ng-template>
                <ng-template #itemTemplate let-data>
                    <div class="d-flex align-items-center ps-4 py-2" style="text-indent: 0;">
                        <span class="e-avatar e-avatar-medium flex-shrink-0 rounded" [ngClass]="{'bg-success-subtle text-success': data.colorTheme === 'Green', 'bg-warning-subtle text-warning-emphasis': data.colorTheme === 'Orange', 'bg-info-subtle text-info-emphasis': data.colorTheme === 'Blue', 'bg-danger-subtle text-danger-emphasis': data.colorTheme === 'Red', 'bg-primary-subtle text-primary': data.colorTheme === 'Indigo'}" *ngIf="data.fontIcon">
                            <span class="fs-5 {{data.fontIcon}}"></span>
                        </span>
                        <div class="flex-grow-1 ms-3">
                            <div class="text-wrap lh-base fw-medium fs-6 text-body">{{data.ticket}}</div>
                            <div class="text-body-secondary text-wrap lh-base fw-normal fs-6 text-body-secondary">{{data.id}}, <span>Created on: {{data.createdDate}}</span></div>
                        </div>
                    </div>
                </ng-template>
            </ejs-autocomplete>
        </div>
    </div>
</section>

}