<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>
      <strong> {{searchResult.searchQuery | searchQuery}}</strong>
    </li>
  </ol>

  <div class="right-side">
    <ng-container *ngIf="ItemCount > 0 && config.Client.Other.NavBar.showItemCount">
      <div class="photos-count">
        {{ItemCount}} <span i18n>items</span>
      </div>
      <div class="divider">&nbsp;</div>
    </ng-container>

    <ng-container *ngIf="config.Client.Other.enableDownloadZip && directory && ItemCount > 0">
      <a *ngIf="config.Client.Other.enableDownloadZip && directory && ItemCount > 0"
         [href]="getDownloadZipLink()"
         class="btn  btn-download">
         <span class="oi oi-data-transfer-download"
               title="download" i18n-title></span>
      </a>
      <div class="divider">&nbsp;</div>
    </ng-container>
    <div class="btn-group" dropdown placement="bottom right">
      <button id="button-alignment" dropdownToggle type="button"
              class="btn btn-secondary 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>

