<ion-header>
  <ion-toolbar mode="ios" [ngClass]="{'sangh': postDetail?.type === 3}">
    <ion-buttons slot="start">
      <ion-back-button mode="md" defaultHref="page/shravak-feeds"></ion-back-button>
    </ion-buttons>
    <ion-title class="back-btn">Post detail</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content>
  <div class="bg">
    <div class="bottom-bg-location" [ngClass]="{'sangh': postDetail?.type === 3}">
      <ion-card class="detail" *ngIf="postDetail">
        <app-post [_postData]="postDetail" [_type]="postType" [_currentUserId]="userData?.id"
          [_fromPage]="'post-detail'">
        </app-post>
        <ng-container *ngIf="postDetail?.type !== 3">
          <ion-card-header class="comment" *ngFor="let comment of commentList">
            <ion-card-title>
              <img [src]="comment?.user?.avatar || '/assets/images/shravak-profile.png'" class="img-common"
                (click)="moveToProfile(comment?.user?.id)" />
              <div>
                <div (click)="moveToProfile(comment?.user?.id)">
                  {{comment?.user?.name}}<span>{{ comment?.created_ago }}</span>
                </div>
                <span class="pre-fill">{{comment.showMore ? comment.comment : trimString(comment.comment,100)}}
                  <a (click)="comment.showMore = !comment.showMore; $event.stopPropagation()"
                    *ngIf="comment?.comment?.length > 100">Show
                    <span [innerHtml]="comment.showMore ? 'less' : 'More'"> </span>
                  </a>
                </span>
              </div>
              <ion-icon *ngIf="comment.user_id !== userData.id" name="ellipsis-vertical"
                id="post-comment-button-{{comment.id}}" style="margin-left: auto">
              </ion-icon>
            </ion-card-title>
            <ion-popover *ngIf="comment.user_id !== userData.id" trigger="post-comment-button-{{comment.id}}"
              [dismissOnSelect]="true">
              <ng-template>
                <ion-content>
                  <ion-list>
                    <ion-item [button]="true" [detail]="false" (click)="openReport(comment.id);">
                      <ion-icon name="flag" slot="start" size="small"></ion-icon>
                      <ion-label>Report comment</ion-label>
                    </ion-item>
                  </ion-list>
                </ion-content>
              </ng-template>
            </ion-popover>
          </ion-card-header>
          <ion-infinite-scroll threshold="250px" (ionInfinite)="loadData($event)"
            *ngIf="commentList.length !== totalCommentCount && postDetail?.type !== 3">
            <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
            </ion-infinite-scroll-content>
          </ion-infinite-scroll>
        </ng-container>
      </ion-card>
    </div>
  </div>
</ion-content>
<ion-footer *ngIf="postDetail?.type !== 3">
  <ion-textarea autocorrect="on" #text rows="1" placeholder="Enter comment here..." [(ngModel)]="commentValue"
    maxlength="300"></ion-textarea>
  <ion-icon name="send" (click)="addComment()"></ion-icon>
</ion-footer>
