<admin-page-header [title]="'Operators'"></admin-page-header>
<div class="main-chart-wrapper">
  <div class="row">
    <div class="col-xl-3">
      <div class="chat-info border card">
        <div class="card-header border-0 pb-5">
          <h4 class="card-title">{{ "All Operators" | translate }}</h4>
        </div>
        <div>
          <ul
            class="list-unstyled mb-0 mt-2 px-2 chat-users-tab overflow-auto"
            
            id="chat-msg-scroll"
          >
            @for (allconver of data?.allconver; track allconver){ 
              @if (!allconver?.['delete_status']?.includes(AuthId) || allconver?.['delete_status'] == null){ 
                @if (allconver != null){
                  <li
                    class="checkforactive"
                    (click)="groupConservationId(allconver?.created_user_id ? allconver?.['unique_id']: null, allconver?.created_user_id ? null : allconver?.['sender_user_id'] != AuthId ? allconver?.['sender_user_id'] : allconver?.['receiver_user_id'])"
                    [attr.data-group-uniq]="allconver?.['unique_id']"
                    [attr.data-id]="allconver?.['sender_user_id'] != AuthId ? allconver?.['sender_user_id'] : allconver?.['receiver_user_id']"
                  >
                    <div class="d-flex align-items-center">
                      <div class="me-2 lh-1">
                        @if(allconver?.image == null){
                        <span
                          class="avatar brround"
                          style="
                            background-image: url('uploads/profile/user-profile.png');
                          "
                        >
                          <span
                            [ngClass]="getClassForUser(allconver?.['sender_user_id'] != AuthId ? allconver?.['sender_user_id'] : allconver?.['receiver_user_id'])"
                            class="avatar-status 2 onlineOfflineIndicator"
                          ></span>
                        </span>
                        }@else{
                        <span
                          class="avatar brround"
                          style="background-image: url('uploads/profile/{{allconver?.image}}');"
                        >
                          @if (!allconver?.['created_user_id']){
                          <span
                            [ngClass]="getClassForUser(allconver?.['sender_user_id'] != AuthId ? allconver?.['sender_user_id'] : allconver?.['receiver_user_id'])"
                            class="avatar-status onlineOfflineIndicator"
                          ></span>
                          }
                        </span>
                        }
                      </div>

                      <div class="flex-fill">
                        <div
                          class="mb-0 d-flex align-items-center justify-content-between"
                        >
                          <div class="font-weight-semibold">
                            @if (allconver?.['created_user_id']){
                            <a href="javascript:void(0);">{{
                              allconver?.name ?? "New Group" | translate
                            }}</a>
                            }@else{
                            <a href="javascript:void(0);">
                              @if (allconver['sender_user_id'] != AuthId){
                              {{ allconver?.['sender_username'] ? allconver['sender_username'] : '' }}
                              }@else{
                              {{ allconver?.['reciever_username'] ? allconver['reciever_username'] : '' }}
                              }
                            </a>
                            }
                          </div>
                          <div class="float-end text-muted fw-normal fs-12 chat-time">
                            {{ allconver["created_at"] | dateAgo : timezone }}
                          </div>
                          <div class="chat-actions lh-1" ngbDropdown>
                            <a
                              ngbDropdownToggle
                              class="no-caret"
                              aria-label="anchor"
                              href="javascript:void(0);"
                            >
                              <i class="fe fe-more-vertical fs-18"></i>
                            </a>
                            <ul ngbDropdownMenu>
                              @if ( allconver['sender_user_id'] != AuthId &&
                              !allconver['created_user_id'] &&
                              allconver['message_status_delivered'] < 1){
                              <li>
                                <a
                                  (click)="markAsRead(allconver['unique_id'])"
                                  class="dropdown-item markAsUreadBtn"
                                  href="javascript:void(0);"
                                  ><i
                                    class="ri-chat-check-line align-middle me-2 fs-18"
                                  ></i>
                                  {{ "Mark As Read" | translate }}</a
                                >
                              </li>
                              }@else{ 
                                @if (allconver['sender_user_id'] != AuthId &&
                                  !allconver['created_user_id'] &&
                                  allconver['message_status_delivered'] < 1){
                                  <li>
                                    <a
                                      (click)="markAsUnRead(allconver['unique_id'])"
                                      class="dropdown-item markAsUnreadBtn"
                                      href="javascript:void(0);"
                                      ><i
                                        class="ri-chat-check-line align-middle me-2 fs-18"
                                      ></i>
                                      {{ "Mark As Unread" | translate }}</a
                                    >
                                  </li>
                                  } 
                                }
                              <li>
                                <a
                                  class="dropdown-item"
                                  href="javascript:void(0);"
                                  (click)="
                                    livechatOperatorConversationDelete(
                                      allconver['unique_id']
                                    )
                                  "
                                >
                                  <i
                                    class="ri-chat-delete-line align-middle me-2 fs-18"
                                  ></i
                                  >{{ "Delete" | translate }}
                                </a>
                              </li>
                            </ul>
                          </div>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                          @if (allconver['sender_user_id'] == AuthId){
                          <span class="chat-msg text-truncate fs-13 text-default">{{
                            allconver["message"] ?? ""
                          }}</span>
                          @if (allconver['message_status'] == 'seen'){
                          <span
                            class="chat-read-mark d-inline-flex align-middle ms-auto me-2"
                          >
                            <i class="ri-check-double-fill"></i>
                          </span>
                          } @else if (allconver['message_status'] == 'delivered'){
                          <span
                            class="chat-read-icon d-inline-flex align-middle ms-auto me-2"
                          >
                            <i class="ri-check-double-fill"></i>
                          </span>
                          } @else if (allconver['message_status'] == 'sent'){
                          <span
                            class="chat-read-icon d-inline-flex align-middle ms-auto me-2"
                          >
                            <i class="ri-check-fill"></i>
                          </span>
                          } } @else{ @if (allconver?.['created_user_id']){ @if
                          (allconver['mark_as_unread'] && allconver['sender_user_id']
                          != AuthId && allconver['mark_as_unread'].includes(AuthId)){
                          <span class="chat-msg text-truncate fs-13 text-default">{{
                            allconver["message"] ?? ""
                          }}</span>
                          } @else{
                          <span
                            class="chat-msg text-truncate fs-13 text-default font-weight-bold"
                          >
                            {{ allconver?.['message'] }}
                          </span>
                          @if (!allconver.message.includes('Group created by') &&
                          (operator == 'operator' ? allconver?.['sender_user_id'] ==
                          id : allconver?.['unique_id'] == id )){
                          <span
                            class="badge bg-success-transparent rounded-circle float-end unReadIndexNumber me-1 ms-auto"
                            >{{ allconver["messageCount"] ?? "" }}</span
                          >
                          } } } @else{
                          <span
                            class="chat-msg text-truncate fs-13 text-default"
                            [ngClass]="(allconver['messageCount'] > 0  &&  (type == 'operator' ? allconver?.['sender_user_id'] != id : allconver?.['unique_id'] != id))  ? 'font-weight-bold' : ''"
                            >{{ allconver["message"] ?? "" }}</span
                          >
                          @if (allconver['messageCount'] > 0 && (type == 'operator' ?
                          allconver?.['sender_user_id'] != id :
                          allconver?.['unique_id'] != id ) ){
                          <span
                            class="badge bg-success-transparent rounded-circle float-end unReadIndexNumber"
                            >{{ allconver["messageCount"] }}</span
                          >
                          } } } @if (allconver['created_user_id']){
                          <div class="avatar-list avatar-list-stacked me-3 1">
                            @for ( receiverDetail of
                            allconver?.receiver_user_image?.slice(0,2); track
                            receiverDetail; let idx = $index){
                            @if(receiverDetail?.image){
                            <span
                              class="avatar brround avatar-sm"
                              [ngStyle]="{
                                'background-image':
                                  'url(uploads/profile/' +
                                  receiverDetail?.image +
                                  ')',
                                'background-size': 'contain'
                              }"
                              placement="top"
                              container="body"
                              [ngbTooltip]="receiverDetail?.name"
                            >
                            </span>

                            }@else{
                            <span
                              class="avatar brround avatar-sm"
                              style="
                                background-image: url('uploads/profile/user-profile.png');
                                background-size: contain;
                              "
                              placement="top"
                              container="body"
                              [ngbTooltip]="receiverDetail?.name"
                            ></span>
                            } }
                          </div>
                          @if(allconver?.receiver_user_id?.length > 2){
                          <div class="avatar-list avatar-list-stacked me-3 2">
                            <span
                              class="avatar brround bg-light text-dark avatar-sm"
                              placement="top"
                              container="body"
                              [ngbTooltip]="allconver?.agentsNames"
                              >+{{
                                allconver?.receiver_user_id?.slice(2)?.length
                              }}</span
                            >
                          </div>
                          } }
                        </div>
                      </div>
                    </div>
                  </li>
                }
              }
            }
             @empty{
            <div
              class="text-center noDiscussionsProgress"
              style="margin-top: 20rem"
            >
              <b>{{
                "As of now, there are no chat discussions in progress"
                  | translate
              }}</b>
            </div>
            }
          </ul>
        </div>
      </div>
    </div>
    <div class="col-xl-6">
      <div class="main-chat-area main-chat-area-new bg-white">
        <div id="main-chat-content">
          @if(OperatorData?.length || id){

          <div
            class="d-flex align-items-center py-2 px-3 rounded border-bottom bg-white mb-3"
            id="operator-conversation-Info"
            [attr.data-id]="id"
          >
            @if(type == "operator"){
            <div class="me-2 lh-1">
              <!--  -->
              <span
                [ngStyle]="{
                  'background-image':
                    'url(\'uploads/profile/' +
                    (receiverdata?.image
                      ? receiverdata.image
                      : 'user-profile.png') +
                    '\')'
                }"
                class="avatar brround"
              >
                <span
                  [ngClass]="
                    isActiveUser(receiverdata?.id) ? 'bg-green' : 'bg-gray'
                  "
                  class="avatar-status onlineOfflineIndicator"
                ></span>
              </span>
            </div>
            <div class="flex-fill">
              <p class="mb-0 fw-semibold fs-14">
                <a
                  href="javascript:void(0);"
                  class="chatnameperson responsive-userinfo-open"
                  >{{ receiverdata?.name }}</a
                >
              </p>
              <p class="text-muted mb-0 chatpersonstatus">
                {{ isActiveUser(receiverdata?.id) ? "online" : "offline" }}
              </p>
            </div>
            } @else {
              <div class="avatar-list avatar-list-stacked me-3 d-flex">
                <span
                  [ngStyle]="{
                    'background-image':
                      'url(\'uploads/profile/' +
                      (receiverdata?.image
                        ? receiverdata.image
                        : 'user-profile.png') +
                      '\')'
                  }"
                  class="avatar brround"
                ></span>
              </div>
              <div class="flex-fill ms-3">
                <p class="mb-0 fw-semibold fs-14">
                  <a
                    href="javascript:void(0);"
                    class="chatnameperson responsive-userinfo-open text-truncate"
                    style="width: 502px; display: block"
                    >{{ formatString(receiverUsersInfo) }}</a
                  >
                </p>
              </div>
            }

            <div class="d-flex flex-wrap rightIcons">
              <div class="dropdown ms-2" ngbDropdown container="body">
                <button
                  aria-label="button"
                  class="btn btn-icon btn-outline-light my-1 btn-wave waves-light waves-effect waves-light no-caret"
                  type="button"
                  aria-expanded="false"
                  ngbDropdownToggle
                >
                  <i class="ri-more-2-fill"></i>
                </button>
                <ul ngbDropdownMenu>
                  <li>
                    <a
                      ngbDropdownItem
                      class=""
                      (click)="livechatOperatorConversationDelete(unique_id)"
                    >
                      <i class="ri-chat-delete-line align-middle me-2 fs-18"></i
                      >{{ "Delete" | translate }}</a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <ul
            #dynamicList
            class="list-unstyled chat-content overflow-auto"
            id="operator-conversation"
            [attr.operator-id]="id"
            [attr.group-recievers_names]="OperatorData?.[OperatorData
            ?.length - 1]?.reciever_username"
            [attr.group-recievers_id]="convertToCommaSeparated(OperatorData?.[OperatorData?.length - 1]?.receiver_user_id)"
          >
            @if(!OperatorData.length){
            <li class="chat-day-label">
              <span>
                {{ formatDateString(details?.created_at) }}
              </span>
            </li>
            } @if(currentDate.length && currentDate != today && labelStatus){
            <li class="chat-day-label">
              <span>
                {{ currentDate }}
              </span>
            </li>
            } 
            @if(OperatorData.length){ 
              @for(val of OperatorData; track val){
                @if(val){ 
                  @if(currentDate != formatDateString(val?.created_at)){
                    <li class="chat-day-label">
                      <span>
                        {{ currentDate }}
                      </span>
                    </li>
                  } 
                  @if(val.sender_user_id != id){
                    <li
                      class="chat-item-start {{val.message == 'Group created by' + (val.sender_username == autoUserInfo.name ? 'you' : val.sender_username)` ? 'd-none' : ''}}"
                    >
                      <div class="chat-list-inner">
                        <div class="chat-user-profile">
                          <span
                            class="avatar brround"
                            [ngStyle]="{
                              'background-image':
                                'url(\'uploads/profile/' +
                                (senderdata?.image
                                  ? senderdata.image
                                  : 'user-profile.png') +
                                '\')'
                            }"
                          >
                          </span>
                        </div>
                        <div class="ms-3">
                          <span class="chatting-user-info">
                            {{
                              val.sender_username == autoUserInfo.name
                                ? "you"
                                : val.sender_username
                            }}
                            <span class="msg-sent-time">
                              {{ this.formatTime(val.created_at) }}
                              @if(val.sender_user_id == AuthId){ @if(val.message_status
                              == 'seen'){
                              <span class="chat-read-mark d-inline-flex align-middle"
                                ><i class="ri-check-double-fill"></i
                              ></span>
                              }@else if(val.message_status == 'delivered'){
                              <span class="chat-read-icon d-inline-flex align-middle"
                                ><i class="ri-check-double-fill"></i
                              ></span>
                              }@else if(val.message_status == 'sent'){
                              <span class="chat-read-icon d-inline-flex align-middle"
                                ><i class="ri-check-fill"></i
                              ></span>
                              } }
                            </span>
                          </span>
                          <div class="main-chat-msg">
                            @if(val.message_type == "image"){ @if(['jpg', 'png', 'jpeg',
                            'svg'].includes(getFileType(getEncodedMessage(val.message)))){
                            <div
                              (click)="AllFileViewer(val.message)"
                              [attr.imageSrc]="getEncodedMessage(val.message)"
                              class="imageMessageLiveChat"
                              style="
                                aspect-ratio: 1;
                                background-repeat: no-repeat;
                                background-color: transparent;
                                background-position: center;
                                background-size: contain;
                                height: 15rem;
                              "
                              [style.background-image]="
                                'url(' + getEncodedMessage(val.message) + ')'
                              "
                            ></div>
                            } @else{
                            <a
                              [href]="data.message"
                              download
                              class="uhelp-attach-acion p-2 rounded border lh-1 d-flex align-items-center justify-content-center"
                              style="
                                width: 100%;
                                max-height: 55px;
                                border-radius: 5px;
                                height: 65px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                padding: 0.5rem;
                                border: var(--border);
                              "
                              >.{{ getFileType(data.message) }}
                              <i class="fa fa-download"></i>
                            </a>
                            } } @else{
                            <div style="white-space: pre-line" class="text-start">
                              <p class="mb-0 text-break">{{ val.message }}</p>
                            </div>
                            }
                          </div>
                        </div>
                      </div>
                    </li>
                  } @else {

                  <li
                    class="chat-item-start {{
                      val.message == 'Group created by' + val.sender_username
                        ? 'd-none'
                        : ''
                    }}"
                  >
                    <div class="chat-list-inner">
                      <div class="chat-user-profile">
                        <span
                          class="avatar brround"
                          [ngStyle]="{
                            'background-image':
                              'url(\'uploads/profile/' +
                              (senderdata?.image
                                ? senderdata.image
                                : 'user-profile.png') +
                              '\')'
                          }"
                        >
                        </span>
                      </div>
                      <div class="ms-3">
                        <span class="chatting-user-info">
                          <span class="chatnameperson">{{
                            val.sender_username == autoUserInfo.name
                              ? "you"
                              : val.sender_username
                          }}</span>
                          <span class="msg-sent-time">
                            {{ this.formatTime(val.created_at) }}
                          </span>
                        </span>
                        <div class="main-chat-msg">
                          @if(val.message_type == "image"){ @if(['jpg', 'png', 'jpeg',
                          'svg'].includes(getFileType(getEncodedMessage(val.message)))){
                          <div
                            (click)="AllFileViewer(val.message)"
                            [attr.imageSrc]="getEncodedMessage(val.message)"
                            class="imageMessageLiveChat"
                            style="
                              aspect-ratio: 1;
                              background-repeat: no-repeat;
                              background-color: transparent;
                              background-position: center;
                              background-size: contain;
                              height: 15rem;
                            "
                            [style.background-image]="
                              'url(' + getEncodedMessage(val.message) + ')'
                            "
                          ></div>
                          } @else{
                          <a
                            [href]="data.message"
                            download
                            class="uhelp-attach-acion p-2 rounded border lh-1 d-flex align-items-center justify-content-center"
                            style="
                              width: 100%;
                              max-height: 55px;
                              border-radius: 5px;
                              height: 65px;
                              display: flex;
                              align-items: center;
                              justify-content: center;
                              padding: 0.5rem;
                              border: var(--border);
                            "
                            >.{{ getFileType(data.message) }}
                            <i class="fa fa-download"></i>
                          </a>
                          } } @else{
                          <div style="white-space: pre-line" class="text-start">
                            <p class="mb-0 text-break">{{ val.message }}</p>
                          </div>
                          }
                        </div>
                      </div>
                    </div>
                  </li>
                  } 
                }
              } 
              @for (list of typingList; let i = $index; track i) {
                @if(list.userId != this.AuthId && list?.typing){
                <li class="chat-item-start">
                  <div class="chat-list-inner">
                    <div class="chat-user-profile">
                      <span
                        class="avatar brround"
                        [ngStyle]="{
                          'background-image':
                            'url(\'uploads/profile/' +
                            (socket?.image ? socket.image : 'user-profile.png') +
                            '\')'
                        }"
                      >
                      </span>
                    </div>
                      <div class="ms-3" >
                        <span class="chatting-user-info">
                          <span class="chatnameperson">{{ list?.userName }}</span>
                        </span>
                        <div class="main-chat-msg">
                          <div class="d-flex">
                            <b class="ms-3">{{
                              list?.typing ? " Typing..." : ""
                            }}</b>
                          </div>
                        </div>
                      </div>
                  </div>
                </li>
                } 
              }
            }
          </ul>
          <div class="chat-footer bg-transparent shadow-none">
            <div class="chat-reply-area flex-fill textareaDiv" #textareaDiv>
              <form
                #chatReply="ngForm"
                id="chatReply"
                (ngSubmit)="
                  chatReplyUserFn(chatReply, 'livechatConversationReassign')
                "
              >
                <div class="position-relative">
                  <div
                    contenteditable="true"
                    #chatReplyInput
                    id="message"
                    class="form-control form-control-lg text-break mb-2 fs-14 overflow-auto h-7"
                    placeholder="Type your message here..."
                    name="message"
                    (input)="onTextareaValueChange(chatReplyInput.innerText)"
                    (keydown.enter)="onEnterKey($event, chatReply)"
                  >
                    {{ reply }}
                  </div>
                  @if(newVal == '' || newVal == null){
                  <div class="custom-placeholder">
                    {{ "Type your message here..." | translate }}
                  </div>
                  }
                </div>
              </form>

              <div class="image-uploaded d-flex gap-2 flex-wrap">
                @for(res of UploadedImages; track res){
                <div class="file-img">
                  @if(['jpg', 'png', 'jpeg', 'svg'].includes(getUploadExe(res))){
                  <img
                    [attr.imageSrc]="res"
                    src="{{ res }}"
                    style="
                      width: 100%;
                      max-height: 55px;
                      border-radius: 5px;
                      height: 65px;
                    "
                  />
                  } @else{
                  <span
                    [attr.imageSrc]="res"
                    style="
                      width: 100%;
                      max-height: 55px;
                      border-radius: 5px;
                      height: 65px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      padding: 0.5rem;
                      border: var(--border);
                    "
                  >
                    .{{ getFileType(res) }}
                  </span>
                  }
                  <button
                    class="btn-danger rounded-circle"
                    (click)="imageRemoveClick($event, res)"
                  >
                    <i class="fe fe-x fs-12"></i>
                  </button>
                </div>
                }
              </div>
              <div class="d-flex align-items-center px-2">
                <div
                  placement="top"
                  container="body"
                  ngbTooltip="Canned responses"
                >
                  <a
                    (click)="openAssignModel(cannedResponse)"
                    href="javascript:;"
                    aria-label="anchor"
                    class="btn-emoji"
                  >
                    <i class="ri-message-line"></i>
                  </a>
                </div>

                <div class="d-flex align-items-center ms-auto gap-2">
                  <app-emoji
                    (emojiAdded)="updateemojiAdded($event)"
                  ></app-emoji>
                  @if(settings?.['liveChatAgentFileUpload'] == '1' ||
                  autoUserInfo?.['roles']?.[0]?.name == 'superadmin'){
                  <a
                    aria-label="anchor"
                    class="btn-attach"
                    type="file"
                    onclick="{document.querySelector('#chat-file-upload').click()}"
                    href="javascript:void(0)"
                    placement="top"
                    container="body"
                    ngbTooltip="Upload"
                    data-bs-original-title=""
                    title=""
                  >
                    <i class="ri-attachment-line"></i>
                  </a>
                  <input
                    type="file"
                    id="chat-file-upload"
                    (change)="fileUpload()"
                    class="d-none"
                    name="chat-file-upload"
                  />
                  }
                  <button
                  [disabled]="sendingResponse['livechatConversationReassign']"
                    form="chatReply"
                    aria-label="anchor"
                    type="submit"
                    id="agentSendMessage"
                    class="btn-reply border rounded-3 btn-outline-primary d-flex justify-content-center align-items-center"
                    href="javascript:void(0)"
                  >
                    <i class="ri-send-plane-2-fill fs-20"></i>
                    @if(sendingResponse['livechatConversationReassign']){
                      <i class="fa fa-spinner fa-spin mx-1"></i>
                    }
                  </button>
                </div>
              </div>
            </div>
          </div>
        } @else{
          <div
            class="card no-articles mb-0"
            style="height: calc(100vh - 8rem); background-color: transparent"
          >
            <div class="card-body p-8">
              <div class="main-content text-center">
                <div class="notification-icon-container p-4">
                  <img src="/assets/images/noarticle.png" alt="" />
                </div>
                <h4 class="mb-1">
                  {{
                    "Currently, no active chat discussions at the moment"
                      | translate
                  }}
                </h4>
                <p class="text-muted">
                  {{
                    "There are currently no ongoing chat discussions at this time."
                      | translate
                  }}
                </p>
              </div>
            </div>
          </div>
        }
        </div>
      </div>
    </div>
    <div class="col-xl-3">
      <div class="chat-user-details bg-transparent p-0" id="chat-user-details">
        <div class="card overflow-hidden">
          <div class="card-header border-0 pb-0 flex-wrap gap-2">
            <h4 class="card-title">{{ "Available Agents" | translate }}</h4>
            <span
              class="text-default ms-1 fs-14 fw-medium AvailableOperatorsIndex"
              >({{
                allActiveUsers?.length ? allActiveUsers?.length - 1 : 0
              }})</span
            >
            <button
              class="btn btn-primary btn-sm btn-icon mb-1 ms-auto chatRoomBtn d-flex align-items-center"
              (click)="openAssignModel(Users)"
            >
              <i class="feather feather-users me-1"></i
              >{{ "Chat Room" | translate }}
            </button>
          </div>

          <div class="card-body">
            <div class="mb-5">
              <input
                class="form-control"
                id="availableAgentsSearchInput"
                placeholder="Search For Agent" (keyup)="handleFilterOperators($event)"
                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 is-loading overflow-y-scroll"
              id="agents-list"
            >
              @for (users of users; track users){
              <li
                class="agent-detail"
                data-id="{{ users?.id }}"
                routerLink="/admin/live-chat/operators"
                [queryParams]="{ operatorID: users.id }"
              >
                <a href="javascript:void(0);" class="streched-link">
                  <!-- <div class="d-flex align-items-center justify-content-between"> -->
                  <div class="d-flex gap-3 align-items-center">
                    <div>
                      @if (users?.image == null){
                      <span
                        class="avatar brround"
                        style="
                          background-image: url('uploads/profile/user-profile.png');
                        "
                      >
                        <span
                          class="avatar-status onlineOfflineIndicator"
                          [ngClass]="getClassForUser(users?.id)"
                        ></span>
                      </span>
                      }@else{
                      <span
                        class="avatar brround"
                        style="background-image: url(uploads/profile/{{users?.image}})"
                      >
                        <span
                          class="avatar-status onlineOfflineIndicator"
                          [ngClass]="getClassForUser(users?.id)"
                        ></span>
                      </span>
                      }
                    </div>
                    <div class="name-email-container">
                      <span class="font-weight-semibold">{{
                        users?.name
                      }}</span>
                      <span class="d-block text-muted fs-12">{{
                        users?.email
                      }}</span>
                    </div>
                  </div>
                  <!-- </div> -->
                </a>
              </li>
              }
            </ul>
          </div>
        </div>
        <div class="card"></div>
      </div>
    </div>
  </div>
</div>

<ng-template #Users let-modal>
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">
      {{ "Select Group Users" | translate }}
    </h5>
    <button type="button" aria-label="close" class="btn-close" (click)="modal.dismiss('Cross click')">
    </button>
  </div>
  <div class="modal-body" id="onlineUsersChatRoom">
    <ul class="list-group" id="onlineUlChatroom">
      <li class="list-group-item">
        <div class="d-flex align-items-center justify-content-between">
          <div class="d-flex gap-3">
            <input
              (change)="toggleSelectAll($event.target.checked)"
              type="checkbox"
              class=""
              name="example-checkbox1"
              allchecked="true"
              value="option1"
              [checked]="selectAll"
            />
            <div>
              <span class="font-weight-semibold">{{
                "All Operators" | translate
              }}</span>
            </div>
          </div>
        </div>
      </li>
      @for (users of user; track users){
      <li class="list-group-item" [attr.data-id]="users?.id">
        <div class="d-flex align-items-center justify-content-between">
          <div class="d-flex gap-3">
            <input
              (change)="selectUser($event)"
              type="checkbox"
              class=""
              name="chatRoom-checkbox"
              value="option1"
              [checked]="selectedUsersArray.includes(users.id)"
              [ngModel]="selectedUsersArray.includes(users.id)"
            />
            <div>
              @if (users?.image == null){
              <span
                class="avatar brround"
                style="
                  background-image: url('uploads/profile/user-profile.png');
                "
              >
                <span
                  [ngClass]="getClassForUser(users?.id)"
                  class="avatar-status onlineOfflineIndicator"
                ></span>
              </span>
              }@else{
              <span
                class="avatar brround"
                style="background-image: url(uploads/profile/{{users?.image}})"
              >
                <span
                  [ngClass]="getClassForUser(users?.id)"
                  class="avatar-status onlineOfflineIndicator"
                ></span>
              </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>
      </li>
      }
    </ul>
  </div>
  <div class="modal-footer">
    <button
      (click)="modal.dismiss('Cross click')"
      type="button"
      class="btn btn-secondary"
    >
      {{ "Close" | translate }}
    </button>
    <button
      (click)="createNewRoom()"
      type="submit"
      class="btn btn-primary savebutton"
    >
      {{ "Create Room" | translate }}
    </button>
  </div>
</ng-template>
<ng-template #cannedResponse let-modal>
  <div class="modal-body p-4">
    <div class="form-group">
      <label class="form-label"
        >{{ "Canned Responses" | translate
        }}<a
          href=""
          data-bs-target="#canned-add-responses"
          data-bs-toggle="modal"
          class="fw-semibold font-weight-semibold text-primary text-decoration-underline float-end"
        ></a
      ></label>
      <ng-select
        name="livechatPosition"
        [items]="cannedmessages"
        [loading]="!cannedmessages"
        class="form-control"
        id="livechatPosition"
        [placeholder]="'Select Canned Response' | translate"
        [multiple]="false"
        bindLabel="title"
        bindValue="messages"
        [clearable]="false"
        (change)="onSelectChange($event)"
      >
        <!-- Show "No items" if tagslist is empty -->
        <ng-template ng-select-empty-list>
          <div>{{ "No items" | translate }}</div>
        </ng-template>
      </ng-select>
    </div>
  </div>
</ng-template>

<ng-template #reassign let-modal>
  <div class="modal-header">
    <h5 class="modal-title" id="staticBackdropLabel">
      {{ "Reassign the conversation" | translate }}
    </h5>
    <button
      type="button"
      aria-label="close"
      class="btn-close"
      (click)="modal.dismiss('Cross click')"
    ></button>
  </div>
  <div class="modal-body">
    <form
      [formGroup]="reAssign"
      id="reAssign"
      (ngSubmit)="reAssignUserFn(reAssign, 'livechatConversationReassign')"
    >
      <div class="form-group select2-lg">
        <label for="form-label">Reassign Users</label>
        <input type="hidden" formControlName="custId" [value]="id" />
        <app-ng-select-input
          nameField="assignUser"
          [tagslist]="data?.user"
          idField="assignUser"
          classText="form-control nodropdown"
          placeholder="Select Users"
          [addTag]="false"
          [hideSelected]="false"
          [multiple]="false"
          bindLabel="name"
          bindValue="id"
          [initailSelect]=""
          [isOpen]="true"
          [isRequired]="true"
        ></app-ng-select-input>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button
      type="button"
      aria-label="close"
      class="btn btn-secondary"
      (click)="modal.dismiss('Cross click')"
    >
      {{ "Close" | translate }}
    </button>
    <button
      type="submit"
      class="btn btn-primary"
      data-bs-dismiss="modal"
      form="reAssign"
      id="reassignSelectBtn"
    >
      {{ "Reassign" | translate }}
    </button>
  </div>
</ng-template>

@if(imageUrl){
      <div class="liveChatImageViewer" >
            <span class="liveChatImageClose" (click)="closePreview()">×</span>
            <img class="liveChatImageTag" [src]="imageUrl">
        </div>
  }