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

  <nz-page-header class="site-page-header">
    <!-- title -->
    <nz-page-header-title cvcFlaggableOptions>
      REVISE
      <i
        nz-icon
        nzTheme="twotone"
        [nzTwotoneColor]="'Variant' | entityColor"
        nzType="civic-variant"></i>
      <span nz-typography nzType="secondary"> {{ variant.feature.name }} </span>
      {{ variant.name }}
    </nz-page-header-title>

    <!-- subtitle -->
    <nz-page-header-subtitle *ngIf="variant.variantAliases.length > 0">
      <span *ngFor="let alias of variant.variantAliases; 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>
