
<ng-container *ngIf="knokExists">
  <div class="knk-track-knok-cover" fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="center stretch">
    <section class="knk-track-knok" fxFlex="1 1 950px" [style.marginTop.px]="90" [style.marginBottom.px]="90">
      <div fxLayout="row" fxFlex="1 1 100" fxLayoutGap="40px" fxFlexFill>
        <div fxLayout="column" fxFlex="1 1 100" fxLayoutGap="30px">
          <div fxLayout="row" fxLayoutAlign="end end"><i class="material-icons knk-overlay-icon" (click)="before()">navigate_before</i><i class="material-icons knk-overlay-icon" (click)="after()">navigate_next</i></div>
          <div class="knk-track-knok__card mdc-elevation-transition">
            <div class="knk-track-knok-item" fxLayout="column">
              <div class="knk-track-knok-item__headline" fxLayout="row">
                <div fxFlex fxLayoutAlign="start center" fxLayoutGap="15px">
                  <div class="knk-track-knok-item__trading">{{knokMarket}} / {{knokCurrency}}</div>
                  <div class="knk-track-knok-item__exchange">{{knokExchange}}</div>
                </div>
                <div fxFlex fxLayoutAlign="end center" fxLayoutGap="15px"><i class="material-icons mdc-icon-toggle knk-track-knok-item__btn-menu" [matMenuTriggerFor]="menu" data-mdc-ripple-is-unbounded>more_vert
                    <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></i></div>
              </div>
              <ng-container *ngIf="userIsKnokser">
                <div class="knk-track-knok-item__activity" fxLayout="row">
                  <div class="knk-track-knok-purchase knk-track-knok-item__rail" fxLayout="row" fxLayoutAlign="space-between stretch" fxFlex="1 1 50">
                    <div fxLayout="column" fxLayoutGap="40px">
                      <div [style.marginRight.px]="60">
                        <div class="knk-track-knok-purchase__label">Your Pool</div>
                        <div class="knk-track-knok-purchase__record">{{userTokens | number:'1.0-2'}}<small>&#160;Tokens</small><small><span>&#160;(${{userTokens | number:'1.0-2'}})</span></small></div>
                      </div>
                      <div [style.marginRight.px]="60">
                        <div class="knk-track-knok-purchase__label">Buyer reviews</div>
                        <div class="knk-track-knok-purchase__record">38</div>
                      </div>
                    </div>
                    <div fxLayout="column" fxLayoutGap="40px">
                      <div [style.marginRight.px]="30">
                        <div class="knk-track-knok-purchase__label">Purchases</div>
                        <div class="knk-track-knok-purchase__record">
                          <ng-svg-icon class="knk-track-knok-purchase__coins" file="/public/images/coins.svg" name="default"></ng-svg-icon>{{knokPurchases | number}}
                        </div>
                      </div>
                      <div [style.marginRight.px]="30">
                        <div class="knk-track-knok-purchase__label">Published at</div>
                        <div class="knk-track-knok-purchase__record">{{knokPublishedAt}}</div>
                      </div>
                    </div>
                  </div>
                  <div fxLayout="row" fxLayoutAlign="space-between stretch" fxFlex="1 1 50">
                    <knk-knok-score [usefulness]="2" [clarity]="4" [profitability]="3.6"></knk-knok-score>
                  </div>
                </div>
              </ng-container>
              <ng-container *ngIf="!userIsKnokser">
                <div class="knk-track-knok-item__activity" fxLayout="row">
                  <div class="knk-track-knok-purchase knk-track-knok-item__rail" fxLayout="row" fxLayoutAlign="space-between center" fxFlex="1 1 65">
                    <div [style.marginRight.px]="60">
                      <div class="knk-track-knok-purchase__label">Purchased at</div>
                      <div class="knk-track-knok-purchase__record">{{knokPurchaseAt}}</div>
                    </div>
                    <div [style.marginRight.px]="60">
                      <div class="knk-track-knok-purchase__label">Purchases</div>
                      <div class="knk-track-knok-purchase__record">
                        <ng-svg-icon class="knk-track-knok-purchase__coins" file="/public/images/coins.svg" name="default"></ng-svg-icon>{{knokPurchases | number}}
                      </div>
                    </div>
                    <div [style.marginRight.px]="60">
                      <div class="knk-track-knok-purchase__label">Potential Profit</div>
                      <div class="knk-track-knok-purchase__record">{{knokPotentialProfit}} ({{knokPotentialProfitPercent | number:'1.0-1'}}%)</div>
                    </div>
                  </div>
                  <ng-container *ngIf="knokerExists">
                    <div class="knk-track-knok-user" fxLayout="row" fxFlex="1 1 35">
                      <div fxLayout="row" fxFlex="1 1 100" fxLayoutGap="20px">
                        <div class="knk-track-knok-user__avatar"><i class="material-icons knk-track-knok-user__avatar-image knk-track-knok-user__avatar-image--icon" *ngIf="!knoker?.hasAvatar">account_circle</i><img class="knk-track-knok-user__avatar-image" *ngIf="knoker?.hasAvatar" [src]="knokerAvatarUrl"></div>
                        <div fxLayout="column" fxFlex fxLayoutGap="15px">
                          <div class="knk-track-knok-user__name">{{knokerName}} {{knokerSurname}}</div>
                          <div fxLayout="row" fxLayoutGap="15px">
                            <div fxFlex="1 1 40">
                              <div class="knk-track-knok-user__label">Followers</div>
                              <div class="knk-track-knok-user__record">{{knokerFollowers | number}}</div>
                            </div>
                            <div fxFlex="1 1 60">
                              <div class="knk-track-knok-user__label">Knoker</div>
                              <div class="knk-track-knok-user__record">{{knokerRankLabel}}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </ng-container>
                </div>
              </ng-container>
              <div class="knk-track-knok-item__history knk-track-knok-history" fxLayout="row">
                <div class="knk-track-knok-history__slab" fxLayout="column" fxFlex="1 1 35" fxLayoutGap="30px">
                  <div>
                    <div class="knk-track-knok-history__label knk-track-knok-history__label--circle knk-track-knok-history__label--entry-price">Entry price range</div>
                    <div class="knk-track-knok-history__record knk-track-knok-history__record--entry-price">{{knokEntryPriceFrom | number: knokPriceFormat }} - {{knokEntryPriceTo | number: knokPriceFormat}}</div>
                  </div>
                  <div>
                    <div class="knk-track-knok-history__label knk-track-knok-history__label--circle knk-track-knok-history__label--exit-price">Exit price range</div>
                    <div class="knk-track-knok-history__record knk-track-knok-history__record--exit-price">{{knokExitPriceFrom | number: knokPriceFormat}} - {{knokExitPriceTo | number: knokPriceFormat}}</div>
                  </div>
                  <div>
                    <div class="knk-track-knok-history__label knk-track-knok-history__label--circle knk-track-knok-history__label--stop-loss">Stop loss</div>
                    <div class="knk-track-knok-history__record knk-track-knok-history__record--stop-loss">{{knokStopLoss | number: knokPriceFormat}}</div>
                  </div>
                </div>
                <div fxLayout="column" fxFlex="1 1 65" fxLayoutGap="30px">
                  <div>
                    <div class="knk-track-knok-history__label"><span>Current Price</span><i class="material-icons knk-track-knok-history__price-direction knk-track-knok-history__record--negative" *ngIf="knokCurrentProfitPercent &lt; 0">arrow_downward</i><i class="material-icons knk-track-knok-history__price-direction knk-track-knok-history__record--positive" *ngIf="knokCurrentProfitPercent &gt; 0">arrow_upward</i></div>
                    <div class="knk-track-knok-history__record" [ngClass]="{'knk-track-knok-history__record--positive': knokCurrentProfitPercent &gt; 0, 'knk-track-knok-history__record--negative': knokCurrentProfitPercent &lt; 0}">{{knokCurrentPrice | number: knokPriceFormat}}<small><strong> ({{knokCurrentProfitPercent}}%)</strong></small></div>
                  </div>
                  <div class="knk-track-knok-history__chart">
                    <canvas #canvas></canvas>
                  </div>
                  <div fxLayout="row" fxLayoutAlign="center center">
                    <div class="knk-track-knok-history__time-left"><strong>{{knokDuration}}</strong> ({{knokTimeLeft}})</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <ng-container *ngIf="knokHasTechnical">
            <div class="knk-track-knok__card mdc-elevation-transition">
              <div class="knk-track-knok-expansion" data-control="expansion-panel">
                <div class="knk-track-knok-expansion__headline" fxLayout="row" data-control-role="header">
                  <div fxFlex fxLayoutAlign="start center" fxLayoutGap="15px">
                    <div class="knk-track-knok-expansion__analysis knk-track-knok-expansion__analysis--technical">TA</div>
                    <div class="knk-track-knok-expansion__title">{{knokTechnical?.header}}</div>
                  </div>
                  <div fxFlex fxLayoutAlign="end center" fxLayoutGap="15px">
                    <div><i class="material-icons" data-control-role="toggle" data-toggle-on="{&quot;content&quot;: &quot;keyboard_arrow_up&quot;}" data-toggle-off="{&quot;content&quot;: &quot;keyboard_arrow_down&quot;}" aria-hidden="true">keyboard_arrow_down</i></div>
                  </div>
                </div>
                <div class="knk-track-knok-expansion__content knk-track-knok-expansion__content--expanded" fxLayout="column" data-control-role="content">
                  <ng-container *ngIf="knokTechnicalImage">
                    <div class="knk-track-knok-expansion__section knk-track-knok-expansion__section--lined">
                      <div class="knk-track-knok-image-card"><a [href]="knokTechnicalImage" target="_blank"><img class="knk-track-knok-image-card__model" [src]="knokTechnicalImage"></a></div>
                    </div>
                  </ng-container>
                  <div class="knk-track-knok-expansion__section" [ngClass]="{&quot;knk-track-knok-expansion__section--lined&quot;: !knokTechnicalImage}">
                    <div [innerHTML]="knokTechnical?.description"></div>
                    <ng-container *ngIf="knokTechnical?.tags.length">
                      <div class="knk-track-knok-expansion__tags knk-track-knok-tag-list" fxLayout="row" fxLayoutGap="10px">
                        <ng-container *ngFor="let tag of knokTechnical?.tags">
                          <button class="knk-track-knok-tag-list__item">#{{tag?.name}}</button>
                        </ng-container>
                      </div>
                    </ng-container>
                  </div>
                </div>
              </div>
            </div>
          </ng-container>
          <ng-container *ngIf="knokHasFundamental">
            <div class="knk-track-knok__card mdc-elevation-transition">
              <div class="knk-track-knok-expansion" data-control="expansion-panel">
                <div class="knk-track-knok-expansion__headline" fxLayout="row" data-control-role="header">
                  <div fxFlex fxLayoutAlign="start center" fxLayoutGap="15px">
                    <div class="knk-track-knok-expansion__analysis knk-track-knok-expansion__analysis--fundamental">FA</div>
                    <div class="knk-track-knok-expansion__title">{{knokFundamental?.header}}</div>
                  </div>
                  <div fxFlex fxLayoutAlign="end center" fxLayoutGap="15px">
                    <div><i class="material-icons" data-control-role="toggle" data-toggle-on="{&quot;content&quot;: &quot;keyboard_arrow_up&quot;}" data-toggle-off="{&quot;content&quot;: &quot;keyboard_arrow_down&quot;}" aria-hidden="true">keyboard_arrow_down</i></div>
                  </div>
                </div>
                <div class="knk-track-knok-expansion__content knk-track-knok-expansion__content--expanded" fxLayout="column" data-control-role="content">
                  <div class="knk-track-knok-expansion__section knk-track-knok-expansion__section--lined">
                    <div [innerHTML]="knokFundamental?.description"></div>
                    <ng-container *ngIf="knokFundamental?.tags.length">
                      <div class="knk-track-knok-expansion__tags knk-track-knok-tag-list" fxLayout="row" fxLayoutGap="10px">
                        <ng-container *ngFor="let tag of knokFundamental?.tags">
                          <button class="knk-track-knok-tag-list__item">#{{tag?.name}}</button>
                        </ng-container>
                      </div>
                    </ng-container>
                  </div>
                  <ng-container *ngIf="availableFundamentalReferences.length">
                    <div class="knk-track-knok-expansion__section">
                      <div fxLayout="column" fxLayoutGap="30px">
                        <ng-container *ngFor="let reference of availableFundamentalReferences">
                          <div class="knk-track-knok-article" fxLayout="row" fxLayoutGap="30px" (click)="openUrlInNewTab(reference.url)" [style.cursor]="'pointer'">
                            <div class="knk-track-knok-article__thumbnail"><img class="knk-track-knok-article__thumbnail-image" *ngIf="reference?.image" [src]="reference?.image"><i class="material-icons knk-track-knok-article__thumbnail-icon" *ngIf="!reference?.image" aria-hidden="true">image</i></div>
                            <div fxLayout="column">
                              <div class="knk-track-knok-article__title">{{reference?.header}}</div>
                              <div class="knk-track-knok-article__subtitle">
                                <ng-container *ngIf="reference?.publishedBy"><strong>{{reference?.publishedBy}}&#160;&#160;|&#160;</strong></ng-container>{{reference?.published | date:'dd/MM/yyyy'}}
                              </div>
                              <div class="knk-track-knok-article__description">{{reference?.description}}</div>
                            </div>
                          </div>
                        </ng-container>
                      </div>
                    </div>
                  </ng-container>
                </div>
              </div>
            </div>
          </ng-container>
        </div>
      </div>
    </section>
    <div class="knk-track-knok-cover__close"><i class="material-icons knk-overlay-icon" (click)="close()">highlight_off</i></div>
  </div>
</ng-container>