<ul
  class="list-unstyled mb-0 chat-user-tab-list chat-users-tab overflow-auto"
  id="chat-msg-scroll"
  #sidemenuList
>
  @for (LiveCust of data?.filteredLiveCust; track LiveCust){ 
    @if(LiveCust && LiveCust['lastMessage'] && !LiveCust['lastMessage']?.['delete']){
      <li
        class="checkforactive"
        [attr.data-id]="LiveCust?.id"
        [ngClass]="{ active: LiveCust?.id == id, 'moveout': (id && custIdEngaged && custIdEngaged.id == id)}"
        (click)="singlecustdata(LiveCust?.id)"
        #liElement
      >
        <div class="d-flex align-items-center">
          <div class="me-2 lh-1">
            <span
              class="avatar brround"
              style="
                background-image: url('uploads/profile/user-profile.png');
                background-size: contain;
              "
            >
              @if(settings?.liveChatCustomerOnlineUsers?.split(',').includes(LiveCust?.id)){
                <span class="avatar-status bg-green"></span>
              }@else{
                <span class="avatar-status"></span>
              }
            </span>
          </div>
          <div class="flex-fill">
            <div class="mb-0 d-flex align-items-center justify-content-between">
              <div class="font-weight-semibold">
                <a class="livechat-username" href="javascript:void(0);">{{
                  LiveCust["username"]
                }}</a>
              </div>
              <div class="float-end text-muted fw-normal fs-12 chat-time">
                {{ LiveCust['lastMessage']?.['created_at'] | dateAgo : timezone }}
              </div>
              <div
                ngbDropdown
                class="chat-actions lh-1"
                placement="bottom-end"
                (click)="$event.stopPropagation()"
              >
                <a
                  aria-label="anchor"
                  href="javascript:void(0);"
                  ngbDropdownToggle
                  aria-expanded="false"
                  class="no-caret"
                  (click)="$event.stopPropagation()"
                >
                  <i class="fe fe-more-vertical fs-18"></i>
                </a>
                <ul ngbDropdownMenu>
                  @if(LiveCust?.status != "solved"){
                    @if(LiveCust?.engage_conversation != ""){
                      @if(LiveCust?.mark_as_unread?.includes(AuthId)){
                        <li>
                          <a
                            (click)="removeUserFromUnread(LiveCust?.id)"
                            href="javascript:;"
                            ngbDropdownItem
                            class="markAsreadBtn"
                            href="javascript:void(0);"
                            ><i class="ri-chat-check-line align-middle me-2 fs-18"></i>
                            {{ "Mark As Read" | translate }}
                          </a>
                        </li>
                      }@else{
                        <li>
                          <a
                            (click)="conversationUnread(LiveCust?.id)"
                            href="javascript:;"
                            ngbDropdownItem
                            class="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
                          (click)="markAsSolved(LiveCust?.id)"
                          href="javascript:;"
                          ngbDropdownItem
                          class=""
                          href="javascript:void(0);"
                          ><i class="ri-chat-smile-line align-middle me-2 fs-18"></i
                          >{{ "Mark As Solved" | translate }}</a
                        >
                      </li>
                    } 
                    @if(LiveCust?.engage_conversation?.length > 1 && LiveCust?.engage_conversation.includes(AuthId)){
                      <li>
                        <a
                          (click)="conversationLeave(LiveCust?.id)"
                          ngbDropdownItem
                          href="javascript:;"
                        >
                          <i class="ri-chat-delete-line align-middle me-2 fs-18"></i>
                          {{ "Leave" | translate }}
                        </a>
                      </li>
                    }
                    <li
                      class="reAssignModalTrigger"
                      data-bs-toggle="modal"
                      data-bs-target="#staticBackdrop"
                      (click)="openAssignModel(reassign1, LiveCust?.id)"
                    >
                      <a ngbDropdownItem class="" href="javascript:void(0);"
                        ><i class="ri-chat-upload-line align-middle me-2 fs-18"></i
                        >{{ "Re-Assign" | translate }}</a
                      >
                    </li>
                  }
                  <li>
                    <a
                      ngbDropdownItem
                      class=""
                      (click)="
                        livechatConversationDelete(LiveCust['cust_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(LiveCust['unreadIndexNumber']){
              <span
                class="chat-msg text-truncate fs-13 text-default custrecentmessage font-weight-bold"
                data-id="100"
                >{{ LiveCust['lastMessage']?.['message'] }}</span
              >
              <span
                class="ms-auto me-2 badge bg-success-transparent rounded-circle unReadIndexNumber"
                >{{ LiveCust["unreadIndexNumber"] }}</span
              >} @else{
              <span
                class="chat-msg text-truncate fs-13 text-default custrecentmessage"
                data-id="100"
                >{{ LiveCust['lastMessage']?.['message'] }}</span
              >} @if(LiveCust['engage_conversation']){
              <div class="avatar-list avatar-list-stacked me-3">
                @for ( LiveCustmer of LiveCust?.engage_conversation; track
                LiveCustmer; let idx = $index){ @if(LiveCustmer?.profileimage){
                <span
                  class="avatar brround avatar-sm"
                  style="background-image: url({{LiveCustmer?.profileimage}});background-size:contain"
                  placement="top"
                  container="body"
                  [ngbTooltip]="LiveCustmer?.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]="LiveCustmer?.name"
                ></span>
                } }
              </div>
              @if(LiveCust?.engage_conversation?.length > 2){
              <div class="avatar-list avatar-list-stacked me-3">
                <span
                  class="avatar brround bg-light text-dark avatar-sm"
                  placement="top"
                  container="body"
                  [ngbTooltip]="LiveCust?.agentsNames"
                  >+{{ LiveCust?.engage_conversation?.slice(2)?.length }}</span
                >
              </div>
              } }
            </div>
          </div>
        </div>
      </li>
    } 
  } @empty{
      <div class="text-center" style="margin-top: 20rem">
        <b>{{
          "As of now, there are no chat discussions in progress" | translate
        }}</b>
      </div>
    }
</ul>
<ng-template #reassign1 let-modal>
  <div class="modal-header">
    <h5 class="modal-title" id="staticBackdropLabel">
      {{ "Reassign the conversation" }}
    </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="reAssign2"
      (ngSubmit)="reAssignUserFn(reAssign, 'livechatConversationReassign')"
    >
      <div class="form-group select2-lg">
        <label for="form-label">{{"Reassign Users" | translate}}</label>
        <input type="hidden" formControlName="custId" [value]="assignId" />
        <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" }}
    </button>
    <button
      type="submit"
      class="btn btn-primary"
      data-bs-dismiss="modal"
      form="reAssign2"
      id="reassignSelectBtn"
    >
      {{ "Reassign" }}
    </button>
  </div>
</ng-template>
