<ng-container *ngIf="phenotype$ | ngrxPush as phenotype">
  <cvc-section-navigation [displayName]="phenotype.name">
  </cvc-section-navigation>
  <nz-page-header class="site-page-header">
    <nz-page-header-title>
      <i
        nz-icon
        nzTheme="twotone"
        [nzTwotoneColor]="'Phenotype' | entityColor"
        nzType="civic-phenotype"></i>
      {{ phenotype.name }}
    </nz-page-header-title>
    <nz-page-header-extra>
      <cvc-link-tag
        [href]="phenotype.url"
        tooltip="View in the HPO">
        {{ phenotype.hpoId }}
      </cvc-link-tag>
    </nz-page-header-extra>
    <nz-page-header-content>
      <div class="content">
        <nz-space nzDirection="vertical" style="width: 100%;">
          <nz-descriptions *nzSpaceItem [nzBordered]="true" nzLayout="vertical" [nzColumn]="1">
            <nz-descriptions-item nzTitle="Definition">
              {{phenotype.description | ifEmpty: '--'}}
            </nz-descriptions-item>
          </nz-descriptions>
          <p *nzSpaceItem></p>
        </nz-space>
        <router-outlet></router-outlet>
      </div>
    </nz-page-header-content>
  </nz-page-header>
</ng-container>
