<a [routerLink]="comment.link">
  <ng-template [ngTemplateOutlet]="tag"></ng-template>
</a>

<ng-template #tag>
  <nz-tag
    nz-popover
    [nzPopoverMouseEnterDelay]="0.5"
    nzPopoverPlacement="right"
    [nzPopoverContent]="enablePopover ? commentPopover : undefined">
    <ng-template [ngTemplateOutlet]="tagContent"></ng-template>
  </nz-tag>

  <ng-template #commentPopover>
    <cvc-comment-popover [commentId]="comment.id"></cvc-comment-popover>
  </ng-template>
</ng-template>

<ng-template #noPopover>
  <nz-tag>
    <ng-template [ngTemplateOutlet]="tagContent"></ng-template>
  </nz-tag>
</ng-template>

<ng-template #tagContent>
  <i
    nz-icon
    nzType="civic-comment"
    nzTheme="twotone"
    nzTwotoneColor="#44D8EF"></i>
  {{ comment.name }}
</ng-template>
