<ion-card class="detail ion-no-margin ion-no-padding ion-margin-bottom">
  <ion-card-header class="sant-list d-flex ion-align-items-center">
    <app-avatar-percentage [url]="post?.subject?.avatar ?
      post.subject.avatar : '/assets/images/sant-profile.png'"
      [percentage]="post?.subject?.profile_statistics?.profile_completion_percentage" [width]="42" [height]="42"
      type="sant" (evClick)="santProfile(post.subject.id)"></app-avatar-percentage>
    <ion-card-title class="d-flex ion-align-items-center ion-no-margin">
      <div class="post-title" (click)="santProfile(post.subject.id)">
        <p class="ion-no-margin ion-no-padding">{{post?.subject?.name}}</p>
        <span *ngIf="post?.created_ago">{{ post?.created_ago }}</span>
      </div>
      <ion-icon class="ion-no-margin" name="ellipsis-vertical" id="sant-trigger-button-{{post.id}}"></ion-icon>
      <ion-popover class="content-dropdown" trigger="sant-trigger-button-{{post.id}}" [dismissOnSelect]="true">
        <ng-template>
          <ion-content>
            <ion-list>
              <ion-item [button]="true" [detail]="false" (click)="openReport(post.id);">
                <ion-icon name="flag" slot="start" size="small"></ion-icon>
                <ion-label>Report content</ion-label>
              </ion-item>
              <ion-item [button]="true" [detail]="false" (click)="hidePost(post);">
                <ion-icon name="{{ post.hide ? 'eye-off' : 'eye' }}" slot="start" size="small"></ion-icon>
                <ion-label>{{ post.hide ? 'Show' : 'Hide' }} post</ion-label>
              </ion-item>
            </ion-list>
          </ion-content>
        </ng-template>
      </ion-popover>
    </ion-card-title>
  </ion-card-header>
  <ion-card-content class="ion-no-padding">
    <div *ngIf="post.hide; then hiddenPost else normalPost"></div>
    <ng-template #normalPost>
      <p (click)="post?.causer_id && redirectToUser(post?.causer_id); $event.stopPropagation()">{{
        post?.properties?.attributes?.message }}</p>
    </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(post);">Undo</ion-button>
      </div>
    </ng-template>
  </ion-card-content>
</ion-card>
