<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">

            <h3>
                <a class="myHeadingLink" href="navigateToHome()">TraderThings</a>
            </h3>


            <nav class="navbar navbar-default navbar-static-top" role="navigation">


                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a class="btn btn-link" type="button" (click)="navigateToHome()">Home</a>
                        </li>
                        <li>
                            <a class="btn btn-link" type="button" (click)="navigateToStockHome()">Stocks</a>
                        </li>
                        <li>
                            <a class="btn btn-link" type="button">Contact Us</a>
                        </li>
                    </ul>

                    <form class="navbar-form navbar-right" (ngSubmit)="searchStock()" role="search">
                        <div class="form-group">
                            <input *ngIf="!isCryptoPage" id='searchInput' type="text" (keyup)=filter($event) autocomplete="off" placeholder="Search for symbols or companies Eg: AAPL, Microsoft etc" [(ngModel)]="searchString" name="searchString" class="form-control mySearchBox">
                            <input *ngIf="isCryptoPage" id='searchInput' type="text" (keyup)=filter($event) autocomplete="off" placeholder="Search for Crypto currencies Eg: BTC, Eherium etc" [(ngModel)]="searchString" name="searchString" class="form-control mySearchBox">
                        </div>
                        <button type="submit" class="btn btn-default">Search </button>

                        <button type="button" data-toggle="modal" data-target="#loginModal" class="btn btn-default" *ngIf="!isLoggedIn">Login </button>
                        <!-- <button class="btn btn-default" *ngIf="isLoggedIn">Logout</button> -->

                        <div id="autoSuggestDiv" class="suggestions" *ngIf="filteredStockList.length > 0 || filteredCryptoList.length > 0">
                            <ul class="list-group-item">
                                <li *ngIf="filteredStockList.length !== 0"> Stocks</li>
                            </ul>
                            <ul class="list-group-item" *ngFor="let item of filteredStockList; let idx=index">
                                <li (click)="selectStock(item, idx)" [class.complete-selected]="idx == selectedIdx">
                                    <!-- <a ng-click="select(item.Symbol)">{{item.Symbol}} - {{item.Name}}</a> -->
                                    <a (click)="selectStock(item, idx)">{{item.Symbol}} - {{item.Name}}</a>
                                </li>
                            </ul>

                            <ul class="list-group-item">
                                <li> Crypto currencies</li>
                            </ul>
                            <ul class="list-group-item" *ngFor="let item of filteredCryptoList; let idx=index;">
                                <li (click)="selectCrypto(item, idx+filteredStockList.length)" [class.complete-selected]="idx+filteredStockList.length == selectedIdx">
                                    <!-- <a ng-click="select(item.Symbol)">{{item.Symbol}} - {{item.Name}}</a> -->
                                    <a (click)="selectCrypto(item, idx+filteredStockList.length)">{{item.code}} - {{item.name}}</a>
                                </li>
                            </ul>

                        </div>

                        <div class="btn btn-default" *ngIf="isLoggedIn">
                            <img class="user dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" src="{{userimg}}">
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item myAnchor" href=" #">View Profile</a><br>
                                <a class="dropdown-item myAnchor" (click)="logout()">Logout</a><br>
                            </div>
                        </div>
                    </form>


                </div>
            </nav>

            <!-- Modal -->
            <div id="loginModal" class="modal fade" role="dialog">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <div class="modal-content">
                        <div class="modal-header">
                            <button id='modal-close-btn' type="button" class="close" data-dismiss="modal">&times;</button>
                            <h4 class="modal-title">Login</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-group" role="form">

                                <div class="form-group">
                                    <label> Username</label>
                                    <input type="text" required [(ngModel)]="user" placeholder="Username" name="username" class="form-control">
                                </div>


                                <div class="form-group">
                                    <label> Password</label>
                                    <input type="password" required [(ngModel)]="pswd" placeholder="password" name="pswd" class="form-control">
                                </div>



                                <input type="submit" (click)="onSubmit()" data-dismiss="modal" class="btn btn btn-success" value="Login">

                            </form>
                        </div>
                        <div class=" modal-footer">
                            <div class="text-center">
                                <p>Forgot your password? <a href="#">Click Here</a></p>
                                <p>New User? <a (click)="navigateToSignup()">Create New Account</a></p>
                                <br>
                                <p>(or)</p> <br>
                                <button type="button" (click)="login()" data-dismiss="modal" class="btn btn-default">Sign in with Google</button>
                            </div>
                        </div>
                    </div>

                </div>
            </div>


            <router-outlet></router-outlet>

            <!-- <div class="container" style="margin-top: 25px;">
                <div class="row">
                    <legend></legend>
                    <p class="text-center">Copyright © traderthings.com. All Rights Reserved. <span class="pull-right"><a href="#">About Us</a> | <a href="#">Contact</a></span></p>
                </div>
            </div> -->