@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 flex-col-reverse sm:flex-row sm:justify-end gap-6 sm:gap-3 mb-6">
            <div class="w-full sm:w-56">
                <div class="e-input-group">
                    <span class="e-input-group-icon e-icons e-search"></span>
                    <input class="e-input" type="text" placeholder="Search transactions" aria-label="enter transaction details" role="textbox" />
                </div>
            </div>
            <button ejs-button class="e-primary self-end" content="Export to CSV" iconCss="e-icons e-export" iconPosition="Left" type="button" aria-label="export to CSV file format" role="button"></button>
        </div>
        <ejs-grid #grid [dataSource]="data" width="100%" height="668" [allowPaging]="true" role="grid">
            <e-columns>
                <e-column field="transactionId" headerText="Transaction ID" width="116">
                    <ng-template #template let-data>
                        <a class="text-primary-700 dark:text-primary-500 font-medium" href="javascript:void(0);" aria-label="transaction ID" role="link">{{data.transactionId}}</a>
                    </ng-template>
                </e-column>
                <e-column field="customerDetails" headerText="Customer Name" width="320">
                    <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.customerDetails.colorTheme === 'Red', '!bg-green-100 !text-green-700 dark:!text-green-500': data.customerDetails.colorTheme === 'Green', '!bg-cyan-100 !text-cyan-700 dark:!text-cyan-600': data.customerDetails.colorTheme === 'Blue', '!bg-orange-100 !text-orange-700 dark:!text-orange-500': data.customerDetails.colorTheme === 'Orange', '!bg-indigo-100 !text-indigo-700 dark:!bg-cyan-800 dark:!text-cyan-400': data.customerDetails.colorTheme === 'Purple'}">{{data.customerDetails.initial}}</span>
                            </div>
                            <div class="flex flex-col text-sm">
                                <p class="text-gray-900 dark:text-gray-50">{{data.customerDetails.name}}</p>
                                <p class="text-gray-500 dark:text-gray-400">{{data.customerDetails.email}}</p>
                            </div>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="date" headerText="Purchase Date" width="110" [format]="{type: 'date', format: 'MM/dd/yyyy'}" textAlign="Right"></e-column>
                <e-column field="product" headerText="Product" width="208">
                    <ng-template #template let-data>
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10">
                                <img class="rounded" src="assets/images/advance-grid/sales-transactions-table/{{data.product.image}}" width="40px" alt="product image" />
                            </div>
                            <p>{{data.product.name}}</p>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="quantity" headerText="Quantity" width="80" textAlign="Right"></e-column>
                <e-column field="amount" headerText="Amount" width="115" format="c2" textAlign="Right"></e-column>
                <e-column field="paymentMethod" headerText="Payment Method" width="170"></e-column>
                <e-column field="salesRep" headerText="Sales Representative" width="194">
                    <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.salesRep.avatar + ')' }"></span>
                            </div>
                            <p>{{data.salesRep.name}}</p>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="status" headerText="Status" width="93">
                    <ng-template #template let-data>
                        <div class="e-bigger" [ngSwitch]="data.status">
                            <span class="e-badge e-badge-success !px-2" *ngSwitchCase="'Completed'">Completed</span>
                            <span class="e-badge e-badge-info !px-2" *ngSwitchCase="'Pending'">Pending</span>
                            <span class="e-badge e-badge-warning !px-2" *ngSwitchCase="'Processing'">Processing</span>
                            <span class="e-badge e-badge-danger !px-2" *ngSwitchCase="'Failed'">Failed</span>
                            <span *ngSwitchDefault>No records found.</span>
                        </div>
                    </ng-template>
                </e-column>
                <e-column headerText="Action" width="82">
                    <ng-template #template let-data>
                        <button ejs-button class="e-link" content="View" type="button" aria-label="view sales details" role="button"></button>
                    </ng-template>
                </e-column>
            </e-columns>
        </ejs-grid>
    </div>
</section>

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

<section class="bg-body">
    <div class="py-5 px-4 px-sm-6 mx-auto">
        <div class="d-flex flex-column-reverse flex-sm-row justify-content-end gap-3 mb-4">
            <div class="row">
                <div class="col-12">
                    <div class="e-input-group">
                        <span class="e-input-group-icon e-icons e-search border-end-0"></span>
                        <input class="e-input" type="text" placeholder="Search transactions" aria-label="enter transaction details" role="textbox" />
                    </div>
                </div>
            </div>
            <button ejs-button class="e-primary align-self-end" content="Export to CSV" iconCss="e-icons e-export" iconPosition="Left" type="button" aria-label="export to CSV file format" role="button"></button>
        </div>
        <ejs-grid #grid [dataSource]="data" width="100%" height="668" [allowPaging]="true" role="grid">
            <e-columns>
                <e-column field="transactionId" headerText="Transaction ID" width="126">
                    <ng-template #template let-data>
                        <a class="text-primary fw-medium text-decoration-none" href="javascript:void(0);" aria-label="transaction ID" role="link">{{data.transactionId}}</a>
                    </ng-template>
                </e-column>
                <e-column field="customerDetails" headerText="Customer Name" textAlign="Left" width="270">
                    <ng-template #template let-data>
                        <div class="d-flex gap-3 align-items-center py-1">
                            <div style="width: 32px; height: 32px;">
                                <span [ngClass]="{'e-avatar e-avatar-circle e-avatar-small': true, 'bg-danger-subtle text-danger': data.customerDetails.colorTheme === 'Red', 'bg-success-subtle text-success': data.customerDetails.colorTheme === 'Green', 'bg-info-subtle text-info': data.customerDetails.colorTheme === 'Blue', 'bg-warning-subtle text-warning': data.customerDetails.colorTheme === 'Orange', 'bg-primary-subtle text-primary': data.customerDetails.colorTheme === 'Purple'}">{{data.customerDetails.initial}}</span>
                            </div>
                            <div class="d-flex flex-column">
                                <p class="text-body mb-0">{{data.customerDetails.name}}</p>
                                <p class="text-body-secondary mb-0">{{data.customerDetails.email}}</p>
                            </div>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="date" headerText="Purchase Date" width="142" [format]="{type: 'date', format: 'MM/dd/yyyy'}" textAlign="Right"></e-column>
                <e-column field="product" headerText="Product" width="219">
                    <ng-template #template let-data>
                        <div class="d-flex align-items-center gap-3">
                            <div style="width: 40px; height: 40px;">
                                <img class="rounded" src="assets/images/advance-grid/sales-transactions-table/{{data.product.image}}" width="40px" alt="product image" />
                            </div>
                            <p class="mb-0">{{data.product.name}}</p>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="quantity" headerText="Quantity" width="115" textAlign="Right"></e-column>
                <e-column field="amount" headerText="Amount" width="122" format="c2" textAlign="Right"></e-column>
                <e-column field="paymentMethod" headerText="Payment Method" width="143"></e-column>
                <e-column field="salesRep" headerText="Sales Representative" width="192">
                    <ng-template #template let-data>
                        <div class="d-flex align-items-center gap-3">
                            <div style="width: 32px; height: 32px;">
                                <span class="e-avatar e-avatar-circle e-avatar-small" [ngStyle]="{ 'background-image': 'url(assets/images/common/avatar/' + data.salesRep.avatar + ')' }"></span>
                            </div>
                            <p class="mb-0">{{data.salesRep.name}}</p>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="status" headerText="Status" width="103">
                    <ng-template #template let-data>
                        <div class="fs-6" [ngSwitch]="data.status">
                            <span class="e-badge e-badge-success" *ngSwitchCase="'Completed'">Completed</span>
                            <span class="e-badge e-badge-info" *ngSwitchCase="'Pending'">Pending</span>
                            <span class="e-badge e-badge-warning" *ngSwitchCase="'Processing'">Processing</span>
                            <span class="e-badge e-badge-danger" *ngSwitchCase="'Failed'">Failed</span>
                            <span *ngSwitchDefault>No records found.</span>
                        </div>
                    </ng-template>
                </e-column>
                <e-column headerText="Action" width="72">
                    <ng-template #template let-data>
                        <button ejs-button class="e-link !p-0" content="View" type="button" aria-label="view sales details" role="button"></button>
                    </ng-template>
                </e-column>
            </e-columns>
        </ejs-grid>
    </div>
</section>

}