<div id="popover-content">
  @let variant = variant$ | async;
  @if (variant) {
    <nz-card
      [nzTitle]="cardTitle"
      nzBordered="false"
      id="card-content"
      [nzExtra]="cardExtra">
      <ng-template #cardTitle>
        <i
          nz-icon
          nzTheme="twotone"
          [nzTwotoneColor]="'Variant' | entityColor"
          nzType="civic-variant"></i>
        {{ variant.name }}
      </ng-template>
      <ng-template #feature>
        <cvc-feature-tag
          [enablePopover]="false"
          [feature]="variant.feature"></cvc-feature-tag>
      </ng-template>

      <nz-descriptions
        nzSize="small"
        nzLayout="horizontal"
        [nzColumn]="1"
        nzBordered="true">
        <!-- VICC compliant name -->
        <nz-descriptions-item
          nzTitle="VICC compliant name"
          nzSpan="1"
          *ngIf="variant.__typename == 'FusionVariant'">
          {{ variant.viccCompliantName }}
        </nz-descriptions-item>
        <!-- aliases -->
        <nz-descriptions-item
          nzTitle="Aliases"
          nzSpan="1"
          *ngIf="variant.variantAliases.length > 0">
          <nz-tag *ngFor="let alias of variant.variantAliases">{{
            alias
          }}</nz-tag>
        </nz-descriptions-item>

        <!-- allele registry-->
        <nz-descriptions-item
          nzTitle="Allele Registry ID"
          nzSpan="1"
          *ngIf="
            variant.__typename == 'GeneVariant' &&
            variant.alleleRegistryId &&
            variant.alleleRegistryId != 'unregistered'
          ">
          <cvc-link-tag
            href="https://reg.genome.network/allele/{{
              variant.alleleRegistryId
            }}.html"
            tooltip="View on the ClinGen Allele Registry">
            {{ variant.alleleRegistryId }}
          </cvc-link-tag>
        </nz-descriptions-item>

        <!-- evidence item count -->
        <nz-descriptions-item
          nzTitle="Molecular Profiles"
          nzSpan="1">
          {{ variant.molecularProfiles.totalCount }}
        </nz-descriptions-item>
      </nz-descriptions>
    </nz-card>
    <ng-template #cardExtra>
      <cvc-entity-child-counts
        [cvcEntity]="variant"
        cvcRoute="variants"></cvc-entity-child-counts>
    </ng-template>
  }
</div>
