
<div fxLayout="row" fxFlex="100%" fxLayoutAlign="space-between center" style="padding-left: 10px;" fxLayoutGap="20px">
    <div fxLayout="column">
        <div class="check"><mat-checkbox></mat-checkbox></div>
        <div fxLayout="row" fxFlex="100%" fxLayoutAlign="center center" class="user-info">
            <div fxLayout="column" fxLayoutAlign="center" fxFlex="90px">
                <i *ngIf="!item.knokser.hasAvatar" class="material-icons user-img" >account_circle</i>
                <img *ngIf="item.knokser.hasAvatar" class="user-img" [src]="avatarHref"/>
            </div>
            <div fxLayout="column" fxLayoutAlign="center" fxFlex="*"  fxLayoutGap="10px">
                <div fxLayout="row" class="user-name">{{item.knokser.firstName}}</div>    
                <div fxLayout="row" class="user-name">{{item.knokser.lastName}}</div>      
            </div>
        </div>            
    </div>
    <div fxLayout="column">
            <div fxLayout="row" fxFlex="100%" fxLayoutAlign="center center">
                <div fxLayout="column" class="top-row">
                    <div class="pair">{{item.knok.marketDisplayName}}</div>
                    <div class="exchange">{{item.knok.exchangeName}}</div>
                </div>
            </div>
    </div>
    <div fxLayout="column" class="knokser-chart">
        <div fxLayout="row" class="chart-title" fxLayoutAlign="end" [style.margin-right.px]="percentShiftCaption" >
            30%
        </div>
        <div fxLayout="row" fxLayoutAlign="center" class="chart">
            <canvas #canvas>{{chart}}</canvas>
        </div>
        <div fxLayout="row" fxLayoutAlign="end" class="chart-time-left">
            {{timeLeft}} left
        </div>
    </div>
    <div fxLayout="column" fxLayoutAlign="center center">
        <div fxLayout="row" fxLayoutGap="5px" class="users-count">
                <i class="material-icons">group_add</i>
                <div>22</div>
        </div>
    </div>
    <div fxLayout="column" fxLayoutAlign="start end" class="menu">
            <i [matMenuTriggerFor]="menu" class="material-icons">more_horiz</i>
            <!-- <button mat-icon-button [matMenuTriggerFor]="menu">
                    <mat-icon>more_horiz</mat-icon>
                  </button> -->
            <mat-menu style="text-align: start;" #menu="matMenu" [xPosition]="'before'">
            <button mat-menu-item>
                <mat-icon>share</mat-icon>
                <span>Share &amp; Reward</span>
            </button>
            <button mat-menu-item>
                    <mat-icon>not_interested</mat-icon>
                    <span>Exclude &amp; Hide</span>
                </button>
            <button mat-menu-item>
                <mat-icon>flag</mat-icon>
                <span>Report Abuse</span>
            </button>
        </mat-menu>        
    </div>
</div>  