<nav class="nav-container" aria-label="breadcrumb">
  <ol *ngIf="directory" id="directory-path" class="breadcrumb">
    <li *ngFor="let path of routes" class="breadcrumb-item">
      <a *ngIf="path.route" [routerLink]="['/gallery',path.route]"
         [queryParams]="queryService.getParams()">{{path.name}}</a>
      <ng-container *ngIf="!path.route">{{path.name}}</ng-container>
    </li>
  </ol>

  <ol *ngIf="searchResult" class="breadcrumb">
    <li class="active">
      <ng-container i18n>Searching for:</ng-container>
      <span class="search-type" [ngSwitch]="searchResult.searchType">
                      <span *ngSwitchCase="SearchTypes.photo" class="oi oi-image"></span>
                      <span *ngSwitchCase="SearchTypes.video" class="oi oi-video"></span>
                      <span *ngSwitchCase="SearchTypes.directory" class="oi oi-folder"></span>
                      <span *ngSwitchCase="SearchTypes.keyword" class="oi oi-tag"></span>
                      <span *ngSwitchCase="SearchTypes.person" class="oi oi-person"></span>
                      <span *ngSwitchCase="SearchTypes.position" class="oi oi-map-marker"></span>
                    </span>
      <strong> {{searchResult.searchText}}</strong>
    </li>
  </ol>

  <div class="right-side">
    <div class="photos-count" *ngIf="ItemCount > 0 && config.Client.Other.NavBar.showItemCount">
      {{ItemCount}} <span i18n>items</span>
    </div>
    <div class="divider" *ngIf="ItemCount > 0 && config.Client.Other.NavBar.showItemCount">&nbsp;</div>
    <div class="btn-group" dropdown placement="bottom right">
      <button id="button-alignment" dropdownToggle type="button"
              class="btn btn-default dropdown-toggle"
              [ngClass]="{'btn-secondary':galleryService.sorting.value !== DefaultSorting}"
              aria-controls="dropdown-alignment"
              [innerHTML]="galleryService.sorting.value| iconizeSorting">
      </button>
      <ul id="dropdown-alignment" *dropdownMenu class="dropdown-menu dropdown-menu-right"
          role="menu" aria-labelledby="button-alignment">
        <li class="row dropdown-item" role="menuitem"
            *ngFor="let type of sortingMethodsType"
            (click)="setSorting(type.key)">
          <div class="col-3" [outerHTML]="type.key | iconizeSorting"></div>
          <div class="col-9">{{type.key | stringifySorting}}</div>
        </li>
      </ul>
    </div>
  </div>

</nav>