<div class="navbar-wrap">
  <div class="navbar-button" [ngClass]="{ 'open' : openedSidebar }" (click)="openSidebar()">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>

  <h1 class="page-title"></h1>

  <div class="nav-items">
    

    <div class="nav-item" [ngClass]="{ 'opened' : false }">
      <md-input-container class="mb-0">
        <input mdInput [placeholder]="'Select a group' | translate" [mdAutocomplete]="auto" [formControl]="groupCtrl">
      </md-input-container>
      <md-autocomplete #auto="mdAutocomplete">
        <md-option *ngFor="let group of filteredGroup | async" [value]="group" (click)="goToGroup(group)">
          {{ group }}
        </md-option>
      </md-autocomplete>
    </div>

    <div class="nav-item" [ngClass]="{ 'opened' : false }">
      <md-icon mdTooltip="{{'paymenttooltip' | translate}}" mdTooltipPosition="below" class="btn-navbar">payment</md-icon>
    </div>

    <div class="nav-item" [ngClass]="{ 'opened' : false }">
      <md-icon mdTooltip="{{'paymenttooltip' | translate}}" mdTooltipPosition="below" class="btn-navbar" (click)="openCreateGroupDialog()">create_new_folder</md-icon>
    </div>

    <div class="nav-item" [ngClass]="{ 'opened' : false }">
      <a href="#" (click)="open($event)" class="nav-link btn-code">
          <img [src]="'assets/content/' + langUrl" width="30" height="20">
      </a>
      <div class="dropdown-menu">
        <ul>
          <li *ngFor="let lang of languages">
            <a (click)="changeLanguage(lang.code)">
              <div class="content">
                <img [src]="'assets/content/' + lang.url" width="30" height="20">
                <span class="desc"><strong>{{lang.code.toUpperCase()}}</strong></span>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <div class="nav-item" [ngClass]="{ 'opened' : false }">
      <a href="#" (click)="open($event)" class="nav-link">
        <div class="avatar"><img [src]="'assets/img/user/' + photoUrl + '.png'" width="40" height="40" alt=""></div>
        <div class="name">{{username}}</div>
      </a>

      <div class="dropdown-menu mini-menu">
        <ul>
          <li>
            <a href="#" routerLink="transactions"><span class="icon sli-home"></span> My Account</a>
          </li>
          <li>
            <a href="#" routerLink="profile"><span class="icon sli-user"></span> Profile</a>
          </li>
          <li>
            <a (click)="logout()"><span class="icon sli-logout"></span> Log Out</a>
          </li>
        </ul>
      </div>
    </div>

    <div class="items-overlay" (click)="close($event)"></div>
  </div>
</div>