@if (currentTheme === 'tailwind') {
<section class="bg-white dark:bg-gray-900">
    <div class="flex items-center justify-center min-h-screen">
        <div class="max-w-none lg:max-w-2xl w-full m-auto p-2 md:py-8 lg:px-14">
            <ejs-listview class="!border-0" cssClass="e-list-template" [dataSource]="data" aria-label="list of notifications" role="list">
                <ng-template #template let-data>
                    <div class="e-list-wrapper e-list-multi-line border-b border-gray-200 dark:border-gray-600 !pt-5 !pb-6 !px-1 sm:!px-3">
                        <div class="flex justify-between">
                            <div class="flex items-center">
                                <span class="e-avatar e-avatar-large shrink-0 !text-base" [ngClass]="{'bg-indigo-100 dark:bg-cyan-800 text-indigo-600 dark:text-cyan-400': data.tag === 'report', 'bg-orange-100 text-orange-700': data.tag === 'remainder'}" *ngIf="data.letter">{{data.letter}}</span>
                                <span class="e-avatar e-avatar-large shrink-0" *ngIf="!data.letter"><img src="assets/images/common/avatar/{{data.image}}" alt="profile picture" /></span>
                                <span class="ml-3">
                                    <div class="flex">
                                        <span class="e-list-item-header !text-base !font-medium flex items-center !text-wrap">{{data.name}}</span>
                                        <span class="pl-1 text-sm font-normal flex items-center text-gray-700 dark:text-gray-200" *ngIf="data.type">{{data.type}}</span>
                                    </div>
                                    <span class="e-list-content !text-gray-700 dark:!text-gray-200 !pt-1">{{data.date}}</span>
                                </span>
                            </div>
                            <div class="flex items-center">
                                <button ejs-button class="e-icons e-more-horizontal-1 e-outline w-8 h-8 !flex items-center" type="button" aria-label="more options" role="button"></button>
                            </div>
                        </div>
                    </div>
                </ng-template>
            </ejs-listview>
        </div>
    </div>
</section>
} @else if (currentTheme === 'bootstrap5.3') {
<section class="bg-body">
    <div class="d-flex align-items-center justify-content-center min-vh-100">
        <div class="container-lg w-100 m-auto p-3 p-md-6" [style]="width">
            <ejs-listview class="border-0" cssClass="e-list-template" [dataSource]="data" aria-label="list of notifications" role="list">
                <ng-template #template let-data>
                    <div class="e-list-wrapper e-list-multi-line py-3 px-1 px-sm-3">
                        <div class="d-flex justify-content-between">
                            <div class="d-flex align-items-center">
                                <span class="e-avatar e-avatar-large fw-normal fs-5 flex-shrink-0" [ngClass]="{'bg-primary-subtle text-primary': data.tag === 'report', 'bg-warning-subtle text-warning-emphasis': data.tag === 'remainder'}" *ngIf="data.letter">{{data.letter}}</span>
                                <span class="e-avatar e-avatar-large flex-shrink-0" *ngIf="!data.letter"><img src="assets/images/common/avatar/{{data.image}}" alt="profile picture" /></span>
                                <span class="ms-3">
                                    <div class="d-flex">
                                        <span class="e-list-item-header fs-6 fw-medium d-flex align-items-center text-wrap">{{data.name}}</span>
                                        <span class="ps-1 fw-normal d-flex align-items-center text-nowrap" *ngIf="data.type">{{data.type}}</span>
                                    </div>
                                    <span class="e-list-content">{{data.date}}</span>
                                </span>
                            </div>
                            <div class="d-flex align-items-center">
                                <button ejs-button class="e-icons e-more-horizontal-1 e-outline d-flex align-items-center py-2" aria-label="more options" role="button"></button>
                            </div>
                        </div>
                    </div>
                </ng-template>
            </ejs-listview>
        </div>
    </div>
</section>
}
