<ion-header>
  <ion-toolbar mode="ios">
    <ion-buttons slot="start">
      <ion-back-button mode="md" defaultHref="page/shravak-feeds"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">Message</ion-title>
  </ion-toolbar>
  <ion-item class="search">
    <ion-input placeholder="Search message" (ionInput)="searchConversion(searchValue)" [(ngModel)]="searchValue"
      [debounce]="250" clearInput="true"></ion-input>
  </ion-item>
</ion-header>
<ion-content>
  <div class="ion-text-center" *ngIf="loader">
    <ion-spinner></ion-spinner>
  </div>
  <ion-card *ngIf="messages.length;else noData">
    <ion-card-header>
      <ion-card-title *ngFor="let item of messages" (click)="goToDetail(item)">
        <div class="left-data">
          <div class="family-members icons">
            <img [src]="item?.avatar_url || '/assets/images/shravak-profile.png'">
          </div>
          <div class="content">
            <p>{{ item?.name ? item.name : 'Global Jain Member' }}<span>{{ item?.message }}</span></p>
          </div>
        </div>
        <div>
          <p><span>{{ item.created_at | localDate | messageTime}}</span>
            <ion-chip *ngIf="item.unread_count">
              <ion-label>{{ item?.unread_count }}</ion-label>
            </ion-chip>
          </p>
        </div>
      </ion-card-title>
    </ion-card-header>
  </ion-card>
  <ng-template #noData>
    <p class="ion-text-center" *ngIf="!loader">No messages to list</p>
  </ng-template>
  <ion-infinite-scroll (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
