<ion-header>
  <ion-toolbar mode="ios">
    <ion-buttons slot="start">
      <ion-back-button mode="md" defaultHref="page/message"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">{{userName}}</ion-title>
    <ion-accordion-group slot="end">
      <ion-accordion value="colors">
        <ion-item slot="header">
          <ion-icon name="ellipsis-vertical" (click)="messagePopup($event)"></ion-icon>
        </ion-item>
      </ion-accordion>
    </ion-accordion-group>
  </ion-toolbar>
</ion-header>
<ion-content #content [scrollEvents]="true" (ionScroll)="onScroll($event)" class="ion-padding">
  <div class="ion-text-center" *ngIf="loader">
    <ion-spinner></ion-spinner>
  </div>
  <ion-infinite-scroll *ngIf="messages" position="top" [disabled]="!isEnabledTopInfiniteScroll"
    (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
  <ion-list lines="none" class="ion-no-padding" mode="md" *ngIf="messages && currentUser;else noData">
    <div *ngFor="let item of allDates">
      <div class="separator ion-text-center pt-sm pb-sm">
        <span *ngIf="isTodayOrYesterDay(item);else displayDate">{{ isTodayOrYesterDay(item) }}
        </span>
        <ng-template #displayDate>
          <span>{{ item | localDate | date: 'dd/MM/yyyy' }}</span>
        </ng-template>
      </div>
      <div *ngFor="let msg of messages[item]" [ngClass]="(currentUser?.id === msg.user_id) ? 'right-data': 'left-data'">
        <div class="icons" *ngIf="currentUser?.id !== msg.user_id" (click)="goToShravakProfile()">
          <img [src]="imageURL">
        </div>
        <div class="content">
          <p class="left-right-p"><span class="msg-content chat-data">{{ msg?.message }} </span><span
              class="msg-content">{{
              (msg?.created_at) | localDate |
              date: 'hh:mm a'
              }}</span></p>
        </div>
      </div>
    </div>
  </ion-list>
  <ng-template #noData>
    <p class="ion-text-center" *ngIf="!loader">Conversation not started yet.</p>
  </ng-template>
</ion-content>
<ion-footer *ngIf="userId && !isBlocked">
  <ion-textarea (ionFocus)="scrollToBottom()" autocorrect="on" #text rows="1" [(ngModel)]="messageInput"
    placeholder="Enter any notes here..."></ion-textarea>
  <ion-icon name="send" (click)="sendMessage()"></ion-icon>
</ion-footer>