@if(variant.__typename == "GeneVariant") {
<nz-card
  [nzTitle]="cardTitle"
  nzType="inner"
  nzSize="small">
  <ng-template #cardTitle>
    <i
      nz-icon
      nzType="civic-variant"
      nzTheme="twotone"
      [nzTwotoneColor]="'Variant' | entityColor"></i>
    {{ variant.name }}
  </ng-template>
  <nz-row [nzGutter]="[8, 16]">
    <nz-col [nzSpan]="24">
      <nz-row [nzGutter]="[8, 8]">
        <!-- gene attributes block -->
        <nz-col nzSpan="24">
          <nz-descriptions
            nzLayout="horizontal"
            nzSize="small"
            [nzColumn]="4"
            nzBordered="true">
            <nz-descriptions-item
              [nzSpan]="4"
              nzTitle="Gene Variant">
              <cvc-feature-variant-tag
                [variant]="variant"></cvc-feature-variant-tag>
            </nz-descriptions-item>
            <!-- aliases -->
            <nz-descriptions-item
              [nzSpan]="2"
              nzTitle="Aliases">
              <ng-container
                *ngIf="variant.variantAliases.length > 0; else noAliases">
                <cvc-tag-list>
                  <nz-tag *ngFor="let alias of variant.variantAliases">{{
                    alias
                  }}</nz-tag>
                </cvc-tag-list>
              </ng-container>
              <ng-template #noAliases>
                <span
                  nz-typography
                  nzType="secondary"
                  >None specified</span
                >
              </ng-template>
            </nz-descriptions-item>

            <!-- variant type(s) -->
            <nz-descriptions-item
              [nzSpan]="2"
              [nzTitle]="
                variant.variantTypes.length > 1
                  ? 'Variant Types'
                  : 'Variant Type'
              ">
              <ng-container
                *ngIf="variant.variantTypes.length > 0; else noTypes">
                <cvc-tag-list>
                  <cvc-variant-type-tag
                    [variantType]="type"
                    *ngFor="let type of variant.variantTypes">
                  </cvc-variant-type-tag>
                </cvc-tag-list>
              </ng-container>
              <ng-template #noTypes>
                <span
                  nz-typography
                  nzType="secondary"
                  >None specified</span
                >
              </ng-template>
            </nz-descriptions-item>

            <!-- allele reg. id -->
            <nz-descriptions-item
              [nzSpan]="2"
              nzTitle="Allele Registry ID">
              <ng-container
                *ngIf="variant.alleleRegistryId; else noAlleleRegistry">
                <cvc-link-tag
                  [href]="
                    'https://reg.genome.network/allele/' +
                    variant.alleleRegistryId +
                    '.html'
                  "
                  tooltip="View on ClinGen Allele Registry">
                  {{ variant.alleleRegistryId }}
                </cvc-link-tag>
              </ng-container>
              <ng-template #noAlleleRegistry>
                <span
                  nz-typography
                  nzType="secondary"
                  >None provided</span
                >
              </ng-template>
            </nz-descriptions-item>

            <!-- clinvar ids-->
            <nz-descriptions-item
              [nzSpan]="2"
              [nzTitle]="
                variant.clinvarIds.length > 1 ? 'ClinVar IDs' : 'ClinVar ID'
              ">
              <ng-container
                *ngIf="variant.clinvarIds.length > 0; else noClinvarIds">
                <cvc-tag-list
                  *ngIf="
                    variant.clinvarIds[0] !== 'N/A';
                    else clinvarNotApplicable
                  ">
                  <ng-container *ngFor="let id of variant.clinvarIds">
                    <cvc-link-tag
                      [href]="
                        'https://www.ncbi.nlm.nih.gov/clinvar/variation/' + id
                      "
                      tooltip="View on ClinVar">
                      {{ id }}
                    </cvc-link-tag>
                  </ng-container>
                </cvc-tag-list>
              </ng-container>

              <ng-template #clinvarNotApplicable>
                <span
                  nz-typography
                  nzType="secondary"
                  >N/A</span
                >
              </ng-template>

              <ng-template #noClinvarIds>
                <span
                  nz-typography
                  nzType="secondary"
                  >None provided</span
                >
              </ng-template>
            </nz-descriptions-item>

            <nz-descriptions-item
              [nzSpan]="2"
              nzTitle="OpenCRAVAT">
              <cvc-link-tag
                *ngIf="variant.openCravatUrl; else noCravat"
                [href]="variant.openCravatUrl"
                tooltip="View on OpenCRAVAT">
                Variant Report
              </cvc-link-tag>
              <ng-template #noCravat>
                <span
                  nz-typography
                  nzType="secondary"
                  >Allele Registry ID required.</span
                >
              </ng-template>
            </nz-descriptions-item>

            <nz-descriptions-item
              [nzSpan]="4"
              *ngIf="displayMps.length > 0"
              nzTitle="Other Molecular Profiles">
              <cvc-tag-list>
                <ng-container *ngFor="let mp of displayMps">
                  <cvc-molecular-profile-tag
                    [molecularProfile]="mp"
                    [truncateLongName]="true"></cvc-molecular-profile-tag>
                </ng-container>
                <ng-container
                  *ngIf="
                    variant.molecularProfiles.totalCount >
                    displayMps.length + 1
                  ">
                  <a routerLink="/variants/{{ variant.id }}/summary">
                    + view
                    {{
                      variant.molecularProfiles.totalCount -
                        displayMps.length
                    }}
                    more
                  </a>
                </ng-container>
              </cvc-tag-list>
            </nz-descriptions-item>
          </nz-descriptions>
        </nz-col>

        <!-- coordinates -->
        <nz-col [nzSpan]="24">
          <nz-collapse>
            <nz-collapse-panel nzHeader="Representative Variant Coordinates">
              <cvc-coordinates-card
                [displayTitle]="false"
                [cvcCoordinates]="variant"></cvc-coordinates-card>
            </nz-collapse-panel>
          </nz-collapse>
        </nz-col>
      </nz-row>
    </nz-col>
  </nz-row>
</nz-card>
}