<div fxLayout="column" fxFlex="100%">
  <div class="header" fxLayout="row" fxLayoutAlign="space-between start start" style="width: 100%;" fxHide fxShow.gt-sm>
    <div fxLayout="row" fxLayoutGap="5px" fxLayoutAlign="start center" style="margin: 0 0 0 5px;">
        <div class="logo" fxFlex="150px" fxLayoutAlign="center center">KNOKS</div>
        <div fxLayout="row" fxLayoutAlign="center center" class="search" fxLayoutGap="5px">
            <input [fxHide]="!isSearchVisible" id="searchInput"  class="form-control" (focusout)="isSearchVisible = false"/>
            <button mat-raised-button (click)="search()"><i class="material-icons">search</i></button>
        </div>
    </div>

    <div fxLayout="row" fxLayoutAlign="end center" style="margin: 5px 10px 0 0;">
        <div *ngIf="isLogin" fxLayoutAlign="center" fxLayout="row" fxLayoutGap="10px">
            <div fxLayout="row" class="header-item"><div>1,042</div><i class="material-icons">account_balance_wallet</i></div>
            <div fxLayout="row" class="header-item"><div>5</div><i class="material-icons">stars</i></div>
            <div fxLayout="row" fxLayoutAlign="start center" style="align-items: center;"><span>Hi, {{userName}}</span></div>
            <div fxLayout="row" fxLayoutAlign="start center" class="header-item"><i class="material-icons menu" [matMenuTriggerFor]="menu">more_horiz</i>
                <mat-menu #menu="matMenu" xPosition="before" fxLayoutAlign="center center">
                        <button *ngIf="isLogin" mat-menu-item routerLink="{{'[lang]'|translate: {url: 'createknok'} }}">{{'[menu.newknok]'| translate}}</button>
                        <button mat-menu-item routerLink="{{'[lang]'|translate: {url: 'mypurchaseshistory'} }}">MY PURCHASES HISTORY</button>
                        <button mat-menu-item routerLink="{{'[lang]'|translate: {url: 'myknokshistory'} }}">MY KNOKS HISTORY</button>
                        <button mat-menu-item routerLink="{{'[lang]'|translate: {url: 'following'} }}">FOLLOWING</button>
                        <button mat-menu-item routerLink="{{'[lang]'|translate: {url: 'tutorials'} }}">TUTORIALS</button>
                        <button mat-menu-item routerLink="{{'[lang]'|translate: {url: 'faqs'} }}">FAQS</button>
                        <button *ngIf="isLogin" mat-menu-item routerLink="{{'[lang]'|translate: {url: 'myaccount'} }}">PERSONAL AREA</button>
                        <button *ngIf="!isLogin" mat-menu-item routerLink="{{'[lang]'|translate: {url: 'registration'} }}" >Registration</button>
                        <hr>
                        <button *ngIf="!isLogin" mat-menu-item routerLink="{{'[lang]'|translate: {url: 'login'} }}" >{{'[menu.signin]'|translate}}</button>
                        <button *ngIf="isLogin" mat-menu-item routerLink="{{'[lang]'|translate: {url: 'login'} }}" (click)="logout()">{{'[menu.signout]'|translate}}</button>
                </mat-menu>
            </div>
            <div class="divider"></div>
            <div fxLayout="row" class="header-item"><a mat-line routerLink="{{'[lang]'|translate: {url: 'login'} }}" (click)="logout()">{{'[menu.signout]'|translate}}</a></div>
        </div>

        <div *ngIf="!isLogin" >
            <div fxLayout="row" fxLayoutGap="10px">
                <a mat-line routerLink="{{'[lang]'|translate: {url: 'registration'} }}">Register</a>
                <div class="divider"></div>
                <a mat-line routerLink="{{'[lang]'|translate: {url: 'login'} }}" (click)="login()">{{'[menu.signin]'|translate}}</a></div>
        </div>
        <!-- <div *ngIf="isLogin" class="user-container" fxLayoutAlign="end end" >
            <i class="material-icons user">account_circle</i>
            <span id="notification" class="badge badge-danger">2</span>
        </div>
        <div *ngIf="isLogin" class="user-info-container" fxLayout="column" fxLayoutAlign="center start">
            <div class="user-info-top">{{userName}}</div>
            <div class="user-info-bottom" fxLayout="row" fxLayoutAlign="start center">
                <i class="material-icons">show_chart</i><span>1400</span>
                <i class="material-icons">people_outline</i><span>80</span>
                <i class="material-icons">account_balance_wallet</i><span>23,669</span>
            </div>
        </div> -->
    </div>
    <!-- <div class="header-menu" fxFlex="*" fxLayout="row" fxLayoutAlign="end center">
        <div *ngFor="let item of menuItems; first as isFirst">
            <span *ngIf="!isFirst" class="separator">|</span>
            <a *ngIf="!(item.rout.startsWith('https')||item.rout.startsWith('http'))" routerLink="{{'[lang]'|translate: {url: item.rout} }}" [ngClass]="{'active' : item.isActive}" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">{{item.translateKey|translate}}</a>
            <a *ngIf="(item.rout.startsWith('https')||item.rout.startsWith('http'))" href="{{'[lang]'|translate: {url: item.rout} }}" target="_blank" [ngClass]="{'active' : item.isActive}">{{item.translateKey|translate}}</a>
        </div>
    </div>
    <div fxFlex="60px" fxLayoutAlign="center center">
        <button mat-icon-button [matMenuTriggerFor]="menu"><i class="material-icons">view_headline</i></button>
        <mat-menu #menu="matMenu" xPosition="before" fxLayoutAlign="center center">
            <button *ngIf="isLogin" mat-menu-item routerLink="{{'[lang]'|translate: {url: 'createknok'} }}">{{'[menu.newknok]'| translate}}</button>
            <button mat-menu-item routerLink="{{'[lang]'|translate: {url: 'mypurchaseshistory'} }}">MY PURCHASES HISTORY</button>
            <button mat-menu-item routerLink="{{'[lang]'|translate: {url: 'myknokshistory'} }}">MY KNOKS HISTORY</button>
            <button mat-menu-item routerLink="{{'[lang]'|translate: {url: 'following'} }}">FOLLOWING</button>
            <button mat-menu-item routerLink="{{'[lang]'|translate: {url: 'tutorials'} }}">TUTORIALS</button>
            <button mat-menu-item routerLink="{{'[lang]'|translate: {url: 'faqs'} }}">FAQS</button>
            <button *ngIf="isLogin" mat-menu-item routerLink="{{'[lang]'|translate: {url: 'myaccount'} }}">PERSONAL AREA</button>
            <button *ngIf="!isLogin" mat-menu-item routerLink="{{'[lang]'|translate: {url: 'registration'} }}" >Registration</button>
            <hr>
            <button *ngIf="!isLogin" mat-menu-item routerLink="{{'[lang]'|translate: {url: 'login'} }}" >{{'[menu.signin]'|translate}}</button>
            <button *ngIf="isLogin" mat-menu-item routerLink="{{'[lang]'|translate: {url: 'login'} }}" (click)="logout()">{{'[menu.signout]'|translate}}</button>
        </mat-menu>
    </div> -->
    <!--div fxLayout="row" *ngIf="isLogin" fxLayoutAlign="end center">
        <span [style.cursor]='"pointer"' [matMenuTriggerFor]="user">{{'[menu.my account]'|translate}}</span>
        <span class="separator"><strong>|</strong></span>
        <a mat-line routerLink="{{'[lang]'|translate: {url: 'login'} }}" (click)="logout()">{{'[menu.signout]'|translate}}</a>
    </div-->
</div>

  <div fxLayout="row" fxLayoutAlign="center end" class="header header-row" >
        <mat-tab-group [(selectedIndex)]="selectedIndex">
        <div *ngFor="let item of menuItems; first as isFirst">
                <mat-tab>
                        <ng-template mat-tab-label>
                            <a *ngIf="!(item.rout.startsWith('https')||item.rout.startsWith('http'))" routerLink="{{'[lang]'|translate: {url: item.rout} }}">{{item.translateKey|translate}}</a>
                            <a *ngIf="(item.rout.startsWith('https')||item.rout.startsWith('http'))" href="{{'[lang]'|translate: {url: item.rout} }}" target="_blank">{{item.translateKey|translate}}</a>
                    </ng-template>
                </mat-tab>

                <!-- <a *ngIf="!(item.rout.startsWith('https')||item.rout.startsWith('http'))" routerLink="{{'[lang]'|translate: {url: item.rout} }}" [ngClass]="{'active' : item.isActive}" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">{{item.translateKey|translate}}</a>
                <a *ngIf="(item.rout.startsWith('https')||item.rout.startsWith('http'))" href="{{'[lang]'|translate: {url: item.rout} }}" target="_blank" [ngClass]="{'active' : item.isActive}">{{item.translateKey|translate}}</a> -->
            </div>


        <!-- <mat-tab>
            <ng-template mat-tab-label>
                <a routerLink="{{'[lang]'|translate: {url: 'feeds'} }}" [ngClass]="{'active' : item.isActive}" routerLinkActive="active" routerLinkActive [routerLinkActiveOptions]="{exact: true}">Home</a>
        </ng-template>
    </mat-tab>
    <mat-tab>
            <ng-template mat-tab-label>
                    <a routerLink="{{'[lang]'|translate: {url: 'discover'} }}" routerLinkActive [routerLinkActiveOptions]="{exact: true}">Discover</a>
            </ng-template>
    </mat-tab>
    <mat-tab>
            <ng-template mat-tab-label>
                    <a routerLink="{{'[lang]'|translate: {url: 'track'} }}">Track</a>
            </ng-template>
    </mat-tab>
    <mat-tab>
            <ng-template mat-tab-label>
                    <a routerLink="{{'[lang]'|translate: {url: 'follows'} }}">Follow</a>
            </ng-template>
    </mat-tab>
    <mat-tab>
            <ng-template mat-tab-label>
                    <a routerLink="{{'[lang]'|translate: {url: 'knowledgebase'} }}">Knowledge Base</a>
            </ng-template>
    </mat-tab>
    <mat-tab>
            <ng-template mat-tab-label>
                    <a routerLink="{{'[lang]'|translate: {url: 'profile'} }}">Profile</a>
            </ng-template>
    </mat-tab> -->
    </mat-tab-group>
</div>
</div>

<div class="header-xs" fxLayout="row" fxLayoutAlign="space-between center" fxHide fxShow.lt-md>
    <i class="material-icons" (click)="openSideNav()">menu</i>
    <img src="../../../../../public/images/knoks-logo.png" alt="logo" height="22"/>
    <i class="material-icons">person_outline</i>
</div>

<!--mat-menu #user="matMenu" xPosition="before">
    <div class="userinfo">
        {{ accounts?.user.firstName+' '+accounts?.user.lastName }}
    </div>
    <hr>
    <button mat-menu-item routerLink="{{'[lang]'|translate: {url: 'myaccount'} }}" routerLinkActive="active">
        My Profile
    </button>
</mat-menu-->
