
<div fxLayout="row" fxFlex="1 1 100" fxLayoutGap="15px" fxFlexFill [style.maxWidth.px]="1300" [style.margin]="'auto'">
  <div class="discover-user mdc-elevation-transition" fxLayout="column" fxLayoutAlign="space-between stretch" fxLayoutGap="10px" fxFlex="1 1 25" [ngClass]="{'discover-user--highlight': isMine}" (click)="showProfile()">
    <div fxLayout="row" fxLayoutAlign="space-between start" fxLayoutGap="20px" fxFlex="1 1 auto">
      <div fxFlex="1 1 40">
        <div class="discover-user__avatar"><i class="material-icons discover-user__avatar-image discover-user__avatar-image--icon" *ngIf="!item?.knoker?.hasAvatar">account_circle</i><img class="discover-user__avatar-image" *ngIf="item?.knoker?.hasAvatar" [src]="avatarHref"></div>
      </div>
      <div fxFlex="1 1 60">
        <div class="discover-user__name">
          <div>{{!item?.knoker?.firstName && !item?.knoker?.lastName ? item?.knoker?.userName : item?.knoker?.firstName}}</div>
          <div>{{item?.knoker?.lastName}}</div>
        </div>
      </div>
    </div>
    <div fxLayout="row" fxLayoutAlign="space-between end" fxLayoutGap="20px" fxFlex="1 1 auto">
      <div fxFlex="1 1 40">
        <div class="discover-user__label">Followers</div>
        <div class="discover-user__followers">{{item?.knoker?.userFollowers}}</div>
      </div>
      <div fxFlex="1 1 60">
        <div class="discover-user__label">Knokser</div>
        <div class="discover-user__raiting">{{rankValue}}</div>
      </div>
    </div>
  </div>
  <div class="discover-knok mdc-elevation-transition" fxLayout="column" fxFlex="1 1 75" [ngClass]="{'discover-knok--highlight': item?.knok?.isBought}">
    <div class="discover-knok__header" fxFlex="1 1 50px">
      <div fxLayout="row" fxLayoutGap="30px" fxFlexFill>
        <div fxFlex fxLayoutAlign="start center" fxLayoutGap="15px">
          <div class="discover-knok__trading">{{item?.knok?.marketDisplayName}}</div>
          <div class="discover-knok__exchange">{{item?.knok?.exchangeName}}</div>
        </div>
        <div fxFlex fxLayoutAlign="end center" fxLayoutGap="15px">
          <div class="discover-knok__mine" *ngIf="isMine">My Knok</div><i class="discover-knok__save" (click)="saved = !saved">
            <svg class="knk-svg-icon knk-svg-icon--save" xmlns="http://www.w3.org/2000/svg" width="61" height="58" fill="none" viewBox="0 0 61 58" [ngClass]="{'knk-svg-icon--pressed': saved}">
              <g fill-rule="evenodd" clip-rule="evenodd" filter="url(#s)">
                <path class="knk-svg-icon__stroke knk-svg-icon__fill" d="M30.173 34.299l6.114 3.42-1.617-6.451 5.396-4.339-7.114-.566-2.779-6.083-2.779 6.083-7.114.566 5.397 4.339-1.617 6.452 6.113-3.421z"></path>
              </g>
              <defs>
                <filter id="s" width="61" height="58" x="0" y="0" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
                  <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
                  <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 255 0"></feColorMatrix>
                  <feOffset></feOffset>
                  <feGaussianBlur stdDeviation="10"></feGaussianBlur>
                  <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0"></feColorMatrix>
                  <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend>
                  <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend>
                </filter>
              </defs>
            </svg></i><i class="material-icons discover-knok__btn-menu" [matMenuTriggerFor]="menu">more_vert</i>
          <mat-menu #menu="matMenu" yPosition="below" xPosition="before">
            <div mat-menu-item>
              <mat-icon>share</mat-icon><span>Share &amp; Reward</span>
            </div>
            <div mat-menu-item>
              <mat-icon>flag</mat-icon><span>Report Abuse</span>
            </div>
          </mat-menu>
        </div>
      </div>
    </div>
    <div class="discover-knok__body" fxFlex="1 1 calc(100% - 50px)" fxLayoutAlign="space-between stretch">
      <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between stretch" fxFlexFill>
        <div class="discover-knok__tile" fxFlex="1 1 28" fxLayout="column" fxLayoutAlign="space-between start">
          <div class="discover-knok__label">Potential Profit</div>
          <div class="discover-knok__profit">{{profitValue}}</div>
          <div class="discover-knok__touched" *ngIf="item.knok.entryPriceTouched">Entry Price Touched</div>
        </div>
        <div class="discover-knok__tile" fxFlex="1 1 22" fxLayout="column" fxLayoutAlign="space-between start">
          <div class="discover-knok__label">Analysis</div>
          <div>
            <ng-template #taTooltipTpl>
              <div class="discover-knok__tooltiptext-info"><i class="material-icons">error_outline</i>&#160;Info</div>
              <div class="discover-knok__tooltiptext-text">Technical analysis</div>
            </ng-template>
            <div class="discover-knok__analysis" [tooltipHtml]="taTooltipTpl" placement="bottom" container="body" containerClass="knk-tooltip knk-tooltip--align-left" [ngClass]="{'discover-knok__analysis--technical': !!item.knok.hasTechnical}" [style.marginRight.px]="9">TA</div>
            <ng-template #faTooltipTpl>
              <div class="discover-knok__tooltiptext-info"><i class="material-icons">error_outline</i>&#160;Info</div>
              <div class="discover-knok__tooltiptext-text">Fundamental analysis</div>
            </ng-template>
            <div class="discover-knok__analysis" [tooltipHtml]="faTooltipTpl" placement="bottom" container="body" containerClass="knk-tooltip knk-tooltip--align-left" [ngClass]="{'discover-knok__analysis--fundamental': !!item.knok.hasFundamental}" [style.marginTop.px]="4.5">FA</div>
          </div>
        </div>
        <div class="discover-knok__tile" fxFlex="1 1 18" fxLayout="column" fxLayoutAlign="space-between start">
          <div class="discover-knok__label">Purchases</div>
          <div class="discover-knok__purchases">{{item?.status?.purchases}}</div>
        </div>
        <div class="discover-knok__tile" fxFlex="1 1 32">
          <div fxFlex="1 1 100" fxLayout="column" fxLayoutAlign="space-between start">
            <ng-container *ngIf="item?.knok?.isBought || isMine; else buttonOpenKnok">
              <ng-button-distorted class="ng-button-distorted--filled ng-button-distorted--rounded ng-button-distorted--greyed ng-button-distorted--open" fxFlexAlign="center" fxFlexOffset="20px" (click)="openKnok(item)" [type]="'button'">Open Knok</ng-button-distorted>
            </ng-container>
            <ng-template #buttonOpenKnok>
              <ng-button-distorted class="ng-button-distorted--filled ng-button-distorted--rounded ng-button-distorted--buy" fxFlexAlign="center" fxFlexOffset="20px" (click)="buyKnok(item)" [type]="'button'">Buy for {{item?.knok?.dollarPrice | currency:'USD':'symbol-narrow':'.0-2'}}</ng-button-distorted>
            </ng-template>
            <div class="discover-knok__time" fxFlexAlign="center"><i class="material-icons discover-knok__time-icon">schedule</i><span class="discover-knok__time-label">Time Left:</span><span class="discover-knok__time-left">{{timeLeft[0]}} days {{timeLeft[1]}}:{{timeLeft[2]}}</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>