@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 justify-end items-center mb-6">
            <button ejs-button class="e-primary w-max" content="Edit Permissions" iconCss="e-icons e-edit" iconPosition="Left" type="button" aria-label="edit permissions" role="button"></button>
        </div>
        <ejs-grid [dataSource]="data" width="100%" height="1117" rowHeight="44" [allowGrouping]="true" [groupSettings]="{ showDropArea: false, columns: ['category'] }" gridLines="Both" role="grid">
            <e-columns>
                <e-column field="category" headerText="Category" width="120"></e-column>
                <e-column field="permission" headerText="Permission" textAlign="Left" width="230"></e-column>
                <e-column field="systemAdmin" headerText="System Admin" width="140" textAlign="Center">
                    <ng-template #template let-data>
                        <span class="e-icons e-check !text-green-700 dark:!text-green-500 text-xl" *ngIf="data.systemAdmin"></span>
                        <span class="e-icons e-close !text-red-700 dark:!text-red-400 text-xl" *ngIf="!data.systemAdmin"></span>
                    </ng-template>
                </e-column>
                <e-column field="itManager" headerText="IT Manager" width="140" textAlign="Center">
                    <ng-template #template let-data>
                        <span class="e-icons e-check !text-green-700 dark:!text-green-500 text-xl" *ngIf="data.itManager"></span>
                        <span class="e-icons e-close !text-red-700 dark:!text-red-400 text-xl" *ngIf="!data.itManager"></span>
                    </ng-template>
                </e-column>
                <e-column field="hrManager" headerText="HR Manager" width="140" textAlign="Center">
                    <ng-template #template let-data>
                        <span class="e-icons e-check !text-green-700 dark:!text-green-500 text-xl" *ngIf="data.hrManager"></span>
                        <span class="e-icons e-close !text-red-700 dark:!text-red-400 text-xl" *ngIf="!data.hrManager"></span>
                    </ng-template>
                </e-column>
                <e-column field="financeManager" headerText="Finance Manager" width="140" textAlign="Center">
                    <ng-template #template let-data>
                        <span class="e-icons e-check !text-green-700 dark:!text-green-500 text-xl" *ngIf="data.financeManager"></span>
                        <span class="e-icons e-close !text-red-700 dark:!text-red-400 text-xl" *ngIf="!data.financeManager"></span>
                    </ng-template>
                </e-column>
                <e-column field="salesManager" headerText="Sales Manager" width="140" textAlign="Center">
                    <ng-template #template let-data>
                        <span class="e-icons e-check !text-green-700 dark:!text-green-500 text-xl" *ngIf="data.salesManager"></span>
                        <span class="e-icons e-close !text-red-700 dark:!text-red-400 text-xl" *ngIf="!data.salesManager"></span>
                    </ng-template>
                </e-column>
                <e-column field="customerServiceRep" headerText="Customer Service Representative" width="145" textAlign="Center">
                    <ng-template #template let-data>
                        <span class="e-icons e-check !text-green-700 dark:!text-green-500 text-xl" *ngIf="data.customerServiceRep"></span>
                        <span class="e-icons e-close !text-red-700 dark:!text-red-400 text-xl" *ngIf="!data.customerServiceRep"></span>
                    </ng-template>
                </e-column>
                <e-column field="generalEmployee" headerText="General Employee" width="145" textAlign="Center">
                    <ng-template #template let-data>
                        <span class="e-icons e-check !text-green-700 dark:!text-green-500 text-xl" *ngIf="data.generalEmployee"></span>
                        <span class="e-icons e-close !text-red-700 dark:!text-red-400 text-xl" *ngIf="!data.generalEmployee"></span>
                    </ng-template>
                </e-column>
            </e-columns>
            <ng-template #groupSettingsCaptionTemplate let-data>
                <span class="font-semibold text-sm">{{data.key}}</span>
            </ng-template>
        </ejs-grid>
    </div>
</section>

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

<section class="bg-light">
    <div class="py-5 px-4 px-sm-6 mx-auto">
        <div class="d-flex justify-content-end align-items-center mb-4">
            <button ejs-button class="e-primary" content="Edit Permissions" iconCss="e-icons e-edit" iconPosition="Left" type="button" aria-label="edit permissions" role="button"></button>
        </div>
        <ejs-grid [dataSource]="data" width="100%" height="1117" rowHeight="44" [allowGrouping]="true" [groupSettings]="{ showDropArea: false, columns: ['category'] }" gridLines="Both" role="grid">
            <e-columns>
                <e-column field="category" headerText="Category" width="140"></e-column>
                <e-column field="permission" headerText="Permission" textAlign="Left" width="220"></e-column>
                <e-column field="systemAdmin" headerText="System Admin" width="140" textAlign="Center">
                    <ng-template #template let-data>
                        <span class="e-icons e-check text-success fs-4" *ngIf="data.systemAdmin"></span>
                        <span class="e-icons e-close text-danger fs-5" *ngIf="!data.systemAdmin"></span>
                    </ng-template>
                </e-column>
                <e-column field="itManager" headerText="IT Manager" width="140" textAlign="Center">
                    <ng-template #template let-data>
                        <span class="e-icons e-check text-success fs-4" *ngIf="data.itManager"></span>
                        <span class="e-icons e-close text-danger fs-5" *ngIf="!data.itManager"></span>
                    </ng-template>
                </e-column>
                <e-column field="hrManager" headerText="HR Manager" width="140" textAlign="Center">
                    <ng-template #template let-data>
                        <span class="e-icons e-check text-success fs-4" *ngIf="data.hrManager"></span>
                        <span class="e-icons e-close text-danger fs-5" *ngIf="!data.hrManager"></span>
                    </ng-template>
                </e-column>
                <e-column field="financeManager" headerText="Finance Manager" width="140" textAlign="Center">
                    <ng-template #template let-data>
                        <span class="e-icons e-check text-success fs-4" *ngIf="data.financeManager"></span>
                        <span class="e-icons e-close text-danger fs-5" *ngIf="!data.financeManager"></span>
                    </ng-template>
                </e-column>
                <e-column field="salesManager" headerText="Sales Manager" width="140" textAlign="Center">
                    <ng-template #template let-data>
                        <span class="e-icons e-check text-success fs-4" *ngIf="data.salesManager"></span>
                        <span class="e-icons e-close text-danger fs-5" *ngIf="!data.salesManager"></span>
                    </ng-template>
                </e-column>
                <e-column field="customerServiceRep" headerText="Customer Service representative" width="165" textAlign="Center">
                    <ng-template #template let-data>
                        <span class="e-icons e-check text-success fs-4" *ngIf="data.customerServiceRep"></span>
                        <span class="e-icons e-close text-danger fs-5" *ngIf="!data.customerServiceRep"></span>
                    </ng-template>
                </e-column>
                <e-column field="generalEmployee" headerText="General Employee" width="145" textAlign="Center">
                    <ng-template #template let-data>
                        <span class="e-icons e-check text-success fs-4" *ngIf="data.generalEmployee"></span>
                        <span class="e-icons e-close text-danger fs-5" *ngIf="!data.generalEmployee"></span>
                    </ng-template>
                </e-column>
            </e-columns>
            <ng-template #groupSettingsCaptionTemplate let-data>
                <span class="fw-bold text-body">{{data.key}}</span>
            </ng-template>
        </ejs-grid>
    </div>
</section>

}