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

<section class="bg-gray-50 dark:bg-gray-950">
    <div class="mx-auto w-full py-10 sm:px-6 px-4">
        <ejs-grid [dataSource]="data" rowHeight="44" width="100%" height="440" [allowGrouping]="true" groupSettings="{ showDropArea: true }" role="grid">
            <e-columns>
                <e-column field="name" headerText="Sales Representative" width="146">
                    <ng-template #template let-data>
                        <span>{{data.name}}</span>
                    </ng-template>
                </e-column>
                <e-column field="totalSales" headerText="Total Revenue" width="124" format="c2" textAlign="Right">
                    <ng-template #template let-data>
                        <div class="flex items-center justify-end">
                            <span>{{data.totalSales | currency:'USD':'symbol':'1.0-0'}}</span>
                            <span class="e-icons e-arrow-up ms-2 !text-green-500" *ngIf="data.trend == 'up'"></span>
                            <span class="e-icons e-arrow-down ms-2 !text-red-600" *ngIf="data.trend == 'down'"></span>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="dealsClosed" headerText="Deals Won" width="96" textAlign="Right"></e-column>
                <e-column field="target" headerText="Target" format="c2" width="106">
                    <ng-template #template let-data>
                        <div class="e-bigger">
                            <span class="e-badge e-badge-info">{{data.target | currency:'USD':'symbol':'1.0-0'}}</span>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="progressBar" headerText="% of Target" width="196">
                    <ng-template #template let-data>
                        <div class="flex flex-col w-48 pr-2.5">
                            <ejs-progressbar id="{{data.progressBar.id}}" progressThickness="8" trackThickness="8" value="{{data.progressBar.value}}" width="182" [progressColor]="data.progressBar.value === 100 ? '#15803D' : '#4F46E5'" aria-label="target percentage" role="progressbar"></ejs-progressbar>
                            <p class="text-xs text-end">{{data.progressBar.value | number: '1.0-1'}}%</p>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="avgDealSize" headerText="Average Deal Size" format="c0" width="106" textAlign="Right"></e-column>
                <e-column field="winPercent" headerText="Win Rate" width="80">
                    <ng-template #template let-data>
                        <div class="e-bigger">
                            <span class="e-badge !px-2" [ngClass]="{'e-badge-warning': data.winRate < 70, 'e-badge-info': data.winRate >= 70 && data.winRate < 80, 'e-badge-success': data.winRate >= 80, 'e-badge-ligh': data.winRate === null || data.winRate === undefined}">
                                {{data.winRate !== null && data.winRate !== undefined ? data.winRate + '%' : 'Unknown'}}
                            </span>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="callsMade" headerText="Calls Made" width="100" textAlign="Right"></e-column>
                <e-column field="meetings" headerText="Meetings Scheduled" width="150" textAlign="Right"></e-column>
                <e-column field="pipelineValue" headerText="Pipeline Value" width="115" format="c0" textAlign="Right"></e-column>
                <e-column field="performance" headerText="Performance Score" width="145" textAlign="Right">
                    <ng-template #template let-data>
                        <div class="e-bigger flex gap-2 items-center justify-end">
                            <span class="sf-icon-gauge text-lg" [ngClass]="{'!text-orange-700': data.winRate < 70, '!text-cyan-700': data.winRate >= 70 && data.winRate < 80, '!text-green-700': data.winRate >= 80}"></span>
                            <p>{{data.performance}}</p>
                        </div>
                    </ng-template>
                </e-column>
            </e-columns>
        </ejs-grid>
    </div>
</section>

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

<section class="bg-body">
    <div class="py-4 px-4 px-sm-6 mx-auto">
        <ejs-grid [dataSource]="data" rowHeight="44" width="100%" height="440" [allowGrouping]="true" groupSettings="{ showDropArea: true }" role="grid">
            <e-columns>
                <e-column field="name" headerText="Sales Representative" width="136">
                    <ng-template #template let-data>
                        <span>{{data.name}}</span>
                    </ng-template>
                </e-column>
                <e-column field="totalSales" headerText="Total Revenue" width="124" format="c2" textAlign="Right">
                    <ng-template #template let-data>
                        <div class="d-flex align-items-center justify-content-end">
                            <span>{{data.totalSales | currency:'USD':'symbol':'1.0-0'}}</span>
                            <span class="e-icons e-arrow-up ms-2 text-success" *ngIf="data.trend == 'up'"></span>
                            <span class="e-icons e-arrow-down ms-2 text-danger" *ngIf="data.trend == 'down'"></span>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="dealsClosed" headerText="Deals Won" width="126" textAlign="Right"></e-column>
                <e-column field="target" headerText="Target" format="c2" width="135">
                    <ng-template #template let-data>
                        <div>
                            <span class="e-badge e-badge-info">{{data.target | currency:'USD':'symbol':'1.0-0'}}</span>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="progressBar" headerText="% of Target" width="210">
                    <ng-template #template let-data>
                        <div class="d-flex flex-column w-48 pr-2.5">
                            <ejs-progressbar id="{{data.progressBar.id}}" progressThickness="8" trackThickness="8" value="{{data.progressBar.value}}" width="182" [progressColor]="data.progressBar.value === 100 ? '#15803D' : '#4F46E5'" aria-label="target percentage" role="progressbar"></ejs-progressbar>
                            <p class="text-end small">{{data.progressBar.value | number: '1.0-1'}}%</p>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="avgDealSize" headerText="Average Deal Size" format="c0" width="136" textAlign="Right"></e-column>
                <e-column field="winPercent" headerText="Win Rate" width="125">
                    <ng-template #template let-data>
                        <div>
                            <span class="e-badge px-2" [ngClass]="{'e-badge-warning': data.winRate < 70, 'e-badge-info': data.winRate >= 70 && data.winRate < 80, 'e-badge-success': data.winRate >= 80, 'e-badge-light': data.winRate === null || data.winRate === undefined}">
                                {{data.winRate !== null && data.winRate !== undefined ? data.winRate + '%' : 'Unknown'}}
                            </span>
                        </div>
                    </ng-template>
                </e-column>
                <e-column field="callsMade" headerText="Calls Made" width="105" textAlign="Right"></e-column>
                <e-column field="meetings" headerText="Meetings Scheduled" width="165" textAlign="Right"></e-column>
                <e-column field="pipelineValue" headerText="Pipeline Value" width="125" format="c0" textAlign="Right"></e-column>
                <e-column field="performance" headerText="Performance Score" width="155" textAlign="Right">
                    <ng-template #template let-data>
                        <div class="d-flex align-items-center justify-content-end gap-1">
                            <span class="sf-icon-gauge fs-5" [ngClass]="{'text-warning': data.winRate < 70, 'text-info': data.winRate >= 70 && data.winRate < 80, 'text-success': data.winRate >= 80}"></span>
                            <p class="mb-0">{{data.performance}}</p>
                        </div>
                    </ng-template>
                </e-column>
            </e-columns>
        </ejs-grid>
    </div>
</section>

}