<ion-card class="detail ion-no-margin ion-margin-bottom ion-no-padding">
  <ion-card-header (click)="postDetail(postData)">
    <ion-card-title class="ion-no-margin d-flex" (click)="$event.stopPropagation()">
      <img [src]="postData?.created_by?.avatar || defaultImg" (click)="moveToProfile()" />
      <div class="post-title">
        <p class="ion-no-margin" (click)="moveToProfile()">{{postData?.created_by?.name}}</p>
        <span *ngIf="postData?.tag_users.length > 0"> with </span>
        <p class="ion-no-margin" (click)="moveToShravak(postData?.tag_users[0]?.id)">{{
          postData?.tag_users[0]?.name }}
        </p>
        <span *ngIf="postData?.tag_users.length > 1" (click)="onModelOpen(postData?.tag_users)"> and
          {{ postData?.tag_users.length-1 }} others</span>
        <span *ngIf="postData?.location"> in </span>
        <p class="ion-no-margin" (click)="address(postData)"> {{ postData?.location }} </p>
        <span>{{ postData?.created_ago }} </span>
      </div>

      <ng-container
        *ngIf="diffPage !== 'post-detail' && (postType !== 'shravak' || userId !== postData.user_id || isEditable)">
        <ion-icon class="ion-no-margin" name="ellipsis-vertical" (click)="openOptions($event)">
        </ion-icon>
        <ion-popover class="content-dropdown" [isOpen]="isOpenOptions" (didDismiss)="isOpenOptions = false"
          [dismissOnSelect]="true" #postOption>
          <ng-template>
            <ion-content>
              <ion-list>
                <ion-item *ngIf="isEditable" [button]="true" [detail]="false" (click)="updatePost(postData);">
                  <ion-icon name="pencil" slot="start" size="small"></ion-icon>
                  <ion-label>Edit post</ion-label>
                </ion-item>
                <ion-item *ngIf="isEditable" [button]="true" [detail]="false" (click)="deletePost(postData.id);">
                  <ion-icon name="trash" slot="start" size="small"></ion-icon>
                  <ion-label>Delete post</ion-label>
                </ion-item>
                <ion-item *ngIf="postType !== 'shravak' || userId !== postData.user_id" [button]="true" [detail]="false"
                  (click)="openReport(postData.id);">
                  <ion-icon name="flag" slot="start" size="small"></ion-icon>
                  <ion-label>Report content</ion-label>
                </ion-item>
                <ion-item *ngIf="postType !== 'shravak' || userId !== postData.user_id" [button]="true" [detail]="false"
                  (click)="hidePost(postData);">
                  <ion-icon name="{{ postData.hide ? 'eye-off' : 'eye' }}" slot="start" size="small"></ion-icon>
                  <ion-label>{{ postData.hide ? 'Show' : 'Hide' }} post</ion-label>
                </ion-item>
              </ion-list>
            </ion-content>
          </ng-template>
        </ion-popover>
      </ng-container>
    </ion-card-title>
    <p class="ion-no-margin">{{ postData?.post_type }}</p>
  </ion-card-header>
  <ion-card-content class="ion-no-padding">
    <div *ngIf="postData.hide; then hiddenPost else normalPost"></div>
    <ng-template #normalPost>
      <div class="img-upload ion-wrap" *ngIf="postData.post_images.length">
        <swiper-container slides-per-view="1" zoom="true" pagination-clickable="true" pagination="true" stretch="0">
          <swiper-slide *ngFor="let image of postData.post_images">
            <div class="slide swiper-zoom-container ion-align-items-center ion-justify-content-center"
              [ngClass]="{'single-slide': postData.post_images.length === 1}">
              <img [src]="image.image_name" (click)="imagePreview(image?.image_name)" />
            </div>
          </swiper-slide>
        </swiper-container>
      </div>
      <div class="ion-margin-vertical post-desc">
        <p class="pre-fill ion-no-padding" #description [ngClass]="{'d-block': showMore}"
          [innerHtml]="postData.description | highlightMentions:postData.mentions | clickableLink | safeHtml">
        </p>
        <a (click)="showMore = !showMore; $event.stopPropagation()" *ngIf="hasMoreDesc" class="show-more-less">Show
          <span>{{ showMore ? 'less' : 'More' }}</span>
        </a>
      </div>
      <div class="footer-icon">
        <div class="footer-icon-wrap">
          <div class="footer-row post-count d-flex ion-align-items-center ion-justify-content-between"
            *ngIf="postData.likes_count || postData.comments_count">
            <div class="d-flex ion-align-items-center">
              <ng-template [ngIf]="postData.likes_count">
                <ion-icon *ngIf="postType === 'shravak'" src="/assets/images/round-like-icon.svg"></ion-icon>
                <ion-icon *ngIf="postType === 'sangh'" src="/assets/images/round-pray-icon.svg"></ion-icon>
                <span>{{ postData.likes_count }}</span>
              </ng-template>
            </div>
            <div class="d-flex ion-align-items-center" *ngIf="postData.comments_count && postType === 'shravak'">
              <span>{{postData.comments_count}} Comments</span>
            </div>
          </div>
          <div class="footer-row d-flex ion-align-items-center ion-justify-content-center">
            <div class="d-flex ion-align-items-center ion-padding-horizontal"
              (click)="likeDislikePost(postData, postData.id); $event.stopPropagation()">
              <div class="icon-wrap d-flex ion-align-items-center ion-justify-content-center">
                <div class="like-btn"
                  [ngClass]="{'filled-like': postData.is_liked, 'effect': toggleLike, 'pray-icon': postType === 'sangh'}">
                </div>
                <span class="like-text">
                  <ng-container *ngIf="postType === 'shravak'">Like</ng-container>
                  <ng-container *ngIf="postType === 'sangh'">Anumodana</ng-container>
                </span>
              </div>
            </div>
            <ng-template [ngIf]="postType !== 'sangh'">
              <div class="d-flex ion-align-items-center ion-padding-horizontal"
                (click)="postDetail(postData); $event.stopPropagation()">
                <ion-icon name="chatbox-outline"></ion-icon>
                <span>Comment</span>
              </div>
            </ng-template>
            <div class="d-flex ion-align-items-center ion-padding-horizontal" (click)="sharePost()">
              <ion-icon name="arrow-redo-outline"></ion-icon>
              <span>Share</span>
            </div>
          </div>
        </div>
      </div>
    </ng-template>
    <ng-template #hiddenPost>
      <div class="post-hidden-message">
        <img class="done-icon" src="/assets/images/done.svg" alt="Done" width="40" height="40" />
        <p>This post has been hidden.</p>
        <ion-button mode="md" class="si undo-btn" expand="inline-block" (click)="hidePost(postData);">Undo</ion-button>
      </div>
    </ng-template>
  </ion-card-content>
</ion-card>
