@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="invoiceId" headerText="Invoice ID" width="111">
                    <ng-template #template let-data>
                        <a class="text-primary-700 dark:text-primary-500 font-medium" href="javascript:void(0);" aria-label="invoice ID" role="link">{{data.invoiceId}}</a>
                    </ng-template>
                </e-column>
                <e-column field="customerDetails" headerText="Customer Details" textAlign="Left" width="272">
                    <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.customerDetails.avatar + ')' }"> </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="invoiceDate" headerText="Invoice Date" width="122" [format]="{type: 'date', format: 'MM/dd/yyyy'}" textAlign="Right"></e-column>
                <e-column field="itemsPurchased" headerText="Software" width="177"></e-column>
                <e-column field="quantity" headerText="Quantity" textAlign="Right" width="69"></e-column>
                <e-column field="price" headerText="Unit Price" width="100" format="c2" textAlign="Right"></e-column>
                <e-column field="tax" headerText="Tax Amount" width="100" format="c2" textAlign="Right"></e-column>
                <e-column field="discount" headerText="Discount Amount" width="124" textAlign="Right">
                    <ng-template #template let-data>
                        <p class="text-green-700 dark:text-green-500">{{data.discount | currency:'USD':'symbol':'1.2-2'}}</p>
                    </ng-template>
                </e-column>
                <e-column field="total" headerText="Total Amount" width="110" format="c2" textAlign="Right"></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 flex gap-1 items-center w-max" *ngSwitchCase="'Paid'">
                                <div class="w-2 h-2 rounded-full bg-green-700"></div>
                                Paid
                            </span>
                            <span class="e-badge e-badge-warning flex gap-1 items-center w-max" *ngSwitchCase="'Pending'">
                                <div class="w-2 h-2 rounded-full bg-orange-700"></div>
                                Pending
                            </span>
                            <span *ngSwitchDefault>No records found.</span>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="dueDate" headerText="Due Date" width="112" [format]="{type: 'date', format: 'MM/dd/yyyy'}" textAlign="Right"></e-column>
                <e-column field="paymentDate" headerText="Payment Date" textAlign="Right" width="124">
                    <ng-template #template let-data>
                        <div class="text-sm text-gray-700 dark:text-gray-300">
                            <p *ngIf="data.paymentDate">{{data.paymentDate | date:'MM/dd/yyyy'}}</p>
                            <p *ngIf="!data.paymentDate">-</p>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="paymentMethod" headerText="Payment Method" width="130">
                    <ng-template #template let-data>
                        <div class="text-sm text-gray-700 dark:text-gray-300">
                            <p *ngIf="data.paymentMethod">{{data.paymentMethod}}</p>
                            <p *ngIf="!data.paymentMethod">-</p>
                        </div>
                    </ng-template>
                </e-column>
                <e-column headerText="Action" width="102">
                    <ng-template #template let-data>
                        <div class="e-small flex gap-1">
                            <button ejs-button class="e-flat me-1" iconCss="e-icons e-eye" type="button" aria-label="view invoice details" role="button"></button>
                            <button ejs-button class="e-flat" iconCss="e-icons e-print" type="button" aria-label="print" role="button"></button>
                        </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="invoiceId" headerText="Invoice ID" width="109">
                    <ng-template #template let-data>
                        <a class="text-primary fw-medium text-decoration-none" href="javascript:void(0);" aria-label="invoice ID" role="link">{{data.invoiceId}}</a>
                    </ng-template>
                </e-column>
                <e-column field="customerDetails" headerText="Customer Details" textAlign="Left" width="252">
                    <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.customerDetails.avatar + ')' }"> </span>
                            </div>
                            <div class="d-flex flex-column text-body">
                                <p class="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="invoiceDate" headerText="Invoice Date" width="122" [format]="{type: 'date', format: 'MM/dd/yyyy'}" textAlign="Right"></e-column>
                <e-column field="itemsPurchased" headerText="Software" width="180"></e-column>
                <e-column field="quantity" headerText="Quantity" textAlign="Right" width="70"></e-column>
                <e-column field="price" headerText="Unit Price" width="102" format="c2" textAlign="Right"></e-column>
                <e-column field="tax" headerText="Tax Amount" width="102" format="c2" textAlign="Right"></e-column>
                <e-column field="discount" headerText="Discount Amount" width="134" textAlign="Right">
                    <ng-template #template let-data>
                        <p class="text-success mb-0">{{data.discount | currency:'USD':'symbol':'1.2-2'}}</p>
                    </ng-template>
                </e-column>
                <e-column field="total" headerText="Total Amount" width="110" format="c2" textAlign="Right"></e-column>
                <e-column field="status" headerText="Status" width="95">
                    <ng-template #template let-data>
                        <div [ngSwitch]="data.status">
                            <span class="e-badge e-badge-success d-flex align-items-center gap-1" style="width: fit-content;" *ngSwitchCase="'Paid'">
                                <div class="bg-white rounded-circle mr-1" style="width: 0.5rem; height: 0.5rem;"></div>
                                Paid
                            </span>
                            <span class="e-badge e-badge-warning d-flex align-items-center gap-1" style="width: fit-content;" *ngSwitchCase="'Pending'">
                                <div class="bg-dark rounded-circle" style="width: 0.5rem; height: 0.5rem;"></div>
                                Pending
                            </span>
                            <span *ngSwitchDefault>No records found.</span>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="dueDate" headerText="Due Date" width="108" [format]="{type: 'date', format: 'MM/dd/yyyy'}" textAlign="Right"></e-column>
                <e-column field="paymentDate" headerText="Payment Date" textAlign="Right" width="124">
                    <ng-template #template let-data>
                        <div class="text-body">
                            <p class="m-0" *ngIf="data.paymentDate">{{data.paymentDate | date:'MM/dd/yyyy'}}</p>
                            <p class="m-0" *ngIf="!data.paymentDate">-</p>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="paymentMethod" headerText="Payment Method" width="142">
                    <ng-template #template let-data>
                        <div class="text-body">
                            <p class="m-0" *ngIf="data.paymentMethod">{{data.paymentMethod}}</p>
                            <p class="m-0" *ngIf="!data.paymentMethod">-</p>
                        </div>
                    </ng-template>
                </e-column>
                <e-column headerText="Action" width="100">
                    <ng-template #template let-data>
                        <div class="d-flex gap-1">
                            <button ejs-button class="e-flat" iconCss="e-icons e-eye" type="button" aria-label="view invoice details" role="button"></button>
                            <button ejs-button class="e-flat" iconCss="e-icons e-print" type="button" aria-label="print" role="button"></button>
                        </div>
                    </ng-template>
                </e-column>
            </e-columns>
        </ejs-grid>
    </div>
</section>

}