
<mat-dialog-content class="knk-dialog-content">
  <div class="profile-knok" fxFlex="1 1 100" fxLayout="column" fxLayoutAlign="space-between stretch" fxFlexFill>
    <div class="profile-knok__header" fxLayout="row">
      <div fxFlex="1 1 50" fxLayoutAlign="start center">
        <div class="profile-knok__top-gainer"><i class="material-icons">star</i><span> TOP GAINER</span></div>
      </div>
      <div fxFlex="1 1 50" fxLayoutAlign="end center">
        <ng-container *ngIf="!isFollowed &amp;&amp; data?.userId !== data?.currentUserId">
          <button class="knk-button knk-button--filled knk-button--rounded knk-button--follow" (click)="followUser(data)" mdbWavesEffect>Follow</button>
        </ng-container>
        <ng-container *ngIf="isFollowed &amp;&amp; data?.userId !== data?.currentUserId">
          <button class="knk-button knk-button--filled knk-button--rounded knk-button--follow" (click)="unfollowUser(data)" mdbWavesEffect>Unfollow</button>
        </ng-container>
        <div fxFlex="1 1 20px"></div><i class="material-icons profile-knok__btn-close" (click)="close()" role="button" aria-pressed="false" aria-label="Close popup" tabindex="0">highlight_off</i>
      </div>
    </div>
    <div class="profile-knok-user profile-knok-user--border-line" fxLayout="row">
      <div fxFlex="1 1 50" fxLayoutAlign="start center">
        <div class="profile-knok-user__avatar"><i class="material-icons profile-knok-user__avatar-image profile-knok-user__avatar-image--icon" *ngIf="!data?.hasAvatar">account_circle</i><img class="profile-knok-user__avatar-image" *ngIf="data?.hasAvatar" [src]="avatarHref"></div>
        <div class="profile-knok-user__name">{{!data?.firstName && !data?.lastName ? data?.userName : data?.firstName}} {{data?.lastName}}</div>
        <div fxFlex="1 1 50px"></div>
      </div>
      <div fxFlex="1 1 50" fxLayoutAlign="start center">
        <div>
          <div class="profile-knok-user__label">Followers</div>
          <div class="profile-knok-user__followers">{{userFollowers}}</div>
        </div>
        <div fxFlex="1 1 50px"></div>
        <div>
          <div class="profile-knok-user__label">Knokser</div>
          <div class="profile-knok-user__raiting">{{rankValue}}</div>
        </div>
        <div fxFlex="1 1 50px"></div>
        <div>
          <div class="profile-knok-user__label profile-knok-user__label--opaque">In the top 20%</div>
          <div><i class="material-icons profile-knok-user__rate" *ngFor="let rate of ratingValue">{{rate === 1 ? 'person' : 'person_outline'}}</i></div>
        </div>
      </div>
    </div>
    <div class="profile-knok-user-activity profile-knok-user-activity--border-line" fxLayout="row">
      <div fxLayout="row" fxFlexFill>
        <div class="profile-knok-user-activity__tile" fxFlex="1 1 28">
          <div class="profile-knok-user-activity__label">Active for</div>
          <div class="profile-knok-user-activity__record">{{activeFor}}</div>
        </div>
        <div class="profile-knok-user-activity__tile" fxFlex="1 1 22">
          <div class="profile-knok-user-activity__label">Published Knoks</div>
          <div class="profile-knok-user-activity__record">{{publishedKnoks | number: '.0-0'}}</div>
        </div>
        <div class="profile-knok-user-activity__tile" fxFlex="1 1 18">
          <div class="profile-knok-user-activity__label">Bought by</div>
          <div class="profile-knok-user-activity__record">{{boughtBy  | number: '.0-0'}}</div>
        </div>
        <div class="profile-knok-user-activity__tile" fxFlex="1 1 32">
          <div class="profile-knok-user-activity__label">Success sequence</div>
          <div class="profile-knok-user-activity__record">{{successSequence | number: '.0-0'}}</div>
        </div>
      </div>
    </div>
    <div class="profile-knok-user-history" fxLayout="row">
      <div fxFlex="1 1 80">
        <mat-tab-group class="knk-tab-group" [(selectedIndex)]="activityTabIndex" (selectedTabChange)="initChart()">
          <mat-tab label="Last 3 Months">
            <ng-container *ngIf="activityTabIndex === 0; then chartContent"></ng-container>
          </mat-tab>
          <mat-tab label="All Activity">
            <ng-container *ngIf="activityTabIndex === 1; then chartContent"></ng-container>
          </mat-tab>
          <ng-template #chartContent>
            <div class="profile-knok-user-history__chart">
              <canvas #canvas>{{chart}}</canvas>
            </div>
          </ng-template>
        </mat-tab-group>
      </div>
      <div class="profile-knok-user-history__slab" fxFlex="1 1 20" fxLayout="column">
        <div fxFlex="1 1 50px"></div>
        <div>
          <div class="profile-knok-user-history__circle profile-knok-user-history__circle--success"></div>
          <div class="profile-knok-user-history__label">success rate</div>
          <div class="profile-knok-user-history__record profile-knok-user-history__record--success">{{successRate | number: '.0-0'}}%</div>
        </div>
        <div fxFlex="1 1 35px"></div>
        <div>
          <div class="profile-knok-user-history__circle profile-knok-user-history__circle--avg"></div>
          <div class="profile-knok-user-history__label">avg. distance from target</div>
          <div class="profile-knok-user-history__record profile-knok-user-history__record--avg">{{distanceFromTarget | number: '.0-0'}}%</div>
        </div>
      </div>
    </div>
  </div>
</mat-dialog-content>