<ng-container *ngIf="molecularProfile$ | async as mp">
  <cvc-section-navigation [displayName]="mp.name"> </cvc-section-navigation>

  <nz-page-header class="site-page-header">
    <!-- title -->
    <nz-page-header-title cvcFlaggableOptions>
      REVISE
      <i
        nz-icon
        nzType="civic:molecularprofile"></i>
      {{ mp.name }}
    </nz-page-header-title>

    <!-- subtitle -->
    <nz-page-header-subtitle *ngIf="mp.molecularProfileAliases.length > 0">
      <span *ngFor="let alias of mp.molecularProfileAliases; last as isLast">
        {{alias}}<span *ngIf="!isLast">,&nbsp;</span>
      </span>
    </nz-page-header-subtitle>

    <nz-page-header-content>
      <div class="content">
        <div *ngIf="isSignedIn$ | ngrxPush as isSignedIn; else notSignedIn">
          <router-outlet></router-outlet>
        </div>
        <ng-template #notSignedIn>
          <nz-row
            nzSpan="24"
            nzJustify="center">
            <div
              nz-col
              nzSpan="6">
              <cvc-login-prompt></cvc-login-prompt>
            </div>
          </nz-row>
        </ng-template>
      </div>
    </nz-page-header-content>
  </nz-page-header>
</ng-container>
