<ion-header>
  <ion-toolbar mode="ios">
    <ion-buttons slot="start">
      <ion-back-button mode="md"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">Search Connection</ion-title>
  </ion-toolbar>
  <ion-item class="search">
    <ion-input placeholder="Search" (ionInput)="searchFriend()" [debounce]="250" [(ngModel)]="searchValue"
      clearInput="true"></ion-input>
  </ion-item>
</ion-header>
<ion-content>
  <div class="detail">
    <ion-card>
      <ion-card-header *ngIf="friendList?.length !== 0">
        <ion-card-title *ngFor="let data of friendList; let i = index" (click)="viewPublicProfile(data.id)">
          <div class="left-data">
            <div class="icons">
              <span>
                <img [src]="data.avatar || '/assets/images/shravak-profile.png'" />
              </span>
            </div>
            <div class="content">
              <p>{{data.name}}</p>
              <p *ngIf="data.user_detail[0]"><span>{{data.user_detail[0]?.location}}</span></p>
            </div>
          </div>
          <ion-icon name="ellipsis-vertical" id="friend-option-button-{{data.id}}"
            (click)="$event.stopPropagation()"></ion-icon>
          <ion-popover trigger="friend-option-button-{{data.id}}" [dismissOnSelect]="true">
            <ng-template>
              <ion-content>
                <ion-list>
                  <ion-item [button]="true" [detail]="false" (click)="moveToMessage(data); $event.stopPropagation()">
                    <ion-label>Message</ion-label>
                  </ion-item>
                  <ion-item [button]="true" [detail]="false"
                    (click)="confirmationAlert(data, i); $event.stopPropagation()">
                    <ion-label>Disconnect</ion-label>
                  </ion-item>
                </ion-list>
              </ion-content>
            </ng-template>
          </ion-popover>
        </ion-card-title>
        <ion-infinite-scroll threshold="250px" (ionInfinite)="loadFriendListData($event)"
          *ngIf="friendList?.length !== totalCount">
          <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
          </ion-infinite-scroll-content>
        </ion-infinite-scroll>
      </ion-card-header>
      <ion-card *ngIf="!spinnerFlag" class="ion-text-center">
        <ion-spinner name="lines"></ion-spinner>
      </ion-card>
      <ion-card-header *ngIf="spinnerFlag && friendList?.length === 0">
        <h3 class="ion-text-center"><img src="/assets/images/no-data-found-image.svg">
          <p>No data found</p>
        </h3>
      </ion-card-header>
    </ion-card>
  </div>
</ion-content>
