<div fxLayout="column" fxFlex="100%" class="step-header">
    <div *ngIf="showTitle" class="step-header-title" fxLayout="row">
        <div fxLayout="column" fxFlex="*" fxLayoutAlign="center start">{{caption[0]}}</div>
        <div *ngIf="showRecent" fxLayout="column" fxFlex="50%" fxLayoutAlign="center end">
            <!-- <select class="knok-control form-control"><option>- Load Recent -</option></select> -->
            <ngx-select (select)="loadRecentKnok($event)" [noAutoComplete]="true" placeholder="- Load Recent ({{recent.length}}) -" [items]="recent" optionValueField="item" optionTextField="item.pair" [(ngModel)]="ngxValue">
                    <ng-template ngx-select-option-selected let-option let-text="text">
                        <div class="color-box" style="height: 24px;width: 200px;">
                            <div style="float: left;">{{option.data.item.pair}}</div>
                            <div *ngIf="getRecentTime(option.data.item.time) !== ''" style="float: right;font-size: 90%;">{{getRecentTime(option.data.item.time)}} {{option.data.item.time | date: 'h:mm a'}}</div>
                            <div *ngIf="getRecentTime(option.data.item.time) === ''" style="float: right;font-size: 90%;">{{option.data.item.time | date}}</div>
                        </div>
                    </ng-template>
                
                    <ng-template ngx-select-option let-option let-text="text">
                        <div class="color-box" style="height: 24px;">
                            <div style="float: left;">{{option.data.item.pair}}</div>
                            <div *ngIf="getRecentTime(option.data.item.time) !== ''" style="float: right;font-size: 90%;">{{getRecentTime(option.data.item.time)}} {{option.data.item.time | date: 'h:mm a'}}</div>
                            <div *ngIf="getRecentTime(option.data.item.time) === ''" style="float: right;font-size: 90%;">{{option.data.item.time | date}}</div>
                        </div>
                    </ng-template>
                
                    <!-- <ng-template ngx-select-option-not-found>
                        Not found
                    </ng-template>                             -->
                </ngx-select>
        </div>
    </div>
    
    <div fxLayout="row" fxLayoutAlign="start center" class="step-header-caption" fxLayoutGap="10px">
        <div><i class="material-icons">info_outline</i></div>
        <div><ng-content></ng-content>
        </div>
    </div>
</div>