@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">
        <ejs-grid [dataSource]="data" width="100%" height="658" gridLines="None" role="grid">
            <e-columns>
                <e-column type="checkbox" isPrimaryKey="true" textAlign="Center" width="40"></e-column>
                <e-column field="leadId" headerText="Lead ID" textAlign="Left" width="60">
                    <ng-template #template let-data>
                        <a class="text-primary-700 dark:text-primary-500 font-medium" href="javascript:void(0);" aria-label="lead ID" role="link">{{data.leadId}}</a>
                    </ng-template>
                </e-column>
                <e-column field="customerDetails" headerText="Name" textAlign="Left" width="300">
                    <ng-template #template let-data>
                        <div class="flex gap-3 items-center py-1.5">
                            <div class="w-8 h-8">
                                <span [ngClass]="{'e-avatar e-avatar-circle e-avatar-small': true, '!bg-red-100 !text-red-700 dark:!text-red-400': data.details.colorTheme === 'Red', '!bg-green-100 !text-green-700 dark:!text-green-500': data.details.colorTheme === 'Green', '!bg-cyan-100 !text-cyan-700 dark:!text-cyan-600': data.details.colorTheme === 'Blue', '!bg-orange-100 !text-orange-700 dark:!text-orange-500': data.details.colorTheme === 'Orange', '!bg-indigo-100 !text-indigo-700 dark:!bg-cyan-800 dark:!text-cyan-400': data.details.colorTheme === 'Purple'}">{{data.details.initial}}</span>
                            </div>
                            <div class="flex flex-col text-sm">
                                <p class="text-gray-900 dark:text-gray-50">{{data.details.name}}</p>
                                <p class="text-gray-500 dark:text-gray-400">{{data.details.email}}</p>
                            </div>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="status" headerText="Lead Status" width="105">
                    <ng-template #template let-data>
                        <div class="e-bigger">
                            <span class="e-badge e-badge-info !px-2 flex gap-1 w-max">
                                <span class="e-icons e-check h-3 pt-0.5"></span>
                                {{data.status}}
                            </span>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="interest" headerText="Interest Level" width="110">
                    <ng-template #template let-data>
                        <div class="e-bigger" [ngSwitch]="data.interest">
                            <span class="e-badge e-badge-success !px-2 flex gap-1 w-max" *ngSwitchCase="'High'"> <span class="e-icons e-arrow-up !text-green-700 dark:!text-green-500 h-3 pt-0.5"></span>High </span>
                            <span class="e-badge e-badge-warning !px-2 flex gap-1 w-max" *ngSwitchCase="'Medium'"> <span class="e-icons e-arrow-up !text-orange-700 dark:!text-orange-500 h-3 pt-0.5"></span>Medium </span>
                            <span class="e-badge e-badge-danger !px-2 flex gap-1 w-max" *ngSwitchCase="'Low'"> <span class="e-icons e-arrow-down !text-red-700 dark:!text-red-400 h-3 pt-0.5"></span>Low </span>
                            <span *ngSwitchDefault>No records found.</span>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="date" headerText="Next Contact" width="105" [format]="{ type: 'date', format: 'MM/dd/yyyy' }"></e-column>
                <e-column field="assignee" headerText="Assigned To" width="145">
                    <ng-template #template let-data>
                        <div class="flex items-center gap-3">
                            <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.assignee.avatar + ')' }"></span>
                            </div>
                            <div class="text-sm text-gray-900 dark:text-gray-50">{{data.assignee.name}}</div>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="source" headerText="Lead Source" width="125"></e-column>
                <e-column field="revenue" headerText="Expected Revenue ($)" width="133" format="c0" textAlign="Right"></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">
        <ejs-grid [dataSource]="data" width="100%" height="658" gridLines="None" role="grid">
            <e-columns>
                <e-column type="checkbox" isPrimaryKey="true" textAlign="Center" width="40"></e-column>
                <e-column field="leadId" headerText="Lead ID" textAlign="Left" width="63">
                    <ng-template #template let-data>
                        <a class="text-primary fw-medium text-decoration-none" href="javascript:void(0);" aria-label="lead ID" role="link">{{data.leadId}}</a>
                    </ng-template>
                </e-column>
                <e-column field="customerDetails" headerText="Name" textAlign="Left" width="290">
                    <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 [ngClass]="{'e-avatar e-avatar-circle e-avatar-small': true, 'bg-danger-subtle text-danger': data.details.colorTheme === 'Red', 'bg-success-subtle text-success': data.details.colorTheme === 'Green', 'bg-info-subtle text-info': data.details.colorTheme === 'Blue', 'bg-warning-subtle text-warning': data.details.colorTheme === 'Orange', 'bg-primary-subtle text-primary': data.details.colorTheme === 'Purple'}">{{data.details.initial}}</span>
                            </div>
                            <div class="d-flex flex-column">
                                <p class="text-body mb-0">{{data.details.name}}</p>
                                <p class="text-body-secondary mb-0">{{data.details.email}}</p>
                            </div>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="status" headerText="Lead Status" width="108">
                    <ng-template #template let-data>
                        <div>
                            <span class="e-badge e-badge-info d-flex align-items-center gap-1 px-2" style="width: fit-content;">
                                <span class="e-icons e-check text-dark"></span>
                                {{data.status}}
                            </span>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="interest" headerText="Interest Level" width="110">
                    <ng-template #template let-data>
                        <div [ngSwitch]="data.interest">
                            <span class="e-badge e-badge-success d-flex align-items-center gap-1 px-2" *ngSwitchCase="'High'" style="width: fit-content;">
                                <span class="e-icons e-arrow-up text-white"></span>
                                High
                            </span>
                            <span class="e-badge e-badge-warning d-flex align-items-center gap-1 px-2" *ngSwitchCase="'Medium'" style="width: fit-content;">
                                <span class="e-icons e-arrow-up text-dark"></span>
                                Medium
                            </span>
                            <span class="e-badge e-badge-danger d-flex align-items-center gap-1 px-2" *ngSwitchCase="'Low'" style="width: fit-content;">
                                <span class="e-icons e-arrow-down text-white"></span>
                                Low
                            </span>
                            <span *ngSwitchDefault>No records found.</span>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="date" headerText="Next Contact" width="108" [format]="{ type: 'date', format: 'MM/dd/yyyy' }"> </e-column>
                <e-column field="assignee" headerText="Assigned To" width="145">
                    <ng-template #template let-data>
                        <div class="d-flex align-items-center gap-3">
                            <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.assignee.avatar + ')' }"></span>
                            </div>
                            <div class="text-body">{{data.assignee.name}}</div>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="source" headerText="Lead Source" width="120"></e-column>
                <e-column field="revenue" headerText="Expected Revenue ($)" width="155" format="c0" textAlign="Right"> </e-column>
            </e-columns>
        </ejs-grid>
    </div>
</section>

}