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

  <nz-page-header class="site-page-header">
    <nz-page-header-content>
      <nz-row
        [nzGutter]="[8, 8]"
        class="profile-content">
        <!-- avatar column -->
        <nz-col nzFlex="0 1 128px">
          <nz-space nzDirection="vertical">
            <cvc-user-avatar
              [user]="user"
              shape="square"
              [size]="128"
              *nzSpaceItem></cvc-user-avatar>
            <div
              class="user-pseudo-tag"
              *nzSpaceItem>
              <i
                nz-icon
                [nzType]="'civic-' + (user.role | lowercase)"
                nzTheme="twotone"
                [nzTwotoneColor]="user.role | titlecase | entityColor"></i>
              <span nz-typography>
                <strong> {{ user.username }}</strong>
              </span>
            </div>
            <div *nzSpaceItem>
              <nz-descriptions
                nzLayout="vertical"
                nzSize="small"
                [nzBordered]="true"
                [nzColumn]="1">
                <!-- username -->
                <nz-descriptions-item
                  *ngIf="user.name"
                  nzTitle="Name">
                  {{ user.name }}
                </nz-descriptions-item>

                <!-- role -->
                <nz-descriptions-item nzTitle="Role">
                  {{ user.role | enumToTitle }}
                </nz-descriptions-item>
                <nz-descriptions-item nzTitle="Personal Links">
                  <div
                    class="user-socials"
                    *ngIf="
                      user.url ||
                        user.twitterHandle ||
                        user.facebookProfile ||
                        user.linkedinProfile ||
                        user.orcid;
                      else noLinks
                    ">
                    <ng-container *ngIf="user.url">
                      <a
                        href="https://{{ user.url }}"
                        target="_blank"
                        nz-tooltip
                        nzTooltipTitle="Personal Website">
                        <i
                          nz-icon
                          nzType="link"
                          nzTheme="outline"></i>
                      </a>
                    </ng-container>
                    <ng-container *ngIf="user.twitterHandle">
                      <a
                        href="http://twitter.com/{{ user.twitterHandle }}"
                        target="_blank"
                        nz-tooltip
                        nzTooltipTitle="Twitter Profile">
                        <i
                          nz-icon
                          nzType="twitter"
                          nzTheme="outline"></i>
                      </a>
                    </ng-container>

                    <ng-container *ngIf="user.facebookProfile">
                      <a
                        href="http://facebook.com/{{ user.facebookProfile }}"
                        target="_blank"
                        nz-tooltip
                        nzTooltipTitle="Facebook Profile">
                        <i
                          nz-icon
                          nzType="facebook"
                          nzTheme="outline"></i>
                      </a>
                    </ng-container>

                    <ng-container *ngIf="user.linkedinProfile">
                      <a
                        href="http://linkedin.com/in/{{ user.linkedinProfile }}"
                        target="_blank"
                        nz-tooltip
                        nzTooltipTitle="LinkedIn Profile">
                        <i
                          nz-icon
                          nzType="linkedin"
                          nzTheme="outline"></i>
                      </a>
                    </ng-container>
                    <ng-container *ngIf="user.orcid">
                      <a
                        href="https://orcid.org/{{ user.orcid }}"
                        target="_blank"
                        nz-tooltip
                        nzTooltipTitle="ORCiD Record">
                        <i
                          nz-icon
                          nzType="civic-orcid"
                          nzTheme="outline">
                        </i>
                      </a>
                    </ng-container>
                  </div>
                  <ng-template #noLinks>
                    <i
                      nz-typography
                      nzType="secondary">
                      None provided
                    </i>
                  </ng-template>
                </nz-descriptions-item>
              </nz-descriptions>
            </div>
            <ng-container *ngIf="ownProfile$ | ngrxPush">
              <button
                *nzSpaceItem
                nz-button
                nzSize="small"
                nzType="primary"
                nzBlock
                (click)="updateProfileModalVisible = true">
                Edit Profile
              </button>
              <cvc-avatar-uploader
                *nzSpaceItem
                (uploadComplete)="profileUploadComplete($event)">
              </cvc-avatar-uploader>
              <button
                *nzSpaceItem
                nz-button
                nzSize="small"
                nzType="primary"
                nzBlock
                (click)="manageApiKeysModalVisible = true">
                Manage API Keys
              </button>
            </ng-container>
          </nz-space>
        </nz-col>

        <!-- bio, organizations, COI column -->
        <nz-col nzFlex="1 1 400px">
          <nz-space
            nzDirection="vertical"
            style="width: 100%">
            <nz-descriptions
              nzLayout="vertical"
              nzSize="small"
              nzBordered="true"
              [nzColumn]="4"
              *nzSpaceItem>
              <nz-descriptions-item
                nzTitle="Biography"
                nzSpan="4">
                <ng-container *ngIf="user.bio">
                  {{ user.bio }}
                </ng-container>
                <ng-container *ngIf="!user.bio">
                  <span
                    nz-typography
                    nzType="secondary">
                    <i>User has not provided a bio.</i>
                  </span>
                </ng-container>
              </nz-descriptions-item>

              <nz-descriptions-item
                [nzSpan]="2"
                nzTitle="Area of Expertise">
                <ng-container *ngIf="user.areaOfExpertise">
                  {{ user.areaOfExpertise | enumToTitle }}
                </ng-container>
                <ng-container *ngIf="!user.areaOfExpertise">
                  <span
                    nz-typography
                    nzType="secondary">
                    <i>Unspecified</i>
                  </span>
                </ng-container>
              </nz-descriptions-item>

              <nz-descriptions-item
                [nzSpan]="2"
                nzTitle="Country">
                <ng-container *ngIf="user.country">
                  {{ user.country.name }}
                </ng-container>
                <ng-container *ngIf="!user.country">
                  <span
                    nz-typography
                    nzType="secondary">
                    <i>Unspecified</i>
                  </span>
                </ng-container>
              </nz-descriptions-item>

              <nz-descriptions-item
                [nzSpan]="4"
                [nzTitle]="
                  'Organization' + (user.organizations.length > 1 ? 's' : '')
                ">
                <ng-container *ngIf="user.organizations.length > 0">
                  <cvc-tag-overflow
                    tagType="organization"
                    [maxDisplayCount]="2"
                    [tags]="organization$ | ngrxPush">
                  </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>
            </nz-descriptions>

            <!-- Editor COI card -->
            <ng-container
              *ngIf="user.role === 'EDITOR' || user.role === 'ADMIN'">
              <nz-card
                class="editor-coi-card"
                [nzTitle]="statementTitle"
                nzSize="small"
                [nzExtra]="updateCoi"
                *nzSpaceItem>
                <ng-template #statementTitle>
                  <i
                    nz-icon
                    [nzType]="'civic-' + (user.role | lowercase)"
                    nzTheme="twotone"
                    [nzTwotoneColor]="user.role | titlecase | entityColor"></i>
                  Editor Conflict of Interest Statement
                </ng-template>
                <ng-template #updateCoi>
                  <ng-container *ngIf="ownProfile$ | ngrxPush">
                    <button
                      nz-button
                      nzType="primary"
                      nzSize="small"
                      (click)="updateCoiModalVisible = true">
                      Update COI
                    </button>
                  </ng-container>
                </ng-template>
                <nz-descriptions
                  [nzBordered]="true"
                  [nzColumn]="3"
                  class="user-coi"
                  nzLayout="horizontal"
                  nzSize="small">
                  <ng-container
                    *ngIf="user.mostRecentConflictOfInterestStatement">
                    <nz-descriptions-item
                      [nzSpan]="1"
                      nzTitle="Status">
                      {{
                        user.mostRecentConflictOfInterestStatement.coiStatus
                          | enumToTitle
                      }}
                    </nz-descriptions-item>
                    <nz-descriptions-item
                      [nzSpan]="1"
                      nzTitle="Updated">
                      {{
                        user.mostRecentConflictOfInterestStatement.createdAt
                          | date: 'shortDate'
                      }}
                    </nz-descriptions-item>
                    <nz-descriptions-item
                      [nzSpan]="1"
                      nzTitle="Expires">
                      {{
                        user.mostRecentConflictOfInterestStatement.expiresAt
                          | date: 'shortDate'
                      }}
                    </nz-descriptions-item>
                    <nz-descriptions-item
                      [nzSpan]="3"
                      nzTitle="Statement">
                      <ng-container
                        *ngIf="
                          user.mostRecentConflictOfInterestStatement.coiPresent;
                          else noStatement
                        ">
                        {{
                          user.mostRecentConflictOfInterestStatement
                            .coiStatement
                        }}
                      </ng-container>
                      <ng-template #noStatement>
                        I do not have any potential conflicts of interest.
                      </ng-template>
                    </nz-descriptions-item>
                  </ng-container>
                  <ng-container
                    *ngIf="!user.mostRecentConflictOfInterestStatement">
                    <nz-descriptions-item
                      [nzSpan]="3"
                      nzTitle="Status">
                      None on file.
                    </nz-descriptions-item>
                  </ng-container>
                </nz-descriptions>
              </nz-card>
            </ng-container>
          </nz-space>
        </nz-col>

        <!-- stats column -->
        <nz-col nzFlex="0 1 150px">
          <nz-descriptions
            nzSize="small"
            nzLayout="vertical"
            nzBordered="true">
            <nz-descriptions-item [nzTitle]="activitiesTitle">
              <cvc-stats-card
                [cvcStats]="user.statsHash"
                [cvcRanks]="user.ranks"></cvc-stats-card>
            </nz-descriptions-item>
            <ng-template #activitiesTitle>
              <div
                style="white-space: nowrap"
                nz-popover
                nzPopoverTitle="How Activity Rankings are Calculated"
                [nzPopoverContent]="rankingCalculations"
                nzPopoverPlacement="leftTop">
                Ranked Activities
                <span
                  nz-typography
                  nzType="secondary">
                  <i
                    nz-icon
                    nzType="info-circle"
                    nzTheme="outline"></i>
                </span>
              </div>

              <ng-template #rankingCalculations>
                <div class="calculation-info">
                  <p>
                    <strong>Comments:</strong> Total number of Comments posted
                    by the Curator.
                  </p>
                  <p>
                    <strong>Revisions:</strong> Total number of Revisions
                    suggested by the Curator.
                  </p>
                  <p>
                    <strong>Submissions:</strong> Total number of Evidence Items
                    and Assertions submitted by the Curator.
                  </p>
                  <p>
                    <strong>Moderations:</strong> Total number of editorial
                    actions made by the Curator. This includes accepting and
                    rejecting Revisions, Evidence, and Assertions.
                  </p>
                </div>
              </ng-template>
            </ng-template>
          </nz-descriptions>
        </nz-col>
      </nz-row>
      <nz-row style="margin-top: 16px">
        <nz-col nzSpan="24">
          <cvc-tab-navigation [tabs]="tabs$ | ngrxPush"> </cvc-tab-navigation>
          <div class="content">
            <router-outlet></router-outlet>
          </div>
        </nz-col>
      </nz-row>
    </nz-page-header-content>
  </nz-page-header>
  <nz-modal
    [(nzVisible)]="updateProfileModalVisible"
    [nzContent]="profileModalContent"
    [nzTitle]="profileModalTitle"
    [nzFooter]="null"
    (nzOnCancel)="handleProfileModalCancel()">
    <ng-template #profileModalTitle><span>Edit Profile</span></ng-template>
    <ng-template #profileModalContent>
      <cvc-user-profile-form
        [user]="user"
        (profileUpdatedEvent)="profileUpdated()"></cvc-user-profile-form>
    </ng-template>
  </nz-modal>
</ng-container>

<nz-modal
  [(nzVisible)]="manageApiKeysModalVisible"
  [nzContent]="apiKeysModalContent"
  [nzTitle]="apiKeysModalTitle"
  [nzFooter]="null"
  (nzOnCancel)="manageApiKeysModalVisible = false">
  <ng-template #apiKeysModalTitle><span>Manage API Keys</span></ng-template>
  <ng-template #apiKeysModalContent>
    <cvc-user-api-keys-form></cvc-user-api-keys-form>
  </ng-template>
</nz-modal>

<nz-modal
  [(nzVisible)]="updateCoiModalVisible"
  [nzContent]="coiModalContent"
  [nzTitle]="coiModalTitle"
  [nzFooter]="null"
  (nzOnCancel)="handleCoiModalCancel()">
  <ng-template #coiModalTitle
    ><span>Update your Conflict of Interest Statement</span></ng-template
  >
  <ng-template #coiModalContent>
    <cvc-user-coi-form
      (coiUpdatedEvent)="coiUpdated()"></cvc-user-coi-form>
  </ng-template>
</nz-modal>
