
<section class="knk-header" fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between stretch" fxFlexFill fxLayoutGap="20px">
  <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="space-between stretch" fxFlexOrder="1" [style.maxWidth.px]="198">
    <div class="knk-header__segment" fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between center"><a [routerLink]="['/', lang, 'discover']" [routerLinkActive]="['active']">
        <ng-container *ngIf="!modeToggledState; else logoDefault">
          <ng-svg-icon class="knk-header-logo" file="/public/images/logo.svg" name="nightclub"></ng-svg-icon>
        </ng-container>
        <ng-template #logoDefault>
          <ng-svg-icon class="knk-header-logo" file="/public/images/logo.svg" name="default"></ng-svg-icon>
        </ng-template></a></div>
  </div>
  <div fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="space-between stretch" fxFlexOrder="2">
    <div class="knk-header__foundation" fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between stretch">
      <div class="knk-header__segment" fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="space-between center">
        <div fxLayout="row" fxLayoutAlign="start center" fxFlex="1 1 auto" [style.height.%]="100">
          <ng-container *ngIf="completeMenu.length">
            <div class="knk-header-menu">
              <ng-container *ngFor="let item of completeMenu; first as isFirst; last as isLast">
                <ng-container *ngIf="!!item?.isVisible">
                  <ng-container *ngIf="!item?.disabled">
                    <ng-container *ngIf="item?.subMenu &amp;&amp; item?.subMenu.length; else menuItemTpl"><span class="btn-group" #dropdown="bs-dropdown" dropdown placement="bottom right"><a class="knk-header-menu__item" dropdownToggle aria-controls="basic-link-dropdown" [ngClass]="{'knk-header-menu__item--last': isLast, 'active': !!item?.isActive, 'disabled': !!item?.disabled}" href="javascript:void(0);">{{item?.translateKey|translate}}
                          <ng-container *ngIf="!media.isActive('lt-lg')"><i class="material-icons knk-header-icon knk-header-icon--menu" tabindex="0" role="button">keyboard_arrow_down</i></ng-container></a>
                        <div class="dropdown-menu dropdown-menu-right dropdown-menu--submenu" *dropdownMenu [@fade]="!!dropdown?.isOpen" role="menu" aria-labelledby="basic-link">
                          <div class="knk-header-dropdown-menu">
                            <div class="knk-header-dropdown-menu__wrapper">
                              <div class="knk-header-dropdown-menu__list">
                                <ng-container *ngFor="let subItem of item?.subMenu; first as isFirst; last as isLast">
                                  <ng-container *ngIf="!!subItem?.isVisible">
                                    <ng-container *ngIf="!subItem?.disabled"><a class="knk-header-dropdown-menu__item" *ngIf="!(subItem.rout.startsWith('https') || subItem.rout.startsWith('http'))" [routerLink]="[lang].concat(subItem?.routAsArray)" [routerLinkActive]="['active']" [ngClass]="{'active': !!subItem?.isActive, 'disabled': !!subItem?.disabled}" role="menuitem">{{subItem?.translateKey|translate}}</a><a class="knk-header-dropdown-menu__item" *ngIf="(subItem.rout.startsWith('https') || subItem.rout.startsWith('http'))" [routerLink]="[lang].concat(subItem?.routAsArray)" [routerLinkActive]="['active']" [ngClass]="{'active': !!subItem?.isActive, 'disabled': !!subItem?.disabled}" role="menuitem" target="_blank">{{subItem?.translateKey|translate}}</a></ng-container>
                                    <ng-container *ngIf="!!subItem?.disabled"><a class="knk-header-dropdown-menu__item" [ngClass]="{'active': !!subItem?.isActive, 'disabled': !!subItem?.disabled}" role="menuitem" href="javascript:void(0);">{{subItem?.translateKey|translate}}</a></ng-container>
                                  </ng-container>
                                </ng-container>
                              </div>
                            </div>
                          </div>
                        </div></span></ng-container>
                    <ng-template #menuItemTpl><a class="knk-header-menu__item" *ngIf="!(item.rout.startsWith('https') || item.rout.startsWith('http'))" [routerLink]="[lang].concat(item?.routAsArray)" [routerLinkActive]="['active']" [ngClass]="{'knk-header-menu__item--last': isLast, 'active': !!item?.isActive, 'disabled': !!item?.disabled}">{{item?.translateKey|translate}}</a><a class="knk-header-menu__item" *ngIf="(item.rout.startsWith('https') || item.rout.startsWith('http'))" [routerLink]="[lang].concat(item?.routAsArray)" [routerLinkActive]="['active']" [ngClass]="{'knk-header-menu__item--last': isLast, 'active': !!item?.isActive, 'disabled': !!item?.disabled}" target="_blank">{{item?.translateKey|translate}}</a></ng-template>
                  </ng-container>
                  <ng-container *ngIf="!!item?.disabled"><a class="knk-header-menu__item" [ngClass]="{'knk-header-menu__item--last': isLast, 'active': !!item?.isActive, 'disabled': !!item?.disabled}" href="javascript:void(0);">{{item?.translateKey|translate}}</a></ng-container>
                </ng-container>
              </ng-container>
            </div>
          </ng-container>
          <ng-container *ngIf="completePublishedMenu.length">
            <div class="knk-header__spacer"></div>
            <div class="knk-header-menu">
              <ng-container *ngFor="let item of completePublishedMenu; first as isFirst; last as isLast">
                <ng-container *ngIf="!!item?.isVisible">
                  <ng-container *ngIf="!item?.disabled">
                    <ng-container *ngIf="item?.subMenu &amp;&amp; item?.subMenu.length; else menuItemTpl"><span class="btn-group" #dropdown="bs-dropdown" dropdown placement="bottom right"><a class="knk-header-menu__item" dropdownToggle aria-controls="basic-link-dropdown" [ngClass]="{'knk-header-menu__item--last': isLast, 'active': !!item?.isActive, 'disabled': !!item?.disabled}" href="javascript:void(0);">{{item?.translateKey|translate}}
                          <ng-container *ngIf="!media.isActive('lt-lg')"><i class="material-icons knk-header-icon knk-header-icon--menu" tabindex="0" role="button">keyboard_arrow_down</i></ng-container></a>
                        <div class="dropdown-menu dropdown-menu-right dropdown-menu--submenu" *dropdownMenu [@fade]="!!dropdown?.isOpen" role="menu" aria-labelledby="basic-link">
                          <div class="knk-header-dropdown-menu">
                            <div class="knk-header-dropdown-menu__wrapper">
                              <div class="knk-header-dropdown-menu__list">
                                <ng-container *ngFor="let subItem of item?.subMenu; first as isFirst; last as isLast">
                                  <ng-container *ngIf="!!subItem?.isVisible">
                                    <ng-container *ngIf="!subItem?.disabled"><a class="knk-header-dropdown-menu__item" *ngIf="!(subItem.rout.startsWith('https') || subItem.rout.startsWith('http'))" [routerLink]="[lang].concat(subItem?.routAsArray)" [routerLinkActive]="['active']" [ngClass]="{'active': !!subItem?.isActive, 'disabled': !!subItem?.disabled}" role="menuitem">{{subItem?.translateKey|translate}}</a><a class="knk-header-dropdown-menu__item" *ngIf="(subItem.rout.startsWith('https') || subItem.rout.startsWith('http'))" [routerLink]="[lang].concat(subItem?.routAsArray)" [routerLinkActive]="['active']" [ngClass]="{'active': !!subItem?.isActive, 'disabled': !!subItem?.disabled}" role="menuitem" target="_blank">{{subItem?.translateKey|translate}}</a></ng-container>
                                    <ng-container *ngIf="!!subItem?.disabled"><a class="knk-header-dropdown-menu__item" [ngClass]="{'active': !!subItem?.isActive, 'disabled': !!subItem?.disabled}" role="menuitem" href="javascript:void(0);">{{subItem?.translateKey|translate}}</a></ng-container>
                                  </ng-container>
                                </ng-container>
                              </div>
                            </div>
                          </div>
                        </div></span></ng-container>
                    <ng-template #menuItemTpl><a class="knk-header-menu__item" *ngIf="!(item.rout.startsWith('https') || item.rout.startsWith('http'))" [routerLink]="[lang].concat(item?.routAsArray)" [routerLinkActive]="['active']" [ngClass]="{'knk-header-menu__item--last': isLast, 'active': !!item?.isActive, 'disabled': !!item?.disabled}">{{item?.translateKey|translate}}</a><a class="knk-header-menu__item" *ngIf="(item.rout.startsWith('https') || item.rout.startsWith('http'))" [routerLink]="[lang].concat(item?.routAsArray)" [routerLinkActive]="['active']" [ngClass]="{'knk-header-menu__item--last': isLast, 'active': !!item?.isActive, 'disabled': !!item?.disabled}" target="_blank">{{item?.translateKey|translate}}</a></ng-template>
                  </ng-container>
                  <ng-container *ngIf="!!item?.disabled"><a class="knk-header-menu__item" [ngClass]="{'knk-header-menu__item--last': isLast, 'active': !!item?.isActive, 'disabled': !!item?.disabled}" href="javascript:void(0);">{{item?.translateKey|translate}}</a></ng-container>
                </ng-container>
              </ng-container>
            </div>
          </ng-container>
        </div>
        <div fxLayout="row" fxLayoutAlign="end center" fxFlex="1 1 auto" [style.height.%]="100">
          <ng-button-distorted class="ng-button-distorted--filled ng-button-distorted--rounded ng-button-distorted--knok" [routerLinkDelay]="[lang, 'todo-createknok']" [routerLinkActiveDelay]="['active']" [delay]="1000" [type]="'button'">Create a Knok</ng-button-distorted>
          <div class="knk-header__spacer"></div>
          <div class="knk-pane-account" fxLayout="row" fxLayoutAlign="space-between center">
            <ng-container *ngIf="isLogin">
              <ng-svg-icon class="knk-header-icon" file="/public/images/piggy.svg" name="bank-happy"></ng-svg-icon>
              <div class="knk-pane-account__balance">
                <div>{{balance | number: '1.2-2'}}</div>
                <div>Tokens</div>
              </div>
            </ng-container>
            <div class="mdc-menu-anchor">
              <div class="knk-pane-account__profile" fxLayout="row" fxLayoutAlign="space-between center" #accountMenuToggle MDCAttachTo="MDCIconToggle" (MDCIconToggleChange)="accountMenuToggleHandler($event)" role="button" tabindex="-1" aria-pressed="false">
                <ng-container *ngIf="isLogin; else anonymousAvatar">
                  <div class="knk-pane-account__avatar knk-avatar" data-counter="3"><img class="knk-avatar__image" *ngIf="userAccounts?.user?.hasAvatar" [src]="avatarHref"><i class="material-icons knk-avatar__icon" *ngIf="!userAccounts?.user?.hasAvatar">account_circle</i></div>
                </ng-container>
                <ng-template #anonymousAvatar>
                  <div class="knk-pane-account__avatar knk-pane-account__avatar--anonymous knk-avatar"><i class="material-icons knk-avatar__icon">account_circle</i></div>
                </ng-template><i class="material-icons knk-header-icon knk-header-icon--menu" tabindex="0" role="button">keyboard_arrow_down</i>
              </div>
              <div class="mdc-menu knk-header-profile-menu" #accountMenu MDCAttachTo="MDCMenu" (MDCAttached)="setSettingMenu($event)" (MDCMenuSelected)="accountMenuSelectedHandler($event)" (MDCMenuCancel)="accountMenuCancelHandler($event)" tabindex="-1">
                <div class="mdc-menu__items mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
                  <ng-container *ngIf="isLogin; else anonymousMenu"><a class="mdc-list-item" [routerLink]="[lang, 'mypurchaseshistory']" [routerLinkActive]="['active']" role="menuitem" tabindex="0" aria-disabled="true">{{'Saved Knoks'|translate}}</a><a class="mdc-list-item" [routerLink]="[lang, 'notifications']" [routerLinkActive]="['active']" role="menuitem" tabindex="0" aria-disabled="true">{{'Notifications'|translate}}</a><a class="mdc-list-item" [routerLink]="[lang, 'myaccount']" [routerLinkActive]="['active']" role="menuitem" tabindex="0" aria-disabled="false">{{'My Profile'|translate}}</a><a class="mdc-list-item" [routerLink]="[lang, 'mybalance']" [routerLinkActive]="['active']" role="menuitem" tabindex="0" aria-disabled="true">{{'My Balance'|translate}}</a>
                    <label class="mdc-list-item" (click)="$event.stopPropagation()" role="menuitem" tabindex="0" aria-disabled="false">
                      <ng-container *ngIf="switch.checked">{{'Day Mode'|translate}}&#160;</ng-container>
                      <ng-container *ngIf="!switch.checked">{{'Night Mode'|translate}}&#160;</ng-container>
                      <div class="mdc-switch">
                        <input class="mdc-switch__native-control" #switch (change)="modeToggle(switch.checked)" checked type="checkbox" role="switch">
                        <div class="mdc-switch__background">
                          <div class="mdc-switch__knob"></div>
                        </div>
                      </div>
                    </label>
                    <label class="mdc-list-item" (click)="logout()" role="menuitem" tabindex="0" aria-disabled="false">{{'Log Out'|translate}}</label>
                  </ng-container>
                </div>
                <ng-template #anonymousMenu><a class="mdc-list-item" [routerLink]="[lang, 'signup']" [routerLinkActive]="['active']" role="menuitem" tabindex="0" aria-disabled="false">{{'Sign-Up'|translate}}</a><a class="mdc-list-item" [routerLink]="[lang, 'login']" [routerLinkActive]="['active']" role="menuitem" tabindex="0" aria-disabled="false">{{'Login'|translate}}</a></ng-template>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div fxLayout="row" fxFlex="1 1 80px" fxLayoutAlign="start center">
        <div class="knk-header-search" fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between stretch" #search>
          <div fxLayout="row" fxFlex="1 1 100" fxLayoutAlign="space-between center">
            <button class="knk-header-search__button knk-header-search__button--loupe" fxLayout="row" fxFlex="1 1 80px" fxLayoutAlign="center center" (click)="search?.classList?.contains('knk-header-search--opened') ? doSearch(searchControl.value) : search?.classList?.add('knk-header-search--opened')" type="button">
              <ng-svg-icon class="knk-header-icon" file="/public/images/search.svg" name="search"></ng-svg-icon>
            </button>
            <div class="knk-header-search__panel" fxLayout="row" fxFlex="1 1 auto" fxLayoutAlign="space-between center">
              <input class="knk-header-search__control" (keyup.enter)="doSearch(searchControl.value)" #searchControl type="text" placeholder="Search...">
              <button class="knk-header-search__button knk-header-search__button--close" (click)="search?.classList?.toggle('knk-header-search--opened')" type="button"><i class="material-icons knk-header-icon" tabindex="0" role="button">clear</i></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>