<form fxLayout="column" fxLayoutAlign="start" fxLayoutGap="20px"[@slideInOut]="helpFormOpen" [hidden]="!isShown" [formGroup]="stepForm">
    <knk-wizard-step-header fxLayout="row" [caption]="currStepName" [showRecent]="false">Here you should state the price value ranges for entry, exit and stop loss. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisi urna, molestie ac sem vitae, molestie volutpat leo. 
            Vestibulum vel rhoncus odio. Suspendisse urna magna, porta sed eros ut, hendrerit tincidunt lorem&nbsp;<a href="#">Learn more</a></knk-wizard-step-header>
    <div fxLayout="column" [ngClass]="validateEntryPrice" class="price-range">
        <label fxLayoutAlign="start start">{{currency}} Entry Price Range</label>
        <div fxLayout="row">        
            <div class="form-group" fxLayout="column" fxLayoutAlign="start end" fxFlex="50%">
                <div fxLayout="column" fxLayoutAlign="center start">
                    <label for="currency">From</label>  
                    <knk-price class="price-control-container" [precision]="precision" [currency]="nonBaseCurrency" [formControl]="entryPriceFrom"></knk-price>
                </div>            
            </div>   
            <div fxLayout="column" fxFlex="40px" fxLayoutAlign="center start" class="arrow">
                <i class="material-icons">arrow_forward</i>
            </div>    
            <div fxLayout="column" fxLayoutAlign="start start">
                <div fxLayout="column" fxLayoutAlign="center start">
                    <label for="currency">To</label>  
                    <knk-price [precision]="precision"  [currency]="nonBaseCurrency" [formControl]="entryPriceTo"></knk-price>
                </div>  
            </div>
        </div>        
        <div class="validation-status" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="5px"><div class="text"></div><i class="material-icons"></i></div>
        <div class="validation-error" fxLayout="row" fxFlex="50%" fxLayoutAlign="start start" >
            <div class="form-group" fxLayout="column" fxFlex="14%"></div>
            <mat-error *ngIf="(entryPriceFrom.touched || entryPriceTo.touched) && stepForm.errors && stepForm.errors.entryPriceFrom" >{{stepForm.errors.entryPriceFrom}}</mat-error> 
            <mat-error *ngIf="(entryPriceFrom.touched || entryPriceTo.touched) && stepForm.errors && stepForm.errors.entryPriceTo" >{{stepForm.errors.entryPriceTo}}</mat-error> 
        </div>
    </div>

    <div fxLayout="column" [ngClass]="validateExitPrice" class="price-range">
        <label fxLayoutAlign="start start">{{currency}} Exit Price Range</label>
        <div fxLayout="row">        
            <div class="form-group" fxLayout="column" fxLayoutAlign="start end" fxFlex="50%">
                <div fxLayout="column" fxLayoutAlign="center start">
                    <label for="currency">From</label>  
                    <knk-price class="price-control-container" [precision]="precision" [currency]="nonBaseCurrency" [formControl]="exitPriceFrom"></knk-price>
                </div>            
            </div>   
            <div fxLayout="column" fxFlex="40px" fxLayoutAlign="center start" class="arrow">
                <i class="material-icons">arrow_forward</i>
            </div>    
            <div fxLayout="column" fxLayoutAlign="start start">
                <div fxLayout="column" fxLayoutAlign="center start">
                    <label for="currency">To</label>  
                    <knk-price [precision]="precision"  [currency]="nonBaseCurrency" [formControl]="exitPriceTo"></knk-price>
                </div>  
            </div>
        </div>        
        <div class="validation-status" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="5px"><div class="text"></div><i class="material-icons"></i></div>
        <div class="validation-error" fxLayout="row" fxFlex="50%" fxLayoutAlign="start start" >
            <div class="form-group" fxLayout="column" fxFlex="14%"></div>
            <mat-error *ngIf="(exitPriceFrom.touched || exitPriceTo.touched) && stepForm.errors && stepForm.errors.exitPriceFrom" >{{stepForm.errors.exitPriceFrom}}</mat-error> 
            <mat-error *ngIf="(exitPriceFrom.touched || exitPriceTo.touched) && stepForm.errors && stepForm.errors.exitPriceTo" >{{stepForm.errors.exitPriceTo}}</mat-error> 
            <!-- <mat-error *ngIf="exitPriceFrom.touched && stepForm.errors && stepForm.errors.entryexit && !stepForm.errors.exit" >{{stepForm.errors.entryexit.msg}}</mat-error> 
            <mat-error *ngIf="exitPriceFrom.touched && stepForm.errors && stepForm.errors.profit && !stepForm.errors.exit && !stepForm.errors.entryexit" >{{stepForm.errors.profit.msg}}</mat-error>  -->
        </div>
    </div>
    
    <div fxLayout="row" fxLayoutGap="20px">            
        <div fxLayout="column" class="price-range" [ngClass]="validateStopLoss"  fxFlex="50%">
            <label fxLayoutAlign="start start">{{currency}} Stop Loss</label>
            <div class="form-group" fxLayout="column" fxLayoutAlign="start end" >
                <div fxLayout="column" fxLayoutAlign="center start">
                    <label for="currency">From</label>  
                    <knk-price [precision]="precision"[currency]="nonBaseCurrency" [formControl]="stopLoss"></knk-price>
                </div>            
            </div> 
            <div class="validation-status" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="5px"><div class="text"></div><i class="material-icons"></i></div>
            <div class="validation-error" fxLayout="row" fxLayoutAlign="start start" >
                <div class="form-group" fxLayout="column" fxFlex="35%"></div>
                <mat-error *ngIf="stopLoss.touched && stepForm.errors && stepForm.errors.stopLoss" >{{stepForm.errors.stopLoss}}</mat-error> 
            </div>
        </div>
        <div [ngClass]="validateDuration" fxLayout="column" class="price-range" fxFlex="50%"> 
            <label fxLayoutAlign="start start">Duration</label>  
            <div fxLayout="row" fxLayoutAlign="center center" fxFlex="100%">
                <span>{{durationMin}}</span>
                <div fxLayout="column" fxFlex="90%" fxLayoutAlign="center">
                    <mat-slider #durationCtrl [min]="durationMin" [formControl]="duration" [max]="durationMax"></mat-slider>
                    <span>{{durationCtrl.value}} Days</span>
                </div>
                <span>{{durationMax}}</span>
            </div>
            <div class="validation-status" style="top: -122px;" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="5px"><div class="text"></div><i class="material-icons"></i></div>
            <div class="validation-error" fxLayout="row" fxLayoutAlign="start start" >
                <div class="form-group" fxLayout="column" fxFlex="20px"></div>
                <mat-error  *ngIf="duration.touched && stepForm.errors && stepForm.errors.duration" >{{stepForm.errors.duration}}</mat-error> 
            </div>
       </div>
    </div>
    <div fxLayout="column" class="knok-common" style="padding:10px;border:1px solid #000;" fxFlex="100%">
        <div *ngIf="!isShowAnalysis">Analysis</div>
        <div *ngIf="isShowAnalysis" fxLayout="column" fxFlex="100%">
            <mat-tab-group>
                <mat-tab>
                        <ng-template mat-tab-label>
                            <div [ngClass]="{'missing': validateTA === 'missing'}" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="5px" class="vaidation-status"><div></div><mat-icon></mat-icon></div>Technical Analysis
                        </ng-template>
                    <knk-wizard-step-header fxLayout="row" [showTitle]="false" [showRecent]="false">Here you should state the price value ranges for entry, exit and stop loss. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisi urna, molestie ac sem vitae, molestie volutpat leo. 
                            Vestibulum vel rhoncus odio. Suspendisse urna magna, porta sed eros ut, hendrerit tincidunt lorem&nbsp;<a href="#">Learn more</a></knk-wizard-step-header>    
                    <div fxLayout="column" fxLayoutAlign="start start" class="ta-tab-content">
                        <div class="form-group" style="text-align: start;width:100%;">
                            <label for="title">Title</label>
                            <input type="text" class="knok-control form-control" [formControl]="taTitle" style="width: 100%;" id="title">
                        </div>
                        <knk-upload-graph [formControl]="taUploadGraph" class="form-group" style="width: 100%;border:1px solid #000;padding:10px;"></knk-upload-graph>
                        <div class="form-group" style="text-align: start;width:100%;">
                            <label for="title">Optional Analysis Explanation</label>
                            <app-ngx-editor [formControl]="taExplanation" class="form-control"  [spellcheck]="true"></app-ngx-editor>
                        </div>
                        <knk-tag [availabletags]="taTagsData" [formControl]="taTags" class="form-group" style="width: 100%;"></knk-tag>
                    </div>
                </mat-tab>
                <mat-tab>
                        <ng-template mat-tab-label>
                            <div [ngClass]="{'missing': validateFA === 'missing'}" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="5px" class="vaidation-status missing"><div></div><mat-icon></mat-icon></div>Fundamental Analysis
                        </ng-template>
                    <div class="fa-tab-content">
                        <knk-wizard-step-header fxLayout="row" [showTitle]="false" [showRecent]="false">Here you should state the price value ranges for entry, exit and stop loss. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisi urna, molestie ac sem vitae, molestie volutpat leo. 
                                Vestibulum vel rhoncus odio. Suspendisse urna magna, porta sed eros ut, hendrerit tincidunt lorem&nbsp;<a href="#">Learn more</a></knk-wizard-step-header>    
                        <div fxLayout="column" fxLayoutAlign="start start" class="ta-tab-content">
                            <div class="form-group" style="text-align: start;width:100%;">
                                <label for="title">Title</label>
                                <input type="text" class="knok-control form-control" [formControl]="faTitle" style="width: 100%;" id="title">
                            </div>
                            <knk-link-to-ref-page [formControl]="taLinkReferencies" class="form-group" style="width: 100%;padding:10px 0 10px 0;" ></knk-link-to-ref-page>
                            <div class="form-group" style="text-align: start;width:100%;">
                                <label for="imageLink">Optional Comment</label>
                                <textarea rows="4" class="knok-control form-control" style="width: 100%;" [formControl]="comment"></textarea>
                            </div>
                            <knk-tag [availabletags]="faTagsData" [isotherallowed]="true"  [formControl]="faTags" class="form-group" style="width: 100%;"></knk-tag>
                        </div>
                    </div>
                </mat-tab>
            </mat-tab-group>
        </div>
    </div>
</form>
