<div id="popover-content">
  <ng-container *ngIf="user$ | ngrxPush as user">
    <nz-card
      [nzTitle]="cardTitle"
      [nzExtra]="cardExtra"
      nzBordered="false"
      id="card-content"></nz-card>
    <ng-template #cardTitle>
      <cvc-user-avatar
        [user]="user"
        size="default"></cvc-user-avatar>
      <span
        nz-typography
        nzStyle="default"
        class="display-name"
        >{{ user.displayName }}</span
      >
    </ng-template>
    <ng-template #cardExtra>
      <i
        nz-icon
        nzType="civic-admin"></i>
      {{ user.role | titlecase }}
    </ng-template>
    <nz-row>
      <nz-col nzSpan="24">
        <div class="popover-text">
          <p nz-typography>
            <span *ngIf="user.bio as bio; else noBio">{{ bio }}</span>
          </p>
        </div>
      </nz-col>
    </nz-row>
    <nz-row>
      <nz-col nzSpan="24">
        <nz-descriptions
          nzSize="small"
          [nzColumn]="2"
          nzBordered="true">
          <nz-descriptions-item nzTitle="Organizations">
            <cvc-tag-list
              *ngIf="user.organizations.length > 0; else noOrganizations">
              <cvc-organization-tag
                [enablePopover]="false"
                *ngFor="let o of user.organizations"
                [org]="o"></cvc-organization-tag>
            </cvc-tag-list>
          </nz-descriptions-item>
        </nz-descriptions>
      </nz-col>
    </nz-row>
    <nz-row>
      <nz-divider *ngIf="metadataTemplateRef"></nz-divider>
      <ng-container
        [ngTemplateOutlet]="metadataTemplateRef || null"
        [ngTemplateOutletContext]="{ $implicit: user }">
      </ng-container>
    </nz-row>
  </ng-container>
</div>
<ng-template #noBio> User has not provided a biography. </ng-template>
<ng-template #noOrganizations>
  <span
    nz-typography
    nzStyle="secondary"
    >--</span
  >
</ng-template>
