<nz-card
  nzSize="small"
  [nzActions]="[
    personalLink,
    orcidLink,
    linkedinLink,
    facebookLink,
    twitterLink
  ]">
  <nz-card-meta
    [nzTitle]="user.name ? user.name : user.displayName"
    [nzDescription]="userTag"
    [nzAvatar]="userAvatar">
  </nz-card-meta>
  <ng-template #userAvatar>
    <cvc-user-avatar
      [user]="user"
      shape="square"
      [size]="48"></cvc-user-avatar>
  </ng-template>
  <ng-template #userTag>
    <cvc-user-tag
      [user]="user"
      [enablePopover]="false">
    </cvc-user-tag>
  </ng-template>
  <div class="user-card-content">
    <nz-descriptions
      nzBordered
      nzSize="small"
      [nzColumn]="2"
      nzLayout="vertical">
      <nz-descriptions-item
        nzTitle="Role"
        [nzSpan]="1">
        {{ user.role | titlecase }}
      </nz-descriptions-item>
      <nz-descriptions-item
        nzTitle="Expertise"
        [nzSpan]="1">
        <ng-container *ngIf="user.areaOfExpertise; else noneProvided">
          {{ user.areaOfExpertise | enumToTitle }}
        </ng-container>
      </nz-descriptions-item>
      <nz-descriptions-item
        [nzSpan]="2"
        [nzTitle]="'Organization' + (organizations.length > 1 ? 's' : '')">
        <ng-container *ngIf="user.organizations.length > 0">
          <cvc-tag-overflow
            tagType="organization"
            [maxDisplayCount]="2"
            [tags]="organizations">
          </cvc-tag-overflow>
        </ng-container>
        <ng-container *ngIf="user.organizations.length === 0">
          <span
            nz-typography
            nzType="secondary">
            <i>User is not a member of any Organizations.</i>
          </span>
        </ng-container>
      </nz-descriptions-item>
      <ng-template #noneProvided>
        <i
          nz-typography
          nzType="secondary">
          None provided
        </i>
      </ng-template>
    </nz-descriptions>
  </div>
</nz-card>
<ng-template #personalLink>
  <a
    *ngIf="user.url; else noPersonalLink"
    href="https://{{ user.url }}"
    target="_blank"
    nz-tooltip
    nzTooltipTitle="Personal Website">
    <i
      nz-icon
      nzType="link"
      nzTheme="outline"></i>
  </a>
  <ng-template #noPersonalLink>
    <i
      nz-icon
      nzType="link"
      nzTheme="outline"
      style="color: #aaaaaa"></i>
  </ng-template>
</ng-template>
<ng-template #twitterLink>
  <a
    *ngIf="user.twitterHandle; else noTwitterLink"
    href="http://twitter.com/{{ user.twitterHandle }}"
    target="_blank"
    nz-tooltip
    nzTooltipTitle="Twitter Profile">
    <i
      nz-icon
      nzType="twitter"
      nzTheme="outline"></i>
  </a>
  <ng-template #noTwitterLink>
    <i
      nz-icon
      nzType="twitter"
      nzTheme="outline"
      style="color: #aaaaaa"></i>
  </ng-template>
</ng-template>
<ng-template #facebookLink>
  <a
    *ngIf="user.facebookProfile; else noFacebookLink"
    href="http://facebook.com/{{ user.facebookProfile }}"
    target="_blank"
    nz-tooltip
    nzTooltipTitle="Facebook Profile">
    <i
      nz-icon
      nzType="facebook"
      nzTheme="outline"></i>
  </a>
  <ng-template #noFacebookLink>
    <i
      nz-icon
      nzType="facebook"
      nzTheme="outline"
      style="color: #aaaaaa"></i>
  </ng-template>
</ng-template>
<ng-template #linkedinLink>
  <a
    *ngIf="user.linkedinProfile; else noLinkedinLink"
    href="http://linkedin.com/in/{{ user.linkedinProfile }}"
    target="_blank"
    nz-tooltip
    nzTooltipTitle="LinkedIn Profile">
    <i
      nz-icon
      nzType="linkedin"
      nzTheme="outline"></i>
  </a>
  <ng-template #noLinkedinLink>
    <i
      nz-icon
      nzType="linkedin"
      nzTheme="outline"
      style="color: #aaaaaa"></i>
  </ng-template>
</ng-template>
<ng-template #orcidLink>
  <a
    *ngIf="user.orcid; else noOrcidLink"
    href="https://orcid.org/{{ user.orcid }}"
    target="_blank"
    nz-tooltip
    nzTooltipTitle="ORCiD Record">
    <i
      nz-icon
      nzType="civic-orcid"
      nzTheme="outline">
    </i>
  </a>
  <ng-template #noOrcidLink>
    <i
      nz-icon
      nzType="civic-orcid"
      nzTheme="outline"
      style="color: #aaaaaa"></i>
  </ng-template>
</ng-template>
