<div id="popover-content">
  <ng-container *ngIf="org$ | ngrxPush as org">
    <nz-card
      [nzTitle]="cardTitle"
      nzBordered="false"
      id="card-content">
      <!-- title -->
      <ng-template #cardTitle>
        <cvc-user-avatar
          [user]="{
            displayName: org.name,
            profileImagePath: org.profileImagePath
          }"
          size="default"></cvc-user-avatar>
        <span
          nz-typography
          nzStyle="default"
          class="display-name"
          >{{ org.name }}</span
        >
      </ng-template>

      <!-- description -->
      <nz-row>
        <nz-col nzSpan="24">
          <div class="popover-text">
            <p nz-typography>
              <span *ngIf="org.description as desc; else noDesc">{{
                desc
              }}</span>
            </p>
          </div>
        </nz-col>
      </nz-row>

      <nz-descriptions
        nzSize="small"
        [nzColumn]="2"
        nzBordered="true">
        <!-- homepage -->
        <nz-descriptions-item nzTitle="Homepage">
          <ng-container *ngIf="org.url; else noHomepage">
            <cvc-link-tag [href]="org.url">
              {{ org.name }}
            </cvc-link-tag>
          </ng-container>
        </nz-descriptions-item>
      </nz-descriptions>
    </nz-card>
  </ng-container>
</div>
<ng-template #noDesc>
  Organization has not provided a description.
</ng-template>

<ng-template #noHomepage> -- </ng-template>
