
<div *ngIf="!isbutton" fxLayout="row" class="z-depth-5" style="padding-left: 10px;">
    <div fxLayout="column" fxFlex="70%">
        <div fxLayout="row" style="padding: 10px 0 5px 0;" fxLayoutAlign="center center">
            <div fxLayout="column" fxFlex="50%" class="user-info top-row" (click)="showProfile()">
                <div fxLayout="row">
                    <div fxLayout="column" fxLayoutAlign="center" fxFlex="30%">
                        <i *ngIf="!item.knoker.hasAvatar" class="material-icons user-img" >account_circle</i>
                        <img *ngIf="item.knoker.hasAvatar" class="user-img" [src]="avatarHref"/>
                    </div>
                    <div fxLayout="column" fxLayoutAlign="center" fxFlex="70%"  fxLayoutGap="10px">
                        <div fxLayout="row" class="user-name">{{item.knoker.firstName}} {{item.knoker.lastName}}</div>    
                        <div fxLayout="row" fxLayoutAlign="space-between" class="user-details">
                            <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="5px">
                                <i class="material-icons users">people</i><div>{{item.knoker.userFollowers}}</div>
                            </div>
                            <div fxLayoutAlign="end center">
                                <i *ngFor="let rate of ratingValue" class="material-icons">
                                    {{rate === 1 ? 'star' : rate === 0 ? 'star_border' : 'star_half'}}</i>
                            </div>
                        </div>    
                    </div>
                </div>            
            </div>
            <div fxLayout="column" fxFlex="50%" class="top-row">
                <div class="pair">{{item.knok.marketDisplayName}}</div>
                <div class="exchange">{{item.knok.exchangeName}}</div>
            </div>
        </div>
        <div fxLayout="row" fxLayoutAlign="space-between center"  class="bottom-row">
            <div fxLayout="column" [ngClass]="{notprovided: !item.knok.hasTechnical}" class="analysis" fxFlex="25%">
                <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="5px">
                    <i class="material-icons">{{item.knok.hasTechnical ? 'check': 'not_interested'}}</i><span>TA</span>
                </div>
            </div>
            <div fxLayout="column" [ngClass]="{notprovided: !item.knok.hasFundamental}" class="analysis" fxFlex="25%">
                <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="5px">
                <i class="material-icons">{{item.knok.hasFundamental ? 'check': 'not_interested'}}</i><span>FA</span></div>
            </div>
            <div fxLayout="column" fxFlex="50%">
                <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px">
                <div fxLayout="column" class="profit" fxLayoutAlign="center">{{profitValue}}</div>
                <div fxLayout="column" fxLayoutAlign="center" class="profit-title">
                    Potential<br/>
                    Profit
                </div>
                </div>
                
            </div>
        </div>
    </div>
    <div fxLayout="column" fxFlex="30%">
        <div fxLayout="column" class="touched-container" fxLayoutAlign="center center">
            <div *ngIf="item.knok.entryPriceTouched" class="knok-info-container z-depth-5" fxLayoutAlign="center center">
                <div class="knok-id">
                    <span>Entry Price Touched</span>
                </div>   
            </div> 
        </div>
        
        <div fxLayout="row" fxLayoutAlign="end start" 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>flag</mat-icon>
                      <span>Report Abuse</span>
                    </button>
                    <button mat-menu-item>
                      
                    </button>
                  </mat-menu>
        
        </div>
        <div class="button-container" fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="3px">
            <div class="time-left">{{timeLeft[0]}}:{{timeLeft[1]}} Left</div>            
                <mat-progress-bar [attr.caption]="item.knok.dollarPrice" class="progress" *ngIf="showProgress" fxLayout="row" fxFlex="40px" mode="determinate" [value]="progressValue" (mouseenter)="buttonOverCaption()">
                </mat-progress-bar>
            <button *ngIf="!showProgress" [style.width.px]="buttonwidth" (mouseleave)="buttonLeaveCaption()" (click)="buyKnok(item)"  mat-raised-button>
                <span class="caption">{{item.knok.dollarPrice}}$ / {{item.knok.tokenPrice}} Tokens</span>
            </button>
            <div class="purchases">{{item.status.purchases}} purchases</div>
        </div>
        <div fxLayout="row" fxLayoutAlign="end end" class="star"><i class="material-icons">star_border</i></div>
    </div>
</div>  