@let entity = assertion();
@let vwr = viewer();
@if (entity) {
  <cvc-section-navigation [displayName]="entity.name"></cvc-section-navigation>
  <div
    cvcEndorsable
    [cvcEndorsableCounts]="endorsableCounts()">
    <nz-page-header class="site-page-header">
      <nz-page-header-title
        [ngClass]="{
          flagged:
            endorsableCounts().endorsements > 0 || endorsableCounts().flags > 0,
        }">
        <i
          nz-icon
          nzTheme="twotone"
          [nzTwotoneColor]="'Assertion' | entityColor"
          nzType="civic-assertion"></i>
        {{ entity.name }}
      </nz-page-header-title>
      <nz-page-header-extra>
        @if (vwr && vwr.signedIn) {
          <nz-space
            nzDirection="horizontal"
            nzSize="small">
            <!-- Revise Button-->
            <button
              *nzSpaceItem
              [routerLink]="['/assertions', entity.id, 'revise']"
              routerLinkActive
              #rlaComments="routerLinkActive"
              [nzType]="rlaComments.isActive ? 'primary' : 'default'"
              nz-button
              nzSize="small">
              Revise
            </button>
            <!-- Flag Button -->
            <button
              *nzSpaceItem
              routerLink="flags"
              routerLinkActive
              #rlaComments="routerLinkActive"
              [nzType]="rlaComments.isActive ? 'primary' : 'default'"
              nz-button
              nzSize="small">
              Flag
            </button>

            <!-- Subscription Button -->
            @if (SUBSCRIBABLE_ENTITY_TYPE) {
              <cvc-entity-subscription-button
                *nzSpaceItem
                [viewer]="vwr"
                [subscribableId]="entity.id"
                [typename]="SUBSCRIBABLE_ENTITY_TYPENAME">
              </cvc-entity-subscription-button>
            }

            <!-- CURATION ACTION BUTTONS-->
            @if (vwr.canModerate) {
              @if (entity.status === 'SUBMITTED') {
                <!-- Revert Button -->
                <cvc-revert-entity-button
                  *nzSpaceItem
                  entityType="Assertion"
                  [entityId]="entity.id"
                  (onReverted)="onRevert($event)">
                </cvc-revert-entity-button>
              }
              <!-- Create Endorsement Button -->
              @if (vwr | canPerformEndorsementActions) {
                <cvc-endorse-assertion-button
                  *nzSpaceItem
                  mode="endorse"
                  [assertionId]="entity.id"
                  [disabled]="!(vwr | canCreateEndorsement: entity)"
                  [tooltipText]="
                    vwr | endorsementActionTooltip: 'create' : entity
                  "
                  (onEndorsed)="onEndorsement($event)">
                </cvc-endorse-assertion-button>
              }
            }
          </nz-space>
        }
      </nz-page-header-extra>
      <nz-page-header-content>
        @let errs = errors();
        @let successMsg = successMessage();
        <div
          nz-flex
          [nzGap]="8"
          nzVertical>
          @for (error of errs; track error) {
            <nz-alert
              nzBanner
              [nzMessage]="error"
              nzType="error"
              nzCloseable
              (nzOnClose)="onErrorBannerClose(error)"></nz-alert>
          }
          @if (successMsg) {
            <nz-alert
              nzBanner
              [nzMessage]="successMsg"
              nzType="success"
              nzCloseable
              (nzOnClose)="onSuccessBannerClose()"></nz-alert>
          }
          @if (entity.status == 'SUBMITTED') {
            <nz-alert
              nzBanner
              nzMessage="This Assertion is in a 'submitted' state and has not yet been reviewed by an editor."
              nzType="warning"></nz-alert>
          }
          @if (entity.status == 'REJECTED') {
            <nz-alert
              nzBanner
              nzMessage="This Assertion has been rejected."
              nzType="error">
            </nz-alert>
          }
          <cvc-tab-navigation [tabs]="tabConfig()">
            <ng-template #tabBarExtraContent>
              <cvc-contributor-avatars
                [subscribable]="subscribableInput()"></cvc-contributor-avatars>
            </ng-template>
          </cvc-tab-navigation>
          @if (vwr && vwr.signedIn && entity.status === 'SUBMITTED') {
            @if (
              vwr.canModerate ||
              vwr.user?.id === entity.submissionEvent.originatingUser.id
            ) {
              <cvc-moderate-entity-buttons
                entityType="Assertion"
                [entityId]="entity.id"
                (onModerated)="onModeration($event)">
              </cvc-moderate-entity-buttons>
            }
          }
        </div>
        <div
          [cvcAutoHeightDiv]="32"
          cvcAutoHeightTarget="viewport">
          <router-outlet></router-outlet>
        </div>
      </nz-page-header-content>
    </nz-page-header>
  </div>
} @else if (this.loading()) {
  <nz-spin nzSimple></nz-spin>
} @else {
  <nz-empty
    nzNotFoundContent="No Assertion found with ID {{
      assertionId
    }} "></nz-empty>
}