<ng-container *ngIf="assertion$ | async as assertion">
  <cvc-section-navigation
    [displayName]="assertion.name"
    [relationsTpl]="assertionRelations">
  </cvc-section-navigation>
  <ng-template #assertionRelations>
    <nz-space nzDirection="horizontal">
      <!-- parent relations -->
      <span
        nz-typography
        class="label"
        *nzSpaceItem
        ><strong>{{ assertion.name }}</strong> Parents:</span
      >
      <span
        *nzSpaceItem
        class="tags">
        <cvc-molecular-profile-tag
          [molecularProfile]="assertion.molecularProfile"
          [enablePopover]="false"></cvc-molecular-profile-tag>
      </span>
    </nz-space>
  </ng-template>
  <nz-page-header class="site-page-header">
    <!-- title -->
    <nz-page-header-title cvcFlaggableOptions>
      REVISE
      <i
        nz-icon
        nzTheme="twotone"
        [nzTwotoneColor]="'Assertion' | entityColor"
        nzType="civic-assertion"></i>
      {{ assertion.name }}
    </nz-page-header-title>
    <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>
