@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-4 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 !py-4 !px-1 sm:!px-3">
                        <div class="flex justify-between contents">
                            <div class="flex">
                                <span class="e-avatar e-avatar-large" [ngClass]="{'bg-green-100 text-green-700 dark:text-green-500': data.tag === 'financial', 'bg-orange-100 text-orange-700 dark:text-orange-500': data.tag === 'remainder', 'bg-cyan-100 text-cyan-700 dark:text-cyan-600': data.tag === 'maintenance', 'bg-indigo-100 text-indigo-700 dark:text-indigo-600': data.tag === 'shopping'}">
                                    <span class="text-2xl" [ngClass]="{'sf-icon-dollar': data.tag === 'financial', 'sf-icon-clock-rewind': data.tag === 'remainder', 'sf-icon-home-settings-03': data.tag === 'maintenance', 'sf-icon-cart': data.tag === 'shopping'}"></span>
                                </span>
                                <span class="ml-6 w-11/12">
                                    <div class="flex justify-between relative">
                                        <span class="e-list-item-header flex items-center !text-base !font-medium !text-wrap !line-clamp-2 w-3/5 sm:w-4/5 !truncate !text-gray-900 dark:!text-gray-200">{{data.title}}</span>
                                        <span class="text-gray-700 dark:text-gray-200 absolute right-0 top-0">{{data.time}}</span>
                                    </div>
                                    <span class="e-list-content !text-sm !text-gray-700 dark:!text-gray-200 !whitespace-normal !pt-2 !truncate w-full md:w-full !line-clamp-3">
                                        {{data.message}}
                                    </span>
                                </span>
                            </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">
                                <span class="e-avatar e-avatar-large flex-shrink-0" [ngClass]="{'bg-success-subtle text-success': data.tag === 'financial', 'bg-warning-subtle text-warning': data.tag === 'remainder', 'bg-info-subtle text-cyan': data.tag === 'maintenance', 'bg-primary-subtle text-primary': data.tag === 'shopping'}">
                                    <span class="fs-4" [ngClass]="{'sf-icon-dollar': data.tag === 'financial', 'sf-icon-clock-rewind': data.tag === 'remainder', 'sf-icon-home-settings-03': data.tag === 'maintenance', 'sf-icon-cart': data.tag === 'shopping'}"></span>
                                </span>
                                <span class="ms-4 w-100">
                                    <div class="d-flex justify-content-between position-relative">
                                        <span class="e-list-item-header text-wrap fs-6 fw-medium text-truncate col-8 col-sm-12" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 170px; max-width: 350px;">
                                            {{data.title}}
                                        </span>
                                        <span class="position-absolute top-0 end-0">{{data.time}}</span>
                                    </div>
                                    <span class="e-list-content text-wrap pt-2 text-truncate w-100" style="display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;">
                                        {{data.message}}
                                    </span>
                                </span>
                            </div>
                        </div>
                    </div>
                </ng-template>
            </ejs-listview>
        </div>
    </div>
</section>
}