<div id="popover-content">
  <ng-container *ngIf="comment$ | ngrxPush as c">
    <nz-card
      [nzTitle]="cardTitle"
      nzBordered="false"
      id="card-content">
      <ng-template #cardTitle>
        <span class="comment-card-title">
          <cvc-user-tag
            [enablePopover]="false"
            [user]="c.commenter"></cvc-user-tag
          >commented on
          @switch (c.commentable.__typename) {
            @case ('Feature') {
              <cvc-feature-tag
                [enablePopover]="false"
                [feature]="c.commentable"></cvc-feature-tag>
            }
            @case ('Assertion') {
              <cvc-assertion-tag
                [enablePopover]="false"
                [assertion]="c.commentable"></cvc-assertion-tag>
            }
            @case ('EvidenceItem') {
              <cvc-evidence-tag
                [enablePopover]="false"
                [evidence]="c.commentable"></cvc-evidence-tag>
            }
            @case ('Variant') {
              <cvc-feature-variant-tag
                [enablePopover]="false"
                [variant]="c.commentable"></cvc-feature-variant-tag>
            }
            <!-- NOTE: #UPDATE had to use $any here, [revision] attr was complaining about
            missing linkableRevision on c.commentable -->
            @case ('Revision') {
              <cvc-revision-tag
                [enablePopover]="false"
                [revision]="$any(c.commentable)"></cvc-revision-tag>
            }
            @case ('Source') {
              <cvc-source-tag
                *ngSwitchCase="'Source'"
                mode="concise"
                [enablePopover]="false"
                [source]="c.commentable"></cvc-source-tag>
            }
            @default {
              {{ c.commentable.name }}
            }
          }
          {{ c.createdAt | timeAgo }}
        </span>
      </ng-template>
      <nz-row>
        <nz-col nzSpan="24">
          <div class="popover-text">
            @if (c.deleted) {
              <span
                nz-typography
                nzType="secondary">
                <i> This comment has been deleted. </i>
              </span>
            } @else {
              <p
                nz-typography
                *ngIf="c.title">
                <b>{{ c.title }}</b>
              </p>
              <p>
                {{ c.comment }}
              </p>
            }
          </div>
        </nz-col>
      </nz-row>
    </nz-card>
  </ng-container>
</div>
