<ng-container *ngIf="linked; else unlinked">
  <a [routerLink]="source.link">
    <ng-template [ngTemplateOutlet]="tag"></ng-template>
  </a>
</ng-container>

<ng-template #tag>
  <nz-tag
    nz-popover
    [ngClass]="{ deprecated: source.deprecated }"
    [nzPopoverMouseEnterDelay]="0.5"
    [nzPopoverContent]="enablePopover ? sourcePopover : undefined"
    [nzPopoverPlacement]="popoverPlacement">
    <ng-template [ngTemplateOutlet]="tagContent"></ng-template>
  </nz-tag>

  <ng-template #sourcePopover>
    <cvc-source-popover
      [sourceId]="source.id"
      (contentRendered)="updatePopoverPosition()"></cvc-source-popover>
  </ng-template>
</ng-template>

<ng-template #unlinked>
  <ng-template [ngTemplateOutlet]="tag"></ng-template>
</ng-template>

<ng-template #tagContent>
  <i
    nz-icon
    nzTheme="twotone"
    [nzTwotoneColor]="'Source' | entityColor"
    nzType="civic-source"></i>
  <ng-container *ngIf="mode === 'normal'; else concise">
    <ng-container *ngIf="truncateLongName">
      {{ displayName | truncate: 50 }}
    </ng-container>
    <ng-container *ngIf="!truncateLongName">
      {{ displayName }}
    </ng-container>
  </ng-container>
  <ng-template #concise> SID:{{ source.id }} </ng-template>
</ng-template>
