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

<section>
    <div id="chat-header" class="flex flex-col items-center max-w-4xl mx-auto pb-6 bg-white dark:bg-gray-900 rounded-xl overflow-hidden" style="max-height: 800px;">
        <div class="w-full p-2">
            <div class="flex items-center justify-between py-1 pl-2 sm:pl-4 pr-2">
                <div class="flex items-center">
                    <span class="flex items-center gap-3">
                        <div class="relative h-8">
                            <span class="e-avatar e-avatar-circle e-avatar-small" style="background-image: url(assets/images/common/avatar/avatar-3.jpg);" alt="profile picture"></span>
                            <div class="w-3 h-3 rounded-full bg-green-700 dark:bg-green-500 absolute border border-white dark:border-black" style="bottom: -2px; right: -2px;"></div>
                        </div>
                        <span class="text-base font-semibold text-gray-900 dark:text-white">Mark Davis</span>
                    </span>
                </div>
                <div class="e-appbar-spacer"></div>
                <div class="flex items-center gap-3">
                    <button ejs-button class="e-icons e-search text-base leading-3 sm:block hidden" cssClass="e-flat" type="button" aria-label="search" role="button"></button>
                    <div class="border-l h-6 border-gray-200 dark:border-gray-600 sm:block hidden"></div>
                    <button ejs-button class="sf-icon sf-icon-phone-01 text-base sm:block hidden leading-3" cssClass="e-flat" type="button" aria-label="audio call" role="button"></button>
                    <button ejs-button class="e-icons e-video sm:block hidden" cssClass="e-flat" type="button" aria-label="video call" role="button"></button>
                    <button ejs-button class="e-icons e-more-vertical-1" cssClass="e-flat" type="button" aria-label="more options" role="button"></button>
                </div>
            </div>
        </div>
        <div class="flex items-center flex-col pt-7 pb-2 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800">
            <span class="e-badge e-badge-pill e-badge-secondary border border-gray-200 e-small">Wednesday, Sep 18th</span>
            <ejs-listview class="!border-0 px-2 sm:px-4 sm:pr-7 lg:pr-12 py-4" [dataSource]="data" width="100%" height="100%" aria-label="chat conversations" role="list">
                <ng-template #template let-data>
                    <div *ngIf="data.chat != 'receiver'; then senderTemplate; else receiverTemplate"></div>
                    <ng-template #senderTemplate>
                        <div class="flex justify-end ml-auto sm:mr-3 gap-3 items-start w-4/5">
                            <div class="flex flex-col gap-1 items-end">
                                <div class="py-2 px-3 rounded-lg rounded-se-none bg-gray-100 dark:bg-gray-700">
                                    <div class="dark:text-gray-50">{{data.text}}</div>
                                </div>
                                <div class="flex relative">
                                    <p class="text-xs text-gray-500">{{data.time}}</p>
                                    <div class="sf-icon sf-icon-double-check-01 ml-0.5 sm:ml-1 leading-4 text-base text-primary-600 dark:text-primary-400" *ngIf="data.open"></div>
                                </div>
                            </div>
                        </div>
                    </ng-template>
                    <ng-template #receiverTemplate>
                        <div class="flex justify-start gap-3 items-start sm:w-4/5">
                            <div *ngIf="data.avatar != ''">
                                <span class="e-avatar e-avatar-circle e-avatar-small" [ngStyle]="{ 'background-image': 'url(assets/images/common/avatar/' + data.avatar + ')' }" alt="receiver avatar"></span>
                            </div>
                            <div class="flex flex-col gap-1">
                                <div class="py-2 px-3 rounded-lg rounded-ss-none bg-gray-50 dark:bg-gray-800">
                                    <div class="dark:text-gray-50">{{data.text}}</div>
                                </div>
                                <p class="text-xs text-gray-500">{{data.name}} {{data.time}}</p>
                            </div>
                        </div>
                    </ng-template>
                </ng-template>
            </ejs-listview>
        </div>
        <div class="e-bigger w-full text-base px-4 sm:pl-6 sm:pr-12 lg:pr-16 lg:mr-1">
            <ejs-textbox #textbox type="text" placeholder="Enter a message" (created)="textbox.addIcon('append', 'sf-icon-navigation-right-up border-0')" aria-label="enter a message" role="textbox"></ejs-textbox>
        </div>
    </div>
</section>

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

<section>
    <div id="chat-header" class="container overflow-hidden p-0 pb-4 rounded-4 bg-body" style="max-height: 800px; max-width: 900px;">
        <div class="w-100 p-2">
            <div class="d-flex align-items-center justify-content-between py-1 ps-2 ps-sm-3 pe-2">
                <div class="d-flex align-items-center">
                    <span class="d-flex align-items-center gap-3">
                        <div class="position-relative" style="height: 32px;">
                            <span class="e-avatar e-avatar-circle e-avatar-small" style="background-image: url(assets/images/common/avatar/avatar-3.jpg);" alt="profile picture"></span>
                            <div class="position-absolute bg-success border border-light rounded-circle p-1" style="bottom: -1px; right: -1px;"></div>
                        </div>
                        <span class="h6 mb-0 text-body">Mark Davis</span>
                    </span>
                </div>
                <div class="e-appbar-spacer"></div>
                <div class="d-flex align-items-center gap-3">
                    <button ejs-button class="e-icons e-search d-none d-sm-block" cssClass="e-flat" type="button" aria-label="search" role="button"></button>
                    <div class="border-start border-secondary-subtle d-none d-sm-block" style="height: 24px;"></div>
                    <button ejs-button class="sf-icon sf-icon-phone-01 fs-6 d-none d-sm-block" cssClass="e-flat" type="button" aria-label="audio call" role="button"></button>
                    <button ejs-button class="e-icons e-video d-none d-sm-block" cssClass="e-flat" type="button" aria-label="video call" role="button"></button>
                    <button ejs-button class="e-icons e-more-vertical-1" cssClass="e-flat" type="button" aria-label="more options" role="button"></button>
                </div>
            </div>
        </div>
        <div class="d-flex flex-column align-items-center pt-4 border-top bg-body">
            <span class="e-badge e-badge-pill border px-2">Wednesday, Sep 18th</span>
            <ejs-listview class="border-0 px-2 px-sm-3 pe-md-4 pe-sm-3 pb-4 pt-3 w-100" [dataSource]="data" aria-label="chat conversations" role="list">
                <ng-template #template let-data>
                    <div *ngIf="data.chat != 'receiver'; then senderTemplate; else receiverTemplate"></div>
                    <ng-template #senderTemplate>
                        <div class="d-flex justify-content-end pe-sm-3 ms-auto align-items-start w-75">
                            <div class="d-flex flex-column gap-1 align-items-end">
                                <div class="py-2 px-3 rounded bg-body-secondary" style="border-top-right-radius: 0px !important;">
                                    <div class="text-body">{{data.text}}</div>
                                </div>
                                <div class="d-flex position-relative">
                                    <p class="text-body-secondary small m-0">{{data.time}}</p>
                                    <div class="sf-icon-double-check-01 text-primary fs-6 ms-1" *ngIf="data.open"></div>
                                </div>
                            </div>
                        </div>
                    </ng-template>
                    <ng-template #receiverTemplate>
                        <div class="d-flex justify-content-start gap-2 align-items-start">
                            <div *ngIf="data.avatar != ''">
                                <span class="e-avatar e-avatar-circle e-avatar-small" [ngStyle]="{ 'background-image': 'url(assets/images/common/avatar/' + data.avatar + ')' }" alt="receiver avatar"></span>
                            </div>
                            <div class="d-flex flex-column gap-1">
                                <div class="py-2 px-3 rounded bg-body-tertiary" style="border-top-left-radius: 0px !important;">
                                    <div class="text-body">{{data.text}}</div>
                                </div>
                                <p class="small text-body-secondary m-0">{{data.name}} <span class="ms-1">{{data.time}}</span></p>
                            </div>
                        </div>
                    </ng-template>
                </ng-template>
            </ejs-listview>
        </div>
        <div class="e-bigger ms-sm-4 ms-3 me-md-5 me-4">
            <ejs-textbox #textbox cssClass="w-100" type="text" placeholder="Enter a message" (created)="textbox.addIcon('append', 'sf-icon-navigation-right-up border-0')" aria-label="enter a message" role="textbox"></ejs-textbox>
        </div>
    </div>
</section>

}