<div *ngIf="objectsListController; else noController" class="sub-header" [style.top]="subheaderTopOffsetStr">
  <div layoutDirection="row" layoutAlign="end center">
    <app-objects-list-filtering-display
      [hidden]="filteringDisplayComponent.showAppliedFilters === false"
      #filteringDisplayComponent
      class="filtering-display-container">
    </app-objects-list-filtering-display>
    <app-region-selector *ngIf="!!config.showRegionSelector"
                         [regionSelectorDefaultRegionKey]="config.regionSelectorDefaultRegionKey"
                         class="region-selector"></app-region-selector>

    <div *ngIf="!config" i18n>
      No subheader config present in route config, define subheader config for this route !!!
    </div>
    <div *ngIf="objectsListController.objectList && objectsListController.objectList.objects.length && config"
         class="count-text" i18n>
      Showing {{objectsListController.objectList.objects.length}} {{objectsListController.objectList.objects.length === 1 ? config.objectName : config.objectNamePlural}}
      <span
        *ngIf="this.objectsListController.objectList.totalCount"> of {{this.objectsListController.objectList.totalCount}}</span>
    </div>

    <button mat-icon-button fl-tooltip="Show applied filters" fl-tooltip-direction="down"
            class="show-applied-filters-btn hide-gt-md"
            *ngIf="filteringDisplayComponent.showAppliedFilters === false && activatedRoute.snapshot.queryParams.filtering"
            (click)="filteringDisplayComponent.showAppliedFilters = !filteringDisplayComponent.showAppliedFilters">
      <mat-icon>keyboard_arrow_right</mat-icon>
    </button>

    <app-objects-list-filtering class="filtering-btn"></app-objects-list-filtering>

    <div layoutDirection="row">
      <app-objects-ordering-menu class="objects-ordering-selector"
                                 [class.objects-ordering-selector-list-only-view]="listOnly">
      </app-objects-ordering-menu>

      <button *ngIf="!listOnly" mat-icon-button (click)="toggleDisplay()"
              [attr.fl-tooltip]="this.cardsDisplay ? listViewTooltip : cardViewTooltip"
              fl-tooltip-direction="down">
        <mat-icon class="toggle-display-icon">{{ cardsDisplay ? 'view_list' : 'view_module'}}</mat-icon>
      </button>
    </div>
  </div>
</div>
<ng-template #noController>
  <span i18n>An error occurred, please see logs for details.</span>
</ng-template>
