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

<section class="bg-gray-50 dark:bg-gray-950">
    <div class="mx-auto w-full py-12 sm:px-6 px-4">
        <div class="flex justify-end items-center pb-4">
            <div class="w-full sm:w-72">
                <div class="e-input-group w-full">
                    <span class="e-input-group-icon e-icons e-search"></span>
                    <input class="e-input" type="text" placeholder="Search" aria-label="enter contact details" role="textbox" />
                </div>
            </div>
        </div>
        <ejs-grid [dataSource]="data" width="100%" height="668" clipMode="EllipsisWithTooltip" role="grid">
            <e-columns>
                <e-column fields="contactId" headerText="Contact ID" width="90">
                    <ng-template #template let-data>
                        <a class="text-primary-700 dark:text-primary-500 font-medium" href="javascript:void(0);" aria-label="contact ID" role="link">{{data.contactId}}</a>
                    </ng-template>
                </e-column>
                <e-column field="profile" headerText="Profile" textAlign="Left" width="264">
                    <ng-template #template let-data>
                        <div class="flex gap-3 items-center py-1">
                            <div class="w-8 h-8">
                                <span class="e-avatar e-avatar-circle e-avatar-small" [ngStyle]="{ 'background-image': 'url(assets/images/common/avatar/' + data.profile.avatar + ')' }" *ngIf="data.profile.avatar!=''"></span>
                                <span [ngClass]="{'e-avatar e-avatar-circle e-avatar-small': true, '!bg-red-100 !text-red-700 dark:!text-red-400': data.profile.colorTheme === 'Red', '!bg-green-100 !text-green-700 dark:!text-green-500': data.profile.colorTheme === 'Green', '!bg-cyan-100 !text-cyan-700 dark:!text-cyan-600': data.profile.colorTheme === 'Blue', '!bg-orange-100 !text-orange-700 dark:!text-orange-500': data.profile.colorTheme === 'Orange'}" *ngIf="data.profile.initial!=''">{{data.profile.initial}}</span>
                            </div>
                            <div class="flex flex-col text-sm">
                                <p class="text-gray-900 dark:text-gray-50">{{data.profile.name}}</p>
                                <p class="text-gray-500 dark:text-gray-400 truncate w-52">{{data.profile.email}}</p>
                            </div>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="jobTitle" headerText="Job Profile/Company Name" textAlign="Left" width="198">
                    <ng-template #template let-data>
                        <div class="flex gap-3 items-center py-1">
                            <div class="flex flex-col text-sm">
                                <p class="text-gray-900 dark:text-gray-50">{{data.jobTitle}}</p>
                                <p class="text-gray-500 dark:text-gray-400">{{data.company}}</p>
                            </div>
                        </div>
                    </ng-template>
                </e-column>
                <e-column fields="communicationPreferences" headerText="Communication Preferences" width="190">
                    <ng-template #template let-data>
                        <ejs-chiplist cssClass="!bg-transparent !border !rounded" *ngFor="let elem of data.communicationPreferences" [text]="elem"></ejs-chiplist>
                    </ng-template>
                </e-column>
                <e-column field="location" headerText="Location" width="130"></e-column>
                <e-column field="leadSource" headerText="Lead Source" width="102"></e-column>
                <e-column field="assignedTo" headerText="Assigned To" textAlign="Left" width="164">
                    <ng-template #template let-data>
                        <div class="flex gap-3 items-center py-1.5">
                            <div class="w-8 h-8">
                                <span class="e-avatar e-avatar-circle e-avatar-small" [ngStyle]="{ 'background-image': 'url(assets/images/common/avatar/' + data.avatar + ')' }"></span>
                            </div>
                            <div class="flex flex-col text-sm">
                                <p class="text-gray-900 dark:text-gray-50">{{data.assignedTo.name}}</p>
                                <p class="text-gray-500 dark:text-gray-400">{{data.assignedTo.department}}</p>
                            </div>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="status" headerText="Status" width="85">
                    <ng-template #template let-data>
                        <div class="e-bigger" [ngSwitch]="data.status">
                            <span class="e-badge flex gap-1 items-center w-max bg-transparent" *ngSwitchCase="'Inactive'">
                                <div class="w-2 h-2 rounded-full bg-red-700"></div>
                                Inactive
                            </span>
                            <span class="e-badge flex gap-1 items-center w-max bg-transparent" *ngSwitchCase="'Active'">
                                <div class="w-2 h-2 rounded-full bg-green-700 dark:bg-green-700"></div>
                                Active
                            </span>
                            <span *ngSwitchDefault>The status is unknown.</span>
                        </div>
                    </ng-template>
                </e-column>
            </e-columns>
        </ejs-grid>
    </div>
</section>

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

<section class="bg-body">
    <div class="w-100 py-5 px-3 px-sm-4 mx-auto">
        <div class="row justify-content-end pb-4">
            <div class="col-12 col-sm-6 col-lg-4">
                <div class="e-input-group w-100">
                    <span class="e-input-group-icon e-icons e-search border-end-0"></span>
                    <input class="e-input form-control" type="text" placeholder="Search" aria-label="enter contact details" role="textbox" />
                </div>
            </div>
        </div>
        <ejs-grid [dataSource]="data" width="100%" height="668" clipMode="EllipsisWithTooltip" role="grid">
            <e-columns>
                <e-column fields="contactId" headerText="Contact ID" width="86">
                    <ng-template #template let-data>
                        <a class="text-primary fw-medium text-decoration-none" href="javascript:void(0);" aria-label="contact ID" role="link">{{data.contactId}}</a>
                    </ng-template>
                </e-column>
                <e-column field="profile" headerText="Profile" textAlign="Left" width="268">
                    <ng-template #template let-data>
                        <div class="d-flex gap-3 align-items-center">
                            <div class="rounded-circle overflow-hidden" style="width: 32px; height: 32px;">
                                <span class="e-avatar e-avatar-circle e-avatar-small" [ngStyle]="{ 'background-image': 'url(assets/images/common/avatar/' + data.profile.avatar + ')' }" *ngIf="data.profile.avatar!=''"></span>
                                <span [ngClass]="{'e-avatar e-avatar-circle e-avatar-small': true, 'bg-danger-subtle text-danger': data.profile.colorTheme === 'Red', 'bg-success-subtle text-success': data.profile.colorTheme === 'Green', 'bg-info-subtle text-info': data.profile.colorTheme === 'Blue', 'bg-warning-subtle text-warning': data.profile.colorTheme === 'Orange'}" *ngIf="data.profile.initial!=''">{{data.profile.initial}}</span>
                            </div>
                            <div class="d-flex flex-column text-body">
                                <p class="text-body mb-0">{{data.profile.name}}</p>
                                <p class="text-body-secondary mb-0">{{data.profile.email}}</p>
                            </div>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="jobTitle" headerText="Job Profile/Company Name" textAlign="Left" width="230">
                    <ng-template #template let-data>
                        <div class="d-flex gap-3 align-items-center">
                            <div class="d-flex flex-column text-body">
                                <p class="text-body mb-0">{{data.jobTitle}}</p>
                                <p class="text-body-secondary mb-0">{{data.company}}</p>
                            </div>
                        </div>
                    </ng-template>
                </e-column>
                <e-column fields="communicationPreferences" headerText="Communication Preferences" width="198">
                    <ng-template #template let-data>
                        <ejs-chiplist cssClass="bg-body text-body border rounded" *ngFor="let elem of data.communicationPreferences" [text]="elem"></ejs-chiplist>
                    </ng-template>
                </e-column>
                <e-column field="location" headerText="Location" width="106"></e-column>
                <e-column field="leadSource" headerText="Lead Source" width="96"></e-column>
                <e-column field="assignedTo" headerText="Assigned To" textAlign="Left" width="150">
                    <ng-template #template let-data>
                        <div class="d-flex gap-3 align-items-center py-1">
                            <div class="rounded-circle overflow-hidden" style="width: 32px; height: 32px;">
                                <span class="e-avatar e-avatar-circle e-avatar-small" [ngStyle]="{ 'background-image': 'url(assets/images/common/avatar/' + data.avatar + ')' }"></span>
                            </div>
                            <div class="d-flex flex-column text-body">
                                <p class="mb-0">{{data.assignedTo.name}}</p>
                                <p class="text-secondary mb-0">{{data.assignedTo.department}}</p>
                            </div>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="status" headerText="Status" width="80">
                    <ng-template #template let-data>
                        <div class="fs-6" [ngSwitch]="data.status">
                            <span class="e-badge d-flex gap-1 align-items-center bg-transparent" style="width: fit-content;" *ngSwitchCase="'Inactive'">
                                <div class="rounded-circle bg-danger" style="width: 8px; height: 8px;"></div>
                                Inactive
                            </span>
                            <span class="e-badge d-flex gap-1 align-items-center bg-transparent" style="width: fit-content;" *ngSwitchCase="'Active'">
                                <div class="rounded-circle bg-success" style="width: 8px; height: 8px;"></div>
                                Active
                            </span>
                            <span *ngSwitchDefault>The status is unknown.</span>
                        </div>
                    </ng-template>
                </e-column>
            </e-columns>
        </ejs-grid>
    </div>
</section>

}