
<mat-dialog-content class="knk-dialog-content">
  <div class="buy-knok" fxFlex="1 1 100" fxLayout="column" fxLayoutAlign="space-between stretch" fxFlexFill>
    <div class="buy-knok__header" fxLayout="row"><i class="material-icons mdc-icon-toggle mdc-ripple-surface mdc-ripple-surface--primary buy-knok__btn-close" data-mdc-ripple-is-unbounded (click)="close()" role="button" aria-pressed="false" aria-label="Close popup" tabindex="0">clear</i>
      <div fxFlex="1 1 40" fxLayoutAlign="start center">
        <div class="buy-knok__avatar"><i class="material-icons buy-knok__avatar-image buy-knok__avatar-image--icon" *ngIf="!data?.knoker?.hasAvatar">account_circle</i><img class="buy-knok__avatar-image" *ngIf="data?.knoker?.hasAvatar" [src]="avatarHref"></div>
        <div class="buy-knok__name">
          <div>{{!data?.knoker?.firstName && !data?.knoker?.lastName ? data?.knoker?.userName : data?.knoker?.firstName}}</div>
          <div>{{data?.knoker?.lastName}}</div>
        </div>
      </div>
      <div fxFlex="1 1 60" fxLayoutAlign="start center">
        <div fxFlex="1 1 50">
          <div class="buy-knok__label">Currency Pair</div>
          <div class="buy-knok__trading">{{data?.knok?.marketDisplayName}}</div>
        </div>
        <div fxFlex="1 1 50">
          <div class="buy-knok__label">Exchange</div>
          <div class="buy-knok__exchange">{{data?.knok?.exchangeName}}</div>
        </div>
      </div>
    </div>
    <div class="buy-knok__body"><i class="material-icons mdc-icon-toggle mdc-ripple-surface mdc-ripple-surface--primary buy-knok__tgl-favorite" data-mdc-auto-init="MDCIconToggle" data-mdc-ripple-is-unbounded role="button" aria-pressed="false" aria-label="Add to favorites" tabindex="0" data-toggle-on="{&quot;label&quot;: &quot;Remove from favorites&quot;, &quot;content&quot;: &quot;star&quot;, &quot;cssClass&quot;: &quot;buy-knok__tgl-favorite--on&quot;}" data-toggle-off="{&quot;label&quot;: &quot;Add to favorites&quot;, &quot;content&quot;: &quot;star_border&quot;}">star_border</i>
      <div><span class="buy-knok__token-price">{{data?.knok?.price | number: '.0-2'}} Tokens</span><span class="buy-knok__currency-price"> (US {{data?.knok?.dollarPrice | currency:'USD':'symbol-narrow':'1.0-2'}})</span></div>
      <div><span class="buy-knok__note">Price</span><span class="buy-knok__time"> (Tokens price avilable for {{timeLeft[0]}} days {{timeLeft[1]}}:{{timeLeft[2]}})</span></div>
    </div>
    <div>
      <button class="mdc-button mdc-button--raised buy-knok__btn-buy" (click)="purchaseKnok(data.knok)">Buy KNOK</button>
    </div>
  </div>
</mat-dialog-content>