<div fxLayout="row" class="btn-close" fxLayoutAlign="end start">
    <button mat-button [mat-dialog-close]="true">
            <i class="material-icons">add</i>
    </button>
</div>
<mat-dialog-content>
    <div fxLayout="column" >    
    <div class="top-row" fxLayout="row" fxFlex="100%">
        <div fxLayout="column" fxLayoutAlign="center start" fxFlex="120px"  class="avatar-container">
            <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" fxFlex="*" fxLayoutAlign="start" fxLayoutGap="20px" class="user-info">
            <div fxLayout="row" fxLayoutAlign="start end" class="user user-name">{{data.knoker.firstName}} {{data.knoker.lastName}}</div>    
            <div fxLayout="row" fxLayoutAlign="start center" class="user user-details followers" fxLayoutGap="10px">
                <i class="material-icons users">people</i>
                <div class="followers-number">{{userFollowers}}</div>
                <button *ngIf="!isFollowed" type="button" class="btn btn-primary btn-rounded waves-light" (click)="followUser(data.knoker)" mdbWavesEffect>FOLLOW</button>   
                <button *ngIf="isFollowed" type="button" class="btn btn-primary btn-rounded waves-light" (click)="unfollowUser(data.knoker)" mdbWavesEffect>UNFOLLOW</button>   
            </div>    
        </div>

        <div fxLayout="column" fxFlex="120px" fxLayoutAlign="start end" style="margin-top: 10px;">
            <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 fxLayout="row" fxFlex="100%">
        <div class="bottom-section-gap med-font" fxLayout="column">
Active for
        </div>
        <div class="bottom-section-gap med-font" fxLayout="column">
Published Knoks
        </div>
        <div class="bottom-section-gap med-font" fxLayout="column">
Bought by
        </div>
        <div class="bottom-section-gap med-font" fxLayout="column">

        </div>
    </div>
    <div class="bottom-row underlined" fxLayout="row" fxLayoutAlign="center" fxFlex="100%">
            <div class="bottom-section-border" fxLayout="column" fxLayoutAlign="start center">
            <div class="bottom-section-value">1+ Years</div>
            </div>
            <div class="bottom-section-border" fxLayout="column" fxLayoutAlign="start center">
                <div class="bottom-section-value">33</div>
                <!-- <div fxLayout="row"><i class="material-icons">person</i><i class="material-icons">person</i><i class="material-icons">person</i><i class="material-icons">person</i></div>
                <div fxLayout="row" class="top-value  med-font">In Top 20%</div> -->
            </div>
            <div class="bottom-section-border" fxLayout="column" fxLayoutAlign="start center">
                <div class="bottom-section-value">15k</div>
                <!-- <div fxLayout="row"><i class="material-icons">person</i><i class="material-icons">person</i><i class="material-icons">person</i><i class="material-icons">person</i></div>
                <div fxLayout="row" class="top-value  med-font">In Top 35%</div> -->
            </div>
            <div fxLayout="column" class="bottom-section" fxLayoutAlign="start center">
                <div class="bottom-section-value" fxLayout="row"><i class="material-icons">person</i><i class="material-icons">person</i><i class="material-icons">person</i><i class="material-icons">person</i></div>
                <div fxLayout="row" class="top-value  med-font">In Top 20%</div>
            </div>
            <div fxLayout="column" fxLayoutAlign="start center">
                <div class="top-gained"><i class="material-icons">stars</i></div>
                <!-- <div class="top-value  med-font">Dec. 2018</div> -->
            </div>
    </div>

    <div fxLayout="row" class="new-section section-title" fxLayoutAlign="start start">Success History</div>
    <div fxLayout="row" fxLayoutAlign="center" class="knokser-chart">
        <canvas #canvas>{{chart}}</canvas>
    </div>

    <div fxLayout="row" class="new-section" fxLayoutAlign="center">
        <div fxLayout="column" fxLayoutAlign="center">
            <div fxLayout="row" fxLayoutAlign="center center">
                <div fxLayout="column" class="bottom-section-gap med-font success history-column">
                    Success Rate
                </div>
                <div fxLayout="column" class="bottom-section-gap med-font avg history-column">
                    Avg. Distance<br/>from Target
                </div>
                <div fxLayout="column" class="bottom-section-gap med-font history-column">
                </div>
            </div>
            <div fxLayout="row" fxLayoutAlign="center center">
                <div fxLayout="column" class="bottom-section-border success history-column" fxLayoutAlign="start center">
                    <div class="bottom-section-value">72%</div>
                </div>
                <div fxLayout="column" class="bottom-section-border avg history-column" fxLayoutAlign="start center">
                    <div class="bottom-section-value">0.017</div>
                </div>
                <div fxLayout="column" class="bottom-section history-column" fxLayoutAlign="start center">
                    <div class="bottom-section-value" fxLayout="row"><i class="material-icons">person</i><i class="material-icons">person</i><i class="material-icons">person</i><i class="material-icons">person</i></div>
                    <div fxLayout="row" class="top-value  med-font">In Top 35%</div>
                </div>
            </div>    
        </div>
    </div>
    </div>
</mat-dialog-content>