<admin-page-header [title]="'New Chats'"></admin-page-header>
<div class="main-chart-wrapper">
    <div class="row">
        <div class="col-xl-3">        
            <div class="card">
                <div class="card-header border pb-5">
                    @if(data?.operatorID){
                    <div class="d-flex align-items-center ms-2">
                        @if(operatorUser?.image){
                        <span class="avatar brround"
                            style="background-image: url(operatorUser?.image);background-size:contain"></span>
                        }@else{
                        <span class="avatar brround"
                            style="background-image: url('uploads/profile/user-profile.png');background-size:contain"></span>
                        }
                        <div class="d-inline">
                            <h5 class="font-weight-semibold mb-0 ms-2 mt-3">{{operatorUser?.name}}</h5><small class="text-muted ms-2 fs-11"> {{'My Opened Chats' | translate}}</small>
                        </div>
                    </div>
                    }
                    @else{
                        <h4 class="card-title font-weight-semibold mb-0">{{'New Chats' | translate}}</h4>
                    }
                </div>
                <div class="chat-info new-chat-info">
                    <div>
                        <app-live-chat-sidebar [timezone]="timezone" [data]="data" [settings]="settings" link="/admin/live-chat/my-open-chats" [id]="id" [AuthId]="AuthId" (sideMenuOpenClickFunction)="sideMenuOpenClickFunction($event)" ></app-live-chat-sidebar>
                    </div>
                </div>
                
                <div class="card-header border border-bottom-0 pb-5">
                    <h4 class="card-title">{{'Operators' | translate}}</h4>
                </div>
                <div class="chat-user-details new-chats-operators-details chat-opertaors-section bg-transparent p-0 mt-2 px-2">
                    <div class="mb-5"><input class="form-control" id="availableAgentsSearchInput" (keyup)="handleFilterOperators($event)"
                            placeholder="Search For Agent" type="text"></div>
                    <div class="noUser" id="noUserMessage" style="display: none;">
                        <div class="d-flex align-items-center justify-content-between">
                            <div class="d-flex gap-3">
                                <p> {{"No user found" | translate}} </p>
                            </div>
                        </div>
                    </div>
                    <ul class="list-unstyled agents-list overflow-y-scroll" id="agents-list">
                        @for($users of users; track $users){
                        <li class="agent-detail">
                            <a class="streched-link" routerLink="/admin/live-chat/new-chats"
                                [queryParams]="{ operatorID: $users?.id }">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="d-flex gap-3">
                                        <div>
                                            @if($users['image'] == null){
                                            <span class="avatar brround"
                                                style="background-image: url('uploads/profile/user-profile.png');background-size:contain">
                                            </span>
                                            }@else{
                                            <span class="avatar brround"
                                                style="background-image: url($users?.image);background-size:contain">
                                            </span>
                                            }
                                        </div>
                                        <div>
                                            <span class="font-weight-semibold">{{$users['name']}}</span>
                                            <span class="d-block text-muted fs-12">{{$users['email']}}</span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        }
                        @empty {
                            <div class="text-center mt-5 p-1 bg-warning-transparent text-default">
                                <span>{{'Operators are not found' | translate}}</span>
                            </div>
                        }
                    </ul>
                </div>
            </div>    
        </div>
        <div class="col-xl-6">
            <app-livechat-view class="main-chat-area bg-transparent" [data]="data" [settings]="settings" [id]="id" [autoUserInfo]="autoUserInfo" [AuthId]="AuthId" [customerData]="customerData" [parsedChatFlowMessages]="parsedChatFlowMessages" [chatDataVal]="chatData" [newVal]="newVal" [pastMessage]="pastMessage" [subscategory]="subscategory" [reply]="reply" [isChat]="isChat" [engaged]="false" (updatemenu)="updatemenu($event)" (clearVal)="clearVal($event)"></app-livechat-view>
        </div>
    
        <div class="col-xl-3">
            <div class="chat-user-details bg-transparent p-0">
                @if(customerData){
                    <app-customer-info [customerData]="customerData"></app-customer-info>
                    
                    <div class="card">
                        <div class="card-header pb-4 d-flex align-items-center border-0">
                            <h4 class="card-title">{{ 'File Upload Permission' | translate }}</h4>
                            <div class="switch-toggle  ms-auto">
                                <a class="onoffswitch2 ">
                                    <input type="checkbox" id="fileUploadPermission" class="toggle-class onoffswitch2-checkbox" [checked]="chatData?.livechatcust?.file_upload_permission == 1 ? true: false" (change)="fileUploadPermission($event, customerData)">
                                    <label for="fileUploadPermission" class="toggle-class onoffswitch2-label"></label>
                                </a>
                            </div>
                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</div>