<div fxLayout="row" fxFlex="100%" fxLayoutAlign="start start">
    <div fxHide.lt-md fxShow class="left-panel" fxFlex="22%" fxLayout="column">
        <div fxFlex="20px"></div>
        <div fxLayout="column" class="filter-section">
            <div fxLayout="row" fxLayoutAlign="start center" class="header" fxLayoutGap="5px">
                <i class="material-icons">sort</i>
            <span>Sort</span>
            </div>
            <div fxLayout="row" fxLayoutAlign="start center" class="body">
                <button mat-raised-button (click)="changeSortOrder()"><i class="material-icons">{{ascSort ? 'arrow_upward' :'arrow_downward'}}</i></button>
                <select class="form-control" (ngModelChange)="applyFilter()" [(ngModel)]="sortField">
                    <option value="1">Time Left</option>
                    <option value="2">Price</option>
                    <option value="3">Number of Purchases</option>
                </select>
            </div>
        </div>

        <div fxFlex="20px"></div>
        <div fxLayout="column" class="filter-section">
            <div fxLayout="row" fxLayoutAlign="start center" class="header" fxLayoutGap="5px">
                <i class="material-icons">filter_list</i>
            <span>Filters</span>
            </div>
            <div fxLayout="column" fxLayoutAlign="center" class="body" fxFlex="100%">
                <div fxLayout="row">
                    <div fxLayout="column" fxLayoutAlign="start center" fxFlex="100%"  style="border:1px solid #000;">
                        <div fxLayout="row" fxLayoutAlign="start center" class="title">Knokser's Rating</div>
                        <div fxLayout="row" style="width: 100%;">
                            <div fxLayout="column" fxFlex="20%" fxLayoutAlign="start center" style="margin-top: 25px;">
                            <nouislider class="rate" [config]="sideSlideConfig" [(ngModel)]="ratingRange" (ngModelChange)="applyFilter()"></nouislider>
                            </div>
                            <div fxLayout="column" fxFlex="80%" fxLayoutAlign="start start" style="margin-top:10px;">
                                <ul>
                                    <li>{{filter?.knoksTotal | number}} Knoks</li>
                                    <li>Knokser Kings <span class="disabled">[{{filter?.knokserKings | number}}]</span></li>
                                    <li>Knokser Princes <span class="disabled">[{{filter?.knokserPrinces | number}}]</span></li>
                                    <li>Knokser Knights <span class="disabled">[{{filter?.knokserKnights | number}}]</span></li>
                                    <li class="disabled">Trainees [{{filter?.knokserTrainees | number}}]</li>
                                    <li class="disabled">Noobies [{{filter?.knokserNoobies | number}}]</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <div fxLayout="row" fxLayoutAlign="start start" style="margin: 10px 0 10px 0;">
                    <div fxLayout="column" fxLayoutAlign="start start" fxFlex="100%">
                        <div fxLayout="row"  class="filter-button" >
                            <button [ngClass]="{'checked': knoksersIFollow}" (click)="knoksersIFollow = !knoksersIFollow; applyFilter();" mat-raised-button>Knoksers I Follow</button>
                        </div>
                        <div fxLayout="row"  class="filter-button" >
                            <button [ngClass]="{'checked': containsTA}" (click)="containsTA = !containsTA; applyFilter();" mat-raised-button>Contains TA</button>
                        </div>
                        <div fxLayout="row"  class="filter-button" >
                            <button [ngClass]="{'checked': containsFA}" (click)="containsFA = !containsFA; applyFilter();" mat-raised-button>Contains FA</button>
                        </div>
                    </div>
                </div>

                <div fxLayout="row">
                    <div fxLayout="column" fxLayoutAlign="center center" fxFlex="100%">
                        <div fxLayout="row" fxLayoutAlign="start center" class="title price-title">Knok Price</div>
                        <div fxLayout="row" style="margin-top: 5px;">
                            <nouislider class="price" [config]="sidePriceConfig" [(ngModel)]="priceRange" (ngModelChange)="applyFilter()"></nouislider>
                        </div>
                        <div fxLayout="row" class="scale" style="width: 220px;margin-bottom: 10px;" fxLayoutAlign="space-between start center">
                            <div fxLayout="column" class="disabled" >Free</div>
                            <div fxLayout="column" class="item">10$</div>
                            <div fxLayout="column" class="item">20$</div>
                            <div fxLayout="column" class="item">30$</div>
                            <div fxLayout="column" class="item">40$</div>
                            <div fxLayout="column" class="disabled">>40$</div>
                        </div>
                    </div>
                </div>

                <div fxLayout="row" fxLayoutAlign="start start" style="margin:0;">
                    <div fxLayout="column" fxLayoutAlign="start start" fxFlex="100%">
                        <div fxLayout="row" class="filter-expandable" >
                            <div fxLayout="column" fxFlex="50%" fxLayoutAlign="center">
                                <div fxLayout="row" fxLayoutAlign="start center" (click)="expandedExchanges = !expandedExchanges">
                                <i class="material-icons">{{expandedExchanges ? 'remove' : 'add'}}</i>
                                <span>Exchanges</span>
                                </div>
                            </div>

                            <div fxLayout="column" fxFlex="50%" fxLayoutAlign="start end">
                                <button *ngIf="exchanges" mat-raised-button><i class="material-icons" (click)="exchanges = null; expandedExchanges=false;applyFilter();">remove_circle_outline</i></button>
                            </div>
                        </div>

                        <div *ngIf="expandedExchanges">
                            <div fxLayout="row" fxLayoutAlign="start center" class="filter-button" *ngFor="let item of availableExcahnges">
                                <button [ngClass]="{'checked': exchanges && exchanges.indexOf(item) !== -1}" mat-raised-button (click)="selectExchange(item);applyFilter()">{{item.exchangeName}}</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div fxLayout="row" fxLayoutAlign="start start" style="margin: 0;">
                        <div fxLayout="column" fxLayoutAlign="start start" fxFlex="100%">
                            <div fxLayout="row" class="filter-expandable" >
                                <div fxLayout="column" fxFlex="50%" fxLayoutAlign="center">
                                    <div fxLayout="row" fxLayoutAlign="start center" (click)="expandedTradingPairs = !expandedTradingPairs">
                                    <i class="material-icons">{{expandedTradingPairs ? 'remove' : 'add'}}</i>
                                    <span>Trading Pairs</span>
                                    </div>
                                </div>

                                <div fxLayout="column" fxFlex="50%" fxLayoutAlign="start end">
                                    <button *ngIf="tradingPairs" mat-raised-button><i class="material-icons" (click)="tradingPairs = null; expandedTradingPairs = false;applyFilter();">remove_circle_outline</i></button>
                                </div>
                            </div>

                            <div *ngIf="expandedTradingPairs">
                                <div fxLayout="row" fxLayoutAlign="start center" class="filter-button" *ngFor="let item of availableTradingPairs">
                                    <button [ngClass]="{'checked': tradingPairs && tradingPairs.indexOf(item) !== -1}" mat-raised-button (click)="selectTradingPair(item);applyFilter();">/{{item.currencyName}}</button>
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
        </div>
    </div>

    <div #scrollMe fxFlex.lt-md="78%" fxFlex="100%" fxLayout="column" fxLayoutAlign="center center" style="margin-top: 5%;">
        <div class="knok-common" style="width: 85%;margin-bottom: 20px;" *ngFor="let item of items">
            <knk-discovery-item (changedItem)="refreshList()" [isbutton]="false" [item]="item">
            </knk-discovery-item>
        </div>
        <button [fxHide]="!showScroll" mat-mini-fab class="btn-to-top" (click)="scrollToTop()">
            <mat-icon aria-label="Move to top">play_arrow</mat-icon>
        </button>
    </div>
</div>
