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

<section>
    <div id="chat-sidepanel" class="max-w-4xl mx-auto bg-white dark:bg-gray-900 rounded-xl overflow-hidden" style="max-width: 900px; max-height: 1406px;">
        <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="sf-icon sf-icon-phone-01 leading-3 text-base sm:block hidden" 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 class="border-l h-6 border-gray-200 dark:border-gray-600 sm:block hidden"></div>
                    <button ejs-button class="e-icons e-show-hide-panel text-base leading-3 sm:block hidden" cssClass="e-flat" type="button" aria-label="show or hide panel" role="button"></button>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap border-t border-gray-200 dark:border-gray-800">
            <div class="w-full sm:w-4/6 pb-6">
                <div class="flex items-center flex-col pt-7 bg-white dark:bg-gray-900">
                    <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 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 sm:w-9/12 lg:w-11/12">
                                    <div class="flex flex-col gap-1 items-end">
                                        <div class="py-2 px-3 rounded-lg rounded-se-none bg-indigo-100 dark:bg-cyan-800">
                                            <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-11/12">
                                    <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-100 dark:bg-gray-800">
                                            <div class="dark:text-gray-50">{{data.text}}</div>
                                        </div>
                                        <p class="text-xs text-gray-500">{{data.name}}<span class="ps-1.5">{{data.time}}</span></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">
                    <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>
            <div class="w-full sm:w-2/6 sm:border-s border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
                <div class="flex justify-between items-center px-3 py-2 mx-4 sm:mx-0 border-b border-gray-200 dark:border-gray-800">
                    <p class="text-base font-semibold text-gray-900 dark:text-gray-50">Translation</p>
                    <button ejs-dropdownbutton class="e-flat" content="Spanish" type="button" (beforeOpen)="$event.cancel = true;" aria-label="select language" role="button"></button>
                </div>
                <ejs-listview class="!border-0 px-1 pt-1" [dataSource]="dataTranslate" width="100%" height="100%" aria-label="translated 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-start gap-2 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="sender avatar"></span>
                                </div>
                                <div class="flex flex-col gap-1">
                                    <p class="text-xs text-gray-500 dark:text-gray-400">{{data.name}} {{data.time}}</p>
                                    <div class="rounded-lg">
                                        <div class="dark:text-gray-50">{{data.text}}</div>
                                    </div>
                                </div>
                            </div>
                        </ng-template>
                        <ng-template #receiverTemplate>
                            <div class="flex justify-start gap-2 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="flex flex-col gap-1">
                                    <p class="text-xs text-gray-500 dark:text-gray-400">{{data.name}} {{data.time}}</p>
                                    <div class="rounded-lg">
                                        <div class="dark:text-gray-50">{{data.text}}</div>
                                    </div>
                                </div>
                            </div>
                        </ng-template>
                    </ng-template>
                </ejs-listview>
            </div>
        </div>
    </div>
</section>

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

<section>
    <div id="chat-sidepanel" class="container overflow-hidden p-0 bg-body rounded-4" style="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="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 class="border-start border-secondary-subtle d-none d-sm-block" style="height: 24px;"></div>
                    <button ejs-button class="e-icons e-show-hide-panel d-none d-sm-block" cssClass="e-flat" type="button" aria-label="show or hide panel" role="button"></button>
                </div>
            </div>
        </div>
        <div class="d-flex flex-wrap border-top bg-body">
            <div class="col-12 col-sm-8 pb-4">
                <div class="d-flex flex-column align-items-center pt-4 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 bg-body" [dataSource]="data" 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="d-flex justify-content-end pe-sm-3 ms-auto gap-3 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 w-100">
                                    <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}} {{data.time}}</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>
            <div class="col-12 col-sm-4 bg-body d-flex">
                <div class="h-100 border-start d-none d-sm-block"></div>
                <div class="h-100">
                    <div class="d-flex justify-content-between align-items-center p-2 mx-3 mx-sm-0 border-bottom">
                        <p class="h6 mb-0 text-body">Translation</p>
                        <button ejs-dropdownbutton class="e-flat" content="Spanish" type="button" (beforeOpen)="$event.cancel = true;" aria-label="select language" role="button"></button>
                    </div>
                    <ejs-listview class="border-0 p-2 pe-4 overflow-auto" [dataSource]="dataTranslate" width="100%" height="100%" aria-label="translated 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-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="sender avatar"></span>
                                    </div>
                                    <div class="d-flex flex-column gap-1">
                                        <p class="small text-body-secondary m-0">{{data.name}} <span class="ms-1">{{data.time}}</span></p>
                                        <div class="rounded">
                                            <div class="text-body">{{data.text}}</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">
                                        <p class="small text-body-secondary m-0">{{data.name}} <span class="ms-1">{{data.time}}</span></p>
                                        <div class="rounded">
                                            <div class="text-body">{{data.text}}</div>
                                        </div>
                                    </div>
                                </div>
                            </ng-template>
                        </ng-template>
                    </ejs-listview>
                </div>
            </div>
        </div>
    </div> 
</section>

}