<div fxLayout="row" class="btn-close" fxLayoutAlign="end start">
        <button mat-button [mat-dialog-close]="true">
                <i class="material-icons">add</i>
        </button>
    </div>
<!-- <h2 mat-dialog-title>Delete all<button mat-button [mat-dialog-close]="true">x</button></h2> -->
<mat-dialog-content class="buy-knok">
    <div fxLayout="column" >

        <div class="top-row" fxLayout="row" fxFlex="100%">        
            <div class="user-info" fxLayout="column" fxLayoutAlign="center start" fxFlex="70px">
                <i *ngIf="!data.knoker.hasAvatar" class="material-icons user-img" >account_circle</i>
                <img *ngIf="data.knoker.hasAvatar" class="user-img" [src]="avatarHref"/>
            </div>
            <div fxLayout="column" fxLayoutAlign="center" class="user-name">
                <div fxLayout="row" class="user-name">{{data.knoker.firstName}} {{data.knoker.lastName}}</div>    
            </div>
            <div fxLayout="column" class="divider" fxLayoutAlign="center start" fxFlex="30%">
                <div class="buy-header">Currency Pair</div>
                <div class="buy-value">{{data.knok.marketDisplayName}}</div>
            </div>
            <div fxLayout="column" fxLayoutAlign="center start" fxFlex="30%">
                <div class="buy-header" >Exchange</div>
                <div class="buy-value">{{data.knok.exchangeName}}</div>
            </div>
        </div>

        <div fxLayout="row" fxFlex="100%">
            <div fxLayout="column" fxFlex="100%">
                <div class="confirm-caption" fxLayout="row" fxFlex="100%" fxLayoutAlign="center center">
                        Price: {{data.knok.tokenPrice}} Tokens (US${{data.knok.dollarPrice}})
                </div>
                <div fxLayout="row" fxFlex="100%" fxLayoutAlign="center center" fxLayoutGap="10px">
                    <i class="material-icons">star_border</i>
                    <div fxLayout="column" fxLayoutAlign="start center">
                    <button class="get-knok" mat-raised-button (click)="purchaseKnok(data.knok)">
                        <span class="caption">BUY KNOK</span>
                    </button>
                    <div class="sufix" fxLayout="row" fxFlex="100%" fxLayoutAlign="center center">
                        Tokens price available for {{data.timeLeft[0]}}:{{data.timeLeft[1]}}
                    </div>
                </div>
                </div>
                <!-- <div class="sufix" fxLayout="row" fxFlex="100%" fxLayoutAlign="center center">
                    Tokens price available for {{data.timeLeft[0]}}:{{data.timeLeft[1]}}
                </div> -->
            </div>
        </div>
    </div>
</mat-dialog-content>