@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-24">
            <ejs-listview class="!border-0" cssClass="e-list-template" [dataSource]="data" aria-label="list of tasks" role="list">
                <ng-template #template let-data>
                    <div class="border border-gray-200 dark:border-gray-600 !py-4 px-4 my-4">
                        <div class="flex justify-between">
                            <div class="flex w-full">
                                <span class="shrink-0"><img class="rounded-md" src="assets/images/listview/task-management/{{data.logo}}" width="48px" height="48px" alt="brand logo" /></span>
                                <span class="ml-4 w-11/12">
                                    <div class="flex justify-between">
                                        <div>
                                            <span class="e-list-item-header flex items-center !text-sm !font-medium !text-wrap !line-clamp-2 sm:!line-clamp-3 w-full truncate !text-gray-900 dark:!text-gray-200">{{data.content}}</span>
                                            <span class="flex items-center space-x-2 text-gray-700 dark:text-gray-200 w-44 mt-3 sm:mt-2 text-nowrap">
                                                <span class="text-sm font-normal">Due Date</span>
                                                <span class="text-sm font-normal e-icons e-day text-xl text-gray-700 dark:text-gray-200"></span>
                                                <span class="text-sm font-normal pt-0.5 sm:pt-0">{{data.date | date: 'd MMMM y'}}</span>
                                            </span>
                                        </div>
                                        <span class="e-avatar e-avatar-circle shrink-0 ml-4"><img src="assets/images/common/avatar/{{data.image}}" alt="brand logo" /></span>
                                    </div>
                                </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-xl w-100 m-auto p-3 p-md-6" [style]="width">
            <ejs-listview cssClass="e-list-template" [dataSource]="data" aria-label="task items" role="list">
                <ng-template #template let-data>
                    <div class="e-list-wrapper e-list-multi-line py-3 px-2 px-sm-3">
                        <div class="d-flex justify-content-between">
                            <span class="flex-shrink-0"><img class="rounded-2" src="assets/images/listview/task-management/{{data.logo}}" width="48px" height="48px" alt="brand logo" /></span>
                            <div class="flex-grow-1">
                                <div class="d-flex justify-content-between">
                                    <div>
                                        <span class="e-list-item-header text-wrap fw-medium mx-3" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">{{data.content}}</span>
                                        <span class="d-flex align-items-center gap-2 ms-3 mt-2 text-nowrap">
                                            <span>Due Date</span>
                                            <span class="e-icons e-day text-xl"></span>
                                            <span>{{data.date | date: 'd MMMM y'}}</span>
                                        </span>
                                    </div>
                                    <span class="e-avatar e-avatar-circle flex-shrink-0"><img src="assets/images/common/avatar/{{data.image}}" alt="brand logo" /></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </ng-template>
            </ejs-listview>
        </div>
    </div>
</section>
}