@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="ticketId" headerText="Ticket ID" width="85">
                    <ng-template #template let-data>
                        <a class="text-primary-700 dark:text-primary-500 font-medium" href="javascript:void(0);" aria-label="ticket ID" role="link">{{data.ticketId}}</a>
                    </ng-template>
                </e-column>
                <e-column field="issue" headerText="Issue Description" width="230"></e-column>
                <e-column field="category" headerText="Issue Category" width="120"></e-column>
                <e-column field="estimated" headerText="Estimated Time" width="100" textAlign="Right"></e-column>
                <e-column field="responseDue" headerText="Resolution Due" width="123" [format]="{type: 'date', format: 'MM/dd/yyyy'}" textAlign="Right"></e-column>
                <e-column field="priority" headerText="Priority" width="118">
                    <ng-template #template let-data>
                        <div class="e-bigger" [ngSwitch]="data.priority">
                            <span class="flex gap-1 items-center" *ngSwitchCase="'High'"> <span class="e-icons e-arrow-up !text-red-700 dark:!text-red-400"></span>High </span>
                            <span class="flex gap-1 items-center" *ngSwitchCase="'Medium'"> <span class="e-icons e-arrow-right !text-orange-700 dark:!text-orange-500"></span>Medium </span>
                            <span class="flex gap-1 items-center" *ngSwitchCase="'Low'"> <span class="e-icons e-arrow-down !text-cyan-700 dark:!text-cyan-600"></span>Low </span>
                            <span *ngSwitchDefault>No records found.</span>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="assignee" headerText="Assigned To" textAlign="Left" width="299">
                    <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.assignee.avatar + ')' }" *ngIf="data.assignee.avatar!=''"></span>
                                <span [ngClass]="{'e-avatar e-avatar-circle e-avatar-small': true, '!bg-red-100 !text-red-700 dark:!text-red-400': data.assignee.colorTheme === 'Red', '!bg-green-100 !text-green-700 dark:!text-green-500': data.assignee.colorTheme === 'Green', '!bg-cyan-100 !text-cyan-700 dark:!text-cyan-600': data.assignee.colorTheme === 'Blue', '!bg-orange-100 !text-orange-700 dark:!text-orange-500': data.assignee.colorTheme === 'Orange'}" *ngIf="data.assignee.initial!=''">{{data.assignee.initial}}</span>
                            </div>
                            <div class="flex flex-col text-sm">
                                <p class="text-gray-900 dark:text-gray-50">{{data.assignee.name}}</p>
                                <p class="text-gray-500 dark:text-gray-400">{{data.assignee.email}}</p>
                            </div>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="createdBy" headerText="Created By" width="170">
                    <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.createdBy.avatar + ')' }" *ngIf="data.createdBy.avatar!=''"></span>
                                <span [ngClass]="{'e-avatar e-avatar-circle e-avatar-small': true, '!bg-red-100 !text-red-700 dark:!text-red-400': data.createdBy.colorTheme === 'Red', '!bg-green-100 !text-green-700 dark:!text-green-500': data.createdBy.colorTheme === 'Green', '!bg-cyan-100 !text-cyan-700 dark:!text-cyan-600': data.createdBy.colorTheme === 'Blue', '!bg-orange-100 !text-orange-700 dark:!text-orange-500': data.createdBy.colorTheme === 'Orange'}" *ngIf="data.createdBy.initial!=''">{{data.createdBy.initial}}</span>
                            </div>
                            <div class="text-sm text-gray-900 dark:text-gray-50">{{data.createdBy.name}}</div>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="status" headerText="Status" width="134">
                    <ng-template #template let-data>
                        <div class="e-bigger" [ngSwitch]="data.status">
                            <span class="e-badge e-badge-danger font-medium !px-2" *ngSwitchCase="'Not Started'">Not Started</span>
                            <span class="e-badge e-badge-info font-medium !px-2" *ngSwitchCase="'In Progress'">In progress</span>
                            <span class="e-badge e-badge-success font-medium !px-2" *ngSwitchCase="'Resolved'">Resolved</span>
                            <span *ngSwitchDefault>No records found.</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">
        <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="ticketId" headerText="Ticket ID" width="90">
                    <ng-template #template let-data>
                        <a class="text-primary fw-medium text-decoration-none" href="javascript:void(0);" aria-label="ticket ID" role="link">{{data.ticketId}}</a>
                    </ng-template>
                </e-column>
                <e-column field="issue" headerText="Issue Description" width="233"></e-column>
                <e-column field="category" headerText="Issue Category" width="120"></e-column>
                <e-column field="estimated" headerText="Estimated Time" width="120" textAlign="Right"></e-column>
                <e-column field="responseDue" headerText="Resolution Due" width="123" [format]="{type: 'date', format: 'MM/dd/yyyy'}" textAlign="Right"></e-column>
                <e-column field="priority" headerText="Priority" width="126">
                    <ng-template #template let-data>
                        <div [ngSwitch]="data.priority">
                            <span class="d-flex align-items-center gap-1" *ngSwitchCase="'High'"> <span class="e-icons e-arrow-up text-success"></span>High </span>
                            <span class="d-flex align-items-center gap-1" *ngSwitchCase="'Medium'"> <span class="e-icons e-arrow-right text-warning"></span>Medium </span>
                            <span class="d-flex align-items-center gap-1" *ngSwitchCase="'Low'"> <span class="e-icons e-arrow-down text-danger"></span>Low </span>
                            <span *ngSwitchDefault>No records found.</span>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="assignee" headerText="Assigned To" textAlign="Left" width="297">
                    <ng-template #template let-data>
                        <div class="d-flex align-items-center gap-3 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.assignee.avatar + ')' }" *ngIf="data.assignee.avatar!=''"></span>
                                <span [ngClass]="{'e-avatar e-avatar-circle e-avatar-small': true, 'bg-danger-subtle text-danger': data.assignee.colorTheme === 'Red', 'bg-success-subtle text-success': data.assignee.colorTheme === 'Green', 'bg-info-subtle text-info': data.assignee.colorTheme === 'Blue', 'bg-warning-subtle text-warning': data.assignee.colorTheme === 'Orange'}" *ngIf="data.assignee.initial!=''">{{data.assignee.initial}}</span>
                            </div>
                            <div class="d-flex flex-column">
                                <p class="text-body mb-0">{{data.assignee.name}}</p>
                                <p class="text-body-secondary mb-0">{{data.assignee.email}}</p>
                            </div>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="createdBy" headerText="Created By" width="170">
                    <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.createdBy.avatar + ')' }" *ngIf="data.createdBy.avatar!=''"></span>
                                <span [ngClass]="{'e-avatar e-avatar-circle e-avatar-small': true, 'bg-danger-subtle text-danger': data.createdBy.colorTheme === 'Red', 'bg-success-subtle text-success': data.createdBy.colorTheme === 'Green', 'bg-info-subtle text-info': data.createdBy.colorTheme === 'Blue', 'bg-warning-subtle text-warning': data.createdBy.colorTheme === 'Orange'}" *ngIf="data.createdBy.initial!=''">{{data.createdBy.initial}}</span>
                            </div>
                            <div class="text-body">{{data.createdBy.name}}</div>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="status" headerText="Status" width="130">
                    <ng-template #template let-data>
                        <div class="e-bigger" [ngSwitch]="data.status">
                            <span class="e-badge e-badge-danger fw-medium px-2" *ngSwitchCase="'Not Started'">Not Started</span>
                            <span class="e-badge e-badge-info text-white fw-medium px-2" *ngSwitchCase="'In Progress'">In Progress</span>
                            <span class="e-badge e-badge-success fw-medium px-2" *ngSwitchCase="'Resolved'">Resolved</span>
                            <span *ngSwitchDefault>No records found.</span>
                        </div>
                    </ng-template>
                </e-column>
            </e-columns>
        </ejs-grid>
    </div>
</section>

}